Web Development
Building RESTful APIs
Design APIs that power apps. Learn REST principles, routing, authentication, and documentation to build and secure…
USD 39
Responsive Web Design
Build mobile-first websites that look and work well on any screen, using fluid layouts, flexbox, grid, media queries and responsive images.
About this course
Design sites that work on any screen. Master flexbox, grid, and media queries to build fully responsive, mobile-first layouts.
What you will learn
- Plan and build layouts mobile-first, adding complexity only as screens get wider
- Use the viewport meta tag, fluid widths and relative units such as rem, %, vw and clamp()
- Choose content-based breakpoints and write clean min-width media queries
- Build responsive components with flexbox and page layouts with CSS grid and container queries
- Serve the right image to each device with srcset, sizes and the picture element
- Test, debug and keep responsive pages fast across real devices and slow networks
Curriculum
Module 1Responsive Foundations4 lessons
- 1Why Mobile-First Matters Free preview
- 2Viewport and Fluid Layouts
- 3Responsive Units: rem, %, vw
- 4Breakpoint Strategy
- QModule quiz (4 questions)
Module 2Layout Systems4 lessons
- 5Flexbox for Responsive Components
- 6CSS Grid for Page Layouts
- 7Container Queries Introduction
- 8Responsive Navigation Patterns
- QModule quiz (4 questions)
Module 3Media and Performance4 lessons
- 9Responsive Images: srcset and picture
- 10Responsive Typography
- 11Performance Budgets
- 12Testing Across Devices
- QModule quiz (4 questions)
Module 4Responsive Projects2 lessons
- 13Common Responsive Bugs and Fixes
- 14Course Project: Fully Responsive Landing Page
- QModule quiz (4 questions)
PFinal project: Fully Responsive Landing Page
Who this course is for
- Beginners who know basic HTML and CSS and want their sites to work on phones
- Developers and designers who build websites for small businesses and clients
- Anyone who maintains a website and wants to fix layouts that break on mobile
Requirements
- A computer with a code editor such as VS Code and an up-to-date Chrome, Firefox or Edge browser
- Basic HTML and CSS: elements, classes, selectors, colours and the box model
- A smartphone for real-device testing is helpful but not required
What is included
Written lessons
14 lessons, each with a practical exercise and key points to remember.
Module quizzes
A short quiz at the end of each module. Pass mark 70%, and you can retake it.
Final project
Fully Responsive Landing Page. A practical brief with steps and a way to check your own work.
Certificate
A certificate of completion from EMFAD Courses with a unique code anyone can verify.
How the certificate works
Complete every lesson and pass every module quiz with 70% or more. Your certificate then appears in your learner area, ready to print or save as PDF. It shows your name, the course title, the completion date and a unique code. It is a certificate of completion from EMFAD Courses, not an accredited qualification.
More in Web Development
All →Web Development
Frontend Development with React
Build modern user interfaces. Master React components, hooks, state, and routing to create fast, interactive single-page…
USD 39
Web Development
Full-Stack Development with Node.js
Become a full-stack developer. Build complete apps with Node.js, Express, databases, authentication, and a connected…
USD 39