Scribd
Upload
312 views

Exercises: Navigation Bar

The document provides instructions for creating two responsive layout exercises - a navigation bar and a photo gallery. For the navigation bar, readers are asked to build a responsive navbar similar to the example image using a mobile-first approach. They are provided hints on styling for different screen sizes using media queries and testing in dev tools. For the photo gallery, similar instructions are given to recreate the example layout, which changes from a single column on mobile to two columns on tablets and three columns with a larger fourth image on wider screens. Hints include image sizing, random image sources, and comparing the results.

Uploaded by

Rajat Chawla
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
312 views

Exercises: Navigation Bar

The document provides instructions for creating two responsive layout exercises - a navigation bar and a photo gallery. For the navigation bar, readers are asked to build a responsive navbar similar to the example image using a mobile-first approach. They are provided hints on styling for different screen sizes using media queries and testing in dev tools. For the photo gallery, similar instructions are given to recreate the example layout, which changes from a single column on mobile to two columns on tablets and three columns with a larger fourth image on wider screens. Hints include image sizing, random image sources, and comparing the results.

Uploaded by

Rajat Chawla
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Layout 1

Exercises
Navigation Bar
Create a navigation bar similar to the image below. Read the next page for the
details.

Mobile

Tablets (768px) and wider screens

codewithmosh.com
Layout 2

Hints
1. Open /Solution/NavBar/index.html to see the final result.

2. Launch Chrome DevTools. On the Elements tab, click on the Toggle Device Mode icon
to go to the device mode.

3. Click on various parts of the the device bar on the top to view the layout on different
screen sizes.

4. As you can see, on mobiles, the items are listed vertically and are center-aligned. On
tablets and wider screens, they are listed horizontally and pushed to the end of the
navigation bar.
5. Build this navigation bar from scratch using the mobile-first approach. Make the
browser small or use the device mode in DevTools to ensure the navigation bar has
the right look and feel on mobile devices.

6. To change the default font, apply the following style to the body element. We’ll talk
about fonts in detail later in the course.

font-family: Arial, Helvetica, sans-serif;

7. Use media queries to re-style the navigation bar for tablets and wider screen. You can
use 768px as the breakpoint. That’s a standard breakpoint for tablets.
8. Once you’re done, compare your HTML/CSS with mine. It’s almost impossible that
your solution would be identical to mine, and that’s totally expected. We all think
differently. As long as your solution works, you’re on the right track. Study my
HTML/CSS code to see if there are areas you can improve your implementation.

codewithmosh.com
Layout 3

Photo Gallery
Create a photo gallery similar to the image below. Read the next page for the details.

Mobiles Tablets (768px)

codewithmosh.com
Layout 4

Laptops (1024px) and wider screens

codewithmosh.com
Layout 5

Hints
1. Open /Solution/PhotoGallery/index.html to see the final result.

2. Use the Device Mode in DevTools to view the layout on various screen sizes.
3. Note that on mobile, we have a single column. On tablets, we have two columns. On
laptops and wider screens, we have three columns and the third image takes up the
space of four images.

4. Build this gallery from scratch using the mobile-first approach.

5. You can set your image source to https://source.unsplash.com/collection/


190727/800x600 to get a random image.
6. Sometimes you may get duplicate images as a result of caching. To prevent this, append
a question mark and a sequence number to the URL of the image source: https://
source.unsplash.com/collection/190727/800x600?1

7. You can represent the container for the images using a div or a ul element. It’s up to you.
8. To make the images fit the containing cell, you should give them a width of 100% and set
their object-fit property to cover so they don’t get squashed.
9. Once done, compare your implementation with mine.

codewithmosh.com

You might also like