تعلم برمجة المواقع من الصفر: الخريطة اللي تمشي عليهاLearn web development from zero: the roadmap to follow

To learn web development from zero, go in this order: HTML and CSS, then JavaScript, then Git, then one framework, and finally the basics of back end and databases. Close every stage with a project you build with your own hands. The order matters more than the source, and the project matters more than the certificate.

Before you start: decide where you are heading

Web development has three directions:

• Front end: what the visitor sees and uses.
• Back end: the server, the database, the logic behind.
• Full stack: both.

You do not have to decide now. The first three stages are the same for everyone, and by then you will have tried enough to know what you lean towards.

Stage 1: HTML and CSS

HTML is the page’s structure and CSS is its look. Focus on:

• Semantic elements: header, nav, main, article, button. Not everything is a div.
• Forms, links, and images with alt text.
• Flexbox and Grid for layout.
• Responsive design: the page works on a phone before a large screen.
• Right-to-left layout and logical properties such as margin-inline-start instead of margin-left.

Project: a personal page with your photo, a short bio and your links, working on mobile. No libraries.

Stage 2: JavaScript

The most important and longest stage, and the one people rush most. You need:

• Variables, conditions, loops, functions.
• Arrays and objects and their methods: map, filter, find.
• The DOM: select an element, change it, listen for an event.
• fetch and async/await: get data from an API and show it.
• Reading an error message in the console and understanding it.

Project: a small app that pulls real data from an open API, such as weather or exchange rates, with search, filtering, a loading state and an error state.

Stage 3: Git and the working tools

• Git: commit, branch, merge, and pushing to GitHub.
• The command line: move between folders and run a command.
• Browser developer tools: elements, network, console.
• Deploy a site to a free host and send someone the link.

A week or two at most. From now on every project of yours lives on GitHub.

Stage 4: one framework

Once JavaScript feels comfortable, pick one framework and stay with it. React is the most requested in the job market, together with Next.js. Vue is a solid choice and easier at the start. Add TypeScript, since it is now the norm on any team.

What matters is not which one, it is that you do not keep switching. The concepts are shared: components, state, data in and out. Whoever masters one learns another in days.

Project: a multi-page app with a list, a detail page and a form, with data coming from an API.

Stage 5: back end basics

Even if you stay on the front end, you must understand the other side:

• HTTP: request and response, codes 200, 404 and 500, the methods.
• A database and basic SQL: SELECT, INSERT, JOIN.
• How sign-in works: sessions and tokens, and why passwords are stored hashed.
• One server language: Node.js if you want to stay in JavaScript, or PHP with Laravel or WordPress, both very common in website and freelance work.

Project: the app from the previous stage, but with your own API, users and sign-in.

AI while studying

Use it as a teacher, not as a homework solver:

• Ask it to explain code you do not understand, or an error message.
• Ask it to review your solution and say what could be better.
• Do not let it write the project for you while you are still learning. The one who learns is the one who makes the mistake and fixes it.

More on that line in Vibe coding: what it is and when to trust it.

Mistakes that cost months

• The course loop. Finishing one course and starting another without building anything. Watching is not learning.
• Jumping to a framework early. React without JavaScript means memorising, not understanding.
• Changing language every month. Dropping what you have each time you read about something new.
• Copied projects. A project copied from a video proves nothing. Change it, extend it, break it and fix it.
• Working in secret. Publish your work and write about it. Whoever hires is looking for evidence, not claims.

When am I ready for work

There is no fixed duration, and anyone promising a number is guessing. What can be measured is this:

• You have 3 projects deployed and working, at least one of them your own idea.
• You can build a page from a design without watching a tutorial.
• When you hit an error, you can search and reach the fix on your own.
• You can explain every line in your projects and why it is there.

If you worry the field itself will vanish, read will AI take programmers’ jobs. And if you are stuck on a specific step and want the view of someone working in the field, book a consultation or write to me.