00:00:00
web development is the best job in the
00:00:01
world you build on a platform with
00:00:03
nearly 5 billion daily active users all
00:00:05
connected together like the neurons of a
00:00:07
global super intelligent brain A system
00:00:09
that can cure disease eliminate poverty
00:00:11
Advance science and stuff like that but
00:00:13
mostly it's used to share memes create
00:00:15
parasocial relationships amplify drama
00:00:17
and most importantly make tons and tons
00:00:19
of money if you want to get into it
00:00:21
you're going to need to know some stuff
00:00:22
like a lot of stuff in web development
00:00:24
101 we'll take a look at 10 101
00:00:26
different concepts that you'll need to
00:00:27
know when building full stack web apps
00:00:30
this is the Internet it's a network of
00:00:31
billions of machines connected together
00:00:34
what do you write to it like mail no a
00:00:36
lot of people use it and communicate I
00:00:37
guess they can communicate with NBC
00:00:39
writers and producers Allison can you
00:00:41
explain what internet is it was
00:00:42
officially born on January 1st 1983
00:00:45
thanks to the establishment of the
00:00:46
Internet Protocol Suite which
00:00:48
standardized the way these computers
00:00:50
communicate the Internet Protocol is
00:00:51
used to identify different computers on
00:00:53
the network by assigning each one of
00:00:55
them a unique IP address these computers
00:00:57
can then send data back and forth with
00:00:59
the transmission control protocol it
00:01:01
breaks data into a bunch of small
00:01:03
packets kind of like puzzle pieces then
00:01:04
sends them through a bunch of physical
00:01:06
components like fiber optic cables and
00:01:08
modems before they're put back together
00:01:09
by the receiving computer you can think
00:01:11
of the internet as Hardware but the
00:01:13
internet is not the same thing as the
00:01:15
web the worldwide web is like software
00:01:17
that sits on top of the internet where
00:01:19
people can access web pages with the
00:01:21
hypertext transfer protocol what's
00:01:23
special about it is that it gives every
00:01:24
page of content a uniform resource
00:01:27
locator or URL humans typically use a
00:01:29
tool tool called a web browser to access
00:01:31
a URL where it can be rendered visually
00:01:33
on their screen the browser is called
00:01:35
the client because it's consuming
00:01:37
information but on the other end of that
00:01:39
URL there's another computer called a
00:01:41
server it received an HTTP request from
00:01:43
the client then sent a response
00:01:45
containing the webpage content these are
00:01:47
called HTTP messages but more on that
00:01:49
later what's interesting is that every
00:01:51
web page has a unique domain name like
00:01:53
fireship doio or example.com a domain
00:01:56
name can be registered by anyone via a
00:01:58
registar whose accredit by ican a
00:02:00
nonprofit responsible for overseeing
00:02:03
name spaces on the internet when you
00:02:04
navigate to a domain in a browser it
00:02:06
gets routed through the domain name
00:02:08
system that Maps these names to an
00:02:09
actual IP address on a server somewhere
00:02:11
DNS is like the phone book of the
00:02:13
internet now when you look at a web page
00:02:15
the actual content you see is
00:02:17
represented by hypertext markup language
00:02:19
most browsers have Dev tools where you
00:02:21
can inspect the structure of the HTML at
00:02:23
any time to build your own web page
00:02:25
you'll want a text editor like vs code
00:02:27
an HTML document is just a collect of
00:02:30
elements where an element is an opening
00:02:32
and closing tag with some content in the
00:02:34
middle like a paragraph and heading it
00:02:36
also has elements that handle user input
00:02:38
like the select and input Elements which
00:02:40
are used to build forms in addition
00:02:42
elements can have one or more attributes
00:02:44
to change their behavior for example an
00:02:46
input can have a type like text or
00:02:48
number which the browser will render
00:02:50
differently to collect the appropriate
00:02:51
value but the element that puts the
00:02:53
hyper text in HTML is the a tag or
00:02:56
anchor it's a link that allows one page
00:02:58
to navigate to to a different page based
00:03:00
on its URL these elements are nested
00:03:03
together in a hierarchy to form the
00:03:04
document object model or Dom from the
00:03:07
root element a web page is split into
00:03:09
two parts the head contains invisible
00:03:11
content like metadata and a title then
00:03:13
we have the body for the main content
00:03:15
that the end user actually sees the
00:03:17
reason we wrap everything in tags is to
00:03:18
give browsers and Bots hints about the
00:03:20
semantic meaning of the web page this
00:03:22
allows search engines to display results
00:03:24
properly and also helps with
00:03:26
accessibility for devices like screen
00:03:28
readers that allow anybody regardless of
00:03:30
disability to enjoy the content my
00:03:32
computer reads me the text Bro smash
00:03:34
that like button and subscribe one of
00:03:36
the most common elements you'll come
00:03:37
across is div or division to define a
00:03:40
section of the web page on its own a div
00:03:42
might not seem to do anything and
00:03:44
currently produces this plain black and
00:03:45
white website that begs the question how
00:03:47
do we make this website look cool the
00:03:49
second language you'll need to learn as
00:03:50
a web developer is cascading stylesheets
00:03:53
or css which allows you to change the
00:03:55
appearance of the HTML elements one way
00:03:57
to accomplish that is with an inline
00:03:59
Style using the style attribute on an
00:04:01
element the style itself contains a
00:04:03
collection of properties and values that
00:04:05
change the appearance of the element
00:04:07
like we might make the background color
00:04:08
black and the text color red what we've
00:04:10
created here is an inline style that
00:04:12
will only be applied to this one element
00:04:14
however CSS Cascades which means it can
00:04:16
be applied to multiple elements at the
00:04:18
same time providing better code
00:04:20
reusability another option is to move
00:04:22
our code into a style tag but to make
00:04:24
the code work we'll first need to define
00:04:25
a selector so it knows which elements to
00:04:28
Target a selector for example can Target
00:04:30
all of the paragraph elements on the
00:04:32
page but that's too broad we can be more
00:04:34
granular by defining a class that style
00:04:36
can then be applied to one or more
00:04:38
elements with the class attribute what's
00:04:40
interesting though is that we now have
00:04:41
classes that apply different styles to
00:04:43
the same element CSS contains a bunch of
00:04:45
specificity rules that determine which
00:04:47
styles are relevant to an element in a
00:04:49
way that's self-evident and elegant like
00:04:51
a benevolent elephant most often though
00:04:53
we don't use style tags but instead use
00:04:55
an external style sheet which is linked
00:04:57
to the web page in the head of the
00:04:58
document when it comes to CS
00:05:00
by far the most difficult thing to learn
00:05:01
is layout and positioning think of every
00:05:03
element like a box the outside of that
00:05:06
box is wrapped with padding border and
00:05:08
margin the boxes then take up space on
00:05:10
the page from top to bottom some
00:05:11
elements like heading have a display of
00:05:13
block by default which means they take
00:05:15
up all available horizontal space other
00:05:18
elements like image are displayed in
00:05:19
line which means they can line up
00:05:21
horizontally side by side the problem is
00:05:23
that the default position is usually not
00:05:25
desirable it can be changed by
00:05:27
customizing the position property on an
00:05:28
element relative positioning allows an
00:05:31
element to move a certain number of
00:05:32
pixels from its normal position absolute
00:05:35
positioning is similar but the position
00:05:37
values are relative to its nearest
00:05:39
ancestor and then we have fixed
00:05:40
positioning which will keep an element
00:05:42
on the screen even as the user Scrolls
00:05:44
away from it because it's fixed to the
00:05:45
entire viewport changing the position of
00:05:47
an element is one thing but one of the
00:05:49
biggest challenges web developers face
00:05:51
is creating responsive layouts users can
00:05:53
access your web page from all kinds of
00:05:55
different screens and it should look
00:05:56
good on all of them CSS provides a bunch
00:05:58
of different tools to to help make this
00:06:00
happen one of which is Media queries a
00:06:02
media query allows you to get
00:06:04
information about the device that's
00:06:05
rendering the web page and apply
00:06:07
different styles accordingly but more
00:06:09
importantly it provides layout tools
00:06:11
like flexbox applying display Flex
00:06:13
allows the parent to control the flow of
00:06:15
the children to easily create rows and
00:06:17
columns for more complex layouts display
00:06:19
grid can be used to control multiple
00:06:21
rows and columns at the same time now
00:06:23
CSS is usually not considered a turing
00:06:25
complete programming language on its own
00:06:27
however it does have mechanisms like Cal
00:06:29
to perform mathematical operations and
00:06:32
custom properties which are like
00:06:33
variables that you can reuse in multiple
00:06:35
places vanilla CSS is rarely enough
00:06:38
though and many developers choose to
00:06:39
extend it with tools like SAS that add
00:06:41
additional programmatic features on top
00:06:43
of it and that brings us to the third
00:06:44
language you'll need to know as a web
00:06:46
developer JavaScript technically you
00:06:48
don't need JavaScript to build a website
00:06:50
however most developers choose to use it
00:06:51
to make the user interface more
00:06:53
interactive to run JavaScript code on a
00:06:55
web page open up a script tag then write
00:06:57
some JavaScript code inside of it the
00:06:59
browser interprets the HTML from top to
00:07:01
bottom and runs this code when it
00:07:02
encounters it in the Dom in most cases
00:07:04
JavaScript is written in a separate file
00:07:06
then referenced as the source on the
00:07:08
script tag usually it's preferred that
00:07:10
this code runs after the Dom content has
00:07:11
loaded which can be accomplished with
00:07:13
the defer attribute JS is a big
00:07:15
complicated programming language which
00:07:17
is more formally known as ecmascript and
00:07:19
is standardized in all major browsers
00:07:21
there are several different ways to
00:07:22
declare a variable a variable that might
00:07:24
be reassigned in the future uses the let
00:07:26
keyword while a variable that can't be
00:07:28
reassigned uses con it's a dynamically
00:07:30
typed language which means no type
00:07:32
annotations are necessary that's not
00:07:34
always ideal so many developers choose
00:07:35
typescript as an alternative to add
00:07:37
static typing on top of JavaScript now
00:07:39
one of the most common reasons you would
00:07:41
use JavaScript in the first place is to
00:07:43
handle events whenever the user does
00:07:44
something on a web page the browser
00:07:46
emits an event that you can listen to
00:07:48
like a click Mouse move form input
00:07:51
change and so on we can tap into these
00:07:53
events using browser apis like document
00:07:55
which in this case provides a method
00:07:57
called query selector that allows us to
00:07:58
grab an element El with a CSS selector
00:08:01
once we have that element set as a
00:08:02
variable we can then assign an event
00:08:04
listener to it an event listener is a
00:08:06
function that will be called or
00:08:08
re-executed anytime the button is
00:08:10
clicked the language has a variety of
00:08:12
built-in data structures like an array
00:08:14
to represent a collection of values but
00:08:16
the most fundamental data structure is
00:08:18
the object also commonly called a
00:08:20
dictionary or hashmap anything that's
00:08:22
not a primitive type like a string or
00:08:23
number inherits its base functionality
00:08:25
from the object class it relies on a
00:08:28
technique called prototypal inheritance
00:08:30
where an object can be cloned multiple
00:08:31
times to create a chain of ancestors
00:08:34
where the child inherits the properties
00:08:35
and methods of its ancestors this is
00:08:37
different from class-based inheritance
00:08:39
which is kind of confusing because
00:08:41
JavaScript also supports classes however
00:08:43
these classes are just syntactic sugar
00:08:45
for prototypal inheritance but now we're
00:08:47
getting a little too low level most
00:08:49
developers don't ever want to have to
00:08:50
touch the word prototype so what we do
00:08:52
instead is use a front-end framework
00:08:54
like react view spelt angular and so on
00:08:56
all of these Frameworks do the same
00:08:58
thing in a slightly different way which
00:08:59
is represent the UI as a tree of
00:09:01
components a component can encapsulate
00:09:03
HTML CSS and JavaScript into a format
00:09:06
that looks like its own custom HTML
00:09:08
element most importantly they produce
00:09:10
declarative code that describes exactly
00:09:12
what the UI does and that's much easier
00:09:14
to work with than imperative code that
00:09:16
you would normally get with just plain
00:09:17
vanilla JavaScript at this point we've
00:09:19
taken a look at the front end stack but
00:09:21
now we need to switch gears to the back
00:09:22
end starting with node.js which is a
00:09:25
serers side runtime based on JavaScript
00:09:27
you can run serers side code for web
00:09:28
applications and all kinds of different
00:09:30
languages but node is the most popular
00:09:32
because it relies on the same language
00:09:33
as the browser it's also based on the
00:09:35
same V8 engine that powers the Chromium
00:09:37
browser to run code in a single-threaded
00:09:39
non-blocking event Loop this allows node
00:09:41
to handle many simultaneous connections
00:09:43
quickly and efficiently in addition it
00:09:45
allows developers to share work remotely
00:09:48
thanks to the node package manager a
00:09:49
package is also called a module which is
00:09:52
just a file that contains some code with
00:09:54
an export statement so it can be used in
00:09:56
another file the file can consume a
00:09:58
module with an import statement but now
00:10:00
we need to think about how to deliver
00:10:02
the actual website from the server to
00:10:04
the client the classic option is serers
00:10:06
side rendering in this approach the
00:10:08
client will make a get request for a
00:10:10
certain URL every request has an HTTP
00:10:13
method and git means you want to
00:10:15
retrieve data from a server as opposed
00:10:17
to methods like post and Patch where the
00:10:19
intent is to modify data the server
00:10:21
receives the request and then generates
00:10:23
all the HTML on the server and sends it
00:10:25
back to the client as a response the
00:10:27
response contains a status code like 200
00:10:29
for success or levels 4 and 500 for
00:10:32
errors for example if the web page
00:10:34
doesn't exist the server will return a
00:10:36
404 status code which you've likely seen
00:10:38
before as a web user SSR is extremely
00:10:41
popular but in some cases it may not be
00:10:43
fast enough another approach is the
00:10:45
single page application with this
00:10:47
approach the server only renders a shell
00:10:49
for the root URL then JavaScript handles
00:10:51
the rendering for all other pages on the
00:10:53
website the HTML is generated almost
00:10:55
entirely client side in the browser
00:10:57
making the website feel more like a
00:10:59
native iOS or Android app when the app
00:11:01
needs more data it still makes an HTTP
00:11:03
request but only requests a minimal
00:11:05
amount of data as Json which is called a
00:11:08
data interchange format that can be
00:11:09
understood by any programming language
00:11:11
this can result in a great user
00:11:13
experience however it can be very
00:11:15
difficult for Bots like search engines
00:11:17
and social media link previews to
00:11:19
understand content on the page this led
00:11:21
to another rendering strategy called
00:11:22
Static site generation in this case
00:11:24
every web page on the site is uploaded
00:11:26
to a server in advance allowing Bots to
00:11:29
get the information they need a frontend
00:11:30
JavaScript framework usually takes over
00:11:32
to hydrate the HTML to make it fully
00:11:34
interactive and behave like a single
00:11:37
page application performance is
00:11:38
extremely important and you'll want to
00:11:39
use tools like Lighthouse to optimize
00:11:41
metrics like first contentful paint and
00:11:43
time to interactive now to implement one
00:11:45
of these patterns most developers will
00:11:47
use a full stack framework like nextjs
00:11:49
Ruby on Rails laravel and so on they
00:11:52
abstract away many of the more tedious
00:11:54
things developers don't want to deal
00:11:55
with one of which is module bundlers
00:11:57
which are tools like webpack and that
00:11:59
take all of your JavaScript CSS and HTML
00:12:02
and package it in a way that can
00:12:03
actually work in a browser they might
00:12:05
also provide a linter like es lint to
00:12:07
warn you when your code doesn't follow
00:12:09
the proper Style Guidelines oh and I
00:12:10
almost forgot you are definitely going
00:12:12
to need a database to build a full stack
00:12:14
web application because you need
00:12:15
somewhere to store your data like data
00:12:17
about your users but in order to get
00:12:19
that data you'll need to give users a
00:12:21
way to log in Via a process called user
00:12:23
authentication now before you deploy
00:12:25
your code you'll need to test it with a
00:12:27
web server there are tools like engine X
00:12:28
and A pchy to create an HTTP server but
00:12:31
your framework will likely do this for
00:12:33
you by serving the files on Local Host
00:12:35
which makes your own IP address behave
00:12:36
like a remote web server when it comes
00:12:38
time to deploy you'll likely use a big
00:12:40
cloud provider like AWS most apps are
00:12:42
containerized with Docker making them
00:12:44
easy to scale Up and Down based on the
00:12:46
amount of traffic that they receive
00:12:48
there are many tools out there that
00:12:49
function as a platform as a service to
00:12:52
manage this infrastructure for you in
00:12:53
exchange for your money or if you don't
00:12:55
want to get locked in with a giant Tech
00:12:57
Corporation you might host your app on a
00:12:58
decent calized blockchain with web 3 and
00:13:01
that's about 1% of what you'll need to
00:13:02
know to call yourself a full stack web
00:13:04
developer if that seems overwhelming
00:13:06
don't worry too much almost nobody knows
00:13:08
what the hell they're doing and we all
00:13:09
just use Google to figure things out on
00:13:11
the Fly congratulations you just passed
00:13:13
web development 101 thanks for watching
00:13:16
and I will see you in the next one
