Codeyard

What Is This?

The Frontend Learning Roadmap is a complete, self-contained resource for anyone who wants to become a frontend web developer. It covers everything from your very first HTML tag to job applications and freelancing.

It runs entirely on your computer — no internet required once downloaded, no account, no subscription, no tracking. Open a file and start learning.

Who Is It For?

• Complete beginners — no prior coding experience needed. Module 01 starts from zero.
• Self-taught learners who want structured material at their own pace.
• Students supplementing a course with extra reading and practice.
• Career changers who want to move into frontend development.
• Anyone who learns better offline — away from browser notifications and distractions.

What Is Covered?

18 modules and 109 lessons and projects across five tracks:

HTML (Modules 01–02)

Document structure, headings, lists, links, images, tables, forms, semantic HTML, accessibility, and SEO basics.

CSS (Modules 03–08)

Selectors, colours, units, typography, the box model, layouts, Flexbox, CSS Grid, responsive design, transitions, animations, and modern CSS features.

JavaScript (Modules 09–14)

Variables, data types, conditions, loops, functions, DOM manipulation, events, arrays, objects, ES6+ syntax, Promises, Fetch, and localStorage.

Practice (Modules 15–16)

10 hands-on mini projects plus a complete Git and GitHub module.

Career (Modules 17–18)

Interview questions with answers, coding challenges, portfolio advice, CV writing, freelancing guidance, and a full job preparation guide.

How to Use It

1. Start at Module 01, Lesson 1 if you are a complete beginner. Work in order.
2. Read carefully — do not skim. Each lesson builds on the last.
3. Write the code yourself. Typing it builds understanding faster than reading alone.
4. Progress saves automatically — scrolling to the bottom of a lesson marks it complete.
5. If you already know HTML and CSS, jump to the JavaScript modules.

How Progress Tracking Works

Progress is saved in your browser using localStorage — nothing is sent to any server. When you scroll to the bottom of a lesson, it is automatically marked complete. Your progress appears on the curriculum page as a progress bar and checkmarks beside completed lessons.

Because progress is stored in the browser, it is tied to the browser you use. Clearing browser data will reset it. This is intentional — simplicity over accounts.

Technical Stack

Built with plain HTML, CSS, and a small amount of vanilla JavaScript. No build step, no framework, no package manager. Every file opens directly in a browser.

• Static HTML files — one per lesson
• Shared stylesheet — assets/css/style.css
• Shared JS for progress and utilities — assets/js/main.js
• Progress stored in localStorage under the key flr_progress

This simplicity is intentional — beginners can open the source files and understand exactly how the roadmap itself is built.