- courses
- 4
- modules
- 48
- exercises
- 3662+
- hours of learning
- 260-370
What a front-end developer does
The front end is the part of a website or app that people use: content, buttons, menus, forms and animations. A front-end developer turns a design into working code and makes sure the page loads fast, is accessible to everyone and looks good on phones and desktops.
It rests on three browser technologies: HTML describes the structure of the content, CSS its look and JavaScript its behaviour. Larger applications are built with libraries and frameworks, most often React, and sites that need to be fast and visible in Google with Next.js. This path covers all of these stages in order.
The path step by step
Each course builds on the previous one. If you already know a topic, start from a later step: every course page lists all of its lessons.
Step 1
HTML and CSS online course
beginner level · 11 modules · 843+ exercises · 40-60 hours
The foundation of every website: document structure, styling, Flexbox and Grid layouts, responsive design, forms and accessibility.
What you will learn
- Semantic structure of HTML5 documents
- Advanced selectors and CSS cascading
- Responsive layouts with Flexbox and Grid
- SASS preprocessor - variables, mixins, nesting
- CSS animations and transitions
- Mobile-first and media queries
- HTML forms and validation
- Accessibility and SEO basics
Course syllabusFirst lesson: Introduction to HTMLStep 2
JavaScript and TypeScript online course
beginner level · 12 modules · 1062+ exercises · 60-90 hours
The language of the browser from the basics: variables, functions, the DOM, events and asynchronous code, finishing with TypeScript, which keeps types in check in larger projects.
What you will learn
- JavaScript fundamentals - variables, types, operators
- Functions, scope, closures, and hoisting
- ES6+ - arrow functions, destructuring, spread
- DOM manipulation and event handling
- Asynchronicity - callbacks, promises, async/await
- Classes and object-oriented programming
- TypeScript basics - types, interfaces, generics
- ES6 modules and bundlers
Course syllabusFirst lesson: History and Significance of JavaScriptStep 3
JavaScript and React online course
intermediate level · 16 modules · 1069+ exercises · 80-120 hours
The most popular library for building interfaces: components, hooks, application state, routing, working with APIs and testing.
What you will learn
- React functional and class components
- React Hooks - useState, useEffect, useContext
- State management with Redux Toolkit
- React Router - routing and navigation
- Styling with CSS Modules and Styled Components
- Fetch API and Axios for backend communication
- Testing with Jest and React Testing Library
- Optimization with React.memo and useMemo
Course syllabusFirst lesson: React.js BasicsStep 4
Next.js online course
advanced level · 9 modules · 688+ exercises · 80-100 hours
The React framework for production apps: App Router, server rendering, Server Actions, databases, authentication and deployment.
What you will learn
- Next.js 16 App Router and project structure
- Server-Side Rendering (SSR) and Static Site Generation (SSG)
- Incremental Static Regeneration (ISR)
- API Routes and Server Actions
- Database integration (Prisma, PostgreSQL)
- Authentication with NextAuth.js
- Image optimization and lazy loading
- Deployment on Vercel
Course syllabusFirst lesson: Introduction to React and Next.js
Portfolio projects
In every course you build projects you can later show in your portfolio. A few of them:
HTML and CSS
Pyramid Page
Build a landing page about an Egyptian pyramid with a photo gallery and responsive menu
HTML and CSS
Pharaoh's Portfolio
Complete portfolio with CSS Grid, animations and dark mode
JavaScript and TypeScript
Dino Tracker
Dinosaur tracking system with geolocation and alarms
JavaScript and TypeScript
DNA Sequencer
DNA sequencing simulator with visualization
JavaScript and React
Mission Control Panel
Mission control dashboard with real-time updates and charts
JavaScript and React
Crew Management System
CRUD application for crew management with authentication
Next.js
Quantum Dashboard
Admin dashboard with SSR, authentication, and database
Next.js
Neural Network Blog
Blog platform with ISR, MDX, and comments
How long it takes and what it costs
The course syllabi add up to 260-370 hours of learning. At 10 hours a week the whole path takes about 26-37 weeks, but the pace is entirely up to you.
You can read every lesson for free on this site. In the app, a free account covers the HTML and CSS course with 10 units of fuel a day, and the exercises of the next courses are unlocked by a paid plan.
Frequently asked questions
Is this front-end course for beginners?
Yes. The path starts with the basics of HTML, and the first two courses are beginner level. All you need is a computer with a browser: the code editor is built into the lessons, so there is nothing to install at the start.
How long does it take to learn front-end development?
The four course syllabi add up to 260-370 hours of learning. At 10 hours a week that is about 26-37 weeks. You can go faster or slower, and your progress is saved in your account.
Will an online course get me a front-end developer job?
A course gives you knowledge and a lot of practice, but no course can guarantee a job. Recruiters look mainly at your portfolio and how you solve problems, which is why you build projects in every course and the exercises check the code you write.
Online course or coding bootcamp?
A bootcamp gives you a fixed schedule and mentors, but it costs more and usually takes months of full-time study. An online course lets you start today and learn at your own pace, with free lessons. Many people start with a course and decide on a bootcamp later.
How much does the path cost?
The lessons of all four courses are free. In the app you can complete the HTML and CSS course on a free account, while the JavaScript, React and Next.js exercises need a paid plan. Current prices are on the pricing page.
I already know HTML and CSS. Where should I start?
With the JavaScript and TypeScript course. If you know JavaScript too, go straight to React. Every course page lists all of its lessons, so you can easily check what you already know.
Start with the first HTML lesson
You can read the first lesson right away, without an account. When you want to solve exercises and earn XP, create a free account.