Do you want to work as a web developer? You're at the perfect place if you've ever wanted to get into web development but aren't sure where to begin. I'll walk you through the 6 Month Web Development Mastery Plan in this tutorial so that you may 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 front-end 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.
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.
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 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 from it but if you’re on a budget the free courses will do just fine.
Course(s):
HTML: https://www.youtube.com/watch?v=pQN-pnXPaVgCSS: https://youtu.be/ieTHC78giGQ
Javascript: https://youtu.be/W6NZfCO5SIk
React: https://youtu.be/DLX62G4lc44
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:
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 on to 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 will most likely 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 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, and Express, and teaches 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 daily. After finishing the tutorial, add more features like user pages, comments, hashtags/tags, and be creative! If you have some more time, I encourage you to work on the “Ecommerce 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!
Comments
Post a Comment