HOW TO BECOME A

WEB DEVELOPER IN
4 MONTHS?

ZACKER.TECH
STEP 1 - CSS & HTML
(1 MONTH)
HTML (1,5 WEEKS):
WHERE YOU CAN LEARN IT:
⁃ HTML Tutorial (https://www.w3schools.com/html/) is a perfect
place to learn HTML for free. It has short tutorials on the most useful
html elements with exercises and examples. You can pass the whole
tutorial in a week.

⁃ HTML CRASH COURSE (https://youtu.be/qz0aGYrrlhU).

Always use multiple sources for learning one thing. This video
will just show you everything in a slightly different way, so give it a
try.

MY RECOMMENDATIONS:
After you learn the basics, try to create at least a 2-3 page website
with poor HTML by yourself. It will be hard, but use the knowledge you
already have, google things and you will see that it’s not that hard.

MISTAKES:
⁃ Trying to remember all the HTML elements. Learn the basic
elements, understand how do they work and move on, you don’t have
to know everything, it will just slow you down!
⁃ Going too deep. Don’t try to add JavaScript or too much CSS to your
website. It will be fun, you can give it a try, but it’s just too early, try
to concentrate on one thing and not waste time on things you don’t
understand.
CSS (2,5 WEEKS):
CSS is a very important thing, even though we will try to learn the
main concepts relatively fast, you will be still learning CSS
throughout your whole developer life. Here are some things that you
have to know before you can move on (the order is important):

CSS selectors;
margin vs padding;
rem vs px, vh vs vw;
flex, grid;
position (relative, absolute);
how to use chrome dev tools to see element styles;
media queries;
BEM (extra);
SCSS (extra).

WHERE YOU CAN LEARN IT:

⁃ CSS Tutorial (https://www.w3schools.com/css). Classic, if you
liked the HTML course from w3schools, this is your choice!

⁃ CSS Crash Course (https://youtu.be/vQWlgd7hV4A). I love the way

this guy presents the material, but this course doesn’t cover the
important topic “CSS Flexbox”, so make sure you check this tutorial
as well (https://youtu.be/-Wlt8NRtOpo)
MY RECOMMENDATIONS:
⁃ It’s very important to understand the CSS block model
(difference between margin and padding, element width, borders).

⁃ The “Flexbox” model is used everywhere nowadays, so make sure

you understand its main concepts (flex, grid, justify-content, align-
items, gap, etc.).

⁃ Chrome dev tools is an insanely cool tool to find what is wrong

with your code, you can easily check all the CSS styles of any block,
so consider using it :)

⁃ After you learn the basics, try to add some styles to the website
you’ve created in the HTML part, try to make it as beautiful as you
can (but remember, you are a developer, not a designer, so it doesn’t
have to be perfect).
STEP 2 - JAVASCRIPT
(2-3 MONTHS)
Now, when you can create any static website, let's make it interactive
with JavaScript magic. Before you start, you should understand how
INSANELY important to learn JavaScript well. Because JavaScript is
a core of any front-end framework, you can even create a backend
with JS. Moreover, the questions from JS basic are very popular
during the job interviews (I am asking them myself xD), so you should
understand how JavaScript works before you move on.

WHERE YOU CAN LEARN IT:

I won’t recommend any crash courses here, because it's an insanely
important topic and crash courses won’t cover all the JavaScript
insights. At this point, I recommend investing in yourself and to buy
an Udemy course (it's not a promotion, this is the most popular
course on Udemy). The only advice here is to make sure you use
incognito mode and buy the course for 14.99$ and not for the whole
price. This guy covers all the JS basic and advanced things and
explains everything in detail, I’ve completed this course and it
helped me, so it's my honest recommendation
https://www.udemy.com/course/the-complete-javascript-course/)
MY RECOMMENDATIONS:
⁃ Use YouTube and Google. You will have a lot of questions, but all
the answers are present, you just need to find them. So, if you don’t
understand any concept, just google it until you fully understand it.
In the begging, it will be hard, but later the skill to google things will
help you a lot.

⁃ Learn all the JS array methods (map, forEach, filter, reduce, slice,
splice, etc.), they are used very often and you should know them well.

⁃ Spend a few days to understand what is OOP and how it can be

implemented in JS. You won’t need it daily, but this is a very popular
programming paradigm, and you just have to know it.

⁃ Make sure you understand what is asynchronous and synchronous

operations and how do they work in JS.

MISTAKES:
⁃ Going too fast. It’s not HTML and if you skip one important thing you
won’t be able to understand everything that goes after. Go step by
step, don’t hurry up!

⁃ Not revising learned material. It’s just too many things and it’s
impossible to learn everything on the first try. I’m still, from time to
time, forgetting the difference between “splice” and “slice”, so don’t
be scared to make a small step back to remind yourself
of one or another concept.

⁃ Giving up. It will be very hard, especially, if you are new to

programming. A lot of things won’t make any sense for you. But trust
me, anyone can learn JavaScript, it’s just a question of time. So
when you want to give up, make a small break, and keep going, that’s
just a stupid programming language, you can master it!
STEP 3 - REACT
(1-2 MONTHS)
You are getting very close to becoming a Junior Web developer. You
still have a lot of things to learn, but after you learn React you will be
able to create fully functional web applications by yourself, isn’t that
cool?

WHERE YOU CAN LEARN IT:

At this point, you already don’t need my advice. If you liked the
Udemy course teaching style you can use this course
(https://www.udemy.com/course/react-the-complete-guide-incl-
redux/).
If you feel better googling things, there are a lot of great YouTube
videos on every React topic. You can start from here
https://youtu.be/Dorf8i6lCuk (the same instructor as above xD)
and continue here https://youtu.be/f687hBjwFcM

MY RECOMMENDATIONS:
⁃ Make sure you know most of the hooks well and fully understand
how do they work and where to use them.

⁃ Learn Redux Toolkit or Context API to manage the state.

⁃ Use React Dev Tools to debug the components, find the errors and
see the state.

⁃ The easiest way to style your app will be styled-components, if you

know CSS well, you won’t have any problems using it.
MISTAKES:
⁃ Using class components. While it’s a nice thing to know, it was
deprecated and isn’t used in modern applications, so try to use only
functional components.

⁃ Not using hooks. Hooks are part of React and if you don’t use them,
you are just making your life harder.

⁃ Using bad folder structure. Make sure your components are not
more than 200-300 lines of code, all the helping functions (like date
formatting function) are located in the /utils folder. I recommend
finding an example project to learn more about good folder structure.
THE END:
If you want to see how I grow my career as a Web and Full-stack
developer, get useful tips, see how I try to build my business, and
learn crypto development at the same time, just jump into my
Instagram!

ZACKER.TECH