HTML is made out of tags. 
Tags can hold values with attributes.
 For example: 
<html attribute="attribute value">

HTML

An html tag is made out of it's openning tag, closing tag, it's content in the middle and it's attributes and values on it's opening tag.
 There are tags the don't have closing tags like the <br/> and <img/> tags.

HTML tag structure

You can create your own html files like this "index.html" or "any-name_you_want.html" and open it in your browser just by double clicking on it.

An html page is the base of the website.
It defines the HTML version, meta data and the elements of the page.
From displaying inputs to loading files, you can do a lot with a few steps in HTML

HTML page structure

An achor tag can redirect the user to any page online or other files on you machine.

<a>The Anchor tag, linking the web.</a>

An image tag can show an image online or from on you computer.

<img>The Image tag, displaying images.

With the input tag and the select and option tags you can ask the user many different types of questions to get his input.

The input tag gets different types of input from the user. <input type="text" />

Markup language for web UI

You can create your own css files like this "index.css" or "any-name_you_want.css", connect it to an html page and open it in your browser.

To insert CSS code in an HTML page we use the <style>, <link> tags or the "style" attribute.
The options are to write the CSS code outside the HTML page with <link rel="stylesheet" href="/any-name-you-want.css" /> or inside the page with <style>some css</style> or on the tag with "style" attribute <p style="css code">text</p>

Connecting HTML and CSS

In order to set design rules with CSS to an HTML element (tag).  We need to use a selector, to specify which element should the rules (declarations) apply to.

Selectors

There are some special rules selectors to be more specific about which tags should be changed. depending on the tag state or place in the page.

Pseudo selectors (special selectors)

CSS rules are style declarations of how the selected element should appear. There are many but we will focus here on the basic ones.

CSS rules (declarations)

Many time you will find yourself in need of change the behaviour of elements with others in the page. For those cases knowing the display and position are really useful.

CSS rules positioning: display and position

To control the spacing between elements on the page we use margin and padding rules. They are similar besided the fact that margin effects the outer part of the element and padding effects the inner part of the element.

CSS rules spacing: margin and padding

Font rules enable you to change how text appears and much more. Some of the basic useful font rules are: font-family, font-size, color, line-height, font-weight and font-style

CSS rules fonts: font-family, font-size and more...

Media queries are blocks of css with a condition to apply when it fits. Mostly used to activate rules per the screen width for mobile, tablet and desktop devices.