WebDevPortHire WebDevPort
All courses
Web Development · Available / Full Course

Frontend Development Course

From semantic HTML and CSS systems to production React, state management, Next.js, and CI/CD deployment. Follow a structured path through the browser platform, modern JavaScript, frontend architecture, and production workflows.

22 chaptersExamples and exercisesLearn at your own pace
Start learning

Course curriculum

22 chapters, step by step

Select a chapter to open its textbook and track your progress.

22 chapters

Part I — Foundations of the Web

  1. 01HTML5 Semantic ElementsHow semantic markup builds the accessibility tree, landmarks, sectioning, headings, text-level and interactive semantics.
  2. 02HTML Forms and ValidationLabels, input types, fieldsets, native validation and accessible error messages.
  3. 03CSS FundamentalsCascade, specificity, inheritance, the box model, units and custom properties.
  4. 04Flexbox and CSS GridOne- and two-dimensional layout systems with real layout recipes.
  5. 05Responsive DesignMobile-first CSS, media and container queries, fluid typography and responsive images.
  6. 06Tailwind CSS and BootstrapUtility-first versus component frameworks, configuration and trade-offs.
  7. 07Sass, Vite and npmPackage management, dependency integrity, modern Sass modules, and Vite's development and production workflows.

Part II — JavaScript

  1. 08JavaScript FundamentalsValues, types, functions, scope, objects, arrays and modules.
  2. 09Advanced JavaScriptClosures, prototypes, classes, the event loop, iterators and error handling.
  3. 10DOM Manipulation and Browser APIsSelecting, creating and updating elements, events, delegation and key browser APIs.
  4. 11Async JavaScript, Fetch, REST and JSONPromises, async/await, HTTP, REST conventions, JSON and error handling.
  5. 12Browser Storage, Cookies and SessionslocalStorage, sessionStorage, IndexedDB, cookies and session security.

Part III — Professional Workflow

  1. 13Git and GitHubCommits, branches, merging, rebasing, pull requests and collaboration.
  2. 14Web AccessibilityWCAG, keyboard support, ARIA patterns, colour contrast and testing.
  3. 15Unit, Integration and End-to-End TestingVitest, Testing Library and Playwright with a testing strategy.
  4. 16Web Performance and Core Web VitalsLCP, INP, CLS, measuring, and optimising loading and runtime.

Part IV — Frameworks and Architecture

  1. 17Component-Based ArchitectureComposition, props, state ownership and design systems.
  2. 18React, Hooks and Component PatternsJSX, state, effects, custom hooks and advanced patterns.
  3. 19Vue and Angular ComparedReactivity models, templates and tooling compared with React.
  4. 20Routing and Global State ManagementClient routing, URL state, context, stores and server state.
  5. 21Next.js and Rendering StrategiesCSR, SSR, SSG, ISR, streaming and server components.
  6. 22SPA Deployment and Production WorkflowsBuilds, environments, CI/CD, hosting and monitoring.