~Live what we love~: HTML & CSS Part II (Learn to code)

In part 2 of Progate's HTML & CSS lesson, I will be learning to develop the landing page of a website.

CSS:

{background-image:url(top.png);} (Note: image will repeat itself until fills the whole space)
{background-size:cover;} (Note: background will be filled with a single image)
Center the container class by specifying{margin:0 auto;} and{width: 300px;}
{opacity: 0.0;} makes entire element transparent (0.0 being most transparent and 1.0 being most opaque)
{background-color: rgba(73,201,192, 0.5);} (Note: only background becomes transparent)

div:hover{background-color: red;} is used to change background upon hover.
{border-radius: 10px;} is used to round the corners of elements such as a button
{text-align: left;} aligns inline and inline-block elements left.
{margin: 0 auto;} and {text-align: center;} can center elements, but margin is for block level elements like containers and text-align is for inline/inline-block elements like buttons and text.
{transition; all 1s;} (Note: Transition is used to add animations; The target can be a property, like color, but we often just specify all so it applies to all properties.)
{line-height: 10px;} (Note: to vertically center the text by specifying the same value for the height and the line-height)
{font-weight: bold;} (Normal or bold to change thickness of text)
{width: 50%;} (Specifying size with % instead of px, can calculate width based on parent width. Same for height).
Overlapping elements {position: absolute;} then position relative to the top-left corner of the webpage using {top: 50px; left: 50px;} properties, or specifying {position: relative;} to its ancestor element.

Using Icons on Webpage:

Copy the entire font-awesome directory into your project
In the <head> of your html, reference the location to your font-awesome.min.css.

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

~Live what we love~