WebDev 101 is a complete introduction into the world of web development. Learn the basic concepts and skills required to build fullstack web apps with HTML, CSS, and JavaScript. 

#webdevelopment #learntocode #programming 
🔗 Resources

Web Dev Basics https://developer.mozilla.org/en-US/docs/Learn
Fullstack tutorials https://fireship.io/lessons/
Computer Science 101 https://youtu.be/-uleG_Vecis
10 Fullatack Web Apps https://youtu.be/FQPlEnKav48

📚 Chapters

🔥 Get More Content - Upgrade to PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font

🔖 Topics Covered

- Web Development roa
- HTML and CSS Tutorial
- How to get started in web development?
- Web development roadmap for 2022
- Intro to web development for beginners
2024-02-04T05:25:12.870Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
db764fa9-3ed3-4965-9199-a34bb2ffebf1
d67b87d6594ff49f367c656905da075676aa158b50687edfffffd7ddae40b1d9
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Web development is the best job in the world.
You build on a platform with nearly 5,000,000,000 daily active users, all connected together like the neurons of a global super intelligent brain.
A system that can cure disease, eliminate poverty, advance science and stuff like that, but mostly it's used to share memes, create parasocial relationships, amplify drama, and most importantly, make tons tons and tons of money.
If you wanna get into it, you're gonna need to know some stuff, like a lot of stuff.
In web development 101, we'll take a look at a 101 different concepts that you'll need to know when building full stack web apps.
This is the Internet.
It's a network of billions of machines connected together.
Wait.
What do you write to it like mail?
No.
A lot
of people use it and communicate it.
I guess they can communicate with NBC writers and producers.
Allison, can you explain what Internet is?
It was officially born on January 1st 1983.
Thanks to the establishment of the Internet protocol suite, which standardize the way these computers communicate.
The Internet protocol is used to identify different computers on the network by assigning each one of them a unique IP address.
These computers can then send data back and forth with the transmission control protocol.
It breaks data into a bunch of small packets kind of like puzzle pieces, then sends them through a bunch of physical components like fiber optic cables and modems before they're put back together by the receiving computer.
You can think of the Internet as hardware, but the Internet is not the same thing as the web.
The world wide web is like software that sits on top of the Internet where people can access web pages with the hypertext transfer protocol.
What's special about it is that it gives every page of content a uniform resource locator or URL.
Humans typically use a tool called a web browser to access a URL where it can be rendered visually on their screen.
The browser is called the client because it's consuming information, but on the other end of that URL, there's another computer called a server.
It received an HTTP request from the client, then sent a response containing the web page content.
These are called HTTP messages, but more on that later.
What's interesting is that every web page has a unique domain name, like fireship.iooreexample.com.
A domain name can be registered by anyone via a registrar who's accredited by ICANN, a nonprofit responsible for overseeing namespaces on the Internet.
When you navigate to a domain in a browser, it It's routed through the domain name system that maps these names to an actual IP address on a server somewhere.
DNS is like the phone book of the Internet.
Now when you look at a web page, the A content you see is represented by hypertext markup language.
Most browsers have dev tools where you can inspect the structure of the HTML at any time.
To build your own web page, you'll want a text editor like v s code.
An HTML document is just a collection of elements, where an element is an opening and closing tag with some content in the middle, like a paragraph and heading.
It also has elements that handle user input, like the select and input elements, which are used to build forms.
In addition, elements can have 1 or more attributes to change their behavior.
For example, an input can have a type like text or number, which the browser will render differently to collect the appropriate value.
But the element that puts the hypertext in HTML is the a tag or anchor.
It's a link that allows one page to navigate to a different page based on its URL.
These elements are nested together in a hierarchy to form the document object model or DOM.
From the root element, a web page is split into 2 parts.
The head contains invisible content like metadata and a title, then we have the for the main content that the end user actually sees.
The reason we wrap everything in tags is to give browsers and bots hints about the semantic meaning of the webpage.
This allows search engines to display results properly and also helps with accessibility for devices like screen readers that allow anybody regardless list of disability to enjoy the content.
My computer reads me the text.
Bro, smash that like button and subscribe.
One of the most common element come across is div or division to define a section of the web page.
On its own, a div might not seem to do anything and currently is this plain black and white website.
That begs the question, how do we make this website look cool?
The second language you'll need to learn as a web developer is cascading style sheets or CSS, which allows you to change the appearance of the HTML elements.
One way to accomplish that is with an inline style using the style attribute on an element.
The style itself contains a collection of properties and values that change the appearance of the element, like we might make the background color black and the text color red.
What we've created here is an inline style that will only be applied to this one element.
However, CSS cascades, which means it can be applied to multiple elements at the same time, time, providing better code reusability.
Another option is to move our code into a style tag, but to make the code work, we'll first need to define a selector so it knows which elements to target.
A selector, for example, can target all of the paragraph elements on the page, but that's too broad.
We can be more granular by defining a class.
That style can then be applied to 1 or more elements with the class attribute.
What's interesting though is that we now have classes that apply different styles to the same element.
CSS contains a bunch of specificity rules that determine which styles are relevant to an element in a way that self evident and elegant like a benevolent elephant.
Most often though, we don't use style tags, but instead use an external style sheet, which is linked to the web page in the head of the document.
When it comes to CSS, by far the most difficult thing to learn is layout and a.
Think of every element like a box.
The outside of that box is wrapped with padding, border, and margin.
The boxes then take up space on the page from top to bottom.
Some elements like heading have a display of block by default, which means they take up all available horizontal space.
Other elements like image are displayed in line, which means they can line up horizontally side side.
The problem is that the default position is usually not desirable.
It can be changed by customizing the position property on an element.
Relative positioning allows an element to move a certain number of pixels from its normal position.
Absolute positioning is similar, but the position values are relative to its nearest ancestor.
And then we have fixed positioning, which will keep an element on the screen even as the user scrolls away from it because it's fixed to the entire viewport.
Changing the position of an element is one thing, but one of the biggest challenges web developers face is creating responsive layouts.
Users can access your web page from all kinds of different screens, and it should look good on all of them.
CSS provides a bunch of different tools to help make this happen.
One of which is media queries.
A media query allows you to get information about the device that's rendering the web page and apply different styles accordingly.
But more importantly, it provides layout tools like Flexbox.
Applying display flex allows the parents to control the flow of the children to easily create rows and columns.
For more complex layouts, display grid can be used to control multiple rows and columns at the same time.
Now, CSS is usually not considered a Turing complete programming language on its own.
However, it does have mechanisms like calc, to perform mathematical operations, and custom properties, which are like variables that you can reuse in multiple places.
Vanilla CSS is rarely enough though and many developers choose to extend it with tools like Sass that add additional programmatic features on top of it.
And that brings us to the 3rd language you'll to know as a web developer, JavaScript.
Technically, you don't need JavaScript to build a website.
However, most developers choose to use it to make the user interface more active.
To run JavaScript code on a web page, open up a script tag, then write some JavaScript code inside of it.
The browser interprets the HTML from top to bottom and runs this code when encounters it in the DOM.
In most cases, JavaScript is written in a separate file, then referenced as the source on the script tag.
Usually, it's preferred that this code runs after the DOM content has loaded, which can be accomplished with the defer attribute.
JS is a big complicated programming language, which is more formally known as ECMAScript and is standardized in all major browsers.
There are several different ways to declare a variable.
A variable that might be reassigned in the future uses the let keyword, while a variable that can't be reassigned uses const.
It's a dynamically typed language, which means no type annotations are necessary.
That's not always ideal, so many developers choose TypeScript as an to add static typing on top of JavaScript.
Now, one of the most common reasons you would use JavaScript in the first place is to handle events.
Whenever the user does something on a web page, The browser emits an event that you can listen to, like a click, mouse move, form input change, and so on.
We can tap into these events using browser APIs like document, which in this case provides a method called query selector that allows us to grab an element with a CSS selector.
Once we have that element set as a variable, we can then assign an event listener to it.
An event listener is a function that will be called or re executed anytime the button is clicked.
Language has a variety of built in data structures like an array to represent a collection of values, but the most fundamental data structure is the object, also commonly called a dictionary or HashMap.
Anything that's not a primitive type, like a string or number, inherits its base functionality from the object class.
It relies on a technique called prototype 1 inheritance, where an object can be cloned multiple times to create a chain of ancestors where the child inherits the properties and methods of its ancestors.
This is different from class based inheritance, which is kind of confusing because JavaScript also supports classes.
However, these classes are just syntactic sugar for prototypal inheritance, but now we're a little too low level.
Most developers don't ever wanna have to touch the word prototype, so what we do instead is use a front end framework like React, Vue, Sysbelt, Angular, and so on.
All of these frameworks do the same thing in a slightly different way, which is represent the UI as a tree of components.
A component can encapsulate HTML, l css, and JavaScript into a format that looks like its own custom HTML element.
Most importantly, they produce declarative code that describes exactly what the UI does.
And that's much easier to work with than imperative code that you would normally get with just plain vanilla JavaScript.
At this point, we've taken a look at the front end stack, but now we need to switch gears to the back starting with Node JS, which is a server side run time based on JavaScript.
You can run server side code for web applications in all kinds of different languages, But Node is the most popular because it relies on the same language as the browser.
It's also based on the same b eight engine that powers the Chromium browser to run code in a single threaded non blocking event loop.
This allows Node to handle many simultaneous connections quickly and efficiently.
In addition, it allows developers to share work remotely thanks to the Node package manager.
A package is also called a module, which is just a file that contains some code with an export statement so it can be used in another file.
The file can consume a module with an import statement, but now we need to think about how to deliver the actual website from the server to the client.
The classic option is server side rendering.
In this approach, the client will make a git request for a certain URL.
Every request has an HTTP method And git means you want to retrieve data from a server, as opposed to methods like post and patch, where the intent is to modify data.
The server receives the request and then generates all the HTML on the server and sends it back to the client as a response.
The response contains a status code like 200 for success or levels 4 and 500 for errors.
For example, if the web page doesn't exist, the server will return a 404 status code, which you've likely seen before as a web user.
SSR is extremely popular, but in some cases, it may not be fast enough.
Another approach is the single page application.
With this approach, the server only renders a shell for the root URL, then JavaScript handles the rendering for all other pages on the website.
The HTML is a handles the rendering for all other pages on the website.
The HTML is generated almost entirely client side in the browser, making the website feel more like a native iOS or Android app.
When the app needs more data, it still makes an HTTP request, but only requests a minimal amount of data as JSON, which is called a data interchange format that can be understood by any programming language.
This can result in a great user experience.
However, it can be very difficult for bots, like search engines and social media link previews, to understand content on the page.
This led to another rendering strategy called static site generation.
In this case, every web page on the site is uploaded to a server in advance, allowing bots to get the information they need.
A front end JavaScript framework usually takes over to hydrate the HTML to make it fully interactive and behave like a single page application.
Performance is extremely important, and you'll wanna use tools like Lighthouse to optimize metrics like First Contentful Paint and Time to Interactive.
Now to implement one of these patterns, most developers will use a full stack framework like Next.
Js, Ruby on Rails, Laravel, and so on.
They abstract away many of the more tedious things developers don't wanna deal with.
One of which is module bundlers, which are tools like webpack and Vite that take all of your JavaScript, CSS, and HTML, and package it in a way that can actually work in a browser.
They might also provide a linter like ESLint to warn you when your code doesn't follow the proper style guidelines.
Oh, and I almost forgot, you are definitely going to need a database to build a full stack web application because you need somewhere to store your data, like data about your users.
But in order to get that data, You'll need to give users a way to log in via a process called user authentication.
Now before you deploy your code, you'll need to test it with a web server.
There are tools like Nginx and Apache to create HTTP server, but your framework will likely do this for you by serving the files on local host, which makes your own IP address behave like a remote web server.
When it comes time to deploy, you'll likely use a big cloud provider like AWS.
Most apps are containerized with Docker, making them easy to scale up and down based on the amount of traffic that they receive.
There are many tools out there that function as a platform as a service to manage this infrastructure for you in exchange for your money.
Or if you don't want to get locked in with giant tech corporation, you might host your app on a decentralized blockchain with Web 3, and that's about 1% of what you'll need to know to call yourself self a full stack web developer.
If that seems overwhelming, don't worry too much.
Almost nobody knows what the hell they're doing, and we all just use Google to figure things out on the fly.
Congratulations.
You just passed web development 101.
Thanks for watching, and I will see you in the next one.

Speaker 0: Web development is the best job in the world. You build on a platform with nearly 5,000,000,000 daily active users, all connected together like the neurons of a global super intelligent brain. A system that can cure disease, eliminate poverty, advance science and stuff like that, but mostly it's used to share memes, create parasocial relationships, amplify drama, and most importantly, make tons tons and tons of money. If you wanna get into it, you're gonna need to know some stuff, like a lot of stuff. In web development 101, we'll take a look at a 101 different concepts that you'll need to know when building full stack web apps.

This is the Internet. It's a network of billions of machines connected together. Wait. What do you write to it like mail? No.

A lot

Speaker 1: of people use it and communicate it. I guess they can communicate with NBC writers and producers. Allison, can you explain what Internet is?

Speaker 0: It was officially born on January 1st 1983. Thanks to the establishment of the Internet protocol suite, which standardize the way these computers communicate. The Internet protocol is used to identify different computers on the network by assigning each one of them a unique IP address. These computers can then send data back and forth with the transmission control protocol. It breaks data into a bunch of small packets kind of like puzzle pieces, then sends them through a bunch of physical components like fiber optic cables and modems before they're put back together by the receiving computer.

You can think of the Internet as hardware, but the Internet is not the same thing as the web. The world wide web is like software that sits on top of the Internet where people can access web pages with the hypertext transfer protocol. What's special about it is that it gives every page of content a uniform resource locator or URL. Humans typically use a tool called a web browser to access a URL where it can be rendered visually on their screen. The browser is called the client because it's consuming information, but on the other end of that URL, there's another computer called a server.

It received an HTTP request from the client, then sent a response containing the web page content. These are called HTTP messages, but more on that later. What's interesting is that every web page has a unique domain name, like fireship.iooreexample.com. A domain name can be registered by anyone via a registrar who's accredited by ICANN, a nonprofit responsible for overseeing namespaces on the Internet. When you navigate to a domain in a browser, it It's routed through the domain name system that maps these names to an actual IP address on a server somewhere.

DNS is like the phone book of the Internet. Now when you look at a web page, the A content you see is represented by hypertext markup language. Most browsers have dev tools where you can inspect the structure of the HTML at any time. To build your own web page, you'll want a text editor like v s code. An HTML document is just a collection of elements, where an element is an opening and closing tag with some content in the middle, like a paragraph and heading.

It also has elements that handle user input, like the select and input elements, which are used to build forms. In addition, elements can have 1 or more attributes to change their behavior. For example, an input can have a type like text or number, which the browser will render differently to collect the appropriate value. But the element that puts the hypertext in HTML is the a tag or anchor. It's a link that allows one page to navigate to a different page based on its URL.

These elements are nested together in a hierarchy to form the document object model or DOM. From the root element, a web page is split into 2 parts. The head contains invisible content like metadata and a title, then we have the for the main content that the end user actually sees. The reason we wrap everything in tags is to give browsers and bots hints about the semantic meaning of the webpage. This allows search engines to display results properly and also helps with accessibility for devices like screen readers that allow anybody regardless list of disability to enjoy the content.

My computer reads me the text.

Speaker 1: Bro, smash that like button and subscribe.

Speaker 0: One of the most common element come across is div or division to define a section of the web page. On its own, a div might not seem to do anything and currently is this plain black and white website. That begs the question, how do we make this website look cool? The second language you'll need to learn as a web developer is cascading style sheets or CSS, which allows you to change the appearance of the HTML elements. One way to accomplish that is with an inline style using the style attribute on an element.

The style itself contains a collection of properties and values that change the appearance of the element, like we might make the background color black and the text color red. What we've created here is an inline style that will only be applied to this one element. However, CSS cascades, which means it can be applied to multiple elements at the same time, time, providing better code reusability. Another option is to move our code into a style tag, but to make the code work, we'll first need to define a selector so it knows which elements to target. A selector, for example, can target all of the paragraph elements on the page, but that's too broad.

We can be more granular by defining a class. That style can then be applied to 1 or more elements with the class attribute. What's interesting though is that we now have classes that apply different styles to the same element. CSS contains a bunch of specificity rules that determine which styles are relevant to an element in a way that self evident and elegant like a benevolent elephant. Most often though, we don't use style tags, but instead use an external style sheet, which is linked to the web page in the head of the document.

When it comes to CSS, by far the most difficult thing to learn is layout and a. Think of every element like a box. The outside of that box is wrapped with padding, border, and margin. The boxes then take up space on the page from top to bottom. Some elements like heading have a display of block by default, which means they take up all available horizontal space.

Other elements like image are displayed in line, which means they can line up horizontally side side. The problem is that the default position is usually not desirable. It can be changed by customizing the position property on an element. Relative positioning allows an element to move a certain number of pixels from its normal position. Absolute positioning is similar, but the position values are relative to its nearest ancestor.

And then we have fixed positioning, which will keep an element on the screen even as the user scrolls away from it because it's fixed to the entire viewport. Changing the position of an element is one thing, but one of the biggest challenges web developers face is creating responsive layouts. Users can access your web page from all kinds of different screens, and it should look good on all of them. CSS provides a bunch of different tools to help make this happen. One of which is media queries.

A media query allows you to get information about the device that's rendering the web page and apply different styles accordingly. But more importantly, it provides layout tools like Flexbox. Applying display flex allows the parents to control the flow of the children to easily create rows and columns. For more complex layouts, display grid can be used to control multiple rows and columns at the same time. Now, CSS is usually not considered a Turing complete programming language on its own.

However, it does have mechanisms like calc, to perform mathematical operations, and custom properties, which are like variables that you can reuse in multiple places. Vanilla CSS is rarely enough though and many developers choose to extend it with tools like Sass that add additional programmatic features on top of it. And that brings us to the 3rd language you'll to know as a web developer, JavaScript. Technically, you don't need JavaScript to build a website. However, most developers choose to use it to make the user interface more active.

To run JavaScript code on a web page, open up a script tag, then write some JavaScript code inside of it. The browser interprets the HTML from top to bottom and runs this code when encounters it in the DOM. In most cases, JavaScript is written in a separate file, then referenced as the source on the script tag. Usually, it's preferred that this code runs after the DOM content has loaded, which can be accomplished with the defer attribute. JS is a big complicated programming language, which is more formally known as ECMAScript and is standardized in all major browsers.

There are several different ways to declare a variable. A variable that might be reassigned in the future uses the let keyword, while a variable that can't be reassigned uses const. It's a dynamically typed language, which means no type annotations are necessary. That's not always ideal, so many developers choose TypeScript as an to add static typing on top of JavaScript. Now, one of the most common reasons you would use JavaScript in the first place is to handle events.

Whenever the user does something on a web page, The browser emits an event that you can listen to, like a click, mouse move, form input change, and so on. We can tap into these events using browser APIs like document, which in this case provides a method called query selector that allows us to grab an element with a CSS selector. Once we have that element set as a variable, we can then assign an event listener to it. An event listener is a function that will be called or re executed anytime the button is clicked. Language has a variety of built in data structures like an array to represent a collection of values, but the most fundamental data structure is the object, also commonly called a dictionary or HashMap.

Anything that's not a primitive type, like a string or number, inherits its base functionality from the object class. It relies on a technique called prototype 1 inheritance, where an object can be cloned multiple times to create a chain of ancestors where the child inherits the properties and methods of its ancestors. This is different from class based inheritance, which is kind of confusing because JavaScript also supports classes. However, these classes are just syntactic sugar for prototypal inheritance, but now we're a little too low level. Most developers don't ever wanna have to touch the word prototype, so what we do instead is use a front end framework like React, Vue, Sysbelt, Angular, and so on.

All of these frameworks do the same thing in a slightly different way, which is represent the UI as a tree of components. A component can encapsulate HTML, l css, and JavaScript into a format that looks like its own custom HTML element. Most importantly, they produce declarative code that describes exactly what the UI does. And that's much easier to work with than imperative code that you would normally get with just plain vanilla JavaScript. At this point, we've taken a look at the front end stack, but now we need to switch gears to the back starting with Node JS, which is a server side run time based on JavaScript.

You can run server side code for web applications in all kinds of different languages, But Node is the most popular because it relies on the same language as the browser. It's also based on the same b eight engine that powers the Chromium browser to run code in a single threaded non blocking event loop. This allows Node to handle many simultaneous connections quickly and efficiently. In addition, it allows developers to share work remotely thanks to the Node package manager. A package is also called a module, which is just a file that contains some code with an export statement so it can be used in another file.

The file can consume a module with an import statement, but now we need to think about how to deliver the actual website from the server to the client. The classic option is server side rendering. In this approach, the client will make a git request for a certain URL. Every request has an HTTP method And git means you want to retrieve data from a server, as opposed to methods like post and patch, where the intent is to modify data. The server receives the request and then generates all the HTML on the server and sends it back to the client as a response.

The response contains a status code like 200 for success or levels 4 and 500 for errors. For example, if the web page doesn't exist, the server will return a 404 status code, which you've likely seen before as a web user. SSR is extremely popular, but in some cases, it may not be fast enough. Another approach is the single page application. With this approach, the server only renders a shell for the root URL, then JavaScript handles the rendering for all other pages on the website.

The HTML is a handles the rendering for all other pages on the website. The HTML is generated almost entirely client side in the browser, making the website feel more like a native iOS or Android app. When the app needs more data, it still makes an HTTP request, but only requests a minimal amount of data as JSON, which is called a data interchange format that can be understood by any programming language. This can result in a great user experience. However, it can be very difficult for bots, like search engines and social media link previews, to understand content on the page.

This led to another rendering strategy called static site generation. In this case, every web page on the site is uploaded to a server in advance, allowing bots to get the information they need. A front end JavaScript framework usually takes over to hydrate the HTML to make it fully interactive and behave like a single page application. Performance is extremely important, and you'll wanna use tools like Lighthouse to optimize metrics like First Contentful Paint and Time to Interactive. Now to implement one of these patterns, most developers will use a full stack framework like Next.

Js, Ruby on Rails, Laravel, and so on. They abstract away many of the more tedious things developers don't wanna deal with. One of which is module bundlers, which are tools like webpack and Vite that take all of your JavaScript, CSS, and HTML, and package it in a way that can actually work in a browser. They might also provide a linter like ESLint to warn you when your code doesn't follow the proper style guidelines. Oh, and I almost forgot, you are definitely going to need a database to build a full stack web application because you need somewhere to store your data, like data about your users.

But in order to get that data, You'll need to give users a way to log in via a process called user authentication. Now before you deploy your code, you'll need to test it with a web server. There are tools like Nginx and Apache to create HTTP server, but your framework will likely do this for you by serving the files on local host, which makes your own IP address behave like a remote web server. When it comes time to deploy, you'll likely use a big cloud provider like AWS. Most apps are containerized with Docker, making them easy to scale up and down based on the amount of traffic that they receive.

There are many tools out there that function as a platform as a service to manage this infrastructure for you in exchange for your money. Or if you don't want to get locked in with giant tech corporation, you might host your app on a decentralized blockchain with Web 3, and that's about 1% of what you'll need to know to call yourself self a full stack web developer. If that seems overwhelming, don't worry too much. Almost nobody knows what the hell they're doing, and we all just use Google to figure things out on the fly. Congratulations.

You just passed web development 101. Thanks for watching, and I will see you in the next one.
Web development is the best job in the world. You build on a platform with nearly 5,000,000,000 daily active users, all connected together like the neurons of a global super intelligent brain. A system that can cure disease, eliminate poverty, advance science and stuff like that, but mostly it's used to share memes, create parasocial relationships, amplify drama, and most importantly, make tons tons and tons of money. If you wanna get into it, you're gonna need to know some stuff, like a lot of stuff. In web development 101, we'll take a look at a 101 different concepts that you'll need to know when building full stack web apps. This is the Internet. It's a network of billions of machines connected together. Wait. What do you write to it like mail? No. A lot of people use it and communicate it. I guess they can communicate with NBC writers and producers. Allison, can you explain what Internet is? It was officially born on January 1st 1983. Thanks to the establishment of the Internet protocol suite, which standardize the way these computers communicate. The Internet protocol is used to identify different computers on the network by assigning each one of them a unique IP address. These computers can then send data back and forth with the transmission control protocol. It breaks data into a bunch of small packets kind of like puzzle pieces, then sends them through a bunch of physical components like fiber optic cables and modems before they're put back together by the receiving computer. You can think of the Internet as hardware, but the Internet is not the same thing as the web. The world wide web is like software that sits on top of the Internet where people can access web pages with the hypertext transfer protocol. What's special about it is that it gives every page of content a uniform resource locator or URL.
internet
email
computers
networking
computer science
health
telecommunications
electronics
technology
systems
media
infrastructure
healthcare
products
Humans typically use a tool called a web browser to access a URL where it can be rendered visually on their screen.
The browser is called the client because it's consuming information, but on the other end of that URL, there's another computer called a server. It received an HTTP request from the client, then sent a response containing the web page content. These are called HTTP messages, but more on that later.
internet
What's interesting is that every web page has a unique domain name, like fireship.iooreexample.com. A domain name can be registered by anyone via a registrar who's accredited by ICANN, a nonprofit responsible for overseeing namespaces on the Internet. When you navigate to a domain in a browser, it It's routed through the domain name system that maps these names to an actual IP address on a server somewhere.
DNS is like the phone book of the Internet. Now when you look at a web page, the A content you see is represented by hypertext markup language. Most browsers have dev tools where you can inspect the structure of the HTML at any time. To build your own web page, you'll want a text editor like v s code.
websites
internet
An HTML document is just a collection of elements, where an element is an opening and closing tag with some content in the middle, like a paragraph and heading. It also has elements that handle user input, like the select and input elements, which are used to build forms. In addition, elements can have 1 or more attributes to change their behavior. For example, an input can have a type like text or number, which the browser will render differently to collect the appropriate value. But the element that puts the hypertext in HTML is the a tag or anchor. It's a link that allows one page to navigate to a different page based on its URL. These elements are nested together in a hierarchy to form the document object model or DOM. From the root element, a web page is split into 2 parts. The head contains invisible content like metadata and a title, then we have the for the main content that the end user actually sees. The reason we wrap everything in tags is to give browsers and bots hints about the semantic meaning of the webpage. This allows search engines to display results properly and also helps with accessibility for devices like screen readers that allow anybody regardless list of disability to enjoy the content. My computer reads me the text. Bro, smash that like button and subscribe. One of the most common element come across is div or division to define a section of the web page. On its own, a div might not seem to do anything and currently is this plain black and white website. That begs the question, how do we make this website look cool? The second language you'll need to learn as a web developer is cascading style sheets or CSS, which allows you to change the appearance of the HTML elements.
One way to accomplish that is with an inline style using the style attribute on an element. The style itself contains a collection of properties and values that change the appearance of the element, like we might make the background color black and the text color red. What we've created here is an inline style that will only be applied to this one element.
fashion
clothing
However, CSS cascades, which means it can be applied to multiple elements at the same time, time, providing better code reusability. Another option is to move our code into a style tag, but to make the code work, we'll first need to define a selector so it knows which elements to target. A selector, for example, can target all of the paragraph elements on the page, but that's too broad. We can be more granular by defining a class. That style can then be applied to 1 or more elements with the class attribute. What's interesting though is that we now have classes that apply different styles to the same element.
CSS contains a bunch of specificity rules that determine which styles are relevant to an element in a way that self evident and elegant like a benevolent elephant. Most often though, we don't use style tags, but instead use an external style sheet, which is linked to the web page in the head of the document. When it comes to CSS, by far the most difficult thing to learn is layout and a. Think of every element like a box.
fashion
clothing
The outside of that box is wrapped with padding, border, and margin. The boxes then take up space on the page from top to bottom. Some elements like heading have a display of block by default, which means they take up all available horizontal space. Other elements like image are displayed in line, which means they can line up horizontally side side. The problem is that the default position is usually not desirable. It can be changed by customizing the position property on an element. Relative positioning allows an element to move a certain number of pixels from its normal position. Absolute positioning is similar, but the position values are relative to its nearest ancestor. And then we have fixed positioning, which will keep an element on the screen even as the user scrolls away from it because it's fixed to the entire viewport.
Changing the position of an element is one thing, but one of the biggest challenges web developers face is creating responsive layouts. Users can access your web page from all kinds of different screens, and it should look good on all of them. CSS provides a bunch of different tools to help make this happen. One of which is media queries. A media query allows you to get information about the device that's rendering the web page and apply different styles accordingly. But more importantly, it provides layout tools like Flexbox. Applying display flex allows the parents to control the flow of the children to easily create rows and columns. For more complex layouts, display grid can be used to control multiple rows and columns at the same time. Now, CSS is usually not considered a Turing complete programming language on its own. However, it does have mechanisms like calc, to perform mathematical operations, and custom properties, which are like variables that you can reuse in multiple places.
multimedia
programming
social media
media
animation
graphic design
visualization
Vanilla CSS is rarely enough though and many developers choose to extend it with tools like Sass that add additional programmatic features on top of it. And that brings us to the 3rd language you'll to know as a web developer, JavaScript. Technically, you don't need JavaScript to build a website. However, most developers choose to use it to make the user interface more active. To run JavaScript code on a web page, open up a script tag, then write some JavaScript code inside of it. The browser interprets the HTML from top to bottom and runs this code when encounters it in the DOM. In most cases, JavaScript is written in a separate file, then referenced as the source on the script tag. Usually, it's preferred that this code runs after the DOM content has loaded, which can be accomplished with the defer attribute. JS is a big complicated programming language, which is more formally known as ECMAScript and is standardized in all major browsers. There are several different ways to declare a variable. A variable that might be reassigned in the future uses the let keyword, while a variable that can't be reassigned uses const.
It's a dynamically typed language, which means no type annotations are necessary. That's not always ideal, so many developers choose TypeScript as an to add static typing on top of JavaScript. Now, one of the most common reasons you would use JavaScript in the first place is to handle events.
ideologies
Whenever the user does something on a web page, The browser emits an event that you can listen to, like a click, mouse move, form input change, and so on. We can tap into these events using browser APIs like document, which in this case provides a method called query selector that allows us to grab an element with a CSS selector. Once we have that element set as a variable, we can then assign an event listener to it. An event listener is a function that will be called or re executed anytime the button is clicked.
Language has a variety of built in data structures like an array to represent a collection of values, but the most fundamental data structure is the object, also commonly called a dictionary or HashMap. Anything that's not a primitive type, like a string or number, inherits its base functionality from the object class. It relies on a technique called prototype 1 inheritance, where an object can be cloned multiple times to create a chain of ancestors where the child inherits the properties and methods of its ancestors.
evolution
genetics
ideologies
languages
databases
biology
intellectual property
This is different from class based inheritance, which is kind of confusing because JavaScript also supports classes. However, these classes are just syntactic sugar for prototypal inheritance, but now we're a little too low level. Most developers don't ever wanna have to touch the word prototype, so what we do instead is use a front end framework like React, Vue, Sysbelt, Angular, and so on. All of these frameworks do the same thing in a slightly different way, which is represent the UI as a tree of components. A component can encapsulate HTML, l css, and JavaScript into a format that looks like its own custom HTML element. Most importantly, they produce declarative code that describes exactly what the UI does. And that's much easier to work with than imperative code that you would normally get with just plain vanilla JavaScript. At this point, we've taken a look at the front end stack, but now we need to switch gears to the back starting with Node JS, which is a server side run time based on JavaScript. You can run server side code for web applications in all kinds of different languages, But Node is the most popular because it relies on the same language as the browser. It's also based on the same b eight engine that powers the Chromium browser to run code in a single threaded non blocking event loop.
This allows Node to handle many simultaneous connections quickly and efficiently. In addition, it allows developers to share work remotely thanks to the Node package manager. A package is also called a module, which is just a file that contains some code with an export statement so it can be used in another file. The file can consume a module with an import statement, but now we need to think about how to deliver the actual website from the server to the client.
programming
software
The classic option is server side rendering. In this approach, the client will make a git request for a certain URL. Every request has an HTTP method And git means you want to retrieve data from a server, as opposed to methods like post and patch, where the intent is to modify data. The server receives the request and then generates all the HTML on the server and sends it back to the client as a response. The response contains a status code like 200 for success or levels 4 and 500 for errors. For example, if the web page doesn't exist, the server will return a 404 status code, which you've likely seen before as a web user. SSR is extremely popular, but in some cases, it may not be fast enough. Another approach is the single page application. With this approach, the server only renders a shell for the root URL, then JavaScript handles the rendering for all other pages on the website. The HTML is a handles the rendering for all other pages on the website. The HTML is generated almost entirely client side in the browser, making the website feel more like a native iOS or Android app. When the app needs more data, it still makes an HTTP request, but only requests a minimal amount of data as JSON, which is called a data interchange format that can be understood by any programming language. This can result in a great user experience. However, it can be very difficult for bots, like search engines and social media link previews, to understand content on the page. This led to another rendering strategy called static site generation. In this case, every web page on the site is uploaded to a server in advance, allowing bots to get the information they need. A front end JavaScript framework usually takes over to hydrate the HTML to make it fully interactive and behave like a single page application. Performance is extremely important, and you'll wanna use tools like Lighthouse to optimize metrics like First Contentful Paint and Time to Interactive.
Now to implement one of these patterns, most developers will use a full stack framework like Next. Js, Ruby on Rails, Laravel, and so on. They abstract away many of the more tedious things developers don't wanna deal with. One of which is module bundlers, which are tools like webpack and Vite that take all of your JavaScript, CSS, and HTML, and package it in a way that can actually work in a browser. They might also provide a linter like ESLint to warn you when your code doesn't follow the proper style guidelines. Oh, and I almost forgot, you are definitely going to need a database to build a full stack web application because you need somewhere to store your data, like data about your users.
databases
software development
programming
But in order to get that data, You'll need to give users a way to log in via a process called user authentication. Now before you deploy your code, you'll need to test it with a web server. There are tools like Nginx and Apache to create HTTP server, but your framework will likely do this for you by serving the files on local host, which makes your own IP address behave like a remote web server.
When it comes time to deploy, you'll likely use a big cloud provider like AWS. Most apps are containerized with Docker, making them easy to scale up and down based on the amount of traffic that they receive. There are many tools out there that function as a platform as a service to manage this infrastructure for you in exchange for your money. Or if you don't want to get locked in with giant tech corporation, you might host your app on a decentralized blockchain with Web 3, and that's about 1% of what you'll need to know to call yourself self a full stack web developer. If that seems overwhelming, don't worry too much. Almost nobody knows what the hell they're doing, and we all just use Google to figure things out on the fly. Congratulations. You just passed web development 101. Thanks for watching, and I will see you in the next one.
internet
google
networking
infrastructure
cryptocurrency
Web development is the best job in the world. You build on a platform with nearly 5,000,000,000 daily active users, all connected together like the neurons of a global super intelligent brain. A system that can cure disease, eliminate poverty, advance science and stuff like that, but mostly it's used to share memes, create parasocial relationships, amplify drama, and most importantly, make tons tons and tons of money. If you wanna get into it, you're gonna need to know some stuff, like a lot of stuff. In web development 101, we'll take a look at a 101 different concepts that you'll need to know when building full stack web apps. This is the Internet. It's a network of billions of machines connected together. Wait. What do you write to it like mail? No. A lot of people use it and communicate it. I guess they can communicate with NBC writers and producers. Allison, can you explain what Internet is? It was officially born on January 1st 1983. Thanks to the establishment of the Internet protocol suite, which standardize the way these computers communicate. The Internet protocol is used to identify different computers on the network by assigning each one of them a unique IP address. These computers can then send data back and forth with the transmission control protocol. It breaks data into a bunch of small packets kind of like puzzle pieces, then sends them through a bunch of physical components like fiber optic cables and modems before they're put back together by the receiving computer. You can think of the Internet as hardware, but the Internet is not the same thing as the web. The world wide web is like software that sits on top of the Internet where people can access web pages with the hypertext transfer protocol. What's special about it is that it gives every page of content a uniform resource locator or URL. Humans typically use a tool called a web browser to access a URL where it can be rendered visually on their screen. The browser is called the client because it's consuming information, but on the other end of that URL, there's another computer called a server. It received an HTTP request from the client, then sent a response containing the web page content. These are called HTTP messages, but more on that later. What's interesting is that every web page has a unique domain name, like fireship.iooreexample.com. A domain name can be registered by anyone via a registrar who's accredited by ICANN, a nonprofit responsible for overseeing namespaces on the Internet. When you navigate to a domain in a browser, it It's routed through the domain name system that maps these names to an actual IP address on a server somewhere. DNS is like the phone book of the Internet. Now when you look at a web page, the A content you see is represented by hypertext markup language. Most browsers have dev tools where you can inspect the structure of the HTML at any time. To build your own web page, you'll want a text editor like v s code. An HTML document is just a collection of elements, where an element is an opening and closing tag with some content in the middle, like a paragraph and heading. It also has elements that handle user input, like the select and input elements, which are used to build forms. In addition, elements can have 1 or more attributes to change their behavior. For example, an input can have a type like text or number, which the browser will render differently to collect the appropriate value. But the element that puts the hypertext in HTML is the a tag or anchor. It's a link that allows one page to navigate to a different page based on its URL. These elements are nested together in a hierarchy to form the document object model or DOM. From the root element, a web page is split into 2 parts. The head contains invisible content like metadata and a title, then we have the for the main content that the end user actually sees. The reason we wrap everything in tags is to give browsers and bots hints about the semantic meaning of the webpage. This allows search engines to display results properly and also helps with accessibility for devices like screen readers that allow anybody regardless list of disability to enjoy the content. My computer reads me the text. Bro, smash that like button and subscribe. One of the most common element come across is div or division to define a section of the web page. On its own, a div might not seem to do anything and currently is this plain black and white website. That begs the question, how do we make this website look cool? The second language you'll need to learn as a web developer is cascading style sheets or CSS, which allows you to change the appearance of the HTML elements. One way to accomplish that is with an inline style using the style attribute on an element. The style itself contains a collection of properties and values that change the appearance of the element, like we might make the background color black and the text color red. What we've created here is an inline style that will only be applied to this one element. However, CSS cascades, which means it can be applied to multiple elements at the same time, time, providing better code reusability. Another option is to move our code into a style tag, but to make the code work, we'll first need to define a selector so it knows which elements to target. A selector, for example, can target all of the paragraph elements on the page, but that's too broad. We can be more granular by defining a class. That style can then be applied to 1 or more elements with the class attribute. What's interesting though is that we now have classes that apply different styles to the same element. CSS contains a bunch of specificity rules that determine which styles are relevant to an element in a way that self evident and elegant like a benevolent elephant. Most often though, we don't use style tags, but instead use an external style sheet, which is linked to the web page in the head of the document. When it comes to CSS, by far the most difficult thing to learn is layout and a. Think of every element like a box. The outside of that box is wrapped with padding, border, and margin. The boxes then take up space on the page from top to bottom. Some elements like heading have a display of block by default, which means they take up all available horizontal space. Other elements like image are displayed in line, which means they can line up horizontally side side. The problem is that the default position is usually not desirable. It can be changed by customizing the position property on an element. Relative positioning allows an element to move a certain number of pixels from its normal position. Absolute positioning is similar, but the position values are relative to its nearest ancestor. And then we have fixed positioning, which will keep an element on the screen even as the user scrolls away from it because it's fixed to the entire viewport. Changing the position of an element is one thing, but one of the biggest challenges web developers face is creating responsive layouts. Users can access your web page from all kinds of different screens, and it should look good on all of them. CSS provides a bunch of different tools to help make this happen. One of which is media queries. A media query allows you to get information about the device that's rendering the web page and apply different styles accordingly. But more importantly, it provides layout tools like Flexbox. Applying display flex allows the parents to control the flow of the children to easily create rows and columns. For more complex layouts, display grid can be used to control multiple rows and columns at the same time. Now, CSS is usually not considered a Turing complete programming language on its own. However, it does have mechanisms like calc, to perform mathematical operations, and custom properties, which are like variables that you can reuse in multiple places. Vanilla CSS is rarely enough though and many developers choose to extend it with tools like Sass that add additional programmatic features on top of it. And that brings us to the 3rd language you'll to know as a web developer, JavaScript. Technically, you don't need JavaScript to build a website. However, most developers choose to use it to make the user interface more active. To run JavaScript code on a web page, open up a script tag, then write some JavaScript code inside of it. The browser interprets the HTML from top to bottom and runs this code when encounters it in the DOM. In most cases, JavaScript is written in a separate file, then referenced as the source on the script tag. Usually, it's preferred that this code runs after the DOM content has loaded, which can be accomplished with the defer attribute. JS is a big complicated programming language, which is more formally known as ECMAScript and is standardized in all major browsers. There are several different ways to declare a variable. A variable that might be reassigned in the future uses the let keyword, while a variable that can't be reassigned uses const. It's a dynamically typed language, which means no type annotations are necessary. That's not always ideal, so many developers choose TypeScript as an to add static typing on top of JavaScript. Now, one of the most common reasons you would use JavaScript in the first place is to handle events. Whenever the user does something on a web page, The browser emits an event that you can listen to, like a click, mouse move, form input change, and so on. We can tap into these events using browser APIs like document, which in this case provides a method called query selector that allows us to grab an element with a CSS selector. Once we have that element set as a variable, we can then assign an event listener to it. An event listener is a function that will be called or re executed anytime the button is clicked. Language has a variety of built in data structures like an array to represent a collection of values, but the most fundamental data structure is the object, also commonly called a dictionary or HashMap. Anything that's not a primitive type, like a string or number, inherits its base functionality from the object class. It relies on a technique called prototype 1 inheritance, where an object can be cloned multiple times to create a chain of ancestors where the child inherits the properties and methods of its ancestors. This is different from class based inheritance, which is kind of confusing because JavaScript also supports classes. However, these classes are just syntactic sugar for prototypal inheritance, but now we're a little too low level. Most developers don't ever wanna have to touch the word prototype, so what we do instead is use a front end framework like React, Vue, Sysbelt, Angular, and so on. All of these frameworks do the same thing in a slightly different way, which is represent the UI as a tree of components. A component can encapsulate HTML, l css, and JavaScript into a format that looks like its own custom HTML element. Most importantly, they produce declarative code that describes exactly what the UI does. And that's much easier to work with than imperative code that you would normally get with just plain vanilla JavaScript. At this point, we've taken a look at the front end stack, but now we need to switch gears to the back starting with Node JS, which is a server side run time based on JavaScript. You can run server side code for web applications in all kinds of different languages, But Node is the most popular because it relies on the same language as the browser. It's also based on the same b eight engine that powers the Chromium browser to run code in a single threaded non blocking event loop. This allows Node to handle many simultaneous connections quickly and efficiently. In addition, it allows developers to share work remotely thanks to the Node package manager. A package is also called a module, which is just a file that contains some code with an export statement so it can be used in another file. The file can consume a module with an import statement, but now we need to think about how to deliver the actual website from the server to the client. The classic option is server side rendering. In this approach, the client will make a git request for a certain URL. Every request has an HTTP method And git means you want to retrieve data from a server, as opposed to methods like post and patch, where the intent is to modify data. The server receives the request and then generates all the HTML on the server and sends it back to the client as a response. The response contains a status code like 200 for success or levels 4 and 500 for errors. For example, if the web page doesn't exist, the server will return a 404 status code, which you've likely seen before as a web user. SSR is extremely popular, but in some cases, it may not be fast enough. Another approach is the single page application. With this approach, the server only renders a shell for the root URL, then JavaScript handles the rendering for all other pages on the website. The HTML is a handles the rendering for all other pages on the website. The HTML is generated almost entirely client side in the browser, making the website feel more like a native iOS or Android app. When the app needs more data, it still makes an HTTP request, but only requests a minimal amount of data as JSON, which is called a data interchange format that can be understood by any programming language. This can result in a great user experience. However, it can be very difficult for bots, like search engines and social media link previews, to understand content on the page. This led to another rendering strategy called static site generation. In this case, every web page on the site is uploaded to a server in advance, allowing bots to get the information they need. A front end JavaScript framework usually takes over to hydrate the HTML to make it fully interactive and behave like a single page application. Performance is extremely important, and you'll wanna use tools like Lighthouse to optimize metrics like First Contentful Paint and Time to Interactive. Now to implement one of these patterns, most developers will use a full stack framework like Next. Js, Ruby on Rails, Laravel, and so on. They abstract away many of the more tedious things developers don't wanna deal with. One of which is module bundlers, which are tools like webpack and Vite that take all of your JavaScript, CSS, and HTML, and package it in a way that can actually work in a browser. They might also provide a linter like ESLint to warn you when your code doesn't follow the proper style guidelines. Oh, and I almost forgot, you are definitely going to need a database to build a full stack web application because you need somewhere to store your data, like data about your users. But in order to get that data, You'll need to give users a way to log in via a process called user authentication. Now before you deploy your code, you'll need to test it with a web server. There are tools like Nginx and Apache to create HTTP server, but your framework will likely do this for you by serving the files on local host, which makes your own IP address behave like a remote web server. When it comes time to deploy, you'll likely use a big cloud provider like AWS. Most apps are containerized with Docker, making them easy to scale up and down based on the amount of traffic that they receive. There are many tools out there that function as a platform as a service to manage this infrastructure for you in exchange for your money. Or if you don't want to get locked in with giant tech corporation, you might host your app on a decentralized blockchain with Web 3, and that's about 1% of what you'll need to know to call yourself self a full stack web developer. If that seems overwhelming, don't worry too much. Almost nobody knows what the hell they're doing, and we all just use Google to figure things out on the fly. Congratulations. You just passed web development 101. Thanks for watching, and I will see you in the next one.
Web
web
development
development
is
is
the
the
best
best
job
job
in
in
the
the
world.
world
You
you
build
build
on
on
a
a
platform
platform
with
with
nearly
nearly
5,000,000,000
5,000,000,000
daily
daily
active
active
users,
users
all
all
connected
connected
together
together
like
like
the
the
neurons
neurons
of
of
a
a
global
global
super
super
intelligent
intelligent
brain.
brain
A
a
system
system
that
that
can
can
cure
cure
disease,
disease
eliminate
eliminate
poverty,
poverty
advance
advance
science
science
and
and
stuff
stuff
like
like
that,
that
but
but
mostly
mostly
it's
it's
used
used
to
to
share
share
memes,
memes
create
create
parasocial
parasocial
relationships,
relationships
amplify
amplify
drama,
drama
and
and
most
most
importantly,
importantly
make
make
tons
tons
tons
tons
and
and
tons
tons
of
of
money.
money
If
if
you
you
wanna
wanna
get
get
into
into
it,
it
you're
you're
gonna
gonna
need
need
to
to
know
know
some
some
stuff,
stuff
like
like
a
a
lot
lot
of
of
stuff.
stuff
In
in
web
web
development
development
101,
101
we'll
we'll
take
take
a
a
look
look
at
at
a
a
101
101
different
different
concepts
concepts
that
that
you'll
you'll
need
need
to
to
know
know
when
when
building
building
full
full
stack
stack
web
web
apps.
apps
This
this
is
is
the
the
Internet.
internet
It's
it's
a
a
network
network
of
of
billions
billions
of
of
machines
machines
connected
connected
together.
together
Wait.
wait
What
what
do
do
you
you
write
write
to
to
it
it
like
like
mail?
mail
No.
no
A
a
lot
lot
of
of
people
people
use
use
it
it
and
and
communicate
communicate
it.
it
I
i
guess
guess
they
they
can
can
communicate
communicate
with
with
NBC
nbc
writers
writers
and
and
producers.
producers
Allison,
allison
can
can
you
you
explain
explain
what
what
Internet
internet
is?
is
It
it
was
was
officially
officially
born
born
on
on
January
january
1st
1st
1983.
1983
Thanks
thanks
to
to
the
the
establishment
establishment
of
of
the
the
Internet
internet
protocol
protocol
suite,
suite
which
which
standardize
standardize
the
the
way
way
these
these
computers
computers
communicate.
communicate
The
the
Internet
internet
protocol
protocol
is
is
used
used
to
to
identify
identify
different
different
computers
computers
on
on
the
the
network
network
by
by
assigning
assigning
each
each
one
one
of
of
them
them
a
a
unique
unique
IP
ip
address.
address
These
these
computers
computers
can
can
then
then
send
send
data
data
back
back
and
and
forth
forth
with
with
the
the
transmission
transmission
control
control
protocol.
protocol
It
it
breaks
breaks
data
data
into
into
a
a
bunch
bunch
of
of
small
small
packets
packets
kind
kind
of
of
like
like
puzzle
puzzle
pieces,
pieces
then
then
sends
sends
them
them
through
through
a
a
bunch
bunch
of
of
physical
physical
components
components
like
like
fiber
fiber
optic
optic
cables
cables
and
and
modems
modems
before
before
they're
they're
put
put
back
back
together
together
by
by
the
the
receiving
receiving
computer.
computer
You
you
can
can
think
think
of
of
the
the
Internet
internet
as
as
hardware,
hardware
but
but
the
the
Internet
internet
is
is
not
not
the
the
same
same
thing
thing
as
as
the
the
web.
web
The
the
world
world
wide
wide
web
web
is
is
like
like
software
software
that
that
sits
sits
on
on
top
top
of
of
the
the
Internet
internet
where
where
people
people
can
can
access
access
web
web
pages
pages
with
with
the
the
hypertext
hypertext
transfer
transfer
protocol.
protocol
What's
what's
special
special
about
about
it
it
is
is
that
that
it
it
gives
gives
every
every
page
page
of
of
content
content
a
a
uniform
uniform
resource
resource
locator
locator
or
or
URL.
url
Humans
humans
typically
typically
use
use
a
a
tool
tool
called
called
a
a
web
web
browser
browser
to
to
access
access
a
a
URL
url
where
where
it
it
can
can
be
be
rendered
rendered
visually
visually
on
on
their
their
screen.
screen
The
the
browser
browser
is
is
called
called
the
the
client
client
because
because
it's
it's
consuming
consuming
information,
information
but
but
on
on
the
the
other
other
end
end
of
of
that
that
URL,
url
there's
there's
another
another
computer
computer
called
called
a
a
server.
server
It
it
received
received
an
an
HTTP
http
request
request
from
from
the
the
client,
client
then
then
sent
sent
a
a
response
response
containing
containing
the
the
web
web
page
page
content.
content
These
these
are
are
called
called
HTTP
http
messages,
messages
but
but
more
more
on
on
that
that
later.
later
What's
what's
interesting
interesting
is
is
that
that
every
every
web
web
page
page
has
has
a
a
unique
unique
domain
domain
name,
name
like
like
fireship.iooreexample.com.
fireship.iooreexample.com
A
a
domain
domain
name
name
can
can
be
be
registered
registered
by
by
anyone
anyone
via
via
a
a
registrar
registrar
who's
who's
accredited
accredited
by
by
ICANN,
icann
a
a
nonprofit
nonprofit
responsible
responsible
for
for
overseeing
overseeing
namespaces
namespaces
on
on
the
the
Internet.
internet
When
when
you
you
navigate
navigate
to
to
a
a
domain
domain
in
in
a
a
browser,
browser
it
it
It's
it's
routed
routed
through
through
the
the
domain
domain
name
name
system
system
that
that
maps
maps
these
these
names
names
to
to
an
an
actual
actual
IP
ip
address
address
on
on
a
a
server
server
somewhere.
somewhere
DNS
dns
is
is
like
like
the
the
phone
phone
book
book
of
of
the
the
Internet.
internet
Now
now
when
when
you
you
look
look
at
at
a
a
web
web
page,
page
the
the
A
a
content
content
you
you
see
see
is
is
represented
represented
by
by
hypertext
hypertext
markup
markup
language.
language
Most
most
browsers
browsers
have
have
dev
dev
tools
tools
where
where
you
you
can
can
inspect
inspect
the
the
structure
structure
of
of
the
the
HTML
html
at
at
any
any
time.
time
To
to
build
build
your
your
own
own
web
web
page,
page
you'll
you'll
want
want
a
a
text
text
editor
editor
like
like
v
v
s
s
code.
code
An
an
HTML
html
document
document
is
is
just
just
a
a
collection
collection
of
of
elements,
elements
where
where
an
an
element
element
is
is
an
an
opening
opening
and
and
closing
closing
tag
tag
with
with
some
some
content
content
in
in
the
the
middle,
middle
like
like
a
a
paragraph
paragraph
and
and
heading.
heading
It
it
also
also
has
has
elements
elements
that
that
handle
handle
user
user
input,
input
like
like
the
the
select
select
and
and
input
input
elements,
elements
which
which
are
are
used
used
to
to
build
build
forms.
forms
In
in
addition,
addition
elements
elements
can
can
have
have
1
1
or
or
more
more
attributes
attributes
to
to
change
change
their
their
behavior.
behavior
For
for
example,
example
an
an
input
input
can
can
have
have
a
a
type
type
like
like
text
text
or
or
number,
number
which
which
the
the
browser
browser
will
will
render
render
differently
differently
to
to
collect
collect
the
the
appropriate
appropriate
value.
value
But
but
the
the
element
element
that
that
puts
puts
the
the
hypertext
hypertext
in
in
HTML
html
is
is
the
the
a
a
tag
tag
or
or
anchor.
anchor
It's
it's
a
a
link
link
that
that
allows
allows
one
one
page
page
to
to
navigate
navigate
to
to
a
a
different
different
page
page
based
based
on
on
its
its
URL.
url
These
these
elements
elements
are
are
nested
nested
together
together
in
in
a
a
hierarchy
hierarchy
to
to
form
form
the
the
document
document
object
object
model
model
or
or
DOM.
dom
From
from
the
the
root
root
element,
element
a
a
web
web
page
page
is
is
split
split
into
into
2
2
parts.
parts
The
the
head
head
contains
contains
invisible
invisible
content
content
like
like
metadata
metadata
and
and
a
a
title,
title
then
then
we
we
have
have
the
the
for
for
the
the
main
main
content
content
that
that
the
the
end
end
user
user
actually
actually
sees.
sees
The
the
reason
reason
we
we
wrap
wrap
everything
everything
in
in
tags
tags
is
is
to
to
give
give
browsers
browsers
and
and
bots
bots
hints
hints
about
about
the
the
semantic
semantic
meaning
meaning
of
of
the
the
webpage.
webpage
This
this
allows
allows
search
search
engines
engines
to
to
display
display
results
results
properly
properly
and
and
also
also
helps
helps
with
with
accessibility
accessibility
for
for
devices
devices
like
like
screen
screen
readers
readers
that
that
allow
allow
anybody
anybody
regardless
regardless
list
list
of
of
disability
disability
to
to
enjoy
enjoy
the
the
content.
content
My
my
computer
computer
reads
reads
me
me
the
the
text.
text
Bro,
bro
smash
smash
that
that
like
like
button
button
and
and
subscribe.
subscribe
One
one
of
of
the
the
most
most
common
common
element
element
come
come
across
across
is
is
div
div
or
or
division
division
to
to
define
define
a
a
section
section
of
of
the
the
web
web
page.
page
On
on
its
its
own,
own
a
a
div
div
might
might
not
not
seem
seem
to
to
do
do
anything
anything
and
and
currently
currently
is
is
this
this
plain
plain
black
black
and
and
white
white
website.
website
That
that
begs
begs
the
the
question,
question
how
how
do
do
we
we
make
make
this
this
website
website
look
look
cool?
cool
The
the
second
second
language
language
you'll
you'll
need
need
to
to
learn
learn
as
as
a
a
web
web
developer
developer
is
is
cascading
cascading
style
style
sheets
sheets
or
or
CSS,
css
which
which
allows
allows
you
you
to
to
change
change
the
the
appearance
appearance
of
of
the
the
HTML
html
elements.
elements
One
one
way
way
to
to
accomplish
accomplish
that
that
is
is
with
with
an
an
inline
inline
style
style
using
using
the
the
style
style
attribute
attribute
on
on
an
an
element.
element
The
the
style
style
itself
itself
contains
contains
a
a
collection
collection
of
of
properties
properties
and
and
values
values
that
that
change
change
the
the
appearance
appearance
of
of
the
the
element,
element
like
like
we
we
might
might
make
make
the
the
background
background
color
color
black
black
and
and
the
the
text
text
color
color
red.
red
What
what
we've
we've
created
created
here
here
is
is
an
an
inline
inline
style
style
that
that
will
will
only
only
be
be
applied
applied
to
to
this
this
one
one
element.
element
However,
however
CSS
css
cascades,
cascades
which
which
means
means
it
it
can
can
be
be
applied
applied
to
to
multiple
multiple
elements
elements
at
at
the
the
same
same
time,
time
time,
time
providing
providing
better
better
code
code
reusability.
reusability
Another
another
option
option
is
is
to
to
move
move
our
our
code
code
into
into
a
a
style
style
tag,
tag
but
but
to
to
make
make
the
the
code
code
work,
work
we'll
we'll
first
first
need
need
to
to
define
define
a
a
selector
selector
so
so
it
it
knows
knows
which
which
elements
elements
to
to
target.
target
A
a
selector,
selector
for
for
example,
example
can
can
target
target
all
all
of
of
the
the
paragraph
paragraph
elements
elements
on
on
the
the
page,
page
but
but
that's
that's
too
too
broad.
broad
We
we
can
can
be
be
more
more
granular
granular
by
by
defining
defining
a
a
class.
class
That
that
style
style
can
can
then
then
be
be
applied
applied
to
to
1
1
or
or
more
more
elements
elements
with
with
the
the
class
class
attribute.
attribute
What's
what's
interesting
interesting
though
though
is
is
that
that
we
we
now
now
have
have
classes
classes
that
that
apply
apply
different
different
styles
styles
to
to
the
the
same
same
element.
element
CSS
css
contains
contains
a
a
bunch
bunch
of
of
specificity
specificity
rules
rules
that
that
determine
determine
which
which
styles
styles
are
are
relevant
relevant
to
to
an
an
element
element
in
in
a
a
way
way
that
that
self
self
evident
evident
and
and
elegant
elegant
like
like
a
a
benevolent
benevolent
elephant.
elephant
Most
most
often
often
though,
though
we
we
don't
don't
use
use
style
style
tags,
tags
but
but
instead
instead
use
use
an
an
external
external
style
style
sheet,
sheet
which
which
is
is
linked
linked
to
to
the
the
web
web
page
page
in
in
the
the
head
head
of
of
the
the
document.
document
When
when
it
it
comes
comes
to
to
CSS,
css
by
by
far
far
the
the
most
most
difficult
difficult
thing
thing
to
to
learn
learn
is
is
layout
layout
and
and
a.
a
Think
think
of
of
every
every
element
element
like
like
a
a
box.
box
The
the
outside
outside
of
of
that
that
box
box
is
is
wrapped
wrapped
with
with
padding,
padding
border,
border
and
and
margin.
margin
The
the
boxes
boxes
then
then
take
take
up
up
space
space
on
on
the
the
page
page
from
from
top
top
to
to
bottom.
bottom
Some
some
elements
elements
like
like
heading
heading
have
have
a
a
display
display
of
of
block
block
by
by
default,
default
which
which
means
means
they
they
take
take
up
up
all
all
available
available
horizontal
horizontal
space.
space
Other
other
elements
elements
like
like
image
image
are
are
displayed
displayed
in
in
line,
line
which
which
means
means
they
they
can
can
line
line
up
up
horizontally
horizontally
side
side
side.
side
The
the
problem
problem
is
is
that
that
the
the
default
default
position
position
is
is
usually
usually
not
not
desirable.
desirable
It
it
can
can
be
be
changed
changed
by
by
customizing
customizing
the
the
position
position
property
property
on
on
an
an
element.
element
Relative
relative
positioning
positioning
allows
allows
an
an
element
element
to
to
move
move
a
a
certain
certain
number
number
of
of
pixels
pixels
from
from
its
its
normal
normal
position.
position
Absolute
absolute
positioning
positioning
is
is
similar,
similar
but
but
the
the
position
position
values
values
are
are
relative
relative
to
to
its
its
nearest
nearest
ancestor.
ancestor
And
and
then
then
we
we
have
have
fixed
fixed
positioning,
positioning
which
which
will
will
keep
keep
an
an
element
element
on
on
the
the
screen
screen
even
even
as
as
the
the
user
user
scrolls
scrolls
away
away
from
from
it
it
because
because
it's
it's
fixed
fixed
to
to
the
the
entire
entire
viewport.
viewport
Changing
changing
the
the
position
position
of
of
an
an
element
element
is
is
one
one
thing,
thing
but
but
one
one
of
of
the
the
biggest
biggest
challenges
challenges
web
web
developers
developers
face
face
is
is
creating
creating
responsive
responsive
layouts.
layouts
Users
users
can
can
access
access
your
your
web
web
page
page
from
from
all
all
kinds
kinds
of
of
different
different
screens,
screens
and
and
it
it
should
should
look
look
good
good
on
on
all
all
of
of
them.
them
CSS
css
provides
provides
a
a
bunch
bunch
of
of
different
different
tools
tools
to
to
help
help
make
make
this
this
happen.
happen
One
one
of
of
which
which
is
is
media
media
queries.
queries
A
a
media
media
query
query
allows
allows
you
you
to
to
get
get
information
information
about
about
the
the
device
device
that's
that's
rendering
rendering
the
the
web
web
page
page
and
and
apply
apply
different
different
styles
styles
accordingly.
accordingly
But
but
more
more
importantly,
importantly
it
it
provides
provides
layout
layout
tools
tools
like
like
Flexbox.
flexbox
Applying
applying
display
display
flex
flex
allows
allows
the
the
parents
parents
to
to
control
control
the
the
flow
flow
of
of
the
the
children
children
to
to
easily
easily
create
create
rows
rows
and
and
columns.
columns
For
for
more
more
complex
complex
layouts,
layouts
display
display
grid
grid
can
can
be
be
used
used
to
to
control
control
multiple
multiple
rows
rows
and
and
columns
columns
at
at
the
the
same
same
time.
time
Now,
now
CSS
css
is
is
usually
usually
not
not
considered
considered
a
a
Turing
turing
complete
complete
programming
programming
language
language
on
on
its
its
own.
own
However,
however
it
it
does
does
have
have
mechanisms
mechanisms
like
like
calc,
calc
to
to
perform
perform
mathematical
mathematical
operations,
operations
and
and
custom
custom
properties,
properties
which
which
are
are
like
like
variables
variables
that
that
you
you
can
can
reuse
reuse
in
in
multiple
multiple
places.
places
Vanilla
vanilla
CSS
css
is
is
rarely
rarely
enough
enough
though
though
and
and
many
many
developers
developers
choose
choose
to
to
extend
extend
it
it
with
with
tools
tools
like
like
Sass
sass
that
that
add
add
additional
additional
programmatic
programmatic
features
features
on
on
top
top
of
of
it.
it
And
and
that
that
brings
brings
us
us
to
to
the
the
3rd
3rd
language
language
you'll
you'll
to
to
know
know
as
as
a
a
web
web
developer,
developer
JavaScript.
javascript
Technically,
technically
you
you
don't
don't
need
need
JavaScript
javascript
to
to
build
build
a
a
website.
website
However,
however
most
most
developers
developers
choose
choose
to
to
use
use
it
it
to
to
make
make
the
the
user
user
interface
interface
more
more
active.
active
To
to
run
run
JavaScript
javascript
code
code
on
on
a
a
web
web
page,
page
open
open
up
up
a
a
script
script
tag,
tag
then
then
write
write
some
some
JavaScript
javascript
code
code
inside
inside
of
of
it.
it
The
the
browser
browser
interprets
interprets
the
the
HTML
html
from
from
top
top
to
to
bottom
bottom
and
and
runs
runs
this
this
code
code
when
when
encounters
encounters
it
it
in
in
the
the
DOM.
dom
In
in
most
most
cases,
cases
JavaScript
javascript
is
is
written
written
in
in
a
a
separate
separate
file,
file
then
then
referenced
referenced
as
as
the
the
source
source
on
on
the
the
script
script
tag.
tag
Usually,
usually
it's
it's
preferred
preferred
that
that
this
this
code
code
runs
runs
after
after
the
the
DOM
dom
content
content
has
has
loaded,
loaded
which
which
can
can
be
be
accomplished
accomplished
with
with
the
the
defer
defer
attribute.
attribute
JS
js
is
is
a
a
big
big
complicated
complicated
programming
programming
language,
language
which
which
is
is
more
more
formally
formally
known
known
as
as
ECMAScript
ecmascript
and
and
is
is
standardized
standardized
in
in
all
all
major
major
browsers.
browsers
There
there
are
are
several
several
different
different
ways
ways
to
to
declare
declare
a
a
variable.
variable
A
a
variable
variable
that
that
might
might
be
be
reassigned
reassigned
in
in
the
the
future
future
uses
uses
the
the
let
let
keyword,
keyword
while
while
a
a
variable
variable
that
that
can't
can't
be
be
reassigned
reassigned
uses
uses
const.
const
It's
it's
a
a
dynamically
dynamically
typed
typed
language,
language
which
which
means
means
no
no
type
type
annotations
annotations
are
are
necessary.
necessary
That's
that's
not
not
always
always
ideal,
ideal
so
so
many
many
developers
developers
choose
choose
TypeScript
typescript
as
as
an
an
to
to
add
add
static
static
typing
typing
on
on
top
top
of
of
JavaScript.
javascript
Now,
now
one
one
of
of
the
the
most
most
common
common
reasons
reasons
you
you
would
would
use
use
JavaScript
javascript
in
in
the
the
first
first
place
place
is
is
to
to
handle
handle
events.
events
Whenever
whenever
the
the
user
user
does
does
something
something
on
on
a
a
web
web
page,
page
The
the
browser
browser
emits
emits
an
an
event
event
that
that
you
you
can
can
listen
listen
to,
to
like
like
a
a
click,
click
mouse
mouse
move,
move
form
form
input
input
change,
change
and
and
so
so
on.
on
We
we
can
can
tap
tap
into
into
these
these
events
events
using
using
browser
browser
APIs
apis
like
like
document,
document
which
which
in
in
this
this
case
case
provides
provides
a
a
method
method
called
called
query
query
selector
selector
that
that
allows
allows
us
us
to
to
grab
grab
an
an
element
element
with
with
a
a
CSS
css
selector.
selector
Once
once
we
we
have
have
that
that
element
element
set
set
as
as
a
a
variable,
variable
we
we
can
can
then
then
assign
assign
an
an
event
event
listener
listener
to
to
it.
it
An
an
event
event
listener
listener
is
is
a
a
function
function
that
that
will
will
be
be
called
called
or
or
re
re
executed
executed
anytime
anytime
the
the
button
button
is
is
clicked.
clicked
Language
language
has
has
a
a
variety
variety
of
of
built
built
in
in
data
data
structures
structures
like
like
an
an
array
array
to
to
represent
represent
a
a
collection
collection
of
of
values,
values
but
but
the
the
most
most
fundamental
fundamental
data
data
structure
structure
is
is
the
the
object,
object
also
also
commonly
commonly
called
called
a
a
dictionary
dictionary
or
or
HashMap.
hashmap
Anything
anything
that's
that's
not
not
a
a
primitive
primitive
type,
type
like
like
a
a
string
string
or
or
number,
number
inherits
inherits
its
its
base
base
functionality
functionality
from
from
the
the
object
object
class.
class
It
it
relies
relies
on
on
a
a
technique
technique
called
called
prototype
prototype
1
1
inheritance,
inheritance
where
where
an
an
object
object
can
can
be
be
cloned
cloned
multiple
multiple
times
times
to
to
create
create
a
a
chain
chain
of
of
ancestors
ancestors
where
where
the
the
child
child
inherits
inherits
the
the
properties
properties
and
and
methods
methods
of
of
its
its
ancestors.
ancestors
This
this
is
is
different
different
from
from
class
class
based
based
inheritance,
inheritance
which
which
is
is
kind
kind
of
of
confusing
confusing
because
because
JavaScript
javascript
also
also
supports
supports
classes.
classes
However,
however
these
these
classes
classes
are
are
just
just
syntactic
syntactic
sugar
sugar
for
for
prototypal
prototypal
inheritance,
inheritance
but
but
now
now
we're
we're
a
a
little
little
too
too
low
low
level.
level
Most
most
developers
developers
don't
don't
ever
ever
wanna
wanna
have
have
to
to
touch
touch
the
the
word
word
prototype,
prototype
so
so
what
what
we
we
do
do
instead
instead
is
is
use
use
a
a
front
front
end
end
framework
framework
like
like
React,
react
Vue,
vue
Sysbelt,
sysbelt
Angular,
angular
and
and
so
so
on.
on
All
all
of
of
these
these
frameworks
frameworks
do
do
the
the
same
same
thing
thing
in
in
a
a
slightly
slightly
different
different
way,
way
which
which
is
is
represent
represent
the
the
UI
ui
as
as
a
a
tree
tree
of
of
components.
components
A
a
component
component
can
can
encapsulate
encapsulate
HTML,
html
l
l
css,
css
and
and
JavaScript
javascript
into
into
a
a
format
format
that
that
looks
looks
like
like
its
its
own
own
custom
custom
HTML
html
element.
element
Most
most
importantly,
importantly
they
they
produce
produce
declarative
declarative
code
code
that
that
describes
describes
exactly
exactly
what
what
the
the
UI
ui
does.
does
And
and
that's
that's
much
much
easier
easier
to
to
work
work
with
with
than
than
imperative
imperative
code
code
that
that
you
you
would
would
normally
normally
get
get
with
with
just
just
plain
plain
vanilla
vanilla
JavaScript.
javascript
At
at
this
this
point,
point
we've
we've
taken
taken
a
a
look
look
at
at
the
the
front
front
end
end
stack,
stack
but
but
now
now
we
we
need
need
to
to
switch
switch
gears
gears
to
to
the
the
back
back
starting
starting
with
with
Node
node
JS,
js
which
which
is
is
a
a
server
server
side
side
run
run
time
time
based
based
on
on
JavaScript.
javascript
You
you
can
can
run
run
server
server
side
side
code
code
for
for
web
web
applications
applications
in
in
all
all
kinds
kinds
of
of
different
different
languages,
languages
But
but
Node
node
is
is
the
the
most
most
popular
popular
because
because
it
it
relies
relies
on
on
the
the
same
same
language
language
as
as
the
the
browser.
browser
It's
it's
also
also
based
based
on
on
the
the
same
same
b
b
eight
eight
engine
engine
that
that
powers
powers
the
the
Chromium
chromium
browser
browser
to
to
run
run
code
code
in
in
a
a
single
single
threaded
threaded
non
non
blocking
blocking
event
event
loop.
loop
This
this
allows
allows
Node
node
to
to
handle
handle
many
many
simultaneous
simultaneous
connections
connections
quickly
quickly
and
and
efficiently.
efficiently
In
in
addition,
addition
it
it
allows
allows
developers
developers
to
to
share
share
work
work
remotely
remotely
thanks
thanks
to
to
the
the
Node
node
package
package
manager.
manager
A
a
package
package
is
is
also
also
called
called
a
a
module,
module
which
which
is
is
just
just
a
a
file
file
that
that
contains
contains
some
some
code
code
with
with
an
an
export
export
statement
statement
so
so
it
it
can
can
be
be
used
used
in
in
another
another
file.
file
The
the
file
file
can
can
consume
consume
a
a
module
module
with
with
an
an
import
import
statement,
statement
but
but
now
now
we
we
need
need
to
to
think
think
about
about
how
how
to
to
deliver
deliver
the
the
actual
actual
website
website
from
from
the
the
server
server
to
to
the
the
client.
client
The
the
classic
classic
option
option
is
is
server
server
side
side
rendering.
rendering
In
in
this
this
approach,
approach
the
the
client
client
will
will
make
make
a
a
git
git
request
request
for
for
a
a
certain
certain
URL.
url
Every
every
request
request
has
has
an
an
HTTP
http
method
method
And
and
git
git
means
means
you
you
want
want
to
to
retrieve
retrieve
data
data
from
from
a
a
server,
server
as
as
opposed
opposed
to
to
methods
methods
like
like
post
post
and
and
patch,
patch
where
where
the
the
intent
intent
is
is
to
to
modify
modify
data.
data
The
the
server
server
receives
receives
the
the
request
request
and
and
then
then
generates
generates
all
all
the
the
HTML
html
on
on
the
the
server
server
and
and
sends
sends
it
it
back
back
to
to
the
the
client
client
as
as
a
a
response.
response
The
the
response
response
contains
contains
a
a
status
status
code
code
like
like
200
200
for
for
success
success
or
or
levels
levels
4
4
and
and
500
500
for
for
errors.
errors
For
for
example,
example
if
if
the
the
web
web
page
page
doesn't
doesn't
exist,
exist
the
the
server
server
will
will
return
return
a
a
404
404
status
status
code,
code
which
which
you've
you've
likely
likely
seen
seen
before
before
as
as
a
a
web
web
user.
user
SSR
ssr
is
is
extremely
extremely
popular,
popular
but
but
in
in
some
some
cases,
cases
it
it
may
may
not
not
be
be
fast
fast
enough.
enough
Another
another
approach
approach
is
is
the
the
single
single
page
page
application.
application
With
with
this
this
approach,
approach
the
the
server
server
only
only
renders
renders
a
a
shell
shell
for
for
the
the
root
root
URL,
url
then
then
JavaScript
javascript
handles
handles
the
the
rendering
rendering
for
for
all
all
other
other
pages
pages
on
on
the
the
website.
website
The
the
HTML
html
is
is
a
a
handles
handles
the
the
rendering
rendering
for
for
all
all
other
other
pages
pages
on
on
the
the
website.
website
The
the
HTML
html
is
is
generated
generated
almost
almost
entirely
entirely
client
client
side
side
in
in
the
the
browser,
browser
making
making
the
the
website
website
feel
feel
more
more
like
like
a
a
native
native
iOS
ios
or
or
Android
android
app.
app
When
when
the
the
app
app
needs
needs
more
more
data,
data
it
it
still
still
makes
makes
an
an
HTTP
http
request,
request
but
but
only
only
requests
requests
a
a
minimal
minimal
amount
amount
of
of
data
data
as
as
JSON,
json
which
which
is
is
called
called
a
a
data
data
interchange
interchange
format
format
that
that
can
can
be
be
understood
understood
by
by
any
any
programming
programming
language.
language
This
this
can
can
result
result
in
in
a
a
great
great
user
user
experience.
experience
However,
however
it
it
can
can
be
be
very
very
difficult
difficult
for
for
bots,
bots
like
like
search
search
engines
engines
and
and
social
social
media
media
link
link
previews,
previews
to
to
understand
understand
content
content
on
on
the
the
page.
page
This
this
led
led
to
to
another
another
rendering
rendering
strategy
strategy
called
called
static
static
site
site
generation.
generation
In
in
this
this
case,
case
every
every
web
web
page
page
on
on
the
the
site
site
is
is
uploaded
uploaded
to
to
a
a
server
server
in
in
advance,
advance
allowing
allowing
bots
bots
to
to
get
get
the
the
information
information
they
they
need.
need
A
a
front
front
end
end
JavaScript
javascript
framework
framework
usually
usually
takes
takes
over
over
to
to
hydrate
hydrate
the
the
HTML
html
to
to
make
make
it
it
fully
fully
interactive
interactive
and
and
behave
behave
like
like
a
a
single
single
page
page
application.
application
Performance
performance
is
is
extremely
extremely
important,
important
and
and
you'll
you'll
wanna
wanna
use
use
tools
tools
like
like
Lighthouse
lighthouse
to
to
optimize
optimize
metrics
metrics
like
like
First
first
Contentful
contentful
Paint
paint
and
and
Time
time
to
to
Interactive.
interactive
Now
now
to
to
implement
implement
one
one
of
of
these
these
patterns,
patterns
most
most
developers
developers
will
will
use
use
a
a
full
full
stack
stack
framework
framework
like
like
Next.
next
Js,
js
Ruby
ruby
on
on
Rails,
rails
Laravel,
laravel
and
and
so
so
on.
on
They
they
abstract
abstract
away
away
many
many
of
of
the
the
more
more
tedious
tedious
things
things
developers
developers
don't
don't
wanna
wanna
deal
deal
with.
with
One
one
of
of
which
which
is
is
module
module
bundlers,
bundlers
which
which
are
are
tools
tools
like
like
webpack
webpack
and
and
Vite
vite
that
that
take
take
all
all
of
of
your
your
JavaScript,
javascript
CSS,
css
and
and
HTML,
html
and
and
package
package
it
it
in
in
a
a
way
way
that
that
can
can
actually
actually
work
work
in
in
a
a
browser.
browser
They
they
might
might
also
also
provide
provide
a
a
linter
linter
like
like
ESLint
eslint
to
to
warn
warn
you
you
when
when
your
your
code
code
doesn't
doesn't
follow
follow
the
the
proper
proper
style
style
guidelines.
guidelines
Oh,
oh
and
and
I
i
almost
almost
forgot,
forgot
you
you
are
are
definitely
definitely
going
going
to
to
need
need
a
a
database
database
to
to
build
build
a
a
full
full
stack
stack
web
web
application
application
because
because
you
you
need
need
somewhere
somewhere
to
to
store
store
your
your
data,
data
like
like
data
data
about
about
your
your
users.
users
But
but
in
in
order
order
to
to
get
get
that
that
data,
data
You'll
you'll
need
need
to
to
give
give
users
users
a
a
way
way
to
to
log
log
in
in
via
via
a
a
process
process
called
called
user
user
authentication.
authentication
Now
now
before
before
you
you
deploy
deploy
your
your
code,
code
you'll
you'll
need
need
to
to
test
test
it
it
with
with
a
a
web
web
server.
server
There
there
are
are
tools
tools
like
like
Nginx
nginx
and
and
Apache
apache
to
to
create
create
HTTP
http
server,
server
but
but
your
your
framework
framework
will
will
likely
likely
do
do
this
this
for
for
you
you
by
by
serving
serving
the
the
files
files
on
on
local
local
host,
host
which
which
makes
makes
your
your
own
own
IP
ip
address
address
behave
behave
like
like
a
a
remote
remote
web
web
server.
server
When
when
it
it
comes
comes
time
time
to
to
deploy,
deploy
you'll
you'll
likely
likely
use
use
a
a
big
big
cloud
cloud
provider
provider
like
like
AWS.
aws
Most
most
apps
apps
are
are
containerized
containerized
with
with
Docker,
docker
making
making
them
them
easy
easy
to
to
scale
scale
up
up
and
and
down
down
based
based
on
on
the
the
amount
amount
of
of
traffic
traffic
that
that
they
they
receive.
receive
There
there
are
are
many
many
tools
tools
out
out
there
there
that
that
function
function
as
as
a
a
platform
platform
as
as
a
a
service
service
to
to
manage
manage
this
this
infrastructure
infrastructure
for
for
you
you
in
in
exchange
exchange
for
for
your
your
money.
money
Or
or
if
if
you
you
don't
don't
want
want
to
to
get
get
locked
locked
in
in
with
with
giant
giant
tech
tech
corporation,
corporation
you
you
might
might
host
host
your
your
app
app
on
on
a
a
decentralized
decentralized
blockchain
blockchain
with
with
Web
web
3,
3
and
and
that's
that's
about
about
1%
1%
of
of
what
what
you'll
you'll
need
need
to
to
know
know
to
to
call
call
yourself
yourself
self
self
a
a
full
full
stack
stack
web
web
developer.
developer
If
if
that
that
seems
seems
overwhelming,
overwhelming
don't
don't
worry
worry
too
too
much.
much
Almost
almost
nobody
nobody
knows
knows
what
what
the
the
hell
hell
they're
they're
doing,
doing
and
and
we
we
all
all
just
just
use
use
Google
google
to
to
figure
figure
things
things
out
out
on
on
the
the
fly.
fly
Congratulations.
congratulations
You
you
just
just
passed
passed
web
web
development
development
101.
101
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The internet is a collection of machines connected together and connects everything from mail to web pages. The web is made up of websites and components, including hypertext transfer protocols, and can be broken into a bunch of packets. Different ways to create websites, including front end frameworks, are discussed, including building responsive and efficient websites, using multiple front end frameworks, and using variables and variables in JavaScript. Different ways to create websites, including using frameworks like HTML, Lign file, and using component rendering, are also discussed, along with the importance of testing and optimizing metrics before deploying code. A database for a full stack web application is recommended, and a user login process for data management is also mentioned.
100+ Web Development Things you Should Know
Web development is the best job in the world. You build on a platform with nearly 5,000,000,000 daily active users, all connected together like the neurons of a global super intelligent brain. A system that can cure disease, eliminate poverty, advance science and stuff like that, but mostly it's used to share memes, create parasocial relationships, amplify drama, and most importantly, make tons tons and tons of money. If you wanna get into it, you're gonna need to know some stuff, like a lot of stuff. In web development 101, we'll take a look at a 101 different concepts that you'll need to know when building full stack web apps. This is the Internet. It's a network of billions of machines connected together. Wait. What do you write to it like mail? No. A lot of people use it and communicate it. I guess they can communicate with NBC writers and producers. Allison, can you explain what Internet is? It was officially born on January 1st 1983. Thanks to the establishment of the Internet protocol suite, which standardize the way these computers communicate. The Internet protocol is used to identify different computers on the network by assigning each one of them a unique IP address. These computers can then send data back and forth with the transmission control protocol. It breaks data into a bunch of small packets kind of like puzzle pieces, then sends them through a bunch of physical components like fiber optic cables and modems before they're put back together by the receiving computer. You can think of the Internet as hardware, but the Internet is not the same thing as the web. The world wide web is like software that sits on top of the Internet where people can access web pages with the hypertext transfer protocol. What's special about it is that it gives every page of content a uniform resource locator or URL. Humans typically use a tool called a web browser to access a URL where it can be rendered visually on their screen. The browser is called the client because it's consuming information, but on the other end of that URL, there's another computer called a server. It received an HTTP request from the client, then sent a response containing the web page content. These are called HTTP messages, but more on that later. What's interesting is that every web page has a unique domain name, like fireship.iooreexample.com. A domain name can be registered by anyone via a registrar who's accredited by ICANN, a nonprofit responsible for overseeing namespaces on the Internet. When you navigate to a domain in a browser, it It's routed through the domain name system that maps these names to an actual IP address on a server somewhere. DNS is like the phone book of the Internet. Now when you look at a web page, the A content you see is represented by hypertext markup language. Most browsers have dev tools where you can inspect the structure of the HTML at any time. To build your own web page, you'll want a text editor like v s code. An HTML document is just a collection of elements, where an element is an opening and closing tag with some content in the middle, like a paragraph and heading. It also has elements that handle user input, like the select and input elements, which are used to build forms. In addition, elements can have 1 or more attributes to change their behavior. For example, an input can have a type like text or number, which the browser will render differently to collect the appropriate value. But the element that puts the hypertext in HTML is the a tag or anchor. It's a link that allows one page to navigate to a different page based on its URL. These elements are nested together in a hierarchy to form the document object model or DOM. From the root element, a web page is split into 2 parts. The head contains invisible content like metadata and a title, then we have the for the main content that the end user actually sees. The reason we wrap everything in tags is to give browsers and bots hints about the semantic meaning of the webpage. This allows search engines to display results properly and also helps with accessibility for devices like screen readers that allow anybody regardless list of disability to enjoy the content. My computer reads me the text. Bro, smash that like button and subscribe. One of the most common element come across is div or division to define a section of the web page. On its own, a div might not seem to do anything and currently is this plain black and white website. That begs the question, how do we make this website look cool? The second language you'll need to learn as a web developer is cascading style sheets or CSS, which allows you to change the appearance of the HTML elements. One way to accomplish that is with an inline style using the style attribute on an element. The style itself contains a collection of properties and values that change the appearance of the element, like we might make the background color black and the text color red. What we've created here is an inline style that will only be applied to this one element. However, CSS cascades, which means it can be applied to multiple elements at the same time, time, providing better code reusability. Another option is to move our code into a style tag, but to make the code work, we'll first need to define a selector so it knows which elements to target. A selector, for example, can target all of the paragraph elements on the page, but that's too broad. We can be more granular by defining a class. That style can then be applied to 1 or more elements with the class attribute. What's interesting though is that we now have classes that apply different styles to the same element. CSS contains a bunch of specificity rules that determine which styles are relevant to an element in a way that self evident and elegant like a benevolent elephant. Most often though, we don't use style tags, but instead use an external style sheet, which is linked to the web page in the head of the document. When it comes to CSS, by far the most difficult thing to learn is layout and a. Think of every element like a box. The outside of that box is wrapped with padding, border, and margin. The boxes then take up space on the page from top to bottom. Some elements like heading have a display of block by default, which means they take up all available horizontal space. Other elements like image are displayed in line, which means they can line up horizontally side side. The problem is that the default position is usually not desirable. It can be changed by customizing the position property on an element. Relative positioning allows an element to move a certain number of pixels from its normal position. Absolute positioning is similar, but the position values are relative to its nearest ancestor. And then we have fixed positioning, which will keep an element on the screen even as the user scrolls away from it because it's fixed to the entire viewport. Changing the position of an element is one thing, but one of the biggest challenges web developers face is creating responsive layouts. Users can access your web page from all kinds of different screens, and it should look good on all of them. CSS provides a bunch of different tools to help make this happen. One of which is media queries. A media query allows you to get information about the device that's rendering the web page and apply different styles accordingly. But more importantly, it provides layout tools like Flexbox. Applying display flex allows the parents to control the flow of the children to easily create rows and columns. For more complex layouts, display grid can be used to control multiple rows and columns at the same time. Now, CSS is usually not considered a Turing complete programming language on its own. However, it does have mechanisms like calc, to perform mathematical operations, and custom properties, which are like variables that you can reuse in multiple places. Vanilla CSS is rarely enough though and many developers choose to extend it with tools like Sass that add additional programmatic features on top of it. And that brings us to the 3rd language you'll to know as a web developer, JavaScript. Technically, you don't need JavaScript to build a website. However, most developers choose to use it to make the user interface more active. To run JavaScript code on a web page, open up a script tag, then write some JavaScript code inside of it. The browser interprets the HTML from top to bottom and runs this code when encounters it in the DOM. In most cases, JavaScript is written in a separate file, then referenced as the source on the script tag. Usually, it's preferred that this code runs after the DOM content has loaded, which can be accomplished with the defer attribute. JS is a big complicated programming language, which is more formally known as ECMAScript and is standardized in all major browsers. There are several different ways to declare a variable. A variable that might be reassigned in the future uses the let keyword, while a variable that can't be reassigned uses const. It's a dynamically typed language, which means no type annotations are necessary. That's not always ideal, so many developers choose TypeScript as an to add static typing on top of JavaScript. Now, one of the most common reasons you would use JavaScript in the first place is to handle events. Whenever the user does something on a web page, The browser emits an event that you can listen to, like a click, mouse move, form input change, and so on. We can tap into these events using browser APIs like document, which in this case provides a method called query selector that allows us to grab an element with a CSS selector. Once we have that element set as a variable, we can then assign an event listener to it. An event listener is a function that will be called or re executed anytime the button is clicked. Language has a variety of built in data structures like an array to represent a collection of values, but the most fundamental data structure is the object, also commonly called a dictionary or HashMap. Anything that's not a primitive type, like a string or number, inherits its base functionality from the object class. It relies on a technique called prototype 1 inheritance, where an object can be cloned multiple times to create a chain of ancestors where the child inherits the properties and methods of its ancestors. This is different from class based inheritance, which is kind of confusing because JavaScript also supports classes. However, these classes are just syntactic sugar for prototypal inheritance, but now we're a little too low level. Most developers don't ever wanna have to touch the word prototype, so what we do instead is use a front end framework like React, Vue, Sysbelt, Angular, and so on. All of these frameworks do the same thing in a slightly different way, which is represent the UI as a tree of components. A component can encapsulate HTML, l css, and JavaScript into a format that looks like its own custom HTML element. Most importantly, they produce declarative code that describes exactly what the UI does. And that's much easier to work with than imperative code that you would normally get with just plain vanilla JavaScript. At this point, we've taken a look at the front end stack, but now we need to switch gears to the back starting with Node JS, which is a server side run time based on JavaScript. You can run server side code for web applications in all kinds of different languages, But Node is the most popular because it relies on the same language as the browser. It's also based on the same b eight engine that powers the Chromium browser to run code in a single threaded non blocking event loop. This allows Node to handle many simultaneous connections quickly and efficiently. In addition, it allows developers to share work remotely thanks to the Node package manager. A package is also called a module, which is just a file that contains some code with an export statement so it can be used in another file. The file can consume a module with an import statement, but now we need to think about how to deliver the actual website from the server to the client. The classic option is server side rendering. In this approach, the client will make a git request for a certain URL. Every request has an HTTP method And git means you want to retrieve data from a server, as opposed to methods like post and patch, where the intent is to modify data. The server receives the request and then generates all the HTML on the server and sends it back to the client as a response. The response contains a status code like 200 for success or levels 4 and 500 for errors. For example, if the web page doesn't exist, the server will return a 404 status code, which you've likely seen before as a web user. SSR is extremely popular, but in some cases, it may not be fast enough. Another approach is the single page application. With this approach, the server only renders a shell for the root URL, then JavaScript handles the rendering for all other pages on the website. The HTML is a handles the rendering for all other pages on the website. The HTML is generated almost entirely client side in the browser, making the website feel more like a native iOS or Android app. When the app needs more data, it still makes an HTTP request, but only requests a minimal amount of data as JSON, which is called a data interchange format that can be understood by any programming language. This can result in a great user experience. However, it can be very difficult for bots, like search engines and social media link previews, to understand content on the page. This led to another rendering strategy called static site generation. In this case, every web page on the site is uploaded to a server in advance, allowing bots to get the information they need. A front end JavaScript framework usually takes over to hydrate the HTML to make it fully interactive and behave like a single page application. Performance is extremely important, and you'll wanna use tools like Lighthouse to optimize metrics like First Contentful Paint and Time to Interactive. Now to implement one of these patterns, most developers will use a full stack framework like Next. Js, Ruby on Rails, Laravel, and so on. They abstract away many of the more tedious things developers don't wanna deal with. One of which is module bundlers, which are tools like webpack and Vite that take all of your JavaScript, CSS, and HTML, and package it in a way that can actually work in a browser. They might also provide a linter like ESLint to warn you when your code doesn't follow the proper style guidelines. Oh, and I almost forgot, you are definitely going to need a database to build a full stack web application because you need somewhere to store your data, like data about your users. But in order to get that data, You'll need to give users a way to log in via a process called user authentication. Now before you deploy your code, you'll need to test it with a web server. There are tools like Nginx and Apache to create HTTP server, but your framework will likely do this for you by serving the files on local host, which makes your own IP address behave like a remote web server. When it comes time to deploy, you'll likely use a big cloud provider like AWS. Most apps are containerized with Docker, making them easy to scale up and down based on the amount of traffic that they receive. There are many tools out there that function as a platform as a service to manage this infrastructure for you in exchange for your money. Or if you don't want to get locked in with giant tech corporation, you might host your app on a decentralized blockchain with Web 3, and that's about 1% of what you'll need to know to call yourself self a full stack web developer. If that seems overwhelming, don't worry too much. Almost nobody knows what the hell they're doing, and we all just use Google to figure things out on the fly. Congratulations. You just passed web development 101. Thanks for watching, and I will see you in the next one.
The internet is a collection of machines connected together and connects everything from mail to web pages. The web is made up of websites and components, including hypertext transfer protocols, and can be broken into a bunch of packets. Different ways to create websites, including front end frameworks, are discussed, including building responsive and efficient websites, using multiple front end frameworks, and using variables and variables in JavaScript. Different ways to create websites, including using frameworks like HTML, Lign file, and using component rendering, are also discussed, along with the importance of testing and optimizing metrics before deploying code. A database for a full stack web application is recommended, and a user login process for data management is also mentioned.