The route into the web development world can seem obfuscated at times—there’s no clear path since there are multiple programming languages, hundreds of frameworks, and thousands of libraries.
What should learn, and in what order?
I’m a self-taught programmer who worked as a senior engineer in multiple startups and large enterprises, one of them being the largest Swiss banks.
Here’s what I learned and how you can take advantage of that knowledge. Anyone can become a web developer—it’s a question of persistence and effort. If you put the work into it, you can become a web developer.
180 days is enough time to kickstart your programming career in the web development field. It may take longer, or it may be quicker—it all depends on how much you want it and how much effort you’re willing to put in.
I started learning web development at the age of 19—naturally, I didn’t have a lot of cash at that time, so I had to learn as frugally as possible. The path I’ve laid out is the cheapest and most cost-effective way.
There’s no need to shell out 10 grand for programming boot camps since there are tons of free resources out there—you just need to know where to look.
I’m not advocating against programming boot camps; they have proven to be effective. They’re also proven to be overpriced and ineffective.
Note: Consider bookmarking this article; this way, you have a quick reference to it whenever you complete a course, challenge, etc.
Days 1–15: Learn the Basics of HTML and CSS
This is the beginning of your journey, and it’s crucial that you focus on getting the fundamentals right. Strong fundamentals will give you the ability to grasp more advanced subjects more quickly.
Start small and learn what Hypertext Markup Language (HTML) is and how it works. HTML is the building block of every website and web application. Complement that skill with learning Cascading Style Sheets (CSS). CSS is used to style websites and web applications.
Mozilla has a concise and up-to-date list of free resources you can dive into. They include the following:
- Mozilla’s guide to getting started with the web
- Getting started with the Web overview
- Installing basic software
- What will your website look like?
- Dealing with files
- HTML basics
- CSS basics
- JavaScript basics
- Publishing your website
- How the Web works
It’s a lot of work to create a professional website, so if you’re new to web development, I encourage you to start small.
You won’t build another Facebook right away, but it’s not hard to get your own simple website online, so let’s start there.
Days 16–50: Start Learning the Basics of JavaScript
JavaScript is the most popular programming language. JavaScript is so widespread because every website uses it. If you’re using a modern browser, go ahead and turn off JavaScript and surf the web—you’ll notice very quickly that 97% of the websites won’t function properly or even load.
JavaScript powers the web. Any web development job will have some form of JavaScript programming.
Thanks to its popularity, there are a lot of places to learn JavaScript. If you’re just starting out, I’d recommend starting with the FreeCodeCamp JavaScript curriculum. It’s free, effective, and gives you interactive challenges to solve.
Once you finish the course, you’ll understand the basics of JavaScript and how it fits into the bigger picture of web development.
The FreeCodeCamp JavaScript course covers many topics, and it will take you a couple of weeks to work through all of them. If you get stuck, don’t be shy to Google your way to the solution—web development involves a lot of learning on the spot and reading StackOverflow to find answers to your questions.
Days 51–81: 30-Day Vanilla JS Coding Challenge
JavaScript30 is for beginner to intermediate developers and designers who want to become comfortable with both JavaScript fundamentals and working in the DOM without a library.
You’ll build 30 things in 30 days with 30 tutorials.
You should already know some JavaScript to start—this isn’t a JavaScript 101 course. We learn by application—encountering many new situations and talking about the hows, whys, and whats that we use to solve them.
We steer clear of opinionated design patterns, frameworks, libraries, and any type of abstraction. These things are great and often needed, but can obstruct learning and constrain initial understanding.
These tutorials rely heavily upon browser APIs, most of which involve interaction with the page. The stuff you build here is really fun!
The course is free, fun, and challenging. Each day, you get a new challenge to build, for 30 days in total. By the time you finish this course, you should feel comfortable with JavaScript, interacting with the DOM, and working with browser APIs.
Days 82–120: Learn a Frontend Library (React, Vue, Angular)
Ask any competitive business if they’re using some form of a frontend library, and the answer will be affirmative.
Back in the old days (the 2000s), companies rolled up their sleeves and built in-house frameworks and libraries tailored to their needs. Modern web development is all about using open-source frameworks and libraries, such as React, Vue, Angular, and Svelte.
It’s hard to decide which framework to go for—there are just too many options. Remember, your ultimate goal is to find a job in the web development field.
My advice would be to scan your area to see which frameworks are most popular and stick to that. Some cities might have 100 job openings for React developers, whereas other cities might have 1000 job openings for Angular. It’s in your interest to pick the most popular one in your area.
I myself am biased towards React as that’s my framework of choice, but think hard before making a decision. There is no right or wrong answer here.
Note: React is a JavaScript library for building user interfaces. Learn what React is all about on the homepage or in the official tutorial.
After you’ve chosen a framework, start building stuff! The only way to get better is to constantly be out of your comfort zone and pushing yourself.
If you need some ideas of what to code, here are 8 coding challenges you can start coding today. Pick a framework and start working towards your goals!
If you need help, there’s a vibrant community on GitHub and StackOverflow ready to help you out. You’re never alone.
Days 121–170: Learn Node, MongoDB, and PostgreSQL (Backend Development)
You’ve made it this far already—giving up is not an option. Now that we’ve learned how frontend development works, let’s add some backend knowledge to our roster.
In order to make real use of web development, every application has a backend in place. In modern days, a backend is an Application Programming Interface (API) that interacts with the frontend.
But why do we even need a backend? Well, let’s say users can create accounts when interacting with our app. We can’t store the data in the browser (i.e., on the frontend). This data needs to be stored in a database. The backend takes care of this operation by sending data from the frontend to the database and back.
Here are some technologies you should learn to master backend development:
- Node.js - Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.
- Express.js - Fast, unopinionated, minimalist web framework for Node.js
- MongoDB - The most popular NoSQL database.
- PostgreSQL - A powerful, open-source object-relational database system.
Start by learning Node.js and Express.js since they’re based on JavaScript, which you already know. This will make your transition to backend development smoother.
Afterward, pick up a database technology such as MongoDB or PostgreSQL. MongoDB is a NoSQL database, while PostgreSQL is a traditional relational database. Both are widely used, and it’s up to you to pick one (or both).
Days 171–180: Build and Deploy Your Portfolio
The final step is to build a portfolio to showcase everything you’ve learned. Your portfolio is your business card—every potential employer will ask you for it.
Make sure your portfolio includes:
- Your Resume: A brief overview of your work experience, skills, and education.
- Your Projects: Include 2-4 projects that you’re proud of. These should highlight the technologies you’ve learned.
- Your GitHub Profile: Employers will want to see your code—make sure you have an active GitHub profile.
Your portfolio should be simple, yet showcase your skills effectively. Once your portfolio is done, deploy it and show it to thw world. GitHub Pages, Netlify, and Vercel offer free hosting for static websites.
Congratulations!
You’ve reached the end of your first journey. Now it’s time to apply for jobs, continue learning, and never stop coding. Here’s how to stand out and land your first tech job. Good luck!
