OrglobalAcademy

Course

Front-End Web Development

A 12-week project-based course taking you from zero to shipping production-grade web apps. You will master HTML, CSS, Tailwind CSS, JavaScript, and React, then spend five full weeks on Next.js 16 — Server Components, caching, Server Actions, databases, auth, and deployment. Every week ends with a real build pushed to GitHub, and you finish with a deployed capstone app plus a portfolio of 12 projects. Expect 10–15 hours per week of lessons, labs, and project work.

Start learning →Enroll for full access

Module 1 — Week 1 — HTML & How the Web Works

  1. ✓How the web works
    20mFree preview
  2. ✓Dev setup: VS Code, DevTools, Git & GitHub
    25mFree preview
  3. ✓Semantic HTML: structure that means something
    25mFree preview
  4. ✓Forms, inputs & accessibility basics
    25mFree preview
  5. ✓Lab: Wikipedia-style article page
    90mPracticalFree preview
  6. ✓Lab: signup form with native validation
    60mPracticalFree preview
  7. ✓Weekly project: personal profile page
    180mProjectFree preview

Module 2 — Week 2 — CSS: Layout & Responsive Design

  1. ✓CSS fundamentals: selectors, cascade & the box model
    30m🔒
  2. ✓Flexbox & CSS Grid deep dive
    35m🔒
  3. ✓Positioning & responsive, mobile-first design
    25m🔒
  4. ✓Transitions, transforms & CSS variables
    20m🔒
  5. ✓Lab: Flexbox Froggy & Grid Garden
    60mPractical🔒
  6. ✓Lab: three classic layouts
    90mPractical🔒
  7. ✓Weekly project: responsive landing page
    240mProject🔒

Module 3 — Week 3 — Tailwind CSS

  1. ✓Utility-first: why Tailwind exists
    25m🔒
  2. ✓The core utilities: spacing, color, type, layout
    25m🔒
  3. ✓Responsive prefixes, state variants & dark mode
    25m🔒
  4. ✓Reusable patterns & design polish
    20m🔒
  5. ✓Lab: rebuild your landing page in Tailwind
    90mPractical🔒
  6. ✓Lab: clone a real hero section
    90mPractical🔒
  7. ✓Weekly project: SaaS dashboard UI
    240mProject🔒

Module 4 — Week 4 — JavaScript Fundamentals

  1. ✓Language basics: values, control flow & template literals
    30m🔒
  2. ✓Functions, arrow functions, scope & closures
    25m🔒
  3. ✓Arrays, objects & the methods that matter
    30m🔒
  4. ✓The DOM & events
    30m🔒
  5. ✓Lab: 20 JavaScript katas
    120mPractical🔒
  6. ✓Lab: four vanilla UI widgets
    120mPractical🔒
  7. ✓Weekly project: interactive to-do list
    240mProject🔒

Module 5 — Week 5 — Modern JavaScript & Working with APIs

  1. ✓ES6+ essentials: destructuring, spread & modules
    25m🔒
  2. ✓Asynchronous JavaScript: callbacks → promises → async/await
    30m🔒
  3. ✓fetch, JSON & HTTP in practice
    30m🔒
  4. ✓npm, Vite & debugging like a professional
    20m🔒
  5. ✓Lab: consume three public APIs
    120mPractical🔒
  6. ✓Lab: refactor the to-do app into ES modules
    90mPractical🔒
  7. ✓Weekly project: weather or movie-search app
    240mProject🔒

Module 6 — Week 6 — React Fundamentals

  1. ✓Why React, and the rules of JSX
    25m🔒
  2. ✓Components, props & state with useState
    30m🔒
  3. ✓Lists, keys, conditional rendering & controlled forms
    25m🔒
  4. ✓Lab: convert the to-do app to React
    120mPractical🔒
  5. ✓Lab: build a small component library
    120mPractical🔒
  6. ✓Weekly project: expense tracker
    240mProject🔒

Module 7 — Week 7 — React: Hooks, Data & Patterns

  1. ✓useEffect: data fetching, dependencies & cleanup
    30m🔒
  2. ✓useRef & useContext: when to reach for each
    25m🔒
  3. ✓Custom hooks & component patterns
    25m🔒
  4. ✓Client-side routing with React Router
    25m🔒
  5. ✓Lab: build useFetch & useDebounce
    120mPractical🔒
  6. ✓Lab: multi-page app with React Router
    120mPractical🔒
  7. ✓Weekly project: movie/recipe explorer
    240mProject🔒

Module 8 — Week 8 — Next.js Foundations & the App Router

  1. ✓Why a framework? SSR, SSG, CSR & what Next.js solves
    25m🔒
  2. ✓The App Router: pages, layouts & nesting
    30m🔒
  3. ✓Server Components vs Client Components
    30m🔒
  4. ✓Navigation, dynamic routes, fonts & images
    30m🔒
  5. ✓Lab: two shells, one app
    90mPractical🔒
  6. ✓Lab: draw the server/client boundary
    120mPractical🔒
  7. ✓Weekly project: multi-page personal blog
    240mProject🔒

Module 9 — Week 9 — Data Fetching, Caching & Cache Components

  1. ✓Fetching data in Server Components
    25m🔒
  2. ✓The Next.js 16 caching model & "use cache"
    30m🔒
  3. ✓PPR, Suspense & loading/error files
    30m🔒
  4. ✓Revalidation: cacheTag, revalidateTag & time-based expiry
    25m🔒
  5. ✓Lab: cached product page with a live inventory badge
    120mPractical🔒
  6. ✓Lab: loading skeletons & error boundaries for the blog
    90mPractical🔒
  7. ✓Weekly project: API-powered content site
    240mProject🔒

Module 10 — Week 10 — Full-Stack Next.js: Mutations, APIs & Databases

  1. ✓Route Handlers: your own API endpoints
    25m🔒
  2. ✓Server Actions: mutations without the fetch dance
    30m🔒
  3. ✓Validation with Zod
    20m🔒
  4. ✓Databases: Drizzle/Prisma, env vars & optimistic UI
    30m🔒
  5. ✓Lab: CRUD Server Actions against a real database
    150mPractical🔒
  6. ✓Lab: a rate-limited API route + client consumer
    90mPractical🔒
  7. ✓Weekly project: guestbook / notes app (full CRUD)
    300mProject🔒

Module 11 — Week 11 — Auth, Proxy, SEO & Production

  1. ✓Authentication: sessions & protected routes
    30m🔒
  2. ✓proxy.ts: request interception at the edge of your app
    25m🔒
  3. ✓The Metadata API: SEO, Open Graph & sitemaps
    25m🔒
  4. ✓Performance, Core Web Vitals & deployment
    30m🔒
  5. ✓Lab: add login + a protected dashboard
    150mPractical🔒
  6. ✓Lab: Lighthouse audit — measure, fix, re-measure
    90mPractical🔒
  7. ✓Weekly project: ship it
    240mProject🔒

Module 12 — Week 12 — Capstone Project

  1. ✓The capstone brief & requirements checklist
    20m🔒
  2. ✓Planning, scoping & the cut list
    20m🔒
  3. ✓Capstone: build & ship
    600mProject🔒
  4. ✓Capstone: portfolio page & 5-minute demo
    240mProject🔒

Already enrolled? Sign in with your enrollment email to unlock all lessons.