Coding Foundations Project Requirements

Demonstrate what you have learned about HTML and CSS by replicating the CodePen.io homepage using the screenshot below.
CodePen.io is a relatively simple webpage that combines a number of things you already know, such as working with images, creating buttons, and text fields.
You can use the Visual Studio Code as your text editor. It is free, lightweight, and easy to use. Otherwise, you can use any other text editor you prefer.

Include these elements

• Navbar that includes "Pens, Projects, Posts, Collections, and Spark with a down chevron (does not need to actually dropdown).
• Images - use available tools to recreate colors, etc.
• Don't worry about replicating any functionality features such as drop-down, scrolling, etc. Simply replicate the landing page.

The output should look something like this:

Project sources

Image for right portion of page:

 

You can find the Codepen logo here.

Scoring criteria

• Coding runs without errors
• Includes all required elements
• Accurate representation of the CodePen homepage

Turning in the Project

Update your GitHub Username in Account Settings, then you will need to reach out to a Mentor and submit the URL for your GitHub project repository in the Support App so that they can verify that your assignment is correctly completed.

Attached is the Grading Rubric that the Mentors/Teachers will use to determine your grade for this project.
Rubric