FCC Cheat Sheet

Guide

Below you will find a table with notes to help you review each Free Code Camp challenge. Keywords are in bold text. Additional comments from me are in italics. :)

The table is organized into 3 columns:

Lesson	Summary	Example Code*
The name of the FCC challenge, with link.	A summary of what the challenge teaches in 3 bullet points or less.	Some code that demonstrates the concepts in the challenge.

*Please note: the example code is JUST AN EXAMPLE, it is NOT THE ANSWER. Let's not be that much of cheaters :D

HTML5/CSS

Lesson	Summary	Example Code
Say Hello to HTML Elements	You can edit code in a text editor.Some popular text editors are Sublime Text, Atom, and Brackets. Most HTML elements have an opening tag <> and a closing tag </>. The only difference between opening tags <> and closing tags </> is that closing tags have a slash / after their opening angle bracket. The word immediately after the opening < or </ is the element name.	<h1> SOME TEXT HERE </h1>
Headline with the h2 Element	Elements tell the browser about the structure of your website. h1 elements are often used for main headings, and h2, h3, h4, h5 and h6 elements can be used for sub-headings.	<h1> Main Heading </h1> <h2>Second Heading</h2> <h3>Third Heading</h3>
Inform with the Paragraph Element	p elements are used for normal-sized paragraphs of text.	<p> SOME TEXT HERE </p>
Uncomment HTML	You can make comments inside your code that will not affect the output of the code. To make a comment in HTML, put <!-- and --> before and after what you want to comment. "Uncomment" means "remove the comment tags" (<!-- and -->)	<!-- <h1> This heading will not show up. </h1> --> <h1> This heading will show up. </h1>
Comment Out HTML	Comments are also a good way to temporarily deactivate part of your code.	<!-- <h1> deactivated heading </h1> --> <p>active paragraph</p>
Fill In the Blank with Placeholder Text	Lorem Ipsum is a section of meaningless text that is used as a placeholder. Read more here Placeholder text is used when you want to see how content will look in your design, but you don't have the real content yet. "Kitty ipsum" is FCC's custom version of lorem ipsum. Here are some more fun ones: Khaled Ipsum, Hipster Ipsum, Cat Ipsum, Corporate Ipsum	<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Delete HTML Elements	Really? You want to know how to delete an element? Try the backspace key...	There aren't any elements here. I guess I deleted them. Oops!
Change the Color of Text	You can put attributes (additional pieces of information) right after the element name, inside the opening tag. Most attributes follow the format: attribute="...". You can change the color (font color) of an element by using the style attribute: style="color: ..."	<p style="color: purple"> this text will be purple </p>
Use CSS Selectors to Style Elements	You can also change the way an element looks by using CSS style rules. Your CSS will go inside a style element. CSS style rules have the format: selector { property: value; } You can use any element name (like h2 or p) in front of the brackets to select all elements of that type.	<style> h2 { color: purple; } </style> <h2> This will be purple. </h2> <p> This will not be purple.</p>
Use a CSS Class to Style an Element	The HTML class attribute is used for elements that have something in common. It looks like this: class="class-name" To select elements with a certain class in CSS, use a period . followed by the class name: .class-name { ... }	<style> .yellow { color: yellow; } </style> <h2 class="yellow"> This will be yellow. </h2>
Style Multiple Elements with a CSS Class	Because classes are used for grouping elements, you can add the class attribute to as many elements as you want.	<style> .yellow { color: yellow; } </style> <h2 class="yellow"> This is yellow. </h2> <p class="yellow"> This is also yellow. </p>
Change the Font Size of an Element	You can change the font size (the size of text) by using the CSS font-size property. One of the most common ways to measure font size is in pixels (px). The default font size on Chrome is 16px. It is also common to measure font size in ems (em). A font size of 2em will be twice as big as normal text.	<style> h2 { font-size: 2em; } p { font-size: 20px; } </style> <h2> This is bigger. </h2> <p> This is big. </p>
Set the Font Family of an Element	You can change the font family (the style of text) by using the CSS font-family property. You can use the keywords serif, sans-serif and monospace to use the browser's default font for those font styles. You can add more than one property: value; pair to your style rules, just keep the opening bracket { on the same line as the selector.	<style> p { font-size: 20px; font-family: sans-serif; } </style> <p> This is big sans-serif text. </p>
Import a Google Font	You can also use the name of a specific font to set the font family. You can use a basic set of fonts available on your computer (such as Arial, Helvetica, or Times New Roman) or you can import another font from Google Fonts or somewhere else. You can link to another file, such as a CSS file, with a <link> element.	<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet"> <style> h2 { font-family: Quicksand; } </style> <h2> Heading in the Quicksand font </h2>
Specify How Fonts Should Degrade	Not all fonts and features work in all browsers. Sometimes we have to fall back, or degrade, to a different option. You can include a list of font names for the CSS font-family property, and the browser will use the first one that it can. The font names should be separated by a comma ,. Usually keywords such as sans-serif come last.	<style> p { font-family: Arial, sans-serif; } </style> <p> If the computer doesn't have Arial, it will use whatever sans-serif font it has. </p>
Add Images to Your Website	You can add an image with an <img> element. The src attribute contains the image address (often ends in .jpg or .png), and the alt attribute contains alternative text to display if the image cannot be loaded. Elements that only use one tag, such as <link> and <img>, are called self-closing elements.	<img src="https://pbs.twimg.com/media/C2JNQhqXcAA_j71.jpg" alt=".jpg photo of Crater Lake under the stars"> <img src="https://unsplash.it/600/400?random" alt="random photo via the unsplash.it API">
Size Your Images	You can use the CSS width property to set an element's width. Common CSS measurements are px, em, or %.	<style> img { width: 300px; } h2 { width: 50%; } </style>
Add Borders Around Your Elements	To make a border in CSS, use the border-width, border-style, and border-color properties. You can also use the shorthand border property to set border width, style, and color at the same time. The HTML class attribute allows more than one value inside the same quotes.	<style> .purple-border { 1px solid purple; } .blue-border { border-width: 1px; border-style: solid; border-color: blue; } .orange-text { color: orange; } </style> <p class="orange-text blue-border"> orange text with blue border </p>
Add Rounded Corners with a Border Radius	The CSS border-radius property is used to round the borders of an element.	<style> .rounded { border-radius: 2px; } </style> <img class="rounded" src="..." alt="...">
Make Circular Images with a Border Radius	If your element has the same height and width, any border-radius value that is 50% of the element's size or greater will result in a circle.	<style> .circle-image { width: 100px; height: 100px; border-radius: 100px; } </style> <img class="circle-image" src="..." alt="...">
Link to External Pages With Anchor Elements	You can use an a element, or "anchor" element, to put a link on your page. The href attribute contains the link's URL, and the link text goes inside (between the tags of) the a element. <a></a> vs. <link>: An a element allows the user to click on it and go to another page or section, while a link element is used for linking to files and does not display anything.	<a href="https://unsplash.com"> beautiful public domain photos </a>
Nest an Anchor Element Within a Paragraph	"Nest" means "put one thing inside another thing". Each HTML element is actually a box - think of the opening <> and closing </> tags as the sides of the box. photo of nested boxes To put something "inside" an element, you put it between the opening and closing tags of the element. (NOT inside one of the tags).	<p> Link inside paragraph: <a href="https://example.com"> text inside link </a> </p>
Make Dead Links Using the Hash Symbol	If you don't have a specific URL for a link yet, you can set the href attribute to # to create a dead link. That way the a element will still look and behave as a link. The value of an attribute refers to the part inside quotes: attribute="value".	<a href="#"> dead link </a>
Turn an Image into a Link	You can put HTML elements inside a elements instead of just plain text.	<a href="https://unsplash.com"> <img src="http://bit.ly/2jlBgBE" alt="Unsplash logo"> </a>
Create a Bulleted Unordered List	You can use a ul element to create an "unordered list", where the items in the list are not numbered. Each item in the list will be inside a li, or "list item", element. ul elements are used for bullet point lists, like this one :), and also for navigation lists on web pages.	<ul> <li>You can use a ul element to create an "unordered list", where the items in the list are not numbered.</li> <li>Each item in the list will be inside a li, or "list item", element.</li> <li>ul elements are used for bullet point lists, like this one :), and also for navigation lists on web pages.</li> </ul>
Create an Ordered List	You can use an ol element to create an "ordered list", where the items in the list have a number (default) or a letter. The ol element contains li elements for each list item.	<ol> <li> Thing I need to do first </li> <li> Thing I need to do second </li> </ol>
Create a Text Field	An input element is used to get input from the user. It is self-closing (no end tag): <input> The type attribute defines what kind of input it can get from the user. There are over 20 possible types of input. An input element with type="text" will create a text field where the user can enter text.	<input type="text"> <input type="number"> <input type="date">
Add Placeholder Text to a Text Field	You can put a placeholder attribute inside an input element to give the user an example of what they need to type. The placeholder text will show up as faded text inside the input element, and will disappear as soon as the user starts typing.	<input type="text" placeholder="@my-username">