Do you want to become a web developer? If you have ever wanted to jump into the field of web development but don’t know where to start, you’re in the right place. In this guide, I’ll take you through the 6 Month Web Development Mastery Plan so that you can master web development.
Tools, Languages, and Frameworks
When it comes to web development, the three main languages to use are HTML, CSS, and Javascript. HTML stands for Hyper Text Markup Language. HTML allows the user to design documents to be displayed on the web. CSS stands for Cascading Style Sheets. CSS is a language that is used to style the website: colours, placement, and much more. Javascript (sometimes referred to as JS) is a programming language, which allows for the webpage to be interactive. For example, what happens when you click a button is controlled by Javascript.
A framework is a piece of prebuilt software that could be written in Javascript but not necessarily and which enhances your web page and makes the frontend development experience easier. A frontend framework controls the UI (what the user sees). The three main frontend web development frameworks are Vue, Angular, and React JS. The most popular frontend and best framework (in my opinion) is React JS. React JS has become the most popular front-end framework in 2020 because it is extremely customizable, lightweight, and powerful. Some websites that are using React JS include Instagram, Netflix, Facebook, Uber, and the list goes on. A backend framework is something which makes it easier to create a server. The backend frameworks that will be included in this plan are some of the most popular: Node.js, Express.js, GraphQL, and more.
Image for post
To store information for your website, you need a database. Postgresql is the most popular database in 2020. This is because Postgresql is packed with powerful features and is very easy to learn for a beginner. Postgresql also works perfectly with any size of data, big or small.
Image for post
The 1st Month
The 1st month is all about learning the basics and getting used to programming and the developer tools. You will dive into CSS, HTML, Javascript, and a little bit of React, Node, and Express. I would recommend using VSCode as your code editor (where you write code) and learning a bit of Git and Github (version control and the place where developers share code). I will recommend both free and paid courses. When I started web development I chose the paid course and learnt a lot out of it but if you’re on a budget the free courses will do just fine.
Course(s):
Free:
HTML: https://www.youtube.com/watch?v=pQN-pnXPaVg
CSS: https://youtu.be/ieTHC78giGQ
Javascript: https://youtu.be/W6NZfCO5SIk
React: https://youtu.be/DLX62G4lc44
Paid: https://www.udemy.com/course/the-complete-web-developer-zero-to-mastery/
The 2nd Month
The 2nd month is when you start making projects on your own and start familiarizing yourself with the developer tools, languages, and frameworks. I would recommend choosing one of these projects to do in React by yourself: Calculator, Weather App, Random Quote Generator, or Voting System. If you get stuck StackOverFlow is a great community where developers help other developers with their problems. After making some basic React projects, I would recommend learning data structures and algorithms. These can be hard and more theory-based but I promise it is worth it. Data structures and algorithms will be essential in any field of web development you choose. I would recommend this course: https://youtu.be/t2CEgPsws3U. After learning data structures and algorithms, I encourage you to create a data structure or algorithm visualizer in React. Some ideas include a Sorting Visualizer, Pathfinding Visualizer, or Binary Tree Visualizer. This will strengthen your knowledge of the data structure or algorithm you choose for your project. Share this project on Github. If you don’t know what Git or Github is yet, I would recommend this mini-course: https://youtu.be/DVRQoVRzMIY.
The 3rd Month
This month is all about mastering the basics and moving onto the intermediate and advanced topics. I would recommend creating a real-time chat application by yourself using React and Firebase. Make sure to use React Hooks and the latest React standards (e.g. functional components). After this, I would recommend learning Typescript. Typescript adds types to Javascript. This is optional but is most likely going to be used in your future job and workplace. Most people prefer Typescript for larger projects because Typescript is much more scalable and safe than Javascript. I would recommend reading the Typescript documentation because by now you are an intermediate developer and should learn how to read documentation effectively. After this, I would recommend watching this tutorial on how to implement Typescript in React: https://www.youtube.com/watch?v=Z5iWr6Srsj8. To finish the month, I would recommend this tutorial: https://youtu.be/Fy9SdZLBTOo but to do it in Typescript.
The 4th Month
Ok. You are a serious developer by now, you have invested 3 months into learning web development. I would recommend this course for the most complex project you have done yet (once again, try to do it in Typescript): https://youtu.be/7qAXvOFhlDc. After this, I would recommend doing a blog site (maybe even a Medium clone) using the PERN+Typescript stack you learnt in the previous tutorial. After you finish your blog site, I would choose to learn GraphQL. Like how you learnt Typescript, read the GraphQL documentation to learn it. After learning basic GraphQL, learn to create a REST API with it. You could do any full-stack project you would like. To finish this month off, do some fun programming problems on LeetCode. These problems will improve your data structures and algorithm skills and will be a little bit of fun problem-solving!
The 5th Month
You are nearly finished with the 6-month plan. Time to master the connection between the frontend, backend, and database. This tutorial sums up what you have learnt so far perfectly using GraphQL, Typescript, Postgresql, React, Express, and teaching you some new frameworks/tools. This tutorial can be found here: https://youtu.be/I6ypD7qv3Z8. While doing this tutorial and for the rest of the month, try doing 1 or 2 easy/medium problems on Leetcode per day. After finishing the tutorial, add more features like user pages, comments, hashtags/tags, be creative! If you have some more time, I encourage you to work on the “Reddit Clone” project some more.
The 6th Month
This is the final month, nearly there! You have done a lot of impressive projects. Look around Github and find a few projects that impact you (for example VSCode). To gain some experience in open-source, add some new features to your favourite projects. Contributing to open-source is a great way to develop products with other developers and work to find solutions to real-life problems. As open-source projects need to keep a certain code quality contributing to them will also help your code to become more scalable, reusable, and understandable. As a bonus, build a full-stack portfolio showcasing the amazing projects that you have built so far.
Thanks for reading my The 6 Month Web Development Mastery Plan. I wish you the best in your journey to becoming the best developer you can be!
Henry
Visual Representation:
Latest comments (2)
Whether or not this is a good course for any individual student I think depends a lot on that student’s learning style. Back in 2018 when I was reintroducing myself to web dev after a few years away from it I spent about 2 months getting about 60% into Neagoie’s complete web dev course on Udemy (that you recommend students tackle in the first month) and after getting more than half way in realized I hadn’t retained anything he said despite taking notes- because he doesn’t do any projects in the first half of the course and I really learn by doing and repetition.
After slaving away for the last two years as a self-taught programmer going through the steps you suggest here- personally, I would recommend Rob Percival’s web dev course on Udemy well before the Neagoie course. I would recommend Andrew Mead’s course on Node well before Neagoie’s course. I would recommend Scrimba’s React course well before Neagoie’s course too.
Also the idea that you could be workably good at HTML, CSS and JS in one month (let alone React) is doable but tough. People spend years in front end and still don’t have a total grasp on things like Flexbox, CSS grid, regex, responsiveness, accessibility, jQuery (many jobs still ask for it), ES6, OOP, async-await, AJAX, promises, and CSS frameworks like Bootstrap.
I agree with you. When I took Neagoie's course I didn't retain much in the first half but the reason I like it so much is because of the massive project at the end. It's cool to have built such a big project after one month. For me, the first month is more about getting into web dev and liking it. I will check out Rob Percival's and Andrew Mead's course, looks interesting.
I don't think you can get workably good at every aspect of HTML, CSS, and JS in a month. I think if you get exposed to all the different aspects of web dev then you can choose the aspects you like and master them. As a full-stack developer, I still haven't 100% have mastered Flexbox. I just have gotten workably good at React/Next.js, GraphQL, PostgreSQL, and ML (because I like them).
Really appreciate your feedback/input.