Codecademy project on cheatsheet of my choice (CSS reference table)
WEB DEVELOPMENT FOUNDATIONS
Challenge Project: Build Your Own Cheat Sheet
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.
Setup Instructions
If you choose to do this project on your computer instead of Codecademy, you can download what you’ll need by clicking the “Download” button below. If you need help setting up your computer, read our article about setting up a text editor for HTML/CSS development.
Tasks: 6/6 Complete
Prerequisites
- 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
- 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
- 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.
-
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.
-
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.