Intro to HTML & CSS
Tags: beginners, html, css, tutorial
Published: 2022-09-07 17:45:40

## Setting Up Your Development Environment

1. Go to [CodeSandbox](https://codesandbox.io/)
2. Toward the to right of the navbar click `Sign In`
3. Select one of the three options to sign in with
    * If you do not have a Google or Apple account:
      1. Go to back to [CodeSandbox's](https://codesandbox.io/) homepage
      2. Proceed to step 4 below
4. Click `Create Sandbox` in the top right of the page
5. Select the `static` option

## Getting To Know Your Development Environment

Once you select the `static` template you will be shown what is called an `Integrated Development Environment` or `IDE`

An `IDE` is a software application that allows you to write code. Think of it like Google Docs for Software Engineers.

![CodeSandbox IDE Diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hk8sj5udxijsly3uhx9u.png)

It is vital to understand the different portions of your IDE in order to have a smooth development process. At first glance the IDE might seem a bit intimidating but with some background information it can be a very powerful tool:

A. `Activity Bar` - located on the far left-hand side, this lets you switch between views and gives you additional context-specific indicators

B. `View Panel` - is where a selected view is displayed.
   * Current it is open to the `Explorer` view which allows you to create new files and folders to store your code and digital assets, such as images and videos files.
   * There are other views that you can work with but they are a bit outside the scope of this session.

C. `Editor` - Located in the middle of the screen, is where you are able to write code. Right now you will see that it is open to the `index.html` file.

D. `Preview Panel` - Located on the right side mimics a web browser and displays your code as you make changes and save it.

We will learn how to interact with each portion of the IDE as we continue through this session.

## What is HTML?

HTML is the backbone of every website you have ever interacted with. HTML stands for `Hyper Text Markup Language`, and is made up of a series of tags that HTML allows you to define the structure of a website. HTML provides you the ability to display text, images, and videos on your website. By writing HTML you are able to lay down the foundation of a website.

## Getting Started With HTML

Ok, now to the fun part. Let's start learning how to write some spells!

The first concept I want to introduce you to is that of an HTML `element`.

`Elements` are made up of `tags`. These `tag` tell your web browser what you are trying to display on screen for your users. Say you want to write a large heading, there is a tag for that. How about writing an about me statement, there is a tag for that.

### HTML Elements

So you are building your first website and you need to provide a large bit of text introducing your audience to your idea. This is a prime opportunity to use a `header element`. Let's take a look:

```html
<body>
    <h1>The Wizarding World of Code</h1>
</body>
```

Once you save your code (cmd + s or ctrl + s); you can see that this set of tags displays our text in large bold letters. That is because we have used two `h1` tags to tell our browser to display our text that way.

When we combine two tags we create an html `element`. HTML `elements` are made up of an opening and closing tag:

```html
<!-- Opening Tag -->
<h1>

<!-- Closing Tag -->
</h1>
```

There are two main types of `elements`:
1. `Elements` - Which contain an opening and closing tag.
   * They also normally will have content within them like text or other elements
2. `Empty Elements` - Contain no content

An example of a `empty element` would be a `<hr/>` tag, which display a thematic break in your webpage by displaying a horizontal line:
```html
<body>
    <!-- ... -->
    <hr/>
</body>

```

Next lets look at a few helpful elements.

### Headings Elements

`Headings elements` are a fun group to work with, they range from `h1` to `h6` and are used to define headings of your website. A `h1` defines the most important heading and `h6` defines the least. Although it is only common to use `h1` through `h3`.

```html
<!-- index.html -->
<body>
    <h1>The Wizarding World of Code</h1>
    <hr/>

    <h2>The Wizarding World of Code</h2>
    <h3>The Wizarding World of Code</h3>
    <h4>The Wizarding World of Code</h4>
    <h5>The Wizarding World of Code</h5>
    <h6>The Wizarding World of Code</h6>
</body>
```

### Paragraph Elements

Next up is the `paragraph element` which like it's name implies allows you to display a long series of text. Most website written content is displayed in `paragraph elements`:

```html
<!-- index.html -->
<body>
    <h1>The Wizarding World of Code</h1>
    <hr/>

    <p>Paragraph elements allow you to write longer bits of text and create a tome of spells for the world to see and read!</p>
</body>
```

### List Elements

So let's say you need to list out some very important content on your website. You could write a bunch of `paragraph elements` with single words in them, but that would be a total noob move. In this case you should utilize a `list tag`.

There are two types of `list elements` you can use:
1. `Unordered List`
2. `Ordered List`

```html
<!-- index.html -->
<body>
    <!-- ... -->

    <!-- Unordered List -->
    <h3>Shopping List</h3>
    <ul></ul>

    <!-- Ordered List -->
    <h3>Steps To Casting a Spell</h3>
    <ol></ol>
</body>
```

If you were to save your code you'd notes that the spell did not work, and that is due to the fact that it is incomplete. All `list elements` must have `list item elements` as children:
```html
<!-- index.html -->
<body>
    <!-- ... -->

    <!-- Unordered List -->
    <h3>Shopping List</h3>
    <ul>
        <li>Wand</li>
        <li>Grimoire</li>
        <li>Cape</li>
    </ul>

    <!-- Ordered List -->
    <h3>Steps To Casting a Spell</h3>
    <ol>
        <li>Create a file</li>
        <li>Write some code</li>
        <li>Deploy your code to the internet</li>
    </ol>
</body>
```

Now that we have a baseline understanding of HTML tags and elements there is some general structure to our HTML document that we need to talk about.

## The Global Structure of an HTML Document

So up until now we have strictly been writing HTML elements with in the `body element` of our website, but we haven't really talked about what the `body element` is for or any of the other elements that were in our document when we first opened it. There are four things I want to bring your attention to:
1. `!DOCTYPE` declaration
2. `html element`
3. `head element`
4. `body element`

These four parts are what makes up the `global structure` of an HTML document.

### !DOCTYPE declaration

The `!DOCTYPE` is a declaration which every HTML document must start with. It tells the browser what type of document to expect.

```html
<!DOCTYPE html>
```

### HTML Element

The `html element` is a parent container that should house all the HTML in our document. You are able to add a `lang attribute` to specify what language of the webpage. HTML `attributes` provide additional information to an `element`. There are many different types of `attributes` that elements can have and we will cover more of them through out this session.

```html
<!DOCTYPE html>
<html lang="en">
    <!-- The rest of your HTML -->
</html>
```

### Head Element

The `head element` contains meta data which give browsers and search engines more information about the webpage. You are able to define things like the title of the webpage, or metadata to help optimize SEO for your website. The `head element` should always be placed within the `html element` before the `body element`.

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Metadata Goes Here -->
    </head>
</html>
```

### Body Element

The `body element` defines the body of the HTML document and is where you should place all the HTML code you want to be displayed in the browser.

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Metadata Goes Here -->
    </head>

    <body>
        <!-- All Page Content Goes Here -->
    </body>
</html>
```

### Title Element

The last element we are going to talk about for now is the `Title element` which allows define the title of our HTML document:

```html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- ... -->
        <title>The Wizarding World of Code</title>
    </head>
    <body>
        <!-- ... -->
    </body>
</html>
```

Once you provide a `title element` if you are able to see the title in the browser window tab that it is being displayed in. To see this copy the URL that is provided at the top of the `Preview Panel` and paste it into a new browser window. If you look at the tab you will see the title you provided being displayed.

Now that we have learned about some of the more common element, let's add a little flare to our website.

## What is CSS?

Earlier I told you that HTML is the backbone that defines the structure and foundation of every website. But what is a foundation without some style?! This is where `Cascading Style Sheets` or as it is more commonly known `CSS` comes into play.

`CSS` is flair to wand stroke, the "SA" to your Wingardium Leviosa. `CSS` allows you to define the presentation of your website; everything from font colors to font families, content positioning, image sizes, how a site resizes based on the dimensions of the device displaying it, and much more.

It one was to compare a website to a human body, HTML would be the persons bones and `CSS` would be what makes the their appearance; from skin and hair color, to their height and weight. `CSS` is what allows you to look the part to match your ideas, or as I like to think about it set the tone of your spells!

## Getting Started with CSS

So we have explain what CSS is, but how do we use it. To start we need to create a CSS file and link it to our HTML:
1. In the top right corner of the `Explorer` you will a icon that looks like a piece of paper
2. Click it
3. Then type `style.css` and press enter
   * This will create and open a new file in the `Editor`
4. At the top of the editor click  the `index.html`
5. Above the `title element` we are going to add a `link element`:
```html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- ... -->
        <link rel="stylesheet" href="./style.css">
        <title>The Wizarding World of Code</title>
    </head>
    <body>
        <!-- ... -->
    </body>
</html>
```

The `link element` is a `empty element` and contains two `attributes`:
1. `rel` - specifies the relationship between the current document and the linked document
2. `href` - specifies the URL of the page the link goes to

We provide the `rel` attribute with the value "stylesheet" to let our HTML know we are link a CSS file. The `href` attribute is set to the file path to our newly created CSS file.

So now that we have our CSS link to our HTML, how do we go about using the CSS file to style our website?

## CSS Syntax

Before dive directly into using CSS, we need to talk about the how to write it, the syntax (rules of writing a programming language) of CSS is quite different then that of HTML. CSS is more a rule defining syntax than it is an actual programming language, so when you write it you are in reality just defining rules for how your HTML should be displayed.

There are three main parts to defining a CSS rule:
1. `Selector` - points to the html element you want to style
2. `Declaration Block` - defines a container for all the style rules (declarations) you want to be applied to the selected element
3. `Declaration` - The actual rule you are defining for the element
   * You must define the property you want to change and the value you want to set it to
   * Every `declaration` must end with a semicolon

![CSS Rule Diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k2uuitcng8w8tzsqcjml.png)

## Selecting Elements

When working within a CSS file you are able to define what elements you want to make changes to by utilizing `CSS Selectors`.

There are a few many different types of `CSS Selectors` but the three types we are going to look at in this session are:
1. `Element Selectors`
2. `ID Selectors`
3. `Class Selectors`


### Element Selectors

`Element selectors` as the name implies allow you to select html elements from your CSS. Let's say you want to change the color of the `h1` tag on the page:

```css
/* style.css */

h1 {
    color: blue;
}
```

What is you also wanted to change the font size of the `h1`:

```css
/* style.css */

h1 {
    color: blue;
    font-size: 15px;
}
```

One major thing to notice here is that when using a `element selector` it affect every instance of that element within the HTML document. What do you do if you only want to apply a CSS rule to one element? This is a perfect time to introduce the `id selector` but before we talk about it in detail let's first discuss what an HTML `id attributes` is.


### ID Attributes

An HTML `id attribute` allow you to specify a unique id for an element. The value if this attribute must be completely different from any other ids within the HTML document.

```html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- ... -->
    </head>
    <body>
        <h1 id="title-header">The Wizarding World of Code</h1>

        <!-- ... -->
    </body>
</html>
```

Another thing to note about `id attributes` is that if you want to create an id value that uses multiple works such as `title-header` there can be no spaces between them. It is up for debate which naming convention you should use for id names:
* `Kebab Case` - example: `title-header`
* `Camel Case` - example: `titleHeader`
* `Pascal Case` - example: `TitleHeader`

I prefer `Kebab Case` and will die on this hill but other Engineers will probably die on another, so feel free to use whichever you are more comfortable with. But word of caution just pick one and stick to it, it'll help you out in the long run.

### ID Selector

Now that we have `id attribute` as a helpful addition to our spell-craft, lets discuss how to use `id selectors` in our CSS. `id selectors` allow us to select a single element in our CSS. When defining a CSS rule that utilizes an `id selector` we must denote it with a `#` sign:


```css
/* style.css */

#title-header {
    color: blue;
    font-size: 15px;
}
```

As you can see when we do this the style rules are only being applied to the `h1` with the id.

Next up is the `class selector` but before we dive in lets define what an HTML `class attribute` is.

### Class Attribute

HTML `class attributes` allow you point out multiple elements by grouping them together with the same class name. One benefit to using `class attributes` is that you able to apply CSS style to multiple HTML elements within one rule.

```html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- ... -->
    </head>
    <body>
        <h1 id="title-header" class="headers">The Wizarding World of Code</h1>
        <h1 class="headers">The Wizarding World of Code</h1>

        <!-- ... -->
    </body>
</html>
```

The same naming convention rule applies to `class` values as it does to `id` values, you must use one of the naming conventions mentioned above it you want a class name to contain multiple words.

One thing to note is that HTML elements can have a `id attribute` and multiple `class` values.


### Class Selectors

`Class selectors` allow us to select a multiple elements within our CSS. When defining a CSS rule that utilizes an `class selector` we must denote it with a `.` sign:


```css
/* style.css */

.headers {
    color: blue;
    font-size: 15px;
}
```

As you can see when we do this the style rules are all of the elements with the specific class.

One other note: there are many different properties you can change with CSS for a full comprehensive list feel free to refer to this list by [W3Schools](https://www.w3schools.com/cssref/).

## More HTML Magic

So far we have only looked at text within our HTML documents but what about images and videos?

### Image Element

Let's say you want to display some cool pictures of you casting some magic or of your favorite place to use a portkey to. This is the perfect time to use an `image element`.

`Image elements` are `empty elements` meaning they do not have a `closing tag`, yet every image tag must have two attributes:
1. `src` - the source attribute must be provided the location where the image can be foundation
   * This can be either a `URL` or `File Path`
2. `alt` - provides alternative information about the image
   * This is mainly used for screen reader

```html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- ... -->
    </head>
    <body>
        <h1 id="title-header" class="headers">The Wizarding World of Code</h1>

        <img
            src="https://upload.wikimedia.org/wikipedia/en/thumb/e/e4/Wizarding_World_logo.svg/1200px-Wizarding_World_logo.svg.png" 
            alt="The Wizarding World Logo"
        />

        <!-- ... -->
    </body>
</html>
```

Now as you can see this image is huge, so this would be a great time to use some CSS to make it a bit smaller:

```css
/* style.css */

/* ... */

img {
    width: 50%;
    height: 20%;
}
```

### Displaying Videos with an iframe Element

Let's say your favorite magical influencer has filmed themselves casting an unforgivable curse and you want to showcase it on your website. One of the easiest ways to do this is to post the video to a video platform like YouTube and grab the embed link which provides you with an `iframe element`.

`iframe elements` allow you to embed another document inside of your current HTML document. So in the case of grabbing an embed link from YouTube, what you are actual provided is an `iframe element` with configurations to display an YouTube video player within your website:

```html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- ... -->
    </head>
    <body>
        <!-- ... -->
        <iframe width="560" height="315" src="https://www.youtube.com/embed/pslRURKLzxs?start=149" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </body>
</html>
```

You are able to adjust the width and height of the video player by changes the attribute values. Out side of those two attribute I would recommend leaving the others alone.