Hello! Welcome to the mini-project for our CSS module. Over the past few lessons, you've built a solid foundation in modern CSS layout techniques. You've mastered the box model, used Flexbox and Grid to arrange content, made your designs responsive with media queries, and even learned how to handle Git merge conflicts.
Now, it's time to put all those pieces together.
This lesson is all about applying your skills to a practical project. Your goal is to style a complete web page using a responsive, mobile-first approach, featuring a flexible navigation bar and a card-based layout. This project will solidify your understanding of how to build layouts that look great on any device, a fundamental skill for modern web development.
Let's get building!
1. Project Overview and Setup
For this project, we'll use a pre-built challenge from the Mozilla Developer Network (MDN). It provides all the HTML, CSS, and JavaScript starter code we need, allowing us to focus purely on the layout and styling tasks.
The core philosophy we'll use is Mobile-First Design. This means we will write our base CSS for the smallest screen (mobile) first. Then, we'll use min-width media queries to add or override styles for larger screens like tablets and desktops. This approach often leads to cleaner, more efficient CSS.
Your first step is to set up the project on your local machine.
Challenge: A mobile-first layout - Learn web development | MDN
The MDN article 'Challenge: A mobile-first layout' provides the complete starter kit for our project. Follow the instructions in the 'Starting point' section to get everything set up.
Follow steps 1 through 6 in the 'Starting point' section. This involves: Creating a project folder. Creating index.html, style.css, and script.js files and pasting the provided code. Creating an images subfolder and downloading the six images. Opening index.html in your browser with Live Server. \nDon't worry about the JavaScript file for now; it's there to handle the mobile menu toggle.
Once you're set up, open your project in VS Code. Before you write any new code, I recommend creating a new Git branch for this project.
# In your VS Code terminal, inside the project folder
git checkout main
git checkout -b feature/responsive-styling
2. The Project Brief: Your Tasks
Now that your project is ready, let's look at the tasks. The MDN article has a "Project brief" section that outlines exactly what we need to do. We will focus on the main layout tasks to meet our learning outcome.
The provided stylesheet (style.css) already contains the mobile layout. Your job is to add the responsive styles for tablet and desktop screens.
Task 1: Fix Initial Display Issues
Before we build the new layouts, the MDN brief points out two small bugs in the starter code. Following the instructions in the "Fixing a couple of display issues" part of the brief will get your project into a clean state.
- Hint for bug 1: Think about the essential
<meta>tags that should be in every responsive HTML document's<head>. - Hint for bug 2: How do you ensure an image never overflows its container? We covered this when discussing the box model.
Task 2: Create the Tablet Layout (@media (width > 800px))
This is where you'll write your first media query. The goal is to transform the mobile layout into a two-column grid for screens wider than 800px.
Follow the instructions under "Creating the middle layout" in the MDN brief. You will be:
- Adjusting the navigation bar: Use Flexbox to change the navigation from a hidden, stacked list into a visible, horizontal bar.
- Building the main grid: Use CSS Grid and named
grid-template-areasto create the main page structure.
To see a great practical example of applying a grid layout inside a media query, just like you're about to do, watch this section of a project walkthrough.
Grid CSS Responsive Website Layout - "Mobile First" Design
The video 'Grid CSS Responsive Website Layout' by Traversy Media shows exactly how to define a grid structure inside a media query to transition from a mobile stacked layout to a desktop grid layout.
Watch from 35:37 to 39:50. Pay close attention to how the display: grid and grid-template-columns properties are placed inside the @media block, only affecting larger screens.
Task 3: Create the Widescreen Layout (@media (width > 1300px))
To further practice responsive design, you'll add a second media query for very wide screens.
Follow the instructions under "Creating the widescreen layout". This will involve:
- Changing the CSS Grid layout from two columns to three.
- Reverting the navigation bar back to a vertical column on the side.
This task highlights a key aspect of responsive design: styles from smaller breakpoints "cascade" up. You may need to override or unset styles you applied for the tablet layout.
3. Implementing the Card-Based Layout
The photo gallery in the <aside> element serves as our "card-based layout section". In the mobile layout, it's a simple two-column grid (grid-template-columns: 1fr 1fr;). This works, but we can make it more robust and responsive using modern CSS Grid features.
Instead of a fixed number of columns, you can tell the browser to fit as many columns as possible, as long as they meet a minimum size. This is perfect for a card grid.
The Easy Way to Build Responsive Websites
The video 'The Easy Way to Build Responsive Websites' demonstrates this powerful technique for creating flexible grids.
Watch from 15:52 to 17:03. Focus on the use of grid-template-columns with repeat(auto-fit, minmax(300px, 1fr)). Try applying a similar rule to the .photos class in your CSS for all screen sizes and see how it behaves when you resize your browser. This is often a more flexible approach than setting different column counts in each media query.
4. Completing the Project
Work through the tasks outlined above. Use the Git workflow: make a change, save, and then git commit with a clear message (e.g., feat: implement tablet grid layout). Committing frequently will make it easier to go back if something breaks.
Once you believe you have a working solution, you can compare your work with the official solution provided by MDN.
Challenge: A mobile-first layout - Learn web development | MDN
The MDN article contains a complete solution. Use this to check your work or if you get stuck.
After you've attempted the challenge, review the 'Example' section at the end of the article. It contains the final CSS. Compare it with your own to see the different ways you might have solved the same problems.
When you're finished and happy with your project:
- Merge your feature branch back into
main.git checkout main git merge feature/responsive-styling - Push your final work to your GitHub repository.
git push origin main
Conclusion
Congratulations on completing the CSS module mini-project! You have successfully taken a mobile-only design and made it fully responsive for tablet and desktop, using the most important tools in a modern front-end developer's toolkit.
Key Takeaways:
- You implemented a mobile-first workflow, starting with base styles and progressively enhancing the layout for larger screens.
- You used Flexbox to create a responsive navigation bar that adapts its layout across breakpoints.
- You used CSS Grid with
grid-template-areasto define complex, named page structures. - You applied all of these techniques within media queries to create a seamless user experience on any device.
This project is a major step in your journey. You've now refreshed the essential skills needed to build the structure and presentation of any website.
In our next module, we'll dive into JavaScript. You'll learn how to bring your static pages to life by adding interactivity, manipulating content, and responding to user actions.