HOW TO BECOME A WEB

DEVELOPER IN 4-6
MONTHS?
+
🎁 BONUS: Tools I use as a Developer
GUIDE CONTENT
STEP 1 – HTML _ 3

STEP 2 – СSS 5

STEP 3 – JAVASCRIPT 7

STEP 4 – REACT 10

BONUS: Tools I use as a Developer 12

STEP 1 – HTML (1.5 Weeks)

It’s the first thing you should start your long, but interesting
programming path with. HTML is responsible for website layout. You
can use it to create text blocks, headings, add images, links and much
more!

🎓 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.

YouTube Crash Courses & Online Articles.

🧑‍💻 MY RECOMMENDATIONS:
After you learn the basics, try to create at least a 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 possible!

Try to use a lot of different sources of information to get a bigger

picture.
❌ MISTAKES:
 rying to remember all the HTML elements. Learn the basic
T
elements, understand how 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 tone of 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.

Ignoring accessibility concept. Knowledge of good accessibility

practices will help you to stand out as an engineer who cares.
STEP 2 – СSS (2.5 WEEKS)

CSS is very important, even though we will try to learn the main
concepts relatively fast, you will still be learning CSS throughout your
whole developer life. Here are some things that you must know before
you can move on (the order is important):

CSS selectors;
margin vs padding;
rem vs em 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!

Game to learn CSS Flexbox (https://flexboxfroggy.com/).

YouTube Crash Courses & Online Articles.

🧑‍💻 MY RECOMMENDATIONS:
It's very important to understand the CSS block model (difference
between margin and padding, element width, and 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 insane 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, and 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).

❌ MISTAKES:
Mixing different CSS units. If you are using rem, use it everywhere
across the project, if you are using px, use it everywhere. It’s
important to be consistent.

Not reusing classes. Usually, you have a lot of repetitive CSS

across the website. It’s better to group it into multiple reusable
classes and use them across your site.
STEP 3 – 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 it is to learn JavaScript well.

JavaScript is the core of any Frontend Framework. You can even

create a backend with JS. Moreover, the questions from JS basics are
very popular during job interviews (I am asking them myself when I
conduct interviews).

You can start learning JS in the following order:

Variables
Conditions & logical operators
Loops
Objects
Arrays
Functions

After you will feel confident with the basics you can learn:

DOM Traversal
DOM Manipulation
JS Events

Using these concepts, create a couple of basic projects (TODO App,

Calculator, etc.)
Now it’s time to master how JS works behind the scenes and
advanced techniques:

Arrow Functions
Array Methods
Promises
Async/Await
Closures
Web Components

🎓 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, if you are taking it seriously, I
recommend investing in yourself and buying a course, or a
coaching program (if you want to speed things up).

At this point, it is crucial to find a mentor or a programming buddy.

This person will help you to keep going, even during mental
breakdowns and burnouts (and they happen almost to everyone
who starts their path in IT).

🧑‍💻 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 a certain concept, just google it until you fully
understand it. In the beginning, it will be hard, but later the skill to
google things will help you a lot.
 Spend a few days to understand what 00P is 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 synchronous and asynchronous

operations are and how they work in JS.

Learn how JS works behind the scenes (event loop, micro and
macro tasks, call stack)

❌ 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 take 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 programming language, you can master it!
STEP 4 – REACT (1-2 MONTHS)

You are getting very close to becoming a Junior Web/Frontend

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. Courses and articles
are your best friends at this point.

But the BEST WAY to learn React is by practicing. You must create at
least 2-3 small projects (like TODO App or Calculator) and 2-3 BIG
Projects to start feeling confident with React.

🧑‍💻 MY RECOMMENDATIONS:

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

Learn Redux Toolkit and Context API to manage the state.

 Use React Dev Tools to debug the components, find errors and
check 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.

Master at least one UI components library (ex. MUI, Chakra UI)

❌ 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 the
date formatting function) are located in the /utils folder. I
recommend finding an example project to learn more about good
folder structure. Here is a good article that explains different React
folder structures - https://profy.dev/article/react-folder-structure
🎁 BONUS: Tools I use as a Developer
Communication

Slack (work communication)

Discord (communication with my students)

Zoom (video calls)

Productivity

Google Calendar (plan day)

Todoist & Apple Notes (list of todos for the day)

Jira (managing work tasks)

Documents

Notion (structured notes & ideas)

Google Docs (docs that I want to share with others)

Google Sheets (stats data)

Browser

Chrome (main browser)

Safari (your website might look great in all browsers, but in Safari
everything will be broken )😅
BrowserStack (to check how my website looks on different
devices)

Coding

VSCode (best code editor in the world)

Terminal

Git & GitHub (code storing & management)

CodeSandbox (sandbox to quickly test something)

AI Tools

ChatGPT (only for repetitive tasks, like re-format a big text file to
JS Object)

GitHub Copilot (for code auto-completion)

Blogging

Grammarly (spell checker)

Captions (generate automatic video captions)

VN (edit videos)

ConvertKit (email newsletter)

Dropbox (store videos & photos)

Canva (presentation & guides)

Business

Stripe (payments)

Webflow (landing pages)

Systeme.io (funnels)

Freshbooks (finance management)

🏁 THE END:
If you liked the guide, then you will like the content in:

MY NEWSLETTER (https://newsletter.zacker.tech/)

MY INSTAGRAM (https://www.instagram.com/zacker.tech)

And remember, as Arsene Wenger once said:

" When you look at people who are successful, you will
find that they aren't the people who
are motivated but have consistency in their motivation.

"