Learn HTML & CSS

1

Download the Visual Studio Code editor.

Download an editor

I recommend downloading the Emmet and Beautify extensions, as well as Live Server.
2

Create folders for your website.

Open your website in the Atom editor.

Create Folder Structure

On your Desktop, create a root folder called something like my-website. Inside this folder, make 3 more folders called css, js, and img. Directory names are abitrary, though these are conventional.

Make sure all folder names are lowercase. Use hyphens in place of spaces for folders and files.
3

Create a file named index.html in the root directory.

Open this page in a Web browser.

Create Your Homepage

When browsers are directed to a folder, they look for a file named index.html. If they find it, they render it as HTML. This is why your home page should typically be named "index.html."
4

<!doctype html>

Add Doctype Declaration

Let's start adding HTML to our HTML files! The doctype declaration must be the first line in the HTML file.
5
```
<html>

  <head>
  </head>

  <body>
  </body>

</html>
```
Add Structure of HTML Page

Add the basic structure of the HTML page on the next line below the doctype declaration.

Spacing doesn't affect the text flow in HTML. We space out our code for readability.
6

<title>My Website</title>

Add a Title Element

Add a title element inside the head element. The title will be what is displayed in the browser tab, and not in the page. Only what is placed in the body element will show in the browser/webpage.
7

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<p>This is a paragraph</p>

Add Headings and Paragraphs

Now let's add a few headings and a paragraph.

Headings run from h1 (largest) to h6 (smallest).
8
```
<p>This is 
<a href="https://hp.com"> a link</a>
in a paragraph</p>
```
Anchor Element (Links)

The href attribute is how the anchor element (or link) knows where to go when you click it.

To force the link to open in a new browser window, add the attribute target="_blank".

These two code snippets will render identically. In HTML, spacing is not preserved. In most elements, any number of spaces greater than a single space is reduced to a single space.
9

<strong>bold Text</strong>

<em>italic Text</em>

<big>larger Text</big>

<small>smaller text</small>

<code>code</code>

<kbd>keyboard keys</kbd>

<tt>typewriter keys</tt>

<del>strikethrough</del>

<sub>subscript</sub>

<sup>superscript</sup>

<span>span</span>

Inline Elements

Let's practice adding some other inline elements within a paragraph element.
10

<img src="img/my-image.png" alt="image">

Images

Let's add an image to our page. The src attribute is how the img element knows where to get the image to display in the page.

The website Unsplash has a wealth of free and high-quality images in a variety of areas available for download.

<ul>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>

<ol>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
<ol>

Lists

Let's add an unordered list (bullet points), and an ordered list to our page.

<table class="table table-striped">
  <thead>
    <tr>
      <th>content</th>
      <th>content</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

Tables

Let's add table with 2 heading columns and 3 table rows.

13

<div>Content here</div>

<main>Content here</main>

<section>Content here</section>

<article>Content here</article>

<header>Content here</header>

<footer>Content here</footer>

<aside>Content here</aside>

Chunking Your Content (Meaningfully)

Let's chunk our content more effectively with meaningfully-named section elements.

Note that the <header> and the <head> element are different.
Margin

px

Padding

px

Border

px

Example <p>:

This is a paragraph.

This is also a paragraph.

The Box Model

Almost every HTML element is a box, with margin, padding, border and other properties that establish its relation to other elements.

Block elements stretch to fit the width of their container. Inline elements are only the width of the content they contain.

CSS Zen Garden

A demonstration of what can be accomplished through CSS-based design. The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.
0
```
p {
  background-color: red;
  color: white;
}
```
Style Declaration Format

The heart of CSS is declaring values for properties of HTML elements.

Example:
p { property: value; }

As in HTML, spacing here is used primarily for readability.
1

<p style="background: red;">This is a paragraph</p>

<p style="background: red; color: white; padding: 10px;">This is a paragraph</p>

Inline Styles

Let's add an inline style declaration to one of our paragraph element.

In this case style is an attribute of the paragraph element. Attributes are declared inside of the opening tag of an element and take this form:

style="property:value;property:value;"
2
```
<style>
    p {
      background: red;
      color: white;
    }
</style>
```
Embedded Styles

Let's add a <style> element inside our <head> element and place our styles there.
3

<p id="blue-paragraph">This should now be blue</p>

#blue-paragraph { color: blue; }

IDs

To differentiate a single paragraph, we can assign it an ID, which we style differently.

IDs must remain unique. You may not repeat an ID in a single HTML file more than once.
4

<p class="green-paragraph">This should now be green</p>

.green-paragraph { color: green; }

Classes

To set the properties for an entire class of paragraphs, we can assign each a class, which we style differently.
5
```
#special-list li:nth-child(odd) {
    background: silver;
}
```
Advanced Selectors

It's often more efficient and more elegant to target elements with advanced selectors.

Reading from right-to-left, we are targeting every odd numbered list element inside of a container with the id of "special-list"
6

In the CSS directory, create the file "my-styles.css"

External Style Sheets

Let's create an external style sheet so that we may keep our styles in one file.
7

<link rel="stylesheet" href="my-styles.css"></p>

The 'Cascade'

Let's link to this external style sheet in the <head> element of both our HTML pages.
8

<div class="lefty">Left div here</div>

.lefty { width: 50%; float: left; }

<div class="righty">Left div here</div>

.righty { width: 50%; float: right; }

Floats

Let's create two divs and float them next to each other.

To float elements, they must have a concrete width declared.

Download an editor

Create Folder Structure

Create Your Homepage

Add Doctype Declaration

Add Structure of HTML Page

Add a Title Element

Add Headings and Paragraphs

Anchor Element (Links)

Inline Elements

Images

Lists

Tables

Chunking Your Content (Meaningfully)

The Box Model

CSS Zen Garden

Style Declaration Format

Inline Styles

Embedded Styles

IDs

Classes

Advanced Selectors

External Style Sheets

The 'Cascade'

Floats