THE COMPLETE

WEB DEVELOPER
ROADMAP

Go from zero to a web developer in 12 18 months

Mosh Hamedani
-
 2

Hi! I am Mosh Hamedani, a software engineer with over 20

years of experience.

Over the past 10 years, I ve had the privilege of teaching

millions of people how to code and become professional
software engineers through my YouTube channel and online
courses.

It s my mission to make software engineering accessible to

everyone. Join me on this journey and unlock your potential in
the world of coding!

https://codewithmosh.com

Copyright 2024 Code with Mosh codewithmosh.com

’
’
Web Development Roadmap 3

Table of Content

Introduction 5
Target Audience 5
Resources 5
Web Development 6
Back-end Development 7
Languages 8
Python 9
Java 10
Project Ideas 11
Git 13
Data Structures & Algorithms 14
Design Patterns 15
Databases 16
MySQL 17
Project Ideas 18
MongoDB 21
Web Frameworks 22
Django 23
Spring Boot 24
Project Ideas 25
Additional Skills 29
Front-end Development 30
HTML 31
CSS 32
HTML/CSS Project Ideas 33
JavaScript 35
JavaScript Project Ideas 37
Git 39
TypeScript 40
React 41

Copyright 2024 Code with Mosh codewithmosh.com

Web Development Roadmap 4

React Project Ideas 42

SASS 44
Tailwind CSS 45
Automated Testing 46
Next.js 47
Next.js Project Ideas 48

Copyright 2024 Code with Mosh codewithmosh.com

Web Development Roadmap 5

Introduction
This guide is designed to help you navigate the essential skills needed to become
a successful web developer. Whether you're just starting out or looking to
enhance your existing skills, this roadmap will provide a clear and structured path.

Target Audience
This guide is for:

• Beginners who want to know what they need to learn to land a web developer
job.

• Experienced individuals looking to level up their skills and fill in the gaps in
their knowledge.

Resources
For detailed tutorials and full courses, check out the following resources:

• YouTube Channel: https://www.youtube.com/c/programmingwithmosh

• Full Courses: https://codewithmosh.com

Copyright 2024 Code with Mosh codewithmosh.com

Web Development Roadmap 6

Web Development
Web development is generally broken down into two areas: front-end
development and back-end development, with full-stack development being a
combination of both.

Front-end development focuses on what the user sees and interacts with. This
includes the website in your browser or the app on your mobile phone or tablet.

Back-end development handles everything behind the scenes, like data

processing, storage, and logic.

Where to Start
You can start on either end, but if you re new to web development and pursuing a
career in this field, I recommend starting with the back-end. This approach gives
you a solid foundation in programming and problem-solving. Plus, when you
transition from back-end to front-end, you ll have a deep understanding of what
happens under the hood. In contrast, if you start with the front-end, the back-end
can seem mysterious, and you might not fully grasp what s happening behind the
scenes.

Copyright 2024 Code with Mosh codewithmosh.com

’
’
’
 Web Development Roadmap 7

Back-end Development
Back-end development has many tools and technologies. Trying to learn them all
is impossible and not practical. This guide focuses on the most important and
widely used skills and tools to help you get the best job opportunities.

I ve selected these skills because they are in high demand. Mastering them will
give you a strong foundation and make you a competitive job candidate.

For the first 12 months, focus only on the tools and technologies listed in this
document. Instead of trying to learn too many things at once, build a strong
foundation with these essential skills. You can always learn other tools and
technologies on the job as you go.

Skill Time required Learning Phase

Programming 2 months Beginner
Git 2 weeks Beginner
Data Structures & Algorithms 2 months Beginner
Design Patterns 2 months Intermediate
Databases 2 months Intermediate
Web Framework 2 months Advanced
Total 11 months

Copyright 2024 Code with Mosh codewithmosh.com

’
Web Development Roadmap 8

Languages
You have many choices when it comes to selecting a programming language for
backend development, and choosing the right one depends on various factors like
project requirements, team expertise, and performance needs.

Language Use Case

JavaScript Full-stack development (used both on client and server)
Python and Ruby Rapid prototyping and fast development cycles
Java and C# Building large-scale, enterprise-grade applications
Go For performance-critical and concurrent applications.

Python, Java, and JavaScript are among the most popular languages for backend
development.

My Recommendation
• Pick only one language from this list.

• To decide what language is right for you, do some research and find the job
opportunities available for each language where you live.

• For beginners, I d recommend Python because it s the easiest.

• For more serious leaners, I d recommend Java because it is a classic language

and is taught to computer science students. Once you learn Java, you can
easily learn other languages, particularly C-based languages C, C#, C ,
JavaScript, etc).

Copyright 2024 Code with Mosh codewithmosh.com

’
’
’
(
+
+
Web Development Roadmap 9

Python
Python is a highly popular language for backend development, known for its
simplicity, readability, and extensive library support. It's widely used for building
scalable and robust web applications, thanks to frameworks like Django and Flask.

Time required: 2 months

Learning resources: YouTube Tutorial | Full Course

Essential Concepts
• Basics: Variables, data types, type conversion

• Control Flow: Comparison operators, logical operators, if, elif, else, for,
for..else, iterables, while

• Functions: Defining functions, arguments, keyword args, default args, xargs,

xxargs, scope

• Data Structures: Arrays, lists, tuples, sets, stacks, queues, dictionaries,

comprehensions, generator expressions

• Exception Handling: try/except, with statements, raising exceptions

• Object-oriented Programming: Classes, constructors, instance vs class

members, magic methods, private members, properties, inheritance, method
overriding, Object class, abstract base classes, polymorphism, duck typing

• Modules: Built-in modules, creating modules, packages, sub-packages

• Python Standard Library: Working with paths, files, directories, CSV, JSON,
date/times, random values

• Package Management: Pypi, pip, virtual environments, pipenv, Pipfile

Copyright 2024 Code with Mosh codewithmosh.com

Web Development Roadmap 10

Java
Java is a robust and versatile language, perfect for backend development. Known
for its performance and scalability, Java is a top choice for building large-scale,
enterprise-level applications.

Time required: 2 months

Learning resources: YouTube Tutorial | Full Course

Essential Concepts
• Basics: Variables, primitive and reference types, constants, casting, arrays,
arithmetic expressions

• Control Flow: Comparison operators, logical operators, ternary operator, if/

else, switch/case, for, foreach, while, do..while, break, continue

• Object-oriented Programming: Classes, objects, getters/setters,

constructors, method overloading, static members, inheritance, access
modifiers, method overriding, upcasting/downcasting, polymorphism,
abstract classes, final classes, interfaces

• Exceptions: Exceptions hierarchy, try/catch/finally, throw, custom exceptions

• Generics: Generic classes/methods/interfaces, constraints, type erasure,

type parameters

• Collections Framework: Iterable, Iterator, Collection, List, Comparable,

Comparator, Queue, Set, Map

• Functional interfaces: Lambda expressions, Consumer, Supplier, Function,

Predicate, BinaryOperator, UnaryOperator

• Streams: Creating streams, mapping, filtering, slicing, sorting, peeking,

reducing

Copyright 2024 Code with Mosh codewithmosh.com

Web Development Roadmap 11

Project Ideas
When you're just starting out and learning a programming language, building
command-line applications is a great way to practice your skills. Here are a few
project ideas, ordered from simple to complex:

1. Calculator
Build a basic calculator that can perform operations like addition, subtraction,
multiplication, and division. This will give you practice with functions and control
flow.

2. Number Guessing Game

Develop a game where the program randomly selects a number, and the user has
to guess it. Provide feedback if the guess is too high or too low. This project helps
you understand loops and conditional statements.

3. Unit Converter
Build a unit converter that can convert between different units of measurement
(e.g., kilometers to miles, Celsius to Fahrenheit). This project will strengthen your
understanding of functions and user input.

4. Password Generator
Develop a password generator that creates random, secure passwords based on
user-defined criteria (e.g., length, inclusion of special characters). This project will
help you understand random number generation and string handling.

5. Word Counter
Create a program that counts the number of words, characters, and lines in a
given text file. This will give you experience with file I/O operations and string
manipulation.

Copyright 2024 Code with Mosh codewithmosh.com

Web Development Roadmap 12

6. To-Do List
Create a simple to-do list application where users can add, remove, and mark
tasks as complete. This project will help you practice working with lists and user
input.

7. Simple Quiz
Create a quiz application that asks the user multiple-choice questions and
provides feedback on their answers. This will help you practice working with lists,
conditionals, and user input.

8. Contact Book
Design a command-line application to store and manage contacts. Users should
be able to add, view, and delete contacts. This will help you practice working with
data structures like lists or dictionaries.

Copyright 2024 Code with Mosh codewithmosh.com

Web Development Roadmap 13

Git
Git is a version control system that tracks changes in code, allowing multiple
developers to collaborate efficiently. It helps manage and maintain different
versions of code, facilitates branching and merging, and stores the project history.

Time required: 1 2 weeks

Learning resources: YouTube Tutorial | Full Course

Essential Concepts
• Setup and Configuration: init, clone, config

• Staging: status, add, rm, mv, commit, reset

• Inspect and Compare: log, diff, show

• Branching: branch, checkout, merge

• Remote Repositories: remote, fetch, pull, push

• Temporary Commits: stash

• GitHub: fork, pull request, code review

Copyright 2024 Code with Mosh codewithmosh.com

-
Web Development Roadmap 14

Data Structures & Algorithms

Data structures and algorithms are core topics taught to computer science
students but often skipped by self-taught developers. However, mastering them is
crucial for boosting your programming and problem-solving skills. They're also
frequently tested in tech interviews, so understanding these concepts will give
you a significant advantage when job hunting.

Time required: 2 months

Learning resources: YouTube Tutorial | Full Course

Essential Concepts
• Big O Notation

• Arrays and Linked Lists

• Stacks and Queues

• Hash Tables

• Trees and Graphs: Binary trees, AVL trees, heaps, tries, graphs

• Sorting Algorithms: Bubble sort, selection sort, insertion sort, merge sort,
quick sort, counting sort, bucket sort

• Searching algorithms: Linear search, binary search, ternary search, jump

search, exponential search

• String Manipulation Algorithms: Reversing a string, reversing words,

rotations, removing duplicates, most repeated character, anagrams,
palindrome

• Recursion

Copyright 2024 Code with Mosh codewithmosh.com

Web Development Roadmap 15

Design Patterns
Design patterns are proven solutions to common software design problems.
There are 23 classic design patterns that were documented in the book: “Design
Patterns: Elements of Reusable Object-oriented Software by the Gang of Four.
Many of these patterns are used in web frameworks, particularly Spring, Django,
and ASP.NET Core. So learning these design patterns will give you a deeper
understanding of object-oriented design principles and how these web
frameworks work under the hood.

Time required: 2 months

Learning resources: YouTube Tutorial | Full Course

Essential Concepts
• Object-oriented Programming: Classes, interfaces, encapsulation,
abstraction, inheritance, polymorphism, coupling

• Creational Patterns: Prototype, singleton, factory method, abstract factory,

builder

• Structural Patterns: Composite, adapter, decorator, facade, flyweight, bridge,

proxy

• Behavioral Patterns: Memento, state, iterator, strategy, template method,

command, observer, mediator, chain of responsibility, visitor

Copyright 2024 Code with Mosh codewithmosh.com

”
Web Development Roadmap 16

Databases
Understanding databases is a fundamental skill for backend developers. There are
two main types of databases you should know about: Relational and NoSQL. Each
has its own use cases and benefits, and knowing when to use which can make a
big difference in your applications.

Relational Databases
• Storage: Data is stored in tables with rows and columns, much like a
spreadsheet.

• Examples: MySQL, PostgreSQL, SQLite, SQL Server, and Oracle.

• Use Case: Best for applications that require complex queries and reporting,
such as banking and financial systems.

NoSQL Databases
• Storage: Data is stored without a predefined structure, making it more
flexible for different types of data.

• Examples: MongoDB, CouchDB, and Cassandra.

• Use Case: Best for applications that require flexible data models, such as
real-time analytics, content management systems, and IoT applications.

You don't need to learn all these database management systems. Only one is
enough to get started. You can learn about the others when needed.

My recommendation: To build a strong foundation, start with MySQL for relational

databases followed by MongoDB for NoSQL.

Copyright 2024 Code with Mosh codewithmosh.com

 Web Development Roadmap 17

MySQL
MySQL is a widely used open-source relational Database Management System
DBMS that's perfect for beginners. Whether you're building a small web
application or a large enterprise system, MySQL provides a solid foundation for
managing your data.

Time required: 1 month

Learning resources: YouTube Tutorial | Full Course

Essential Concepts
• Querying Data: SELECT, WHERE, logical operators AND, OR, NOT , IN,
BETWEEN, LIKE, REGEXP, IS NULL, ORDER BY, LIMIT

• Joins: Inner joins, outer joins, self joins, natural joins, cross joins, unions

• Complex Queries: Aggregate functions MAX, MIN, AVG, SUM, COUNT ,

GROUP BY, HAVING, ROLLUP, subqueries

• Data Manipulation: INSERT, UPDATE, DELETE

• Views

• Stored Procedures and Functions

• Triggers and Events

• Transactions: Transaction isolation levels, BEGIN, COMMIT, ROLLBACK

• Database Design: Tables, relationships, primary keys, foreign keys,

normalization

• Indexes

• Security: Managing users and privileges

Copyright 2024 Code with Mosh codewithmosh.com

(
)
(
(
)
)
Web Development Roadmap 18

Project Ideas
Here are a few project ideas for practicing your MySQL skills, ordered from simple
to complex:

1. Simple Address Book

Design a database for storing contact information. Create tables for storing
names, phone numbers, and email addresses. Write queries to add new contacts,
update existing ones, delete contacts, and retrieve all contacts.

2. Library Management System

Create a database schema for a library. Design tables for books, authors, and
borrow records. Write queries to:

• Add new books and authors

• Record borrowing and returning of books

• List all available books

• Find books by a specific author

3. Student Grades Database

Design a database to store student grades, including tables for students, courses,
and grades. Write queries to:

• Add students and courses

• Record student grades

• Calculate average grades for a student

• List students with the highest grades in a course

Copyright 2024 Code with Mosh codewithmosh.com

Web Development Roadmap 19

4. Inventory Management System

Create a schema for an inventory system. Design tables for products, suppliers,
and stock levels. Write queries to:

• Add new products and suppliers

• Update stock levels

• List all products with low stock

• Find suppliers for a specific product

5. Event Registration System

Design a database for managing event registrations, including tables for events,
attendees, and registrations. Write queries to:

• Add new events and attendees

• Register attendees for events

• List all attendees for a specific event

• Find events a particular attendee has registered for

6. Employee Management System

Develop a database schema for an employee management system with tables for
employees, departments, roles, and salaries. Write queries to:

• Add employees and departments

• Update employee roles and salaries

• Generate department-wise employee lists

Copyright 2024 Code with Mosh codewithmosh.com

Web Development Roadmap 20

• Calculate average salaries by department

7. Online Store Database

Create a schema for an online store, including tables for products, customers,
orders, and payments. Write queries to:

• Add new products and customers

• Record orders and payments

• List all orders for a customer

• Calculate total sales for a period

8. Movie Rental System

Design a database for a movie rental store, with tables for movies, customers,
rentals, and returns. Write queries to:

• Add movies and customers

• Record rentals and returns

• List all currently rented movies

• Calculate late fees for overdue returns

Copyright 2024 Code with Mosh codewithmosh.com

Web Development Roadmap 21

MongoDB
MongoDB is a powerful, flexible, and scalable NoSQL database that is perfect for
handling large volumes of unstructured or semi-structured data.

If you're just starting out, you can skip MongoDB as it's often not required by
entry-level jobs. However, familiarity with NoSQL databases can be an advantage.

Time requires: 1 month

Essential Concepts
• Basics: SQL vs NoSQL, documents and collections, data types

• Methods: insert(), find(), update(), deleteOne(), bulkeWrite()

• Comparison Operators: $eq, $gt, $lt, $lte, $gte, $ne

• Logical Operators: $and, $or, $not, $nor

• Array Operators: $in, $nin, $all, $elemMatch, $size

• Element Operators: $exists, $type, $regex

• Projection Operators: $project, $include, $exclude, $slice

• Indexes: Single field, compound, text

• Aggregation: $match, $group, $sort, $project, $skip, $limit, $unwind,

$lookup, $sum

• Transactions

• Security: Managing user roles, authentication, and authorization

Copyright 2024 Code with Mosh codewithmosh.com

Web Development Roadmap 22

Web Frameworks
Web frameworks provide us with tools and a structured approach to building
backend applications. They simplify the development process by offering pre-built
components and functionalities, so we can focus on creating our application
rather than dealing with repetitive tasks like routing, database connections, and
user authentication. By using web frameworks, we can develop faster, write
cleaner code, and ensure our applications are scalable and maintainable.

Language Web Framework

Python Django
Java Spring Boot
JavaScript Express.js
C# ASP.NET Core
Ruby Ruby on Rails
Go Gin

You don't need to learn all of these frameworks. Just focus on learning one that
matches the programming language you're skilled at.

Copyright 2024 Code with Mosh codewithmosh.com

Web Development Roadmap 23

Django
Django is a high-level Python web framework that encourages rapid development
and clean, pragmatic design. It's known for its "batteries-included" philosophy,
providing a wide range of built-in features to help you build robust and scalable
web applications quickly.

Time required: 2 months

Learning resources: YouTube Tutorial | Full Course

Essential Concepts
• Basics: Models, views, URLs, templates

• Models: Creating models, fields, relationships, generic relationships

• Migrations: Creating, running, reverting

• Django ORM Managers, QuerySets, CRUD operations, sorting, limiting,

selecting and deferring fields

• Admin Interface: Customizing pages, custom actions, custom forms

• RESTful APIs: Resources, HTTP methods, API views, serializers

• Advanced API Concepts: Class-based views, mixins, generic views,

ViewSets, routers, filtering, searching, sorting, pagination

• Authentication: Managing user models, profiles, groups, permissions

• Deployment

Copyright 2024 Code with Mosh codewithmosh.com

:
Web Development Roadmap 24

Spring Boot
Spring Boot is a powerful and widely-used framework for building enterprise-level
applications in Java. It simplifies the development process by providing pre-
configured templates and reducing the need for boilerplate code, enabling rapid
development and deployment.

Time required: 2 months

Essential Concepts
• Spring Core: Dependency Injection DI , Spring IOC, Spring AOP, Spring MVC,
annotations, configuration

• Spring Boot: Starters, auto configuration, actuators, embedded server,

hibernate

• Database Integration: Spring Data JPA, Spring Data MongoDB

• Security: Spring Security (authentication, authorization, OAuth2, JWT

authentication)

• Testing: JPA Test, MockMVC

• Deployment

Copyright 2024 Code with Mosh codewithmosh.com

(
)
Web Development Roadmap 25

Project Ideas
Here are some project ideas, ordered from simple to complex:

1. Personal Blog API

Create an API for a personal blog where users can create, read, update, and
delete posts. Implement user authentication and basic CRUD operations.

Key Features:

• User authentication (signup, login, logout)

• CRUD operations for blog posts

• Endpoints for managing user profiles

2. To-Do List API

Build an API for a to-do list application where users can manage their tasks.
Include user authentication and the ability to categorize tasks.

Key Features:

• User authentication

• CRUD operations for tasks

• Categorization and filtering of tasks

• Endpoints for task management

3. Simple E-commerce API

Develop an API for a basic e-commerce site where users can browse products,
add them to a cart, and checkout. Include user authentication and order
management.

Copyright 2024 Code with Mosh codewithmosh.com

Web Development Roadmap 26

Key Features:

• User authentication

• CRUD operations for products

• Shopping cart management

• Order processing and management

4. Event Management API

Create an API for managing events, where users can create events, register for
events, and see a list of attendees.

Key Features:

• User authentication

• CRUD operations for events

• Registration and attendee management

• Endpoints for event management

5. Social Media API

Build an API for a social media platform where users can create profiles, post
updates, follow other users, and like posts.

Key Features:

• User authentication

• CRUD operations for posts

• User following and unfollowing

Copyright 2024 Code with Mosh codewithmosh.com

Web Development Roadmap 27

• Like and comment functionality

6. Online Learning Platform API

Develop an API for an online learning platform where instructors can create
courses, and students can enroll in and complete courses. Include progress
tracking and course reviews.

Key Features:

• User authentication

• CRUD operations for courses

• Enrollment and progress tracking

• Course review management

7. Job Board API

Create an API for a job board where companies can post job listings, and users
can apply for jobs. Include user authentication and resume uploads.

Key Features:

• User authentication

• CRUD operations for job listings

• Job application submission and tracking

• Resume management

8. Real-Time Chat API

Build an API for a real-time chat application where users can join chat rooms and
send messages. Implement user authentication and real-time message updates.

Copyright 2024 Code with Mosh codewithmosh.com

Web Development Roadmap 28

Key Features:

• User authentication

• CRUD operations for chat rooms

• Real-time messaging using WebSockets

• Message history and retrieval

Copyright 2024 Code with Mosh codewithmosh.com

Web Development Roadmap 29

Additional Skills
As you advance in your backend development career, learning additional skills can
help you reach senior levels. Here are some key areas to focus on:

• Database Management: Query optimization, replication, sharding,

transactions, concurrency

• API Design: GraphQL, gRPC

• Security: OAuth, JWT, TLS/SSL, common security vulnerabilities SQL

injection, XSS, CSRF

• Scalability and Performance: Load balancing, caching Redis, Memcached),

asynchronous processing with message queues RabbitMQ

• System Design and Architecture: Microservices, Service-Oriented

Architecture SOA , Event-Driven Architecture, Domain-Driven Design DDD ,
Command Query Responsibility Segregation CQRS , Event Sourcing

• DevOps and CI/CD Jenkins, GitHub Actions, Docker, Kubernetes

• Cloud Computing: AWS, Azure, Google Cloud

Copyright 2024 Code with Mosh codewithmosh.com

(
)
:
)
(
(
)
(
)
(
(
)
 Web Development Roadmap 30

Front-end Development
Front-end development has many tools and technologies. Trying to learn them all
is impossible and not practical. This guide focuses on the most important and
widely used skills and tools to help you get the best job opportunities.

I ve selected these skills because they are in high demand. Mastering them will
give you a strong foundation and make you a competitive job candidate.

For the first 12 months, focus only on the tools and technologies listed in this
document. Instead of trying to learn too many things at once, build a strong
foundation with these essential skills. You can always learn other tools and
technologies on the job as you go.

Skill Time required Learning Phase

HTML 2 weeks Beginner
CSS 1 month Beginner
JavaScript 2 months Beginner
Git 2 weeks Beginner
TypeScript 3 weeks Intermediate
React 2 months Intermediate
SASS 2 weeks Intermediate
Tailwind 3 weeks Intermediate
Automated Testing 1 month Advanced
Next.js 1.5 month Advanced
Total 10 months

Copyright 2024 Code with Mosh codewithmosh.com

’
Web Development Roadmap 31

HTML
HTML, or Hypertext Markup Language, is the foundation of web development
used for structuring web pages. It defines the structure and content of web
documents through elements like headings, paragraphs, links, images, and lists.

Time required: 1 2 weeks

Learning resources: YouTube Tutorial | Full Course

Essential Concepts
• Basic Tags: <html>, <head>, <body>, <title>

• Text Formatting: <h1 to <h6 , <p>, <br>, <hr>, <strong>, <em>

• Lists: <ul>, <ol>, <li>

• Links: <a>, href, target

• Images: <img>, src, alt, width, height

• Tables: <table>, <tr>, <td>, <th>, colspan, rowspan

• Forms: <form>, <input>, <textarea>, <button>, <select>, <option>, <label>

• Semantic Elements: <header>, <nav>, <main>, <section>, <article>,

<footer>

• Meta Tags: <meta>, charset, name, content, viewport

• Multimedia: <audio>, <video>, controls, <source>

Copyright 2024 Code with Mosh codewithmosh.com

-
>
>
Web Development Roadmap 32

CSS
CSS, or Cascading Style Sheets, is used to style and layout web pages. It allows
you to control the visual presentation of HTML elements, including colors, fonts,
spacing, and positioning, creating responsive designs that adapt to various screen
sizes.

Time required: 2 4 weeks

Learning resources: YouTube Tutorial | Full Course

Essential Concepts
• Selectors: element, class, id, attribute, pseudo-class, pseudo-element
• Box Model: margin, border, padding, content
• Positioning: static, relative, absolute, fixed, sticky
• Display: block, inline, inline-block, none, flex, grid
• Flexbox: justify-content, align-items, flex-direction, flex-wrap
• Grid: grid-template-columns, grid-template-rows, gap, grid-area
• Typography: font-family, font-size, font-weight, line-height, text-align, text-
decoration

• Colors: color, background-color, opacity, rgba, hex, hsl

• Units: px, em, rem, %, vh, vw
• Transitions and Animations: transition, transform, animation
• Responsive Design: media queries, @media, max-width, min-width

Copyright 2024 Code with Mosh codewithmosh.com

-
Web Development Roadmap 33

HTML/CSS Project Ideas

Personal Portfolio Website

Create a personal portfolio website that showcases your projects, skills, and
contact information.

• Home page with a welcome message and navigation menu

• About page with a brief bio and photo

• Projects page with thumbnails and descriptions of your work

• Contact page with a contact form and social media links

• Get design inspirations from dribbble.com

Responsive Blog Layout

Design a responsive blog layout with a header, footer, sidebar, and main content
area.

• Header with a logo and navigation menu

• Sidebar with recent posts and categories

• Main content area with blog posts formatted with headings, images, and
paragraphs

• Footer with social media links and copyright information

Copyright 2024 Code with Mosh codewithmosh.com

Web Development Roadmap 34

Landing Page for a Product

Create a landing page for a fictional product, including a call-to-action CTA
button and an email subscription form.

• Hero section with a large background image, product tagline, and CTA button

• Features section with icons and descriptions of the product's benefits

• Testimonials section with customer reviews

• Email subscription form

Copyright 2024 Code with Mosh codewithmosh.com

(
)
Web Development Roadmap 35

JavaScript
JavaScript is a programming language that adds interactivity and dynamic
behavior to web pages. It handles tasks like user interactions, form validation,
animations, and fetching data from servers, making web pages more engaging
and functional.

Time required: 6 8 weeks

Learning resources: YouTube Tutorial | Full Course

Essential Concepts
• Variables: declarations (var, let, const), scope (block, functional, global),
hoisting

• Data Types: primitive types (strings, number, boolean, undefined, null,

Symbol), Object, typeof operator

• Type Casting: explicit casting, implicit casting, type conversion vs coercion

• Operators: assignment, comparison, arithmetic, bitwise, logical, conditional
• Equality Comparisons: ==, ===, Object.is
• Control Flow: if, else, switch
• Loops: for, for…in, for…of, while, do...while, break, continue
• Functions: function declaration, function expression, arrow functions,
parameters, return values

• Arrays: creation, methods (push, pop, shift, unshift, map, filter, reduce)
• Objects: creation, properties, methods, this keyword
• Classes

Copyright 2024 Code with Mosh codewithmosh.com

-
Web Development Roadmap 36

• Data Structures: Map, WeakMap, Set, WeakSet, JSON

• Error Handling: try, catch, finally, throw, Error objects
• Asynchronous JavaScript: Promises, async/await, callbacks, callback hell
• DOM Manipulation: document.getElementById, document.querySelector,
addEventListener, innerHTML, style

• Events: click, submit, load, change, focus, blur, event propagation (bubbling
and capturing)

• Working with APIs: fetch

• Browser Storage: local storage, web storage
• Modules: CommonJS, ECMAScript Modules

Copyright 2024 Code with Mosh codewithmosh.com

Web Development Roadmap 37

JavaScript Project Ideas

Todo List
Build an interactive to-do list application where users can add, remove, and mark
tasks as completed.

• Input field for new tasks

• List of tasks with checkboxes to mark completion

• Delete button to remove tasks

• Save tasks in local storage

Weather App
Create a weather application that fetches and displays weather data based on
user input.

• Input field for city name

• Display current weather information (temperature, description, icon)

• Fetch data from a weather API

• Error handling for invalid inputs

Copyright 2024 Code with Mosh codewithmosh.com

Web Development Roadmap 38

Image Carousel
Develop an image carousel that automatically transitions between images and
allows manual navigation.

• Automatic image sliding with a timer

• Previous and next buttons for manual navigation

• Indicators to show the current image

• Responsive design

Quiz App
Build a quiz application that presents multiple-choice questions to the user and
displays their score at the end.

• Display one question at a time with multiple-choice answers

• Highlight correct and incorrect answers

• Track and display the user's score

• Option to restart the quiz

Copyright 2024 Code with Mosh codewithmosh.com

Web Development Roadmap 39

Git
Git is a version control system that tracks changes in code, allowing multiple
developers to collaborate efficiently. It helps manage and maintain different
versions of code, facilitates branching and merging, and stores the project history.

Time required: 1 2 weeks

Learning resources: YouTube Tutorial | Full Course

Essential Concepts
• Setup and Configuration: init, clone, config

• Staging: status, add, rm, mv, commit, reset

• Inspect and Compare: log, diff, show

• Branching: branch, checkout, merge

• Remote Repositories: remote, fetch, pull, push

• Temporary Commits: stash

• GitHub: fork, pull request, code review

Copyright 2024 Code with Mosh codewithmosh.com

-
Web Development Roadmap 40

TypeScript
TypeScript is a superset of JavaScript that adds static typing and other features,
making code more robust and maintainable. It helps catch errors early during
development and is widely used in large-scale applications.

Time required: 2 3 weeks

Learning resources: YouTube Tutorial | Full Course

Essential Concepts
• Basics Types: string, number, boolean, array, tuple, enum, any, void, null,
undefined, never, unknown

• Type Assertion: as keyword, <> syntax

• Interfaces: defining, extending, optional properties, readonly properties,
dynamic keys

• Classes: properties, methods, constructors, inheritance, access modifiers

(public, private, protected)

• Functions: type annotations, optional and default parameters, rest parameters

• Generics: generic functions, generic classes
• Modules: import, export, namespaces
• Utility types: Partial, Pick, Omit, Readonly, Record, Exclude, etc

Copyright 2024 Code with Mosh codewithmosh.com

-
Web Development Roadmap 41

React
React is a popular JavaScript library for building user interfaces, particularly
single-page applications. It allows developers to create reusable UI components,
manage application state efficiently, and handle dynamic data changes.

Time required: 6 8 weeks

Learning resources: YouTube Tutorial | Full Course

Essential Concepts
• Basics: components, props, state, JSX
• Rendering: conditional rendering, rendering lists
• Hooks: useState, useEffect, useReducer, useRef, custom hooks
• Styling: using vanilla CSS, CSS modules, CSS-in-JS
• Forms: react-hook-forms, zod
• Data Fetching: fetch API, axios
• State Management: lifting state up, Context API, React Query, Redux
• Routing: React Router

Copyright 2024 Code with Mosh codewithmosh.com

-
Web Development Roadmap 42

React Project Ideas

Simple Todo List App

Create a simple to-do list application where users can add, delete, and mark tasks
as complete.

• Add new tasks with a form input

• Display a list of tasks with checkboxes to mark completion

• Delete tasks from the list

• Filter tasks by completed and pending status

Weather App
Build a weather application that fetches and displays weather data based on user
input.

• Input field for entering a city name

• Fetch current weather data from a weather API

• Display weather information such as temperature, humidity, and weather

conditions

• Handle loading states and errors

Copyright 2024 Code with Mosh codewithmosh.com

Web Development Roadmap 43

Recipe Finder
Create an application that allows users to search for recipes and view details.

• Search bar for entering ingredients or recipe names

• Display a list of matching recipes with images

• Click on a recipe to view detailed information including ingredients and steps

E-commerce Storefront
Build a simple e-commerce storefront with product listings and a shopping cart.

• Display a list of products with images, prices, and descriptions

• Add products to a shopping cart

• View the shopping cart with a list of selected products and total price

• Remove items from the cart and update quantities

Expense Tracker
Build an expense tracker application to manage personal finances.

• Add new expenses with details such as amount, category, and date

• Display a list of expenses with filtering options

• Visualize expenses with charts (e.g., pie chart for categories)

• Calculate total expenses and display summary statistics

Copyright 2024 Code with Mosh codewithmosh.com

 Web Development Roadmap 44

SASS
SASS Syntactically Awesome Stylesheets) is a CSS preprocessor that extends
CSS with features like variables, nested rules, and mixins. It simplifies writing and
managing CSS for large projects, improving efficiency and maintainability.

Time required: 1 2 weeks

Essential Concepts
• Variables: defining, using, scope
• Loops: for loops, each loops, while loops
• Nesting: rules, selectors
• Mixins: creating, including, parameters, default values
• Inheritance: @extend
• Functions: built-in functions, custom functions
• Feature checks: feature-exists
• Other features: conditionals, lists, maps, interpolation

Copyright 2024 Code with Mosh codewithmosh.com

(
-
Web Development Roadmap 45

Tailwind CSS
Tailwind is a utility-first CSS framework that provides a set of predefined classes
for rapid UI development. It enables developers to build custom designs directly in
the HTML by applying utility classes, ensuring consistency and speed.

Time Required: 2 3 weeks

Essential Concepts
• Utility-first CSS principles, benefits

• Configuration: tailwind.config.js, customizing themes

• Applying Styles: utility classes for layout, flexbox, grid, sizing, spacing,
borders, typography, colors, backgrounds, transitions, animations, transforms

• Responsive Design: responsive utilities, breakpoints

• Plugins: adding and configuring plugins

Copyright 2024 Code with Mosh codewithmosh.com

:
-
Web Development Roadmap 46

Automated Testing
Jest and Vitest are testing frameworks for JavaScript applications that enable
developers to write tests for their code. They help ensure code reliability and
correctness by automating the testing process, identifying bugs, and verifying
functionality.

Time required: 3 4 weeks

Learning resources: YouTube Tutorial | Full Course

Essential Concepts
• Basics: setting up, writing test cases
• Matchers: common matchers (toBe, toEqual, toContain, toBeTruthy,
toBeFalsy, toBeNull, toBeUndefined, toBeDefined, toMatch, toMatchObject,
toHaveProperty, toHaveLength)

• Mocks: mocking functions, modules, timers

• Testing Asynchronous Code: async/await, promises
• Code Coverage: collecting and reporting coverage
• Testing React Components with React Testing Library: queries (get, query,
find), matchers (toBeChecked, toBeDisabled, toBeInTheDocument,
toHaveAttribute, toHaveTextContent), firing events with user-event

• Mocking APIs with Mock Service Worker MSW

Copyright 2024 Code with Mosh codewithmosh.com

-
(
)
Web Development Roadmap 47

Next.js
Next.js is a meta framework built on top of React, enhancing its capabilities with
features like server-side rendering SSR and static site generation SSG . It
simplifies building and optimizing modern web applications with improved
performance and SEO.

Time required: 4 6 weeks

Learning resources: YouTube Tutorial | Full Course

Essential Concepts
• Basics: client and server components, client and server rendering, static and
dynamic rendering, static generation SSG

• Styling: global styles, CSS modules, Tailwind

• Routing: pages, layouts, dynamic routes, linking and navigation, error
handling, loading UI and streaming

• Data Fetching: fetch API, caching

• Building APIs: route handlers
• Database Integration: Prisma
• Authentication: NextAuth.js
• Optimizations: image optimization, lazy loading, automatic code splitting

Copyright 2024 Code with Mosh codewithmosh.com

-
(
(
)
)
(
)
Web Development Roadmap 48

Next.js Project Ideas

Personal Blog
Create a personal blog where you can write and publish articles.

• Static generation for blog posts using Markdown or a CMS

• Dynamic routing for individual post pages

• A homepage with a list of recent posts

• SEO optimization with metadata and Open Graph tags

E-commerce Store
Build a fully-functional e-commerce store with product listings and a shopping
cart.

• Product pages generated statically

• Shopping cart with add/remove items functionality

• Checkout page with order summary

• Fetch product data from an API or CMS

Copyright 2024 Code with Mosh codewithmosh.com

Learning to code is a journey. Be patient with yourself and
stay persistent, even when things get tough.

- Mosh