Scribd
Upload
38 views

Lab 3

This document provides instructions for building a responsive cookie store website using Bootstrap. It outlines 3 parts: 1) Adding Bootstrap CSS, 2) Creating a responsive grid layout with cookies displayed differently on mobile, medium, and large screens, and 3) Reordering grid columns to alternate cookie images and details on medium screens while keeping semantic HTML order. The goal is to create an attractive, responsive website layout using Bootstrap without changing the underlying HTML structure.

Uploaded by

Aristan Saidildin
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
38 views

Lab 3

This document provides instructions for building a responsive cookie store website using Bootstrap. It outlines 3 parts: 1) Adding Bootstrap CSS, 2) Creating a responsive grid layout with cookies displayed differently on mobile, medium, and large screens, and 3) Reordering grid columns to alternate cookie images and details on medium screens while keeping semantic HTML order. The goal is to create an attractive, responsive website layout using Bootstrap without changing the underlying HTML structure.

Uploaded by

Aristan Saidildin
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Build a responsive cookie store web page

In this lab, you are given an index.html file that contains our web page's content, and we will be
using Bootstrap to build a responsive layout and style the page.

Part 1. Add Bootstrap

1. Open the index.html file in your code editor


2. Open the index.html file in your web browser
3. Link the css/styles.css file in the <head> section of index.html
o We will use this css file to add our own custom styles
4. Link the Bootstrap CSS file in the <head> section of index.html
o Use the CDN link tag
5. Reload index.html in your web browser

After reloading the page you should notice subtle changes to the page like a different font,
margins, and spacing on the page. This lets us know that Bootstrap was added properly.

Part 2. Responsive layouts

1. Apply the bootstrap grid classes to the cookies on the page in the <main> section. The
resulting responsive layout should display as follows:
o On mobile screens, 1 cookie per row
o Starting on medium md screens, 2 cookies per row
o Starting on large lg screens, 4 cookies per row
o Read about making your images responsive
2. Apply styling and classes so that the title text is displayed centered within
the <header> section. Below are some hints on how to do this:
o Use custom styles for this section
o Give the header section a fixed height, I used 400px
o Read about using images with a cover background-size
o Read about how to center a div block
o Choose a background image of your own or use the image provided
o There are multiple ways to solve this section
3. Style the "About us" section and the <footer> section of the page to display similar to
the screenshots
o Use a grid for the "About us" section
o style the footer as you like

Part 3. Reordering grid columns visually

1. Open the alternating.html page in your code editor

2. Open the alternating.html page in your web browser

3. Using only bootstrap grid styles make the cookie products alternate as shown and
described in the following screenshots:

o On mobile screens, display 1 cookie per row


o Starting on medium md screens, display the cookie image and details on the same
row, but alternate the order of these two on every row
o Read about reordering columns and offsetting columns in the bootstrap
documentation

IMPORTANT:

• Don't change the order of the 3 main cookie html tags, the <h3>, followed by the <p>,
and then the <img> tags. Remember, we want to keep semantic order.
• You can add <div>'s and bootstrap classes as needed, you can wrap the tags in div's as
needed, as long as you don't change the order.

Additional Resources

• Bootstrap 5.2 Examples


• How to add different fonts to your web page
o Google Fonts offers free fonts

You might also like