Make a simple website

HTML:Hyper Text Markup Language is used to give websites structure with text,links,images, and other fundamental elements.
CSS: Cascading Style Sheets is used to change the appearance of HTML elements.

[HTML]
Headings:
h1-h6(From the biggest to the smallest)
Example:
<h1>Heading</h1>

Paragraph:
It is used for non-heading text
Example:
<p>text</p>

Link:
Example：
<a href="http://codecademy.com">Click here</a> to learn how to make a website!

Image:
Example:

HTML video:
Example:
<video width="320" height="240" controls> <source src="video-url.mp4" type="video/mp4"></video>
width & height: set the size of the screen that displays the video.
controls:adds play, pause and volume control.
source src: sets the URL of the video to play.
type: specifies different video formats.

List:
Example:
<ul>
<li>A list item</li>
<li>A second list item</li>
<li>A third list item</li>
</ul>

ul: tags create the unordered list
li: tags contain each list item.

Div:
Example:
<div class="main">
...
</div>
div : divides page by enclosing groups of elements can be organized, moved and styled independently from others.

[CSS]
A html file link to a css file like this:
<link rel="stylesheet" type="text/css" href="main.css"/>
rel: specifies the relationship between files
type: specifies the type of file link to
href: provides the URL of the file being linked to

selector: h1{
property&value: color:red;
}

CSS properties:
three ways to represent color:
color:red
color: #FF0000 Hexadecimal color(#RRGGBB)
color:rgb(128,0,128) RGB(Red,Green,Blue)

class selector can be identified by a dot "."
Example:
.main{
color:#ffffff;
}

websites often use more than one font family.
For example:
font-family: 'Trebuchet MS', Helvetica, sans-serif;

font-size:
There are three ways to set font-size:
1.pixel(px):Standard unit of measurement for sizing fonts and other HTML elements.
2.rem: Represents the default font size for the web browser. On most web browsers, 1rem equals to 16px, 2rem equals to 32px and so on.
3.em: A relative value that changes in proportion to the size of the parent element. For example, if a parent element has font-size:20px; child elements with font-size: 1em; mean 20px.

using a '# 'symbol to edit id attribute
id attribute takes precedence over class

Boundaris and space:

content: includes text, images……
padding: the space between the contant and the border
border: the outline of an HTML page element.
margin: the space between the HTML page element and the next nearest element.
margin->border->padding->content

border:
requires three parts:
thickness: using pixels,ems,or rems
type:sets the border type
color

Example:
p {
border: 2px solid black;
}

Display:
There are two display types: inline & block
Example:
li {
display: inline;
}

folat: floats elements left or right
Example:
.logo{
float: left;
}

flex: can be used to align multiple page elements horizontally

Example:
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
flex-wrap:wrap: makes sure no child element moves off the page
justify-content: center: centers rows of elements

position: posits elements in exact locations on a webpage.
Example:
.container {
position: relative;
top: 10px;
left: 20px;
}

:active is a psuedo-class selector, which we use to style an element only while it's being clicked

Bootstrap split the webpage into 12 vertical bars.

Bootstrap classes:
row: Arranges HTML elements in rows, and can be useful when building headers/navigation menus, main feature sections, supporting content sections and footers.

jumbotron: Used to create large showcase sections featuring important content.

col-sm-*: Used to span a specified number of columns on the Bootstrap grid. The "sm" is short for "small", and maintains desired CSS layouts on small screens (tablet-sized).

text-right: Bootstrap class used to orient text to the right side of the webpage.

btn btn-primary: Bootstrap class used to style page elements as buttons.