Responsive Web Design
Coursera
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.
More resources on Responsive Design
css-tricks.com
CSS-Tricks is a comprehensive frontend development resource offering tutorials, articles, and code snippets focused on HTML, CSS, and modern web design. It features in-depth guides, a CSS Almanac, and practical examples for building responsive layouts and interactive UI.
smashingmagazine.com
Smashing Magazine is a design-focused publication offering practical articles, tutorials, and ebooks for web designers and developers. It covers layout, composition, typography, UX, and responsive design, with code samples and design patterns.
MDN Web Docs - Responsive Design
Mozilla's documentation on responsive layout techniques: media queries, fluid grids, responsive images and typography, and modern approaches using flexbox and grid. Covers why breakpoints belong to the content and how to test layouts across viewport sizes.
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
Master responsive web design with HTML & CSS! FreeCodeCamp's course makes your websites look great on any device.
Responsive Web Design
Free self-paced freeCodeCamp curriculum that teaches HTML and CSS through small guided projects, covering semantic markup, the box model, Flexbox, CSS Grid, media queries and accessibility basics. Learners can build and publish simple websites that adapt to phone and desktop screens.