Learning Responsive Design: The Missing Ingredient

1. Introduction to Web Design by Google Developers

This course delves into the world of modern responsive web design. It equipped me with a lot of valuable tools, including:

• Visualizing the birth of Responsive Web Design
• Browser developers’ perspective on how browsers process HTML and CSS files
• Providing helpful links to Chrome Dev Tools for better comprehension
• Explaining media queries and their usage
• Covering responsive images in detail, including the <picture> element and icons
• Shedding light on fluid typography
• Exploring macro- and micro layouts

Seems like the course covered all the tools I needed… but was it ALL there was to it?

Something was still missing—a crucial ingredient. And that ingredient was me and my mindset. Did I feel confident in my ability to use the tools effectively? Did I feel empowered and passionate about creating responsive designs? The answer was no until I took one more course.

2. Conquering Responsive Layouts by Kevin Powell

To give you a sense of what I experienced in this course, let me compare it to learning to drive. A traditional driving instructor, like a regular CSS course, teaches you like this:

But Kevin’s approach is different:

After completing Kevin’s course, I felt a new sense of empowerment and control. I understood how to make CSS work as intended. I had the confidence to make my designs truly responsive, and that’s what I call the missing ingredient.

To be fair, Kevin’s course doesn’t cover every trick in the book. It doesn’t delve into Dev Tools, fluid typography, the <picture> element, or even the grid. But here’s the thing: tools are one thing, and mindset is a whole different ball game. Kevin’s course uniquely transforms your mindset.

To summarize, here are the valuable aspects of Kevin’s course that left a lasting impact on me:

• Emphasizing the ease of creating responsive designs
• Providing encouragement and empowerment throughout
• Demonstrating real-life coding of responsive designs
• Incorporating best practices, like using Emmet, class naming (BEM), and the single responsibility principle
• Covering percentages, media queries, and flexbox
• Focusing on fundamental concepts and explaining them thoroughly
• Offering code challenges and their solutions that help pinpoint your difficulties and validate your accomplishments
• Providing a supportive Discord channel

3. Other options for learning Responsive Web Design

For the sake of completeness, let’s briefly explore other options for learning Responsive Web Design. While the resources in this section have their merits, they mostly focus on the tools rather than changing your mindset.

Responsive Web Design Fundamentals by Google + Udacity:

Again, it’s mostly about the tools, though it does touch on the mindset to some extent. This is a video course, unlike the text-only Google Developers course mentioned above. Each video is approximately 1 minute long, highlighting a specific concept. The course also includes quizzes and coding challenges. Some of the topics covered include:

• Using Dev Tools on desktop and mobile
• Understanding the viewport and device pixel ratio
• Minimum tap target sizes
• Media queries and breakpoints
• Responsive design patterns

Overall, this course provided me with useful tricks and tools that were not readily available elsewhere. The content is well-packaged and easily accessible for students. However, when I needed to look up a specific aspect, this content wasn’t as search-friendly as the Google Developers course. While helpful, it didn’t offer the same level of empowerment as Kevin’s CRL course.

Responsive Web Design by freeCodeCamp:

This course covers the fundamentals of responsive web design using HTML and CSS. It includes lessons and coding challenges. I haven’t done it, but it seems good.

Web Design for Everybody: Basics of Web Development & Coding by Coursera:

This course, offered by the University of Michigan, covers responsive design concepts along with HTML, CSS, and JavaScript. I haven’t done it; it appears to be good for beginners in front-end development.

MDN Web Docs:

While the MDN Web Docs is a comprehensive resource, the presentation in its Responsive Web Design Basics and Responsive Images Basics seemed challenging to digest. It resembled a recipe with dozens of options that obscure the dish itself. These pages can be great for reference once you have a solid grasp of the fundamentals of responsive design.

Summary

In my experience, the winning approach was a smart combination: a course that equips you with the necessary tools, like the one by Google, and “Conquering Responsive Layouts” by Kevin Powell, which transforms your mindset and empowers you to confidently use those tools.

Good luck on your learning journey!

Please feel free to share this article if you liked it, and I would be happy to hear back in the Comments!