--- title: Responsive Design description: Responsive design is the practice of building websites that adapt to various screen sizes. Learners will master media queries, flexible grids, and modern CSS layouts to ensure optimal user experiences across mobile and desktop devices. category: programming-tech subcategory: web-development difficulty: beginner, intermediate, advanced url: /subject/responsive-design --- # Responsive Design Responsive design is the practice of building websites that adapt to various screen sizes. Learners will master media queries, flexible grids, and modern CSS layouts to ensure optimal user experiences across mobile and desktop devices. ## Available Resources 3 Books • 4 Courses • 3 Websites ## Websites ### 1. 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. **Difficulty:** Beginner | **Price:** Free **Link:** https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design **Tags:** responsive-design, css, media-queries, fluid-layouts, web-development ### 2. 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. **Difficulty:** Intermediate | **Language:** English | **Price:** Free **Link:** https://css-tricks.com **Tags:** websites, technology-computer-science, web-development ### 3. 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. **Difficulty:** Intermediate | **Language:** English | **Price:** Free **Link:** https://smashingmagazine.com **Tags:** websites, arts-design, graphic-design ## Courses ### 1. Responsive Web Design Fundamentals Learn responsive web design fundamentals with this free Google course! Build websites that adapt beautifully to any device. **Difficulty:** Beginner | **Price:** Free **Link:** https://www.udacity.com/course/responsive-web-design-fundamentals--ud893 **Tags:** responsive-design, css, media-queries, mobile-web, web-development ### 2. Responsive Web Design Master responsive web design with HTML & CSS! FreeCodeCamp's course makes your websites look great on any device. **Difficulty:** Beginner | **Price:** Free **Link:** https://www.freecodecamp.org/learn/2022/responsive-web-design/ **Tags:** html, css, responsive-design, accessibility, flexbox, grid ### 3. 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. **Difficulty:** Beginner | **Price:** Free **Link:** https://www.freecodecamp.org/learn/responsive-web-design/ **Tags:** responsive-design, html, css, accessibility, web-development ### 4. 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. **Difficulty:** Beginner | **Language:** English | **Price:** Free **Link:** https://www.coursera.org/learn/responsive-web-design **Tags:** courses, technology-computer-science, web-development ## Books ### 1. Responsive Web Design **Author:** Ethan Marcotte The short book that named the technique, showing how fluid grids, flexible images and media queries combine into a single layout that reflows across devices. Establishes the reasoning behind content-driven breakpoints that later responsive practice builds on. **Difficulty:** Intermediate | **Language:** English | **Price:** Paid **Link:** https://www.amazon.com/dp/098444257X?tag=edmonddante07-20 **Tags:** books, technology-computer-science, web-development ### 2. Adaptive Web Design **Author:** Aaron Gustafson Presents progressive enhancement as a layered method: semantic HTML first, then CSS presentation, then JavaScript behavior. Readers learn to build pages that stay usable when scripts fail, styles are unsupported, or assistive technology is reading the markup. **Difficulty:** Intermediate | **Language:** English | **Price:** Paid **Link:** https://www.amazon.com/dp/098358950X?tag=edmonddante07-20 **Tags:** books, technology-computer-science, web-development ### 3. Mobile First **Author:** Luke Wroblewski Argues for designing the mobile experience before the desktop one, using constraints of small screens, touch input and slow networks to force clarity about content priority. Covers layout patterns, navigation and input design for handheld devices. **Difficulty:** Intermediate | **Language:** English | **Price:** Paid **Link:** https://www.amazon.com/dp/1937557022?tag=edmonddante07-20 **Tags:** books, technology-computer-science, web-development --- *This content is part of Dantes.io - Your Treasure Map to Knowledge* *Curated by humans at Dantes.io. Personal study use welcome; republishing this curation requires permission (team@dantes.io).* View this page online: https://dantes.io/subject/responsive-design