HTML5/CSS3 Cheat Sheet

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, but the best reference for yourself is often your own notes and projects.

Project Requirements

1. Your project should document at least 3 HTML (topics must include HTML tags) and 2 CSS topics. In the example project (image included), we documented the tags and attributes used in HTML tables layouts, but you can choose any HTML or CSS topic that you’ve learned — the sky is the limit!

Possible topics could be:

1. HTML Tables
2. Other HTML tags
3. CSS selectors and specificity
4. Common CSS properties

Hint: Consider HTML entities to document HTML tags.

2. 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:

1. The tag or attribute name

2. The actual formatted tag (eg. <table>)

3. A description of what to use the tag for.

4. You can use these same columns or choose your own.

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

6. 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.

5. To Get Started

You will need to follow the Codebits Academy Git Workflow to add a file to this project follow the steps below:

• Create your own version of this repo - Fork
• Add your Instructor as a collaborator
• Clone this repo
• Create a branch git checkout -b 'firstName-lastName'
• Run your usual git commands for adding/committing and pushing Be sure to push to your branch!
• Create a Pull-Request to submit your work
• Use your own student fork as the base (compare across forks, base-fork -> master).
• Add your Instructor as a reviewer on the Pull-Request

6. To Submit Your Project

1. Add a file to the project called yourFirstName-yourLastName.txt. This should contain the link to your completed project hosted on Github pages as well as the review questions/answers

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

Review questions:

1. What is the difference between an inline element and a block element?
2. What happens when an element is positioned absolutely?
3. How do I make an element take up only the amount of space it needs but also have the ability to give it a width?
4. Name 4 elements that are diplay block by default, 5 elements that are display inline by default and 1 element that is display inline-block by default 5. In your own words, explain the box model. What is the fix for the box model?

Stretch Git Tasks

• While the processes learned here will set you up to be successful in most situations, they are just the tip of the iceberg in learning Git. Independently research the following topics to learn more about Git.
• Research and understand what a merge conflict is and how to resolve it.
• Research the Git commands pull, rebase, merge. These commands will allow you to bring in changes that other developers push to the master branch.
• Research the Git commands reset , revert, clean. These commands will allow you to go back and amends previous commits you have made.
• Research and set up a Graphical User Interface (GUI) Git console.
• Research and setup SSH keys with GitHub, so that you do not need to input your username/password each time you push.