YT YouTube2Text

YouTube2Text → Transcripts → The Real Web Developer Roadmap: Part 1 💻🚀 | How to become a Web Developer

The Real Web Developer Roadmap: Part 1 💻🚀 | How to become a Web Developer — Transcript

by Zero To Mastery · 10,588 words · 1,510 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00hello everyone my name is Andre in this
0:03video we're gonna be talking about the
0:05real web developer roadmap now there's a
0:09ton of videos out there about how to
0:11become a web developer what should you
0:13learn here are all the skills that you
0:15need to learn now how is this any
0:17different well I'm gonna be doing the
0:20same thing but along the way I actually
0:22want to teach you some principles as
0:25well as really show the entire landscape
0:28and in order for me to do that I created
0:31well
0:33jean-claude the octopus and you're
0:35thinking to yourself Andre
0:38octopuses have eight legs well let's not
0:42get into the details here the web
0:44development landscape is pretty big so
0:47had to make more than eight legs and
0:49this is Jean Claude's friend little
0:51Timmy now this landscape and this web
0:55development path has a lot of
0:57information we are gonna talk about
0:59react we're gonna talk about all the
1:02front end that we're going to talk about
1:04hosting cloud testing sea icd even
1:07webassembly we're gonna talk about
1:09back-end and data bases and looking at
1:12this I know you're thinking wow that's
1:15really overwhelming do I really need to
1:18learn all this stuff and the truth of
1:22the matter is known now really now what
1:25I'm going to show you in this roadmap is
1:28to cover the current landscape so that
1:31you know what's out there you know how
1:33things are connected so that you know
1:36how each of them relate to one another
1:39but also hoping that you will actually
1:41learn something instead of just
1:43overwhelm you with all the choices and
1:45for that I've actually created little
1:48rockets for you so as I talk about the
1:50landscape you'll see that some items are
1:53gonna have rockets which signify that
1:55you should probably learn them because
1:57they're super important other things
1:59don't have rockets and are more for you
2:02to understand that they exist so that
2:04one day when you need them you can go
2:06read up and learn about it on your own
2:08now the goal of this roadmap is to
2:12actually gay
2:13you to a point where you can get a job
2:15as a web developer because at the end of
2:18the day all the YouTube videos all the
2:21tutorials all the coding boot camps that
2:23you do don't really teach you as much as
2:25real-life experience the best way to
2:28learn is to actually work in teams for a
2:31company day-to-day on the job and
2:34getting paid doing that doesn't sound
2:36bad either so I'm going to be focusing
2:39on what is going to get you a job in
2:42this current year now
2:45the next question you might have is who
2:47are you why should I even listen to you
2:50well this is my face right here
2:53I'm Andre and I've worked as a software
2:58engineer for numerous years I've worked
3:00in Toronto and Silicon Valley but I've
3:02also spent the last two years teaching
3:05over 200,000 students how to cope some
3:09of them are graduates of computer
3:11science degrees some of them are
3:12completely self-taught programmers but
3:16all of them want to learn to code to
3:19become great web developers and some of
3:22them even work at some pretty nice
3:23companies but I also write a monthly
3:27newsletter a web developer monthly
3:30newsletter where every month I recap
3:33exactly what happens in our industry any
3:36news any resources any changes so I have
3:39to stay up-to-date with the industry so
3:41this is my job my job is to stay current
3:44with the web development trends so
3:47that's why I think I'm qualified to talk
3:50about the subject with that set I want
3:53to warn you and this is something that
3:54is just general advice what I'm going to
3:58talk about in this web developer roadmap
4:00are just my opinions and I will simplify
4:04some things I will make recommendations
4:06based on my experience and my opinion
4:10that doesn't mean that you should follow
4:12it a hundred percent if anybody tells
4:15you their way is the only way they're
4:17probably lying to you so use this video
4:20as a reference as if I'm your friend and
4:24I'm just giving you my advice
4:27on why you should learn from there do
4:29your own research and figure out the
4:31path that best suits you for example
4:34when we talk about the front end well
4:37maybe you'll decide that you want to
4:38become a front-end developer or maybe
4:41you think hmm I don't think I like that
4:42but what interests me is to be a
4:45back-end developer or work with
4:47databases or even work with mobile the
4:51choice is up to you so once again decide
4:54for yourself what you want to take away
4:57from this video now the reason I created
5:00this diagram is that I was a self-taught
5:03programmer as well you know I remember
5:06when I got started it was really
5:08overwhelming it seemed like you have to
5:10learn so many things and I mean looking
5:12at this diagram well it's a lot of
5:15things but I never knew how things are
5:17connected how is one related to another
5:20what does know do what does phb do what
5:23does Python do you how does it fit into
5:25this whole landscape so being a
5:28self-taught programmer I always found it
5:31useful to connect the dots to make sure
5:33I understood how each one is related to
5:35the other but enough talk I think you're
5:39getting excited so let's start diving
5:41into what the web development landscape
5:44looks like in the current year so the
5:48very first thing you want to do if you
5:49want to become a web developer is to
5:51start with the basic fundamentals now at
5:55the end of the day web pages are just
5:57data that we try and show to a user and
6:02that user can interact with it usually
6:05submitting forms like sending a tweet or
6:08posting an Instagram picture well when
6:12it comes to the basic fundamentals
6:13there's a few things that we want to
6:14learn but the biggest thing is to
6:16understand that the Internet at the end
6:18of the day is all just a bunch of wires
6:20and these are real wires that are
6:22connecting everyone around the world
6:24with Internet and the way we view web
6:29pages well we have a browser and this
6:34browser sends a request to a computer
6:37somewhere in the world called a server
6:39and
6:40as hey can you give me some data some
6:43information maybe you want to Google how
6:45to make delicious chicken soup
6:47and the server says yep no problem here
6:51you can have this data and the way it
6:55sends this data is through a protocol
6:58called HTTP or HTTPS and it usually
7:02sends these three files that's right
7:04they're just files CSS HTML and
7:06JavaScript but we'll get to that in a
7:09bit the job of a web developer is to
7:13write these files these HTML CSS and
7:17JavaScript files so that we can display
7:20information to the user so the first
7:23step is to learn about editors and I des
7:29these are text editors and developer
7:32environments that allow us to write what
7:35we call code for example the most
7:38popular one is visual studio code I
7:40personally like sublime text but there's
7:43many many choices and as you can see all
7:46they do they let you write code but at
7:50the end of the day there's just text
7:51that you're writing on a file except
7:54that they give you these nice color
7:56syntax and give you hints so that you
8:00can write code better so once you learn
8:02about IDE editors it doesn't really
8:06matter what you pick just pick probably
8:08visual studio code because it's the most
8:10popular and from there you can start
8:12writing your HTML CSS and JavaScript
8:14files you want to learn about git and
8:17github nothing too crazy here you may
8:19have heard of it but it's a way for
8:21programmers to save code online and
8:24essentially have a social profile of all
8:27the code that they've written next you
8:30also want to learn about terminal
8:32partial command prompt for example I
8:35have my terminal right here a terminal
8:39or what we call a command line is simply
8:42a way for you to communicate with your
8:44computer without using a mouse like this
8:48it's a text-based way to work with your
8:51computer now why does a web developer
8:54need to know that well beyond looking
8:56cool like you know what you're doing it
8:58also allows you to do a lot of important
9:00things as a programmer for example git
9:02and github well with the way you use git
9:05is through something like a terminal now
9:08if you're a Windows user you use
9:10something like PowerShell or command
9:12prompt but Windows also now has a
9:15terminal that you can use which looks
9:18kind of like this or you can even do
9:21something like wsl - which is Windows
9:24subsystem for linux to run linux like
9:27immense but we're getting ahead of
9:28ourselves
9:29let's not worry too much about that so
9:31now that you have your IDE set up your
9:33github profile set up you have your
9:36terminal set up you then want to learn
9:39about what are these domain name servers
9:42domain name servers are well you may
9:45have heard of them
9:46something like GoDaddy or Namecheap
9:48allow you to buy a domain name for
9:51example I bought zero to mastery i/o and
9:55I bought it on name cheap domain name
9:58servers are ways for us to say hey zero
10:03to mastery IO where is that computer
10:06remember this diagram with a DNS server
10:09we want to say where is this computer in
10:11the world so that I can get these files
10:13to the browser for example I can run a
10:17command on my terminal called ping
10:18google.com and here look I get a little
10:23number over here so if I copy this
10:25number which is called an IP address and
10:27I paste it in look at that it takes me
10:31to google.com a DNS server essentially
10:34says hey this number points to a
10:37computer somewhere in the world and
10:38figure out what name is associated with
10:42this number this address and well this
10:45one happens to be google.com so zero to
10:48mastery IO is also going to have an
10:51address so once we learn about that then
10:54you should learn a little bit about
10:57something called FTP and SFTP or File
11:00Transfer Protocol and back in the day if
11:03let's say you wanted to become a
11:05wordpress developer well WordPress which
11:09is a very popular tool for creating
11:11blogs you usually what you do is you'd
11:14buy a domain name sign up for WordPress
11:17and then you use something like
11:19Hostgator to host your files so remember
11:24our diagram Hostgator was something
11:26where they provided the computer for you
11:29and you just give it the files that you
11:32want this computer to serve to the user
11:35now WordPress
11:37went even further and took care of this
11:39whole JavaScript HTML and CSS so even if
11:42you don't know how to program well
11:43they'll just help you as long as you
11:45write a bunch of blog posts they'll help
11:47you display and send that information to
11:50the user but if you wanted to get a lot
11:53more fancy and you wanted to write your
11:55own HTML CSS and JavaScript files like
11:58we have on this website well then you
12:01can use something like FTP SFTP to
12:05transfer your files of HTML CSS and
12:09JavaScript to that server somewhere in
12:11the world well you can use a tool like
12:13cyberduck if you're on a Mac which looks
12:17like this I just drag and drop some
12:18files and it puts those files on a
12:20server for me or something like
12:23FileZilla if you're on Windows next you
12:25want to learn a little bit about HTTP
12:28HTTP this is essentially the way that
12:30browsers communicate with servers if I
12:33click over here you see that I'm using
12:35HTTP S stands for secure which means
12:38that see that little lock it means that
12:40this communication with the server is
12:41secure so maybe I can even submit
12:43passwords or my user information over
12:48our internet cables and it'll be secure
12:51technically then you want to learn about
12:53JSON XML and G RPC now G RPC is
12:58something new maybe you don't need to
13:00know about it but it's good to
13:01understand what it does this JSON and
13:05XML g RPC if we take a look kind of
13:08looks like this it's the way that we
13:09transfer data from servers to clients
13:12for example JSON if I wanted to send ID
13:14of 42 well this is what it look like
13:18XML looks like this and G are PC which
13:22technically uses protobufs sends data
13:25like this this different way to send
13:28data across the web and then finally you
13:31might want to learn about SSH SSH is
13:34really really important for you as a web
13:37developer mainly for working with github
13:40for example if you go to github to one
13:44of your repositories you can usually
13:45clone the code using SSH or HTTPS
13:51but you can also use SSH to actually log
13:55in to a server somewhere or a computer
13:57somewhere for example I can use the
13:59command SSH in my terminal to say some
14:02user at this IP address go and log in
14:04there and he'll probably ask me for a
14:06password so SSH is really really
14:09important but at the end of the day when
14:11we talk about basic fundamentals that's
14:13what we're doing right we are just
14:16learning how the internet works how
14:19servers send files to browsers how does
14:24Google send their JavaScript HTML and
14:27CSS files to Google Chrome or Firefox or
14:32Safari so that myself as a user can see
14:36what is happening
14:39now don't spend too much time on these
14:41things these are just fundamentals for
14:44you to understand how things work
14:46instead of going and writing HTML CSS
14:50and JavaScript code without really
14:52understanding what you're doing or what
14:55all this magic is these fundamentals are
14:57gonna help you understand how things
15:00work why do we have things like git and
15:02github but you also work with all of
15:05these throughout your web development
15:07career so you don't need to understand
15:09them perfectly one final thing the next
15:13thing that you want to focus on or
15:14understand are something called web AP
15:17us you see web api's are essentially
15:21tools that browsers give us for example
15:25we have Google Chrome and Google Chrome
15:27has little things that we can use so
15:31that we can make websites for example
15:33the Dom or the document object model
15:36allows us to use JavaScript to modify
15:39different things around the page things
15:41like fetch and xhr by the way fetch is a
15:45more modern newer version of xhr allows
15:49us to fetch or retrieve data from other
15:52websites we have things like local
15:54storage to save user information for
15:57example let's say you log in to a
15:59website and then you come back to it and
16:01you're still logged in it might use
16:03something like local storage or
16:05something like serviceworkers where it
16:07allows you to do some interesting thing
16:09called caching and also allows us to do
16:12something called progressive web apps
16:13which we're going to talk about later
16:15and then we have things like
16:17internationalization so that websites
16:19can display different languages these
16:22web api are provided by the browser and
16:26using javascript you can usually use
16:29these tools and use JavaScript to say
16:31hey fetch me some data
16:34hey modify this Dom so that the webpage
16:37looks different and oh boy I've been
16:40talking a lot and it already seems
16:43overwhelming and I got some bad news for
16:46you all this stuff that I just talked
16:47about isn't going to get you a job I
16:50know I know not
16:52to waste your time but you have to
16:54understand that to really know what's
16:56going on you want to focus on these
16:58fundamentals and build that foundation
17:01but once you just on the surface
17:04understand what these basic things do
17:07and like I said you don't need to dive
17:09deep into it you can then go on to the
17:12fun part and that is the front end right
17:16here now don't worry we'll go back to
17:19advanced fundamentals later on but I
17:22recommend instead of going into advanced
17:24which won't mean much if you don't have
17:26a bit of experience we're gonna dive
17:28into the front end and this is the path
17:30that I recommend if you want to become a
17:32web developer whether you are not
17:34interested in front-end or not it's good
17:36to understand the landscape because the
17:38front-end landscape well it's a big one
17:44I promise you I won't talk too long
17:46we'll fly through this one but it's a
17:49pretty big step so let's take a look at
17:51front end that's what you might call a
17:54front end developer in the front end
17:57developer well they work with this side
18:01of the stack they're the ones that say
18:03hey what should I display on the website
18:07let's go have a look
18:09alright let's talk about front-end we
18:13talked about the fundamentals but you
18:14shouldn't really spend too much time on
18:16the fundamentals because like I said it
18:19doesn't help you get a job just
18:21understand them at the basic level what
18:23they mean but then move on to the
18:25front-end and this is where things get
18:28interesting if you want the fastest way
18:30to get a job I recommend starting with
18:33the front end now the front end is what
18:38the user sees your web app your web page
18:42is worked on by front-end developers
18:44sometimes they're called JavaScript
18:46developers sometimes they're called
18:47react angular View developers we're
18:50gonna get into that but it's a long road
18:52ahead so let's talk about what you
18:54should learn to be a modern front-end
18:56developer now I'm going to keep saying
18:59this over and over but don't get
19:01overwhelmed when you see all these
19:03topics and you think to yourself there's
19:05no way I'm going to get there the road
19:07ahead is just so long there's no way
19:10that I'm qualified or able to ever
19:12become a web developer remember the
19:15harder a skill is the more valuable a
19:17skill is the less people that are
19:20willing to take that path so use this to
19:23your advantage the fact that there is so
19:25much to learn allows you to have a
19:27chance to get a valuable skill to do
19:30something that people pay a lot of money
19:32for so with that said I've tried to make
19:34this section easy for you to follow so
19:37that if you want you can just focus on
19:40the little Rockets over here and those
19:43are the big topics that you really want
19:45to focus on in the smaller stuff you
19:47don't necessarily have to worry too much
19:48about because remember the goal is to
19:50get a job so that you can get experience
19:53as soon as possible all right let's get
19:55started first you want to learn about
19:58HTML specifically html5 which is the
20:01latest specification remember it's a
20:04file that displays text hTML is simply
20:08hey what text should I display on this
20:12web page or a web app and that's it it
20:15was the initial way that the web started
20:17the web started with just HTML files
20:19that allowed universities to communicate
20:23and
20:23share text with each other and there are
20:26a lot of things you can do with HTML
20:28before introducing JavaScript for
20:30example you can do forms and submitting
20:33forms like usernames and passwords and
20:36at the end of the day most websites that
20:38we use are just forms right on Facebook
20:42we submit a form to post something on
20:45our newsfeed on Instagram we post a
20:47picture we submit a form on Twitter we
20:49tweet something by submitting a form now
20:52when it comes to HTML it's all just
20:55these tags that we can use to describe
20:58what our webpage should display now
21:01there's a ton of them but you don't need
21:03to really memorize all of them you just
21:06need to remember the important ones and
21:08then you want to dive into topics like
21:10semantic HTML that literally means how
21:13can you describe your HTML file the best
21:16for example you can use something like
21:19article to say hey this section has an
21:23article
21:23hey this section has address this is the
21:27footer of the website semantic simply
21:29means describe to the best of your
21:31ability using the tags or the HTML
21:34element tags what your website displays
21:38you also want to dabble a little bit in
21:41SEO that is search engine optimization
21:43essentially HTML tags and the text that
21:47are within them allow places like Google
21:51to rank your websites and say oh this
21:54website is about chicken soup so I'm
21:56going to rank it in my databases so that
21:59when a user searches for his chicken
22:01soup your website's going to show up and
22:03HTML has a big impact on SEO again
22:06something on the surface that you need
22:07to know but you don't really need to
22:09dive that deeply you want to learn about
22:11accessibility that is how can we make
22:14web pages and web apps accessible to
22:17everybody not everybody maybe can view
22:20websites and they need a visual aid or
22:22they need a screen reader to understand
22:25what a website does it's very important
22:27for us to consider everybody when
22:29building web apps and web pages and then
22:32obviously forms there's a lot you can do
22:34when it comes to HTML and forms
22:36before we even introduced JavaScript but
22:39HTML forms is a really important part of
22:42the web now keep in mind that when it
22:45comes to HTML it's really easy to start
22:48going one by one and learning every
22:50single element which is a complete waste
22:52of time
22:53just focus on though important ones that
22:55you see a lot of like div but then you
22:57have things like tables in HTML that
23:00honestly barely anybody ever uses
23:03anymore
23:03next we want to dive into CSS or css3
23:08which is the latest specification now
23:11CSS is what style does your web app or
23:16web page should have does it have pretty
23:18colors does it look yellow green all the
23:21nice-looking websites use CSS to make
23:23them look nice now when it comes to CSS
23:26the important things to keep in mind
23:29especially for modern websites are these
23:33four things you can do animations with
23:36CSS now so you want to look at CSS
23:38animations you can do something called
23:40CSS variables now which is a fairly new
23:43feature and CSS variables allow us to do
23:46something cool like black or dark and
23:49white theme on websites just using
23:51variables you want to learn about the
23:55difference between Ram p.m. and pixels
23:58and this allows you to define the size
24:01of an element on a page for example we
24:04want to start using Ram which is a
24:06relative size so that our websites
24:09become more responsive and
24:11mobile-friendly than if we just use
24:13pixels so it's recommended to start
24:15using Ram for let's say your font sizes
24:19then you want to learn about media
24:21queries media queries are the things
24:23that allow our websites to be displayed
24:26on different screens everybody checks
24:29out a website on their computer their
24:31phone all these different screen sizes
24:34and modern web apps need to be
24:36responsive for example if I change the
24:39size of this this should be responsive
24:42write media queries allow us to do this
24:46now there's a ton of CSS features that
24:50you can learn and again just like HTML
24:52you don't want to spend too much time
24:53learning every single one reading it one
24:56by one CSS is one of those things that
24:58you just search and understand and read
25:01up on as the need arises a lot of the
25:05times you can go to your favorite web
25:06site and just simply open up the
25:09developer console inspect it and see
25:12what kind of CSS that your favorite
25:16element uses now the one thing that is
25:20important with CSS and probably the
25:22hardest part to get especially when
25:24you're starting out is something called
25:26CSS layout and CSS layout is all about
25:31where should we position elements or
25:33components on our website now luckily
25:36for us the modern CSS has two really
25:39good tools that we didn't used to have
25:41before that is flexbox and CSS grid and
25:45using these two you can pretty much do
25:47any sort of layout that you want and as
25:50a matter of fact if you use flexbox and
25:52CSS grid properly you actually might not
25:55even need media queries or a lot less
25:58media queries than we were used to
26:01and if you want to learn flexbox or CSS
26:04grid I actually have a resources page on
26:06my website where you can play fun games
26:09like flexbox defense flexbox froggy or
26:13grid garden to learn how to do layout
26:17with CSS now the other parts of CSS that
26:20you might want to focus on is something
26:22like the box model how margins and
26:25padding work to make those minor
26:27adjustments you want to learn about
26:29positioning display and floats these
26:32three things are ways to display and
26:35position elements but a lot of them like
26:39floats are now outdated and using
26:41flexbox and CSS grid is preferred which
26:43is why these two have rockets you should
26:46definitely learn these you also have
26:48options like bootstrap you see bootstrap
26:51was really popular back in the day
26:52because of the grid system it had it
26:54allowed us to do layouts really really
26:57easy before we have things like flexbox
27:00and CSS great bootstrap now it is still
27:03popular but less so because we have
27:05these two things so yeah just focus on
27:07these two for layout now the next thing
27:09is pre-processors and pre-processors are
27:13essentially ways for us to write a
27:15souped-up or a superset of CSS that
27:21allows us to have extra features and
27:23then they get pre processed into regular
27:27CSS and the most popular one and the one
27:30that you probably should stick with is
27:31sass there's obviously post CSS and les
27:34as well but sass is the most popular
27:36right now and sass pretty much looks
27:38like this you can see over here that
27:40instead of the regular CSS you can have
27:43some extra features that you're you
27:45don't have and then before you publish
27:48your website you can just convert it or
27:50pre process it into CSS so this turns
27:55into this now don't worry too much about
27:59sass I've actually never fully studied
28:02sass whenever it comes up it's similar
28:04enough to CSS that you can learn it on
28:06the spot you can probably spend a day
28:09and just learn the different features
28:11between sass and CSS but think of it as
28:14a way for you
28:15to have superpowers with CSS once you're
28:18done with that then you want to think
28:20about organizing your CSS one problem
28:23that will constantly see throughout this
28:25web developer roadmap is that as
28:27projects get bigger and bigger it
28:29becomes harder and harder to manage and
28:31a lot of these tools help us not to
28:34build really small tiny one-page
28:36websites they helped us build really big
28:38web apps like Facebook that have so many
28:41features and organizing CSS is one of
28:45those things when your CSS file becomes
28:47not just one file but hundreds and
28:49thousands of files how do you manage it
28:51now these sort of problems seem kind of
28:55hard unless you actually experience them
28:57in your head why not just put all your
29:00CSS into one file it keeps things simple
29:03but it's hard to really understand the
29:05problem until you encounter it but trust
29:07me on this as things get bigger and
29:09bigger you need tools to manage them and
29:11some of the tools to manage or organize
29:13your CSS is something like smacks or I
29:17think it is scalable modular
29:20architecture CSS OCS which is object
29:23oriented CSS them which is actually have
29:26it here because I forgot what it was
29:27what was it it's a block element
29:29modifier all these difficult names that
29:32essentially just are ways for you to
29:34organize CSS to be honest they are a
29:37little bit outdated I'm personally a big
29:40fan of something like atomic CSS which
29:43is a lot more scalable a lot easier to
29:46understand and tools like tell when CSS
29:48which we'll talk about later use there's
29:51also a special CSS nsj way of organizing
29:55styles and this is a more modern way
29:58that was introduced with something we'll
30:01talk about later which is react this is
30:04the idea that hey instead of writing CSS
30:06the regular way let's just write it
30:08inside of JavaScript and then whatever
30:11tool or library we'll use we'll just
30:14apply those Styles automatically so
30:17Facebook that pioneered the CSS and J's
30:20mentality has its own implementation
30:22there's CSS modules there's something
30:24called style components that's really
30:25popular with react projects and also
30:28emotions
30:29as well now you don't need to worry too
30:32much about this unless you really want
30:34to dive into being something like a
30:36reactive Alper which we'll get into for
30:38now just focus on atomic CSS and that is
30:41just using really neat libraries like
30:44tailwind CSS and you can see here you
30:48just add CSS like this or my favorite is
30:51tachyons whoo that's a lot and the last
30:55part of CSS is the frameworks and
30:57libraries that come with it
30:59now frameworks and libraries are
31:02infinite there's so many you can create
31:04a library you can create a framework
31:05essentially they're helpers instead of
31:08all of us all developers all designers
31:10writing CSS from scratch maybe we can
31:14share some of the nice things for
31:17example I might really like this button
31:20it would be nice if dan over here shared
31:23this with me so I can use it on my
31:24website well in a sense frameworks and
31:28libraries are that a way for us to use
31:31tools that are already pre-built for us
31:33when it comes to CSS we have things like
31:36foundation like bootstrap like boma like
31:39materialized CSS like tell when CSS that
31:42give us pre-built
31:44Styles so for example one of the popular
31:48tools is tailwind CSS that's becoming
31:51really popular this days allows us to
31:54have all this styling just by writing a
31:58few lines that would have required a lot
32:00more lines in the past and one of the
32:03things that they have is they have the
32:05new tailwind UI so you can actually use
32:08UI components that is user interface
32:11components and just put them on your
32:13website remember how I wanted this
32:15button on my website
32:17well these libraries and frameworks
32:19allow us to just plug and play and add
32:21these nice styles and components to our
32:24website but for now you don't really
32:26need to specialize in them just
32:28understand that they exist and if you
32:30ever want to build your own project I
32:31recommend maybe using tailwind or even
32:34going with something like Bomar and
32:35bootstrap
32:37now I'm going to disappoint you once
32:40again because we talked about the
32:42fundamentals we talked about HTML and
32:44CSS and let's say you mastered all these
32:46three things well you probably still
32:49won't get a job as a web developer as a
32:51matter of fact you won't really
32:53encounter these topics in your interview
32:55most of the time because now we're
32:57getting to the exciting part when it
32:59comes to front-end the principle skill
33:03the main skill that you really need to
33:04know is JavaScript
33:07that's why front-end developers are
33:09usually called JavaScript developers or
33:10react developers or angular developers
33:13because HTML and CSS although not easy
33:17are things that you can usually pick up
33:20fairly quick the key for you is not to
33:23spend too much time on HTML and CSS and
33:26instead dive into the JavaScript world
33:28because as you build websites as you
33:31build the web apps you're going to keep
33:33learning about HTML and CSS but the
33:35thing that's really hard the thing that
33:37makes you valuable is your JavaScript
33:40knowledge so let's get started with that
33:42now javascript allows interactivity in
33:46our web sites back in the day web pages
33:49were just that just pages with text then
33:52we had CSS so we can add some styling
33:54but then JavaScript came along and said
33:56hey let's play games on the web let's
33:59have drop-down menus let's have
34:02interactivity and JavaScript controls
34:04the behavior or what the web page does
34:07beyond just displaying information now
34:10to get started with JavaScript you
34:13definitely need to understand the
34:15fundamentals things like ACMA script
34:18which is the specification of JavaScript
34:21that is there's a governing body that
34:22says hey this is what JavaScript should
34:25look like this is what JavaScript code
34:27is you want to learn about asynchronous
34:29JavaScript there's this thing called
34:31synchronous and asynchronous and the
34:34idea of asynchronous allows us to do
34:37some really interesting things when it
34:38comes to performance especially when it
34:41comes to the web you obviously need to
34:43know the basics and the basics are
34:45things that all programming languages
34:46usually have whether it's Python PA
34:50P Ruby Java all these languages usually
34:54have some ideas of loops conditionals
34:57functions maybe classes these are the
35:00basic things the building blocks of a
35:02programming language that allow us to
35:04tell a computer what to do you then want
35:07to learn a little bit about opie versus
35:09FP what is that
35:11well it's object-oriented programming
35:13versus functional programming now this
35:17is more of a design idea as programs get
35:20more and more complicated we need to
35:22organize our code we need to make our
35:24code cleaner or easier to understand
35:27because most of the time were not the
35:29only ones working on a project we are
35:31working with tens hundreds sometimes
35:34thousands of other programmers and
35:36sharing hundreds thousands of files and
35:39object-oriented programming and
35:41functional programming allow us to
35:43create clean maintainable code
35:46hypothetically these are more high-level
35:48ideas but it's really important to
35:51understand what the differences are this
35:54is a bit of an advanced topic that will
35:55take some time getting used to but it's
35:57good to know that they exist then you
36:00want to learn about Dom manipulation and
36:02web api s-- now remembering the
36:04fundamentals where is it hold on let's
36:08zoom out here there it is remember in
36:10the fundamentals how I said we have
36:12these things called web api s-- and one
36:15of them is the done well browsers like
36:17Chrome Safari and Firefox allow us to
36:21manipulate the Dom or the way our page
36:24looks using javascript
36:26so using these web api switch are
36:29essentially tools that browsers give us
36:31we can use JavaScript to manipulate and
36:34change these things for example you want
36:36to do a drop-down menu
36:38well JavaScript can do that well you
36:40want to have sparkles and glitter every
36:42time you scroll through your website
36:44well in JavaScript can do that too and
36:46this is probably the biggest thing when
36:49it comes to the web javascript
36:50essentially allows us to change things
36:53on the page and a lot of the libraries
36:56and frameworks we talked about are doing
36:58exactly this then we want to learn about
37:00modules and especially the es6 modules
37:03and this is a neck mascara cific a ssin
37:06that well we're now way into yes what 11
37:10yes 12 because every year the language
37:13evolves and a deaths so javascript is
37:16constantly evolving new features are
37:18being added and one of the most
37:19important ones is this idea of modules
37:22modules and programming is all about
37:24what happens when we have more than one
37:27file javascript was initially a toy
37:30language a language that we could just
37:31have one single file of and do funny
37:34things or simple things on a website but
37:37as javascript got bigger and bigger as
37:39we got bigger and bigger websites like
37:41Google Maps like Facebook we couldn't
37:44just keep all JavaScript into one page
37:46and this idea of modules was introduced
37:49natively to JavaScript with the es6
37:52modules this allows us to have hundreds
37:55of JavaScript files and all of them we
37:58can use on a single weather so
38:01definitely learn about this and the
38:04history of modules when it comes to
38:06JavaScript because it's an interesting
38:08one all right and before we get into
38:11everybody's favorite topic frameworks
38:13libraries let's talk about these ones
38:15you see I've added them here because
38:18these are all compilers what does that
38:24mean well a compiler is simply taking
38:27one language like let's say typescript
38:31compile it and spits out another
38:34language in this case JavaScript and all
38:37of these
38:38typescript svelte elm reason ml babel
38:41are ways to write a specific program
38:45using something similar to javascript
38:48but not really but then spit out
38:50javascript it's similar to what we saw
38:53in the CSS the preprocessors right with
38:56sass what they do is essentially let you
38:59write a superset like typescript of
39:02javascript that gives javascript extra
39:04feature in this case static typing we
39:07have things like svelte
39:08you write in a custom spelt way and it
39:11spits out Raghava script and then
39:13functional languages like Elm and reason
39:15ml that against better
39:17javascript or things like Babel that
39:19allows to write modern JavaScript with
39:21some new features and spit out
39:23JavaScript all of these are compilers
39:26sometimes called transpilers that give
39:28javascript superpowers for those people
39:31that want it but still at the end of the
39:33day spit out javascript because on the
39:35web you can only use javascript well
39:38kind of we'll get to that later in the
39:39video all right so we have that we have
39:44the fundamentals next we want to go into
39:46frameworks and libraries and this is a
39:49big one that's everyone's favorite topic
39:51everywhere you go on the web you'll see
39:53articles like this and yes I did it to
39:55react versus angular versus view what's
39:58your favorite what's the best one now
40:01this is such a big field that one of the
40:03hottest jobs for the past couple years
40:05has been a reactive Albert that's right
40:09just being a professional developer
40:12means learning this one library or one
40:15framework you'll see jobs like react
40:18developer angular developer view j/s
40:21developer all of these are ways for us
40:23to write JavaScript but in a more clean
40:27way just like we saw with CSS as
40:29projects get bigger and bigger it's nice
40:32to have some sort of a kitchen that we
40:35can work in that already have pre-built
40:37tools just like we did with CSS now all
40:40of these at the end of the day do what
40:44javascript does which is to Dom
40:46manipulation and work with api's now
40:49this current year react is still
40:51dominant it's the number one if you
40:53really want to get into it I show you
40:55here exactly what the numbers are react
40:57is pretty dominant still there's two
41:01angular's here because oh there was
41:03originally angularjs and then they did a
41:05big rewrite and now there's the angular
41:08which is the more modern one that is
41:10starting to die down a bit there's still
41:12a lot of enterprise applications that
41:13run on angular but not too many new
41:16applications or not too many people
41:18excited about angular sorry if I
41:20offended you just my personal opinion
41:22and then we have things like Vijay s
41:24which are newer and a lot simpler to
41:28learn than something like angular and
41:31but very very popular still and then
41:33things like jQuery jQuery was there
41:36before all these libraries existed and
41:38they essentially allowed really simple
41:41Dom manipulation and was one of the most
41:45popular libraries that's now starting to
41:47die down a bit just because all these
41:49frameworks have come in and they're a
41:50lot more popular and then we have things
41:53like elm and svelte and I put both of
41:55these together because elm and spelt
41:57remember are actually just compilers
41:59they just take your JavaScript code and
42:01convert it into regular JavaScript and
42:03there's just different ways for us to
42:05write JavaScript code and then finally I
42:08also want to talk about Redwood Jas this
42:11is actually a fairly new library but
42:14this is a high level library what does
42:17that mean well because apps are getting
42:21more and more complicated react code
42:22angular code view code is getting more
42:24and more complicated
42:26something like Redwood Jas has come out
42:29that has a lot of tools built in for
42:33example routing for example cells and
42:35services
42:36there's just easy ways for us to create
42:38forms to do things at a higher level so
42:41again you can think of it as how react
42:44is a super skill or a framework library
42:47that we can use with JavaScript redwood
42:49stays on top of that so it uses react
42:52but it has extra features already built
42:55in now right now the two that I would
42:58recommend if you really want to focus on
43:00job is probably react and view maybe
43:03angular as well but my bed is on react
43:05still even though it's a little harder
43:08to get started it's still the number one
43:10way that you're probably gonna find a
43:12job as a web developer so definitely
43:14recommend react as a matter of fact I
43:16recommend react so much that timmy is
43:18all about react remember Timmy the
43:21friend of jean-claude the octopus well
43:25Timmy's an octopus too and yes doesn't
43:27have a legs either but let's not worry
43:30about that now react sixteen is actually
43:34the version of react if you go to the
43:37react documentation you can see the
43:39current version here react version 16
43:42entry
43:43used a lot of new things a lot of
43:45updates so as a modern react developer
43:49you really need to know these newer
43:51features for example profiler for
43:54checking out your react performance
43:57context API react a memo for
43:59memorization and performance portal for
44:02building modal's and pop-ups react lazy
44:05again for performance suspense fragments
44:08the async act for testing something
44:11called hooks which is really really
44:13popular right now for us to build
44:15components in a newer way and also
44:17manage something called state and the
44:20new concurrent mode which essentially
44:22just allows our react apps to be faster
44:25all of these are fairly new features
44:27that you should be aware of again
44:30don't have to master them too much but
44:32you should be aware of if you are a
44:35react developer now we can't talk about
44:38these frameworks and libraries without
44:40talking about state management what is
44:42that well at the end of the day what all
44:45these tools do is use JavaScript to
44:49display something on the page right they
44:51manipulate the DOM and display something
44:53on the page but at the end of the day
44:55what we display on the page is data rate
44:59and state management is all about how do
45:02we manage this data when I sign into a
45:04website
45:05my name is going to appear as a logged
45:08in user
45:09but then when I sign out that state that
45:12data changes and as apps get bigger and
45:15bigger
45:15you can't just manage your state just
45:18with these libraries sometimes you have
45:20to bring in specific libraries that help
45:22you with state management for example
45:24view has view acts angular has ng rx
45:30which uses something called observables
45:32and then react has many many things you
45:36can get into huge debates with react
45:38state management the most popular one is
45:40Redux that's my favorite too there's
45:42also context API which if you remember a
45:44little Timmy that's actually part of
45:46react for smaller scale state that you
45:49need to manage or you might have mob X
45:52which again uses observable pattern or
45:55something more
45:57that has a lot of hype around a witch is
45:59using a polo client which has something
46:02called graph QL uses graph QL which
46:04we'll get into in to the backend section
46:07so all these options are there again the
46:09ones that I recommend is really learning
46:11Redux because it does teach really solid
46:14computer science principles and also a
46:17little bit of Apollo and graph QL just
46:19because it's very trendy right now but
46:21don't dive too deep into it until you
46:23use it on a project your own really need
46:25to know every single detail then we have
46:28something called component libraries the
46:31beauty is that with all these tools
46:33there's component libraries that you can
46:36use for example react has a large
46:39community of developers that have
46:41already built components you want a date
46:43picker a color picker maybe you want a
46:45search bar where somebody has already
46:47built it in react and you can use
46:50different libraries component libraries
46:52to just download and use those
46:55components same with angular same with
46:57the view all of these things have
46:59component libraries hmm what about this
47:03SSR thing
47:04well SSR stands for server-side
47:06rendering remember in the fundamentals
47:10part how I talked about server-side and
47:13client-side rendering oh wait I didn't
47:16really did I well that's because
47:18server-side and client-side rendering is
47:21all about where should we render or
47:24where should we calculate what the HTML
47:26page should display you can do it on the
47:29server side or you can do it on the
47:31client side which is on the user's phone
47:34or computer on their browser well all of
47:38these libraries and frameworks
47:39out-of-the-box do client-side rendering
47:42Hey use the power of my cell phone to
47:45display the page hey use the power of
47:48the user's computer to display the page
47:50but you can also do something called
47:52server-side rendering if you control
47:54your servers or the computer that sends
47:57those HTML j/s and CSS file you have the
48:00option to do that now we won't get into
48:02what the differences are there are some
48:03implications like SEO when it comes to
48:06them but the key thing is that you
48:08should know that they exist for example
48:10with react he can use something like
48:12next yes with angular you can use
48:14angular Universal with view NOx Jas or
48:17even something like zapper if you're
48:20using it's felt again you don't need to
48:23focus too much on it just to understand
48:26the difference between server-side
48:27rendering and client-side rendering
48:29personally I would recommend next yes if
48:32you really want to get into it but as
48:33you can see no rocket ship there now one
48:37note I want to give because I guarantee
48:39you all get this question is what about
48:41felt it's the newest library that has
48:43come out it's gaining a lot of traction
48:46should I learn spelt and honestly not
48:49really because there just isn't that
48:51much job demand yet it's still fairly
48:53new I personally don't think it offers
48:56that big of a value compared to what's
48:58already out there like reacting angular
49:00or view but it is quite useful because
49:03it is performant that it might be good
49:06for low powered embedded devices that
49:10need UI so for example small devices
49:13that don't have a lot of power that
49:14still have some sort of UI or user
49:18interface well maybe salt you should
49:20consider it but for getting a job no not
49:23yet
49:24holy moly that's a lot but I think we're
49:27getting there so let's see we talked
49:29about JavaScript fundamentals frameworks
49:31which was a big one we have only a few
49:34more things let's talk about helpers and
49:36helpers are both technically build tools
49:38as well but these are ways for us to
49:40help write JavaScript as programmers so
49:44we have things like Babel that allow us
49:46to write the newest features of
49:48JavaScript we have things like es lint
49:50which is kind of like a spell checker
49:52for our JavaScript if we ever make a
49:54mistake
49:54well yes lint is going to check our code
49:57and say oh you should fix that up that's
49:59why it's a helper we also have something
50:01like prettier and prettier is almost
50:03like an auto formatter
50:04it takes your code and make sure that
50:07all your spaces look nice all your
50:09indentation on your code looks nice
50:11these we are very useful to use and then
50:14we have built tools and built tools are
50:17essentially things that allow us to do
50:21things to our projects and files that we
50:23might not want to do manually for
50:26example I have here a project that I
50:29created for create react app so create
50:33react app is a CLI or a command-line
50:36interface that allows me to build a
50:38react project without having to do
50:41things manually myself so I just ran
50:44this command and now if I open up my
50:46sublime text I have all these files and
50:50this project already pre-built for react
50:53so all this boilerplate code is done for
50:55me and I have commands like NPM start or
50:58NPM build to run certain commands for
51:03example NPM start if I run it is going
51:09to build the project and actually
51:11display it on a web page for me just
51:15like that
51:15I could all
51:18MPM run build
51:22and if I look over here I now have a
51:25built folder magically just through that
51:28command that contains all my files
51:31remember our CSS JavaScript well and
51:33some images it's all there
51:37I even have my HTML file so that's what
51:40build tools do and NPM scripts which I
51:43just used is what you usually do when
51:46creating a project before we also used
51:49to have something like gulp it still
51:50exists less often use but let's say if
51:53you want to do certain things like you
51:54want to zip some files or compress some
51:57files well you can use gulp to do that
51:59we also have something called module
52:02bundler something like the web pack
52:03roll-up parcel well remember how
52:06javascript had modules which are
52:07essentially different sort of javascript
52:09files as we got more and more JavaScript
52:11files what we wanted to actually at the
52:14end combine it all into one single
52:16javascript file and send it to the user
52:19this is what module bundling is it
52:22bundles modules if we go to the web pack
52:25website we see that it not only does
52:27JavaScript but it does a whole lot of
52:29things and spits out our JavaScript our
52:31CSS files now the importance of parcel
52:36what pack and roll-up has diminished a
52:39little bit mainly because a lot of these
52:41things are configurations that you don't
52:44really need to understand things like
52:46create react app do it automatically for
52:49you for example they have already gzip
52:52my files they have created different
52:54chunks of JavaScript
52:56of CSS that is optimized for delivery
53:00because modern browsers now don't
53:03necessarily need one large giant
53:05javascript file you might only want to
53:07send to JavaScript that is needed or
53:09files that the user actually needs and
53:11only load up new files when a user
53:14visits a different page so for now I
53:17recommend just knowing about them but
53:19for example is used underneath
53:21the hood for create react app roll-up is
53:23really really good if you're a library
53:25creator and you want to create your own
53:27NPM modules or you can use parcel which
53:30allows you to do some module bundling
53:32without too much config that well with
53:35web
53:36it'll be a huge headache all right we're
53:39almost done people the last little part
53:41here is well all websites now you pretty
53:44much have to create responsive mobile
53:47first design that is if you're a
53:49front-end developer you can't just
53:51assume that everybody will be using a
53:53computer you now have to build with
53:55mobile in mind that is to make sure that
53:58all these views and web pages that you
54:01create also work on mobile and we
54:04already talked about that with things
54:06like CSS grid or CSS flexbox is just a
54:10standard now we then have something like
54:12web components now web components is one
54:15of those things that has been around for
54:16a long time especially something like
54:17polymer but there are tools like lit
54:20elements and stencil and what they are
54:24is an idea developed by Google that says
54:26hey wouldn't it be nice if we had
54:28shareable components little date pickers
54:32little search boxes little user cards
54:35that can be used all across the web that
54:38can be used between angular between
54:40react between view that we can share
54:43these web components and plug-and-play
54:45web components to any website it's an
54:48idea that is taking a bit of time to
54:50pick up I wouldn't worry too much about
54:52it just know that it exists and then we
54:55talk about package management this is
54:58the reason why javascript is so popular
55:02the reason javascript is so popular is
55:04because of all the tools and libraries
55:08and code that people have built that a
55:10community have built that you can now
55:12use and share you don't have to create
55:15things from scratch there's a lot of
55:17tools a lot of problems that have
55:19already been solved that you can now use
55:21and that's where package management
55:22comes in and with JavaScript package
55:26management it happens on the NPM
55:28registry it's right here and it was
55:31actually recently acquired by github
55:33which is owned by Microsoft which also
55:36owns v/s code they were everywhere but
55:40NPM allows me to search any packages
55:42that I want let's say I wanted a date
55:44picker well I can do a date picker
55:46search and somebody has already built
55:49that look
55:49somebody built a react date picker so I
55:52can now download this javascript file
55:55and use it in my project so the NPM
56:00registry allows us to use code use
56:03modules that we haven't written and
56:06build our project now there's also
56:10something called an anti NPM registry
56:12which is just something I made up but it
56:15goes against NPM the problem with NPM is
56:18that well it's controlled by one central
56:20governing body and entropic tries to
56:24essentially have a more less centralized
56:27NPM registry or a packaged registry
56:30still growing but interesting looking at
56:33especially now that NPM has been
56:35acquired by Microsoft now you may have
56:38seen me run these commands in my
56:40terminal that is NPM to run certain
56:43commands like NPM run build again these
56:47are just commands or build tools that I
56:50can run and scripts that I can run using
56:52NPM npx is a way for us to install
56:56packages
56:58for example if I go to create react app
57:01let's see where it is there it is you
57:03can see that I can run MPX create react
57:05app to create a boilerplate code and MPX
57:09make sure that we always use the latest
57:12version of create react app so again
57:16because I recommend learning react
57:18definitely know these two things and
57:21yarn is another option for you to use
57:23for installing packages and third-party
57:27libraries but they've had a few issues
57:29now it came out of Facebook but they now
57:31have a issue where yarn two just came
57:34out that is not compatible with or very
57:36different from the original yarn and I
57:39would personally just stick with NPM
57:42finally there are some popular libraries
57:44that you should be aware of d3.js which
57:46is for charting Axios which is for fetch
57:50requests with extra tools you have
57:52things like moment and date FNS which
57:54are for dates
57:55rammed up for functional programming
57:56rxjs for something called observables
57:59amor for something called immutables
58:01lodash and underscore which are very
58:04popular utility libraries that are less
58:06often used now that javascript language
58:08has a lot more features or that's a lot
58:13and I promise I'm almost done we just
58:16have this one last thing to talk about
58:17and this is the jam stack this is
58:20actually something that I included very
58:22last minute on the video because it's
58:24growing at a really fast pace and I
58:26think it's an interesting thing to keep
58:27an eye on that's why I have a little
58:29Rokit but you don't necessarily have to
58:31dive too deep into this but it is a
58:33movement in the web that's happening
58:35that you should definitely keep an eye
58:36on and jam stack is all about static
58:39sites remember when I showed you redwood
58:43j/s well look at that it's a bringing
58:45full stack to jam stack tool so what is
58:49this whole Jam stack I personally don't
58:51like the name I stands for JavaScript
58:54API is in markdown it tries to bring the
58:57web to how it was before I have a great
59:01image here to demonstrate exactly what
59:04is happening with Jam stack the idea
59:06with Jam stack is what let's talk about
59:08the initial way so initially we as
59:11default
59:12or as programmers we write a website's
59:15program we send it to the server and
59:17then the server produces the HTML on
59:21demand and the user goes to google.com
59:24and the server sends the user or the
59:27client the HTML file with jam stack it's
59:30a little bit different we write our code
59:34and our JavaScript and then we build
59:38these files and deliver them to
59:40something like a CDN and the CDN which
59:44is just a fancy way of saying a server
59:46that is closer to the user the server
59:50just has a prebuilt files now jam stack
59:56is a topic that I'll get into in a
59:58separate video because it is a lot the
1:00:00key thing to remember is that they're
1:00:03trying to simplify the web because what
1:00:05happened with react and angular and view
1:00:08is that all these JavaScript files
1:00:10started getting more and more bloated
1:00:12bigger and bigger and bigger so that
1:00:14when you load an app on your screen it
1:00:17runs a lot of JavaScript instead Jam
1:00:21stack says hey especially for websites
1:00:23like blogs some static sites the sites
1:00:26that just display things already let's
1:00:29just pre build this something like
1:00:31gatsby is actually a static site
1:00:34generator what that means is you write
1:00:37your code and then you click run and
1:00:40gatsby takes all that code that you
1:00:42wrote and puts it into a neat HTML CSS
1:00:45and javascript file and those files are
1:00:48the files that you upload to the server
1:00:51this way a lot of the content such as a
1:00:55blog post can be displayed right away to
1:00:57a user instead of having to run all this
1:01:01javascript and anything that needs to
1:01:03get updated such as a user logs in and
1:01:06we now have to display a user name we
1:01:08can just use api's and do that
1:01:10afterwards so for example we can use
1:01:13something like Hugo to build static
1:01:16sites we can use something like grits
1:01:18'im which is for view GIS Gatsby which
1:01:21is for react
1:01:22we even have skully which is for
1:01:24building and
1:01:26other apps we have Jekyll which is a
1:01:28very popular one with Ruby and this
1:01:31actually relates to something called a
1:01:33content management system something
1:01:35really popularized with WordPress
1:01:37WordPress back in the day was really
1:01:39really popular it still is because it
1:01:41allowed people that don't really need to
1:01:45learn how to code to build beautiful
1:01:47websites and beautiful blogs using
1:01:50themes and just using an interface like
1:01:53this a dashboard like this to write up
1:01:55blog posts
1:01:57well now there's a movement towards
1:01:59these static sites let's say you wanted
1:02:02to build a block post but you don't
1:02:03really need to go into all this trouble
1:02:05you can use something like a headless
1:02:07CMS so unlike WordPress that already had
1:02:09pre-built themes and ways that the
1:02:12website can look you can use something
1:02:14like contentful for example and have
1:02:18your own content management system a
1:02:21place for you to write blog posts and
1:02:22it's headless because it doesn't have
1:02:25any client-side code that is it doesn't
1:02:28necessarily tell you how you should
1:02:30build your front-end as a matter of fact
1:02:32this website my zero to mastery web site
1:02:35is doing exactly that it's using
1:02:39contentful to write blog posts but how
1:02:43the blog looks it's completely up to me
1:02:45this is written from scratch but quick
1:02:49note if you were paying attention you
1:02:52might be wondering to yourself what
1:02:55exactly is a difference here between
1:02:57static sites
1:03:00versus that thing you are talking about
1:03:02called SSR or server-side rendering
1:03:05isn't that the same thing well let's
1:03:09talk about the two of the most popular
1:03:10ones for server-side rendering we have
1:03:13next J s and for jam stack or static
1:03:17site generation we have Gatsby J s they
1:03:20both use react underneath the hood
1:03:23they are both server-side so what's the
1:03:26difference well gatsby is before the
1:03:29server so think of it this way before I
1:03:32even upload my files to a server I use
1:03:35gas bjs to take all my code and spit out
1:03:39a static files that is JavaScript CSS
1:03:43and HTML that's what Gatsby does you use
1:03:46it before you even deploy your code to
1:03:48production or to the server on the other
1:03:51hand server-side rendering with next GS
1:03:55is we upload all the code we don't
1:03:59generate any new code we upload it all
1:04:02to the server so the server is now
1:04:05listening to the client and as the
1:04:08client makes requests next Jay S is
1:04:10going to work and display different
1:04:13things so next yes is what we use on our
1:04:17server the code on the server versus
1:04:20with gatsby we use it even before we put
1:04:23the code on the server and instead the
1:04:27server simply sends those files and on
1:04:29the client side we use something called
1:04:31api's to do interactive things like
1:04:35display user information so that's the
1:04:39difference there Gatsby is pre server
1:04:43next GS is on the server so keep an eye
1:04:47on the jam stack jam stack is gonna be
1:04:50quite big over the next couple of years
1:04:52alright that's it
1:04:55front end seems pretty overwhelming
1:04:57doesn't it but as you can see there's
1:05:01only a few things that you need to focus
1:05:03on little Rockets here the rest are just
1:05:06important for you to understand and know
1:05:09that they exist and how they relate to
1:05:11one another
1:05:13but you can spend your whole career in
1:05:15the front end like I said it's a good
1:05:17idea to start here get a job right away
1:05:20and then dive deeper into the other
1:05:23topics
1:05:24up until now we've been talking about
1:05:27the front end which is what does a user
1:05:29see but we haven't really talked about
1:05:31the server servers were just something
1:05:34that somebody else owned but as a
1:05:38back-end developer we can have control
1:05:39as to what the server does instead of
1:05:42just what do we display to the user we
1:05:44can now say hey what data do we send to
1:05:47the client what data do we receive from
1:05:50the client so let's get into that

About this transcript

This page contains the full transcript of The Real Web Developer Roadmap: Part 1 💻🚀 | How to become a Web Developer by Zero To Mastery, generated from the public captions YouTube serves with the video. The transcript has 10,588 words across 1,510 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.