Responsive Web Design
freeCodeCamp Team
Master responsive web design! Build websites that adapt to any screen size with this free interactive course from freeCodeCamp.
More resources on Responsive Design
Responsive Web Design Basics
Google Web Fundamentals
CSS-Tricks - A Complete Guide to Flexbox
Essential for responsive layouts
MDN Web Docs - Responsive Design
Comprehensive guide with best practices
Responsive Web Design Fundamentals
Learn responsive web design fundamentals with this free Google course! Build websites that adapt beautifully to any device.
Responsive Web Design
In this course you will learn how to apply concepts from interaction design and human computer interaction in order to design and build an interactive, professional looking website. You will learn how to make your web page designs adapt to different screen sizes using responsive grid layouts. You will learn how to add navigation and other design elements, and you will learn how to separate data and display using JavaScript objects and templates. At the end of the course, you will be able to: 1. Explain why users need to know where they are, where they can go and what is on a web page 2. Create wireframe mockups of web pages 3. Identify the key functional elements of web pages 4. Use Bootstrap components to realise page designs 5. Use JavaScript data structures such as arrays and objects to define the data used in a web page 6. Use the Handlebars template library to convert data to HTML 7. Add interactivity to templates using JavaScript event listeners In this course, you will complete: 1 website design assignment taking ~1 hour to complete 1 programming assignment taking ~1 hour to complete 4 quizzes, each taking ~20 minutes to complete multiple practice quizzes, each taking ~5 minutes to complete Participation in or completion of this online course will not confer academic credit for University of London programmes.
css-tricks.com
CSS-Tricks is a popular web design resource offering practical tutorials, guides, and code examples on CSS and frontend development. It covers responsive design techniques (Flexbox, Grid, media queries) with real-world demos and snippets.