
Initially I was going to just use this app as an example in my [basicreact.com](https://basicreact.com) course. But then I decided to make a separate series on YouTube to practice making videos.

My biggest mistake when doing tutorial videos was starting over the recording every time I did some mistake. So whenever I would say the word improperly or mess up a bit with typing something - I would stop the recording, stress out and then start over again.

Now I decided to not care about mistakes, record everything in one shot and then edit out the messed up parts. Seems to be working waaaaaaay better.

If you want to learn how to make a simple weather app with react - check out those videos:

### #1
[Watch the video on YouTube](https://www.youtube.com/watch?v=smfAz-Vt6VQ)

### #2
[Watch the video on YouTube](https://www.youtube.com/watch?v=QkCzo2mXb0w)

### #3
[Watch the video on YouTube](https://www.youtube.com/watch?v=AvwD1kg-T-s)

### #4
[Watch the video on YouTube](https://www.youtube.com/watch?v=wwDcpWvnJN4)

### #5
[Watch the video on YouTube](https://www.youtube.com/watch?v=u2YDOy9iALU)

Unfortunately turned out that during first two recording I didn't switch the mics and recorded the audio to my laptops internal mic :facepalm:.


React App Video Course, Parts 1-5


I'm super proud of myself, managed to deliver an episode daily so far. And the best part is that it's getting easier with each one.

### #6

[Watch the video on YouTube](https://www.youtube.com/watch?v=jiJM18Lc1n8)

### #7

[Watch the video on YouTube](https://www.youtube.com/watch?v=3AbzaIl-ojw)

### #8

[Watch the video on YouTube](https://www.youtube.com/watch?v=fimloo8wrwQ)

### #9

[Watch the video on YouTube](https://www.youtube.com/watch?v=SubZAme1iRQ)

### #10

[Watch the video on YouTube](https://www.youtube.com/watch?v=Zfc5DbQgUrQ)


React App Video Course, Parts 6-10


If you open any webpage, and look at it's source code, you'll always see
a little thingy just before the opening html tag. So what is it, and what does it do?

This string is a document type declaration, and it's important to note that it's not an html tag itself, but it's an instruction for the browser on what version of HTML is used on this page.

Good news, modern web developers don't have to know any doctypes other than doctype html, because since the html5 it's the only doctype you should set for your webpages.

Before html5, there were several others that had more complex syntax. You had to specify the link to the actual doctype declaration. For example like in this html4.01 strict. We specify the link to the doctype on w3.org website

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
```

`https://www.w3.org/TR/html401/strict.dtd`

If you open the link, you will see how those type declarations used to look. It was a structured document that was telling browser what elements and attributes are allowed to use in current html version.

But as I said the modern type declaration doesn't' require you to specify the link to declaration file manually. And the only thing you have to worry about is to include this instruction in the beginning of your html document.

Now why, do you need to specify it?

In the dark ages of the internet, before the web standards, there we two huge browsers: Netscape Navigator and Microsoft Internet Explorer. And web pages were usually developed separately for each of them.

After the creation of the standards browsers introduced two ways of rendering, one for standards compliant websites and quirks mode to support the legacy sites.

So when you specify the doctype in the beginning of your document - you tell the browser that the webpage should be rendered in standards mode.

Otherwise if you omit it - you make the browser to use the quirks mode.

Let's look at the examples, I've created a two webpages with almost identical content. I've set the doctype for one page and omitted for another. Let's see how will they render.

If you right click the page and check out the page info, you'll see what mode is currently being used to render the page.

First thing I'd like you to note is different margin of the `h1` element. In quirks mode it doesn't have the top margin.

Next you can see that I have an orphaned list item element here. And in quirks mode this item has a bullet point.

Now take a look at the paragraph in the bottom. I have an uppercased class name for it. And in styles it has lowercase notation. As you can see in quirks mode class names are case insensitive, so the class name is still being applied.

You can check out the list of quirks that will be used for your page on Mozilla website.

Now to sum it up: Doctype is a type declaration that should go as the first line in your html document before the opening html tag. It makes browser render the page in standards mode. And you should only use the `<!doctype html>` since the html5 was released.

[Watch the video on YouTube](https://www.youtube.com/watch?v=5E1eQ_gNmyU)
