Learn HTML, CSS and JavaScript from scratch: where to start

Every web page you visit is made of three pieces: HTML (structure), CSS (design) and JavaScript (behavior). Learning them in order saves you a lot of frustration.

1. HTML: structure

HTML says what's on the page: headings, paragraphs, images, links and forms. Use tags for their meaning (header, main, nav, button), not just div. That improves accessibility and SEO.

Build: a personal page with your name, a photo and links to your profiles.

2. CSS: design

CSS picks colors, fonts and how elements are laid out. The essentials:

• The box model (margin, border, padding).
• Flexbox and Grid to arrange elements.
• Responsive design: make your page look good on phones first.

Build: the same page, now adapting to small and large screens.

3. JavaScript: behavior

JavaScript makes the page react: validating a form, opening a menu, fetching data from a server. Learn variables, functions, arrays and objects, events, and fetch to call an API.

Build: a to-do list saved in the browser.

4. Git and GitHub

Before going further, learn to save your code with Git and publish it for free with GitHub Pages or Firebase Hosting. A working link is worth more than a screenshot.

5. A framework: React

Once you're comfortable with the above, move on to React (or another framework). It lets you build large interfaces by splitting them into reusable components.

Tips to keep going

• Study 30 to 60 minutes a day, every day.
• Finish small projects before starting a big one.
• Use the browser's developer tools (F12) to understand what your page is doing.

Next step

Codea's free Frontend Web Developer Jr route walks this path in 6 weeks, with hands-on challenges and a final portfolio project. Route content is in Spanish.