🔥 I’ve been actively learning and working with Web Development for 10+ years.
⚡ Here are 14 steps you can take if you want to start today:
1. 🚢 Embark on a project
The project would be your personal website where you would document all the knowledge 🥁 about creating websites.
Having something to work on is key to learning anything, and this specific project is very deliberate.
Not only does it start the good habit of documenting your work.
It's also super valuable to call back in a time of need and can also be used as content to share with the community.
2. 💡 Learn HTML and CSS
First, you want to focus on learning about the building blocks of a website.
Once you can do basic styling and navigation, and understand how display, spacing, sizing, and positioning works you are good to go.
3. 👾 Start a GitHub account
After finishing the website, publish it and everything else you do on GitHub.
Wtf is a GitHub? You ask
Good question, it’s a place to manage Git repositories
Wtf is a Git repository? The next thing you're gonna learn.
4. 🌿 Learn Git
You should be able to set up a public repository for your work, create at least one branch and know how to merge them.
5. ⚡ Learn Node.js and NPM
Do not dive into anything backend or web server related.
The goal is to understand what Node.js and NPM are, how to set up a new project, and how to publish a package. A simple console.log should be enough.
You should also become familiar with the JSON format.
6. 💯 Learn JavaScript + Typescript
Set up TypeScript on top of your Node.js environment and follow along with the best JavaScript + Typescript tutorial available.
Best decision you can make in 2023.
7. 🔵 Learn React
Start a new project like a simple note-taking app to learn React.
No backend - save everything to local storage.
You should be able to start a React application, build components, manage states, and work with hooks.
You should also be able to make HTTP requests and work with CRUD APIs.
Deploy it on Vercel or Netlify.
8. 🎨 Learn Material-UI
Or whatever other UI library you find an affinity for.
MUI is still my number-one choice in 2023.
9. 🟣 Learn Next.js
Now bring back the very first project.
The goal is to build your new personal website in a blog format powered by all this new technology.
Again the project is very deliberate to be a content hub after we set up the Content Management System (CMS).
10. 🟠 Learn and Implement Sanity.io
This going to be the Content Management System (CMS).
Their default blog schema is pretty good, you just need to build a good UI on top of it and post about everything new you’ve learned.
11. 🟢 Learn and implement Supabase
All the backend services you could ever need with a free plan.
12. 🔥 Build a boilerplate
Build a production-ready boilerplate with all the technologies you learned so far and put it to the test.
13. 💖 Build a few passion projects
Take this time to solidify all the knowledge.
Play around and explore fun 3rd party libraries or even new technologies.
Build a cool portfolio of work on top of your boilerplate.
14. 🤖 Setup continuous integration and deployment
Seal the deal with some automated workflows for quality assurance and continuous delivery.
🎉 Congratulations you are now a full-fledged Web Developer capable of building an entire system from end-to-end and ready to take on any challenge.
🚀 Share this post to help a Web Developer friend.
👍 Follow for more insights into the Web Development world!