WEB104 · Responsive Interfaces and Front-End Frameworks

Categories: Cloud & Software
Wishlist Share

About Course

Design interfaces that work on every screen with mobile-first CSS, then build them as reusable components with React and Vite. You will turn a static page into a small component-based app with state and data.

Build · 6 hours · 4 lessons, a lab, an assessed assignment and a portfolio piece

Who it is for

Learners who know HTML, CSS and JavaScript fundamentals and want to build modern, maintainable front ends.

Prerequisites

Complete WEB103 or be comfortable with JavaScript functions, arrays, the DOM and fetch.

What you will be able to do

  • Build mobile-first layouts with media queries, fluid units and responsive images.
  • Break an interface into React components that receive data through props.
  • Manage interactive state and side effects with useState and useEffect.
  • Set up, run and build a front-end project with Vite and npm, and compare major frameworks.

Lessons

  • Lesson 1 · Responsive, mobile-first design
  • Lesson 2 · Components and React fundamentals
  • Lesson 3 · State, effects and front-end tooling
  • Lesson 4 · Lab and assignment

Lab: Rebuild a booking page as a React app

You will scaffold a React project with Vite, split a booking page into components, and add state for selecting a service and time slot. You will load services from a JSON file, test the layout at three screen widths and produce a production build.

Free tools: Node.js LTS, npm and Vite (free) on your computer, VS Code, browser DevTools device mode; or StackBlitz free plan in the browser

Assessed assignment

Build a responsive React front end for a small service business, such as a hair salon or a bike repair shop. It must list services loaded from JSON, let the user pick a service and an available time slot, show a summary panel, and validate a short contact form before showing a confirmation. The layout must work at 360, 768 and 1280 pixels wide. Submit the repository and three screenshots, one per width.

Criterion Weight What excellent work looks like
Responsive layout 25% Mobile-first CSS works cleanly at all three widths with no horizontal scrolling and readable text.
Component design 30% Components are small, named clearly, receive data through props and avoid duplicated markup.
State and data flow 25% State lives in the right component, data loads with loading and error states, and the form validates input.
Project hygiene 20% The project builds without warnings, has a README with run instructions and a sensible folder structure.

Portfolio piece

A responsive, component-based React booking interface with a clean repository and screenshots at three widths.

Self-paced, 12-month access. Questions are answered in writing through the student panel. A completion record is issued when you finish the course.

Next step

Continue with WEB105 · Back-End Development and APIs with Node.js · 8 hours · $56.00

Continue to the next course

Prefer the whole program? Program in Full-Stack Web & Mobile Development · $378.00 (10% less than buying the courses separately)

Show More

What Will You Learn?

  • Build mobile-first layouts with media queries, fluid units and responsive images.
  • Break an interface into React components that receive data through props.
  • Manage interactive state and side effects with useState and useEffect.
  • Set up, run and build a front-end project with Vite and npm, and compare major frameworks.

Course Content

WEB104 · Responsive Interfaces and Front-End Frameworks (6 h)
Design interfaces that work on every screen with mobile-first CSS, then build them as reusable components with React and Vite. You will turn a static page into a small component-based app with state and data.

  • Lesson 1 · Responsive, mobile-first design
  • Lesson 2 · Components and React fundamentals
  • Lesson 3 · State, effects and front-end tooling
  • Lesson 4 · Lab and assignment
  • WEB104 Assessment · Responsive Interfaces and Front-End Frameworks
Scroll to Top