Up next in 10
Frontend Developer Roadmap 2022 (8 Steps)
6K views
Feb 6, 2024
"Frontend Developer Roadmap 2022 (8 Steps)" is an instructional video that outlines a structured path for individuals interested in becoming frontend developers in 2022. The video likely covers essential steps and skills needed to embark on this career path, providing a clear roadmap for beginners. It may include topics such as learning HTML, CSS, and JavaScript fundamentals, mastering frontend frameworks like React or Vue.js, understanding responsive web design principles, and familiarizing oneself with version control systems like Git. Additionally, the video might offer insights into additional skills such as UI/UX design, testing, and accessibility considerations. By breaking down the frontend development journey into eight manageable steps, the video aims to guide viewers towards acquiring the necessary knowledge and skills to pursue a successful career in frontend development.
View Video Transcript
0:00
This is everything you need to know if you want to get a good paying job as a newbie front-end software developer
0:05
This is the list that I wish someone had shared with me when I first started out, and these are the same course skills that I use on a day-to-day basis working as a front-end software engineer at Adobe
0:13
Number one, HTML, you need to understand the document, object, model, or DOM
0:19
How to structure a basic index HTML page. Everything starts with that page, but it's blank until you actually do something and put stuff in it
0:26
For example, you got to know the common HTML tags and how to use. them. This is going to include the body tag, div, image, link, order list, unordered list, list
0:35
items, and there's a bunch of other elements. And you're going to need to learn about semantic
0:39
HTML and why you should use it. These HTML tags provide additional meaning to the structure
0:44
of your HTML. For example, section, article, header, aside, tell you more about the contents
0:49
of the tag than the plain old div. With the div, you have no idea what's inside. We find and
0:55
interact with tags using HTML attributes. When you see an ID, a class, data, Aria, four, type, name, value, or similar words inside of an HTML tag
1:06
and it's followed by an equal sign and then something that is wrapped in quotes, you're looking
1:11
at an attribute. The script tag is important because it's how we actually load JavaScript onto the page
1:16
and without JavaScript, our application or website is just going to be extremely boring and
1:21
not super helpful. The link tag is going to let us include external resources in our document, like adding
1:27
CSS styling. Number two, cascading style sheets, also known as CSS. It's not enough to just link CSS stylesheets
1:35
We also need a way to reference specific elements in the HTML that we want to stylize
1:41
The most common way to do this is by adding class names from a style sheet onto the class attribute of an HTML element
1:48
That's just one of the ways to do it. You need to understand why it's usually a better idea to use classes instead of IDs in CSS
1:55
And you're going to have to prevent one style from class. with other styles and the way to control this is through a concept called the
2:03
specificity throwing important around all over the place is just a really bad
2:08
idea we use CSS selectors to target specific elements based on their location in
2:13
the DOM in relation to other elements for example child sibling to
2:17
Senate last child attribute selectors and there's quite a few of them out there to
2:22
learn you control the actual styling through CSS properties which are the
2:26
bread and butter of making things look good Only, it's kind of like honey butter mixed with broken seashells
2:32
Just when you start to think it's cool, you realize it's also painful. There are a ton of ways to influence the size of the elements
2:38
You can set the height, the width. There's mid heights, men widths, you can do stuff with line heights
2:43
You can make stuff shrink or go completely off the page. And the spacing around all of these elements is controlled with margins and padding
2:50
But there are some gotchas here. For example, you need to know that margins can collapse
2:55
It's important to understand how these interact and affect each other, and the overall size of the element
3:01
Do you want the header to stick to the top of the page while you scroll or have some part of your HTML
3:06
take up a certain amount of space, or even move it off the page
3:10
This is handled with static, relative, absolute, or fixed positioning. Flexbox and grid are really important to know
3:17
and they kind of overlap with some of the stuff that we just talked about. And these and their related properties
3:22
help make layouts that can grow and shrink and that are aligned with each other right
3:27
have spacing between them, around them. There's a lot you can do with Flexbox. Before Flexbox, there were floats. It's good to
3:34
know about floats because you're likely to encounter them, but it's even better if you can
3:38
avoid using them. They're like fleas, you know, they're around you. You just don't know where
3:42
they've bounced off to. Minimalist black and white sides can be really attractive, but sometimes
3:47
you just got to add a little bit of color. And there are CSS properties for adding color to
3:51
backgrounds to text borders and even pseudo elements There are also a ton of ways to style text links and images You need to know how to handle when content overflows
4:02
It's a loud space. What happens when content is too big for the space it's in
4:06
Do you hide it? Do you make it scrollable? Do you say to heck with pixel perfect and let it just completely run off the page
4:12
and annoy the designers? If you have a bunch of stuff that's overlapping, which one should be on top
4:18
You control this with something called Z-Index. Now, the higher the Z-Index, the more likely it is to be on top
4:24
So Z-index of 10,000 should just about do it. Okay, you really need to learn how to avoid this Z-Index race to gigantic numbers
4:35
Is your web application going to be used in a laptop browser, or is it also going to be used on your phone
4:40
Do you want your app to be responsive and change depending on the size of the screen so that a user doesn't have to fat-finger tiny buttons on their phone
4:48
We use media queries to control rules for the different sizes of screens and device types
4:55
Or maybe you want to spice up your site and have menus that slide in and slide out rather than just pop in and pop out
5:01
And there are CSS properties for doing these kind of animations. One of the challenges with updating the color of a website is that you might have to make changes to 100 different lines of CSS just for one particular color
5:14
You can save time by storing that color in a single variable that it
5:18
is then used everywhere else. And then whenever you want to actually change the color, you just
5:23
have to change it in that one place. And everywhere else that the variable is used, it will automatically
5:28
be updated with that color and will save you a ton of time. This is one of the features that are
5:33
making CSS preprocessors less useful for the longest time. That was the only way that we could
5:39
do variables inside of our CSS. That said, CSS pre-processors like less, post-cisss, SAS
5:45
stylists are still in use by a lot of projects. Some people like how they can be nested together
5:52
and there are also special things that you can do like mix-ins and other special magic. So understanding
5:57
what they are and why you would want to use one instead of playing CSS can be helpful. And
6:03
most of the larger projects that I've worked on have used either SaaS or less. That's it I personally
6:07
prefer SaaS but sometimes we have to learn to do more with less. A lot of times you aren't
6:12
even going to be writing your own CSS. There are plenty of CSS libraries out there
6:15
like Tailwind CSS. And in the real world with projects, there's a good chance you're either going to
6:20
end up using a third-party solution to help with your CSS or you're going to be using one that
6:25
has been built in-house by the company that you're working for. Now, you can't really know
6:29
ahead of time what every company is using, but it is helpful to become familiar with using CSS libraries
6:36
and you can do that by learning something like Tailwind. Number three, JavaScript. And in a minute
6:41
we're going to talk about JavaScript frameworks and much more. But in this video
6:45
I'm not going to deep dive into the specifics of the JavaScript programming language because it's a large enough topic that I've decided I'm going to be making a separate JavaScript roadmap video
6:55
So subscribe if you want to know when that comes out. And a video of the courses and resources that I recommend for learning front-end development is also on the way
7:03
For now, you should plan on getting really good at JavaScript if you want to be able to get into one of the higher-paying front-end developer positions because it is the programming language of the front-end
7:13
You're going to want to know about the newer ECMscrip features, ES6, ES7, etc
7:18
Bleeding Edge is now at 12, but the big shift to newer syntax happened several years ago with ES6
7:25
This is why I don't share a lot of the courses and things that I actually used to study when I was first learning
7:30
because a lot of them are now just out of date. Number four, JavaScript frameworks and libraries
7:35
But first, I got to throw in the library's disclaimer because without fail, some people cannot stand generalizations
7:42
and we'll throw a tizzy fit if you say you're going to be talking about frameworks and then you mention React.js
7:48
You know who you are You should grab a soda and go chillax Whatever you call them there are three main technologies to choose from for building front web applications I mean there are more but this is what you should focus on
8:00
Angular should not be confused with the original Angular JS, which you should avoid
8:04
It's what I learned on when I was first starting out, but the newer Angular is just much better
8:09
Angular is a full-fledged framework with most every utility you could want to build in
8:14
Vue.js is a lightweight progressive framework that is kind of like a smaller
8:18
version of Angular. It lets you add third-party libraries as needed and it claims to be somewhere
8:24
between a library and a framework, and that's about as confusing as a girl claiming to be your
8:29
girlfriend and a step-sister at the same time. The third and best option is a small library for making
8:34
awesome web and native applications React rocks. What can I say I am 100% unashamedly biased on this one
8:42
and you should be too. You see, Angular is highly opinionated, which means that there is a specific way to
8:48
do most everything. So it's big and it's bloated. You wanted a banana and you got a gorilla holding
8:54
the entire jungle too. On the other end of the spectrum is React which is intentionally unopinionated
9:00
It provides some of the core functionality and you choose the rest which makes it much more flexible
9:05
But this also means that you're going to be learning some of the React related libraries or
9:09
you could just start with something like Create React app, VITJS, NextJS, or one of the other similar
9:15
projects as a way to get started without having to configure all of this yourself. React is in
9:20
high demand and it's what I have been using at work for the last several years at Adobe and there's
9:25
been this trend of things moving from Angular to React for quite a while now. That doesn't mean that
9:29
Angular is dead. It's still powerful framework and a lot of people use it most notably boomers. But
9:35
there's one universal truth that software development and that is that most everything is highly
9:41
subjective. This is no exception. All joking aside, if you're a new developer, then
9:45
I highly encourage you to consider going for React. Unless you already have some strong existing connections to a possible job in a company that is using Angular
9:53
then it could definitely be worth it to learn Angular in order to get that job
9:57
And let me know if you want me to make a React roadmap video. Now we have to get some data
10:02
And for that, we make API requests. To do this in a React app, you're going to either go with JavaScript's built-in Fetch API
10:08
and then build wrappers around it yourself, or you'll end up using a library like Axios
10:13
that already has those utilities. wrappers baked in. I like using Axios for my projects, but I'm sure that Fetched
10:19
diehards are going to chime in and tell us why Fetch is better than Axios, and we'd love to
10:23
hear your thoughts. Now, if you're working with Angular, a lot of this is already built in
10:27
So it's time to make something useful, so you're going to need to interact with actual APIs
10:32
And to get started, you can build something that connects to an existing API. You probably
10:36
have a YouTube account if you're watching this video. So maybe you look into creating a channel
10:41
and uploading a video, and then you could use YouTube's APIs to interact with that video
10:47
and the video ytics. Or if you don't want to go there with interacting with that kind of API, then you might
10:53
consider a solution like Firebase to handle the backend for you, and then that way you can
10:58
connect the app to the Firebase, which is fairly easy to configure when compared to setting up
11:04
a complete backend and having to deal with the database and everything else on your own
11:08
At this point, as you're either connecting to Firebase or to other, APIs, you're going to have the opportunity to learn some important things about security
11:15
and protecting your data and authentication. But all of this doesn't mean that you should just go out and deep dive into backend development
11:21
at this early stage in your career. And I talk more about this in another video where I share why you shouldn't become a full
11:27
stack developer. And I'm going to link to that at the end of this video. Number five, component libraries
11:32
Similar to CSS libraries, there are libraries for reusable components like buttons, drop-down
11:38
menus, tables, and other cool widgets in future. projects there's a good chance that you're going to be working with either a third-party component
11:44
library or else you use internal ones built by your company you might even be building components for that library so it a good idea to become familiar with how these work and it also help you to see good ways to create reusable components
11:57
for when you're making your own components. Two of these that I really like is Angular material, for Angular, obviously
12:03
and for React apps, I like semantic UI. Number six, some valuable tools that everybody should be using
12:09
In order to get this stuff all running, you're going to end up needing to install Node.js
12:13
and you're going to need to learn how to use MPM. which is short for Node Package Manager, you use this to install and manage the different dependencies for your project
12:22
You also need a way to bundle your application for deployment. Now, if you're using tools like Create React App or VJS or NextJS
12:28
they're really going to help with handling a lot of the more complicated configurations for you because they do this behind the scenes for setting up the dev servers
12:37
and for actually bundling and building your code for production. You'll be able to go pretty far with what Create React app and VJS and NextJS provides out of the
12:45
box, but as your project grows in complexity, you might end up actually having to learn how to
12:50
configure Webpack directly or some other bundler. In software development, it is super important
12:55
to keep a history of all the changes that you've made to your code base, that you can go back
12:58
and see when you introduced a bug, or maybe you don't like the features that you just made
13:03
and you want to be able to roll it back without having to remember every line of code that you
13:07
changed. And you also want a way to protect your code from getting lost in case something bad
13:12
happens like your laptop fails. So you should learn to use Git for version control. And GitHub is a
13:18
great place where you can store your project that uses Git. As you work with Git, you're going to
13:23
want to learn how to create repos, create branches, push and pull from repos, merge branches, fork repos
13:29
and do pull requests into repos. Because these are some of the things that we do almost every day
13:34
and some of them we do multiple times a day. You also need to learn Chrome dev tools. It is one of the
13:39
most powerful ways to debug problems with your front end application. There are also specific
13:44
extensions you can get to help with debugging React or Angular, but dev tools should be one of your
13:49
best friends. Number seven, deploying code. What is the point of building an application if you don't
13:54
have any place to put it? Some options for hosting your application include Heroku, GitHub pages
14:00
Firebase, AWS, Azure, and there's a bunch more. So just pick one to learn. Heroku or GitHub
14:06
pages is a good place to start. It would also be helpful to become familiar. with Docker containers and how that ties into the deployment process
14:13
Number eight, things to learn later on. Once you're comfortable with building and deploying an application
14:18
it'll be worth your time to learn how to actually test your code. For JavaScript, I recommend that you learn jest
14:25
And if you have some time, at least become familiar with some of the other forms of tests
14:29
like Selenium or Cyprus. I include these in the later section because it's probably not best to get swamped
14:35
learning how to test early on, is you're going to be fighting through a bunch of information overload already
14:41
but eventually you'll get to where you're actually writing tests as you're actually building features for the application
14:47
And now that you're comfortable with JavaScript, you might consider learning TypeScript. If you chose to go down the Angular Path
14:52
TypeScript is already baked in, so you might already be learning it. But with React, the DevCamp is still largely divided
14:59
so it's not mandatory, but it definitely could be really valuable for a lot of companies if you have TypeScript experience
15:05
Another thing to consider learning is accessibility, and you'll often see it referred to as A11Y, or some will just say Allie
15:13
And yes, those are ones and not the letter L's. Knowing how to make your application easy to use for people with disabilities is a valuable skill
15:21
I mean, imagine being colorblind and not being able to tell the difference between two options on a page
15:26
or perhaps you're blind and have to rely on a screen reader to tell you what is happening on that page
15:33
This is really important, especially at bigger companies, educational institutions or companies that have government contracts
15:39
And now, if you want to know why it's a horrible idea for beginners to focus on full stack development
15:44
you should watch this video or click the link in the description. Leitz
#Computer Education
#Flash-Based Entertainment
#Fun & Trivia
#Multimedia Software
#Programming
#Training & Certification