Web Development Roadmap - Beginner to Intermediate

Are you a newbie developer confused on where to begin your learning journey? Search no more!!! This post will serve as a guide through your learning journey to landing your first job as a developer.

1. How the internet works: Learn and understand how the internet works. Understand hosting, Domain Name Servers (DNS), HyperText Transfer Protocol (HTTP), the browser, etc. Having a good understanding of what happens behind the scene after you hit the Enter button on Google Search and how the web content is fetched and displayed on the browser will help you alot in your learning journey.

2. Basic Development Tools: Just like every profession, developers have tools that makes it easy to practice our profession. The next skills to master are these tools which includes an Integrated Development Environment (IDE - this is where you write your code. The most popular IDE is Visual Studio Code), Terminal (This is a text-based interface you can type commands. Some popular terminals are power shell, git bash, zsh, etc), and Design Tools such as figma.

3. HTML: HyperText Markup Language (HTML) is the building block of the web. It is very easy to learn. Learn about the different tags, forms and validation, accessibility, Search Engine Optimization (SEO) and best practices.

4. CSS: CSS means Cascading Style Sheet. Learn the basics, grid, flex box, css properties, media query, viewports, fluid widths, transitions and animation. Also learn some CSS frameworks such as Bootstrap, TailwindCSS, they make the job much easier.

5. JavaScript: Learn it's basic syntax, Document Object Manipulation (DOM), Fetch API, ES6+, debugging, events, primitives, async/await, promises, etc. JavaScipt is the main language for the web. You have to dedicate more time here to understand it's concept and build some basic projects applying all the skills you have learnt so far. Some projects I recommend are clones of popular website (HTML and CSS), Todo App, Weather App that consumes a third party weather API. I also advice you learn TypeScript at this point.

6. JavaScript Frameworks: Mordern web development today has been made easy, thanks to frameworks. The next step after learning JavaScript and TypeScript is to learn a JavaScript framework. The framework I recommend is React which is more of a library than a framework.

7. Tools: Just as we have frameworks that make web development easier, we also have tools that makes the process more seamless. At this point, I suggest you learn some tools like Git and Github (for code versioning, storage and sharing), Redux (for state management), Webpack (for code bundling), NPM or yarn (for package management), linters (ESLint) and formatters (prettier)

8. Backend: If you plan on becoming a fullstack developer, then learning about backend development is the next goal. There are so many languages and frameworks for backend developement. I advice you make some research and readup some docs before deciding on a language and framework to use. I recommend NodeJS with ExpressJS as a framwork. This is because they are much easier to learn based on the fact that it's simply JavaScript on the backend. Learn about authentication and authorization, REST API, GraphQL API, API versioning, databases and security.

9. Deployment: The next thing to learn is how to take your projects from development to production. For production, you need to learn about logging, monitoring, virtualization, web servers, continuous integration and continuous deployment tools.

10. Soft Skills: Finally, some soft skills are necessary to help you land and remain in a developer role. Some of these soft skills are Teamwork, Communication, Leadership, Problem Solving, Adaptability, and Attention to details.
    
    Also learn how to write test (atleast learn how to add unit test to your projects).

In conclusion, web development has become so vast that many beginners are confused on where to even begin. You will never feel ready nor good enough but if you can apply all the skills listed here to build about three projects, that's enough to get you started. I hope you find this guide helpful, CHEERS!!!