Derek's HTML and CSS Cheat Sheet

Welcome

Welcome to Derek's HTML Reference

This is a project found on Codecademy Pro's Full Stack Developer Course. The project is to build our own cheat sheet of HTML and CSS tags and essentials.

I based my project on an existing HTML guide created by Robert Duncan.

Below is listed the instructions for the project. Or you can check out the project here.

Overview

This project is slightly different than others you have encountered thus far on Codecademy. Instead of a step-by-step tutorial, this project contains a series of open-ended requirements which describe the project you’ll be building. There are many possible ways to correctly fulfill all of these requirements, and you should expect to use the internet, Codecademy, and other resources when you encounter a problem that you cannot easily solve.

Project Goals

In this project, you’ll be building your own reference cheat sheet to help you build more websites in the future! Although there are great places to learn HTML & CSS like Codecademy, the best reference for yourself is often your own notes and projects.

Tasks

Prerequisites

1. To complete this project, you should have completed the codecademy Introduction to HTML course through the HTML tables lesson, and lessons in Learn CSS: Selectors and Visual Rules.

Project Requirements

2. Your project should document at least one HTML or CSS topic. In our example project, we documented the tags and attributes used in HTML tables layouts, but you can choose any HTML or CSS topic that you’ve learned so far—the sky is the limit!

Possible topics could be:

  • HTML Tables
  • Other HTML tags
  • CSS selectors and specificity
  • Common CSS properties

If you choose to document HTML tags, open the hint to see how to include HTML tags as text in your code.

3. Your site uses HTML tables to display the documentation. Be sure to label the columns in your HTML.

In our example site, we used tables with columns for:

  • The tag or attribute name
  • The actual formatted tag (eg. <table>)
  • A description of what to use the tag for.

You can use these same columns or choose your own.

4. Your site should utilize a custom color scheme. You can use any of the named CSS colors.

Your site should use custom styles for any code such as HTML tags (like <h1>) or CSS properties or values (like font-family). Represent code using a monospace font family and a different background color.

Solution

6. Great work! Visit our forums to compare your project to our sample solution code. You can also learn how to host your own solution on GitHub so you can share it with other learners!

Your solution might look different from ours, and that’s okay! There are multiple ways to solve these projects, and you’ll learn more by seeing others’ code.

If you’d like to extend your cheat sheet, keep adding new topics to it as you continue to learn more HTML, CSS, and more. As you become more advanced with CSS, you’ll also be able to improve the styling and layout of the cheat sheet itself.