Master Frontend development in 3 MONTHS (Complete Roadmap).
Few months ago, I decided to start my coding journey from scratch. I had no experience in this field, only things I knew were few programming languages (C++, Java, JavaScript, python), that my class’s IT students used to talk.
I watched lot of tutorials about “How to start coding?”, swiped my fingers through several courses, which resulted me feeling overwhelmed and distressed. But at same time I was excited too. Because of this excitement toward coding, I made this conscious decision that I’ll go with coding Step-by-Step. And first step was, of course FRONTEND.
This was how, my frontend journey started as web developer, and this is much more exciting than I expected it to be. Through this blog I will give you shortcut path that I created for you, to save lot of time (with non-affiliate resources).
3 Things you need to know before starting;
1. Accept as early as possible that you have to give minimum 3 months and not more than 6 months (on learning with help of courses).
2. Make a plan (I’ll do that for you), and schedule hours you would spend every day (start with just 1 hour/day).
PLAN (3 MOTHS)
(Brief plan is below)
. STEP 1- HTML
· STEP 2- CSS
· STEP 3- JavaScript
· STEP 4- React
· STEP 5- Git
3. Have basic understanding of how computer and keys work.
Brief plan;
Day 1- Day 14 (Week 1 & 2);
HTML;
HTML, it is markup language, used for adding texts, links, images, videos, and many more primary stuff to web page.
HTML is easiest to learn, you can even learn it in just a week. For now you don’t need to spend time to dig in deep of it.
Practice basic things for these two weeks.
In these two weeks, before learning HTML you need to learn basics of web (included with video resources).
Resources;
Paid:- Codewithmosh
Free:- Coursera, YT Traversy media
Day 15- Day 28 (Week 3 & 4);
HTML+CSS;
CSS+HTML because coding only css won’t make any sense. In 1st set of weeks spend more time on learning (through courses, tags & properties). Again don't go very deep (grid or flexbox).
In next set spend more time on coding & practicing. Believe me you will love creating websites, designs, etc.(TIP:- Try making clones of websites, it will increase your practice time, otherwise you would waste much time thinking “What image should I add?”)
Do not rush to learn, keep in mind, if you try to complete everything in one go, you may burnout.
Resources;
Paid:- Udemy
Free:- YT Chris Courses, freecodecamp
Day 29- Day 49(Week 5, 6 & 7);
JavaScript;
JavaScript is a programming language, which will obviously take more time to learn. But, we have one advantage, since, we are learning frontend, we only need to learn 30% of JavaScript (practical basics).
Spend week 1 on learning through courses. Week 2, practicing and coding. And week 3, applying HTML+ CSS+ JavaScript together.
Resources;
Paid:- codewithmosh(Highly recommend), pluralsight
Free:- freecodecamp, JavaScript30
Day 50- Day 71(Week 8, 9& 10);
React;
React is a widely used framework. Frameworks are used to save our time by using already written codes.
To learn React you should have knowledge of HTML, CSS and basic JavaScript. Learning entire React is not possible in just 3 weeks but, we need to learn basics, which is possible.
There are other frameworks as well (Angular, Vue, etc.), but React is mostly used and in demand framework. So I would prefer you to go with it.
Week 1, spend time learning through courses, week 2, practice coding, and in last week (week 3), make small projects
Resources;
Paid:- reactforbeginners, React Tutorial
Free:- codecademy, YT Programming with Mosh (enough for basics)
Day 72- Day 84(Week 11 & 12);
Git;
Gits are used for saving our projects and tracking our codes, best thing about using them is we don't loose our projects. There are major two git platforms, Git and GitHub, learning both of them is easy.
In both these weeks you have to just observe platforms and keep practicing.
CONCLUSION
Learning frontend development is not very tough, just stay consistent. I am 100% sure you will start earning after learning it. Through freelance or Job. Believe me this is very enjoying.
Thank you, don't forget to follow me for more frontend tips.
Support me so that I can gain more knowledge and share it with you guys.
Buy Me A Coffee☕
Good Day❤
