Table of Contents

1. Challenge

   Introduction

   Welcome to the Guided: Responsive Design with Media Queries Lab! In this lab, you'll learn how to make a website look great on any device, from a small mobile phone to a large desktop monitor.

   You'll use a mobile-first strategy, which is a core principle of modern web design. This means you'll write your CSS for mobile devices first, then use CSS Media Queries to add more complex styles for larger screens. You'll begin by looking at the files you'll be working with.

   Before writing any code, it's important to understand the project structure. Open the index.html file and the css/styles.css file in the editor.

   In index.html, you'll see the basic structure of the Code Cafe website, including a header, navigation, main content area with several cards, and a footer.

   The css/styles.css file is mostly empty, but contains comments with TODO markers that correspond to the tasks in this lab. These markers will guide you on where to write your code. info> This lab experience was developed by the Pluralsight team using Forge an internally developed AI tool utilizing Gemini technology. All sections were verified by human experts for accuracy prior to publication. For issue reporting, please contact us.

2. Challenge

   Implementing Mobile-first Styles

   The foundation of a mobile-first approach is to create a simple, linear, single-column layout that works well on narrow screens. This ensures the most important content is accessible on all devices without horizontal scrolling. In this step, you'll apply the essential styles for the mobile view of the Code Cafe website.

3. Challenge

   Creating a CSS-only Hamburger Menu

   Screen real estate is limited on mobile devices, so a common pattern is to hide the main navigation behind a hamburger icon. You can create a fully functional toggle menu using only HTML and CSS by using a hidden checkbox and its associated label. This technique is a great way to add interactivity without relying on JavaScript.

4. Challenge

   Adapting the Layout for Tablets

   CSS Media Queries are the magic behind responsive design. They allow you to apply specific CSS rules only when the browser's viewport meets certain criteria, such as being wider or narrower than a specific width. You'll now add your first media query to create a more advanced layout for tablet-sized screens.

5. Challenge

   Finalizing the Desktop Layout

   Now you'll add the final touches for the desktop layout inside the same media query. On wider screens, you have enough space to display the navigation in a horizontal bar and can hide the mobile-only hamburger icon. This is a key part of conditional element display, where you tailor the user interface to the device.

6. Challenge

   Conclusion

   Congratulations on completing the Guided: Responsive Design with Media Queries lab!

   You've successfully transformed a static, desktop-first website into a fully responsive experience that looks great on any device. By starting with a mobile-first approach, you've ensured that the Code Cafe site is accessible and user-friendly for everyone, regardless of their screen size.

   In this lab, you've gained hands-on experience with several key concepts of modern front-end development:

   • Mobile-first Design: You built the layout for the smallest screens first, prioritizing content and ensuring a solid foundation.
   • CSS Media Queries: You used @media rules to apply different styles at a specific breakpoint, adapting the layout for tablets and desktops.
   • Flexible Layouts: You transitioned from a simple, single-column layout to a more complex two-column grid using CSS Grid.
   • Responsive Navigation: You implemented a CSS-only hamburger menu for mobile and converted it to a traditional horizontal navigation bar for larger screens.

   These are fundamental skills for any front-end developer. Keep experimenting with different breakpoints, layouts, and responsive patterns to further sharpen your abilities. Well done!