HMTL & CSS with CodePen – See Results

Summary: This project involved building a hand-coded, one-page biography using HTML and CSS, with a focus on creativity and proper design principles. I used Codepen to apply advanced styling techniques and craft a unique layout, balancing design aesthetics with functionality.
s

The Challenge

The challenge of this project was to apply both HTML and CSS to create a professional, one-page biography web page from scratch. With a focus on creativity and technical accuracy, the task required incorporating various design elements, such as embedded or external styles, while adhering to specific guidelines for selectors, declarations, and layout principles. The goal was to balance creativity with functionality by demonstrating a deep understanding of both visual design and coding skills.

The Process

I used Codepen, an online coding platform, to build the webpage, allowing me to code in real-time and instantly see the results. Starting with HTML to structure the page, I crafted the biography content and included a central visual image. I then created an external CSS stylesheet to style and position the elements, using over 10 selectors and 20 declarations to ensure a professional look. Following best practices from class readings on visual and interface design, I experimented with different layouts and design elements, refining the page until it reflected a cohesive and creative theme.

See the Pen Scripting 2 by Kori (@KoriCode) on CodePen.

More Projects

Custom WordPress Mortgage Calculator

Custom WordPress Mortgage Calculator

In this step-by-step tutorial, I’ll show you how to use ChatGPT to generate and customize a fully functional mortgage calculator plugin for your WordPress website. Whether you’re a developer looking to save time or a beginner wanting to learn how AI can support your workflow, this guide walks you through the entire process—from prompt to plugin!

read more
Custom WordPress Calculator Plugin

Custom WordPress Calculator Plugin

I developed a custom WordPress plugin that functions as a water pump calculator, with the help of Claude 3.5 Sonnet. By providing a screenshot of an existing calculator, I prompted Claude to replicate it, resulting in a fully functional tool that can be easily integrated into any WordPress site.

read more