🎯 Unit 3 Activities

Table of Contents

💻 ACTIVITY PROGRAM SETUP INSTRUCTIONS
  1. Go to the public template repository for our class: BWL-CS HTML/CSS/JS Template
  2. Click the button above the list of files then select Create a new repository
  3. Specify the repository name: CS1-Unit3-Activity#

    Replace # with the specific activity number.

  4. Click

    Now you have your own personal copy of this starter code that you can always access under the Your repositories section of GitHub! 📂

  5. Now on your repository, click and select the Codespaces tab
  6. Click Create Codespace on main and wait for the environment to load, then you’re ready to code!

🛑 When class ends, don’t forget to SAVE YOUR WORK! Codespaces are TEMPORARY editing environments, so you need to COMMIT changes properly in order to update the main repository for your program.

There are multiple steps to saving in GitHub Codespaces:

  1. Navigate to the Source Control menu on the LEFT sidebar
  2. Click the button on the LEFT menu
  3. Type a brief commit message at the top of the file that opens, for example: updated main.py
  4. Click the small ✔️ checkmark in the TOP RIGHT corner
  5. Click the button on the LEFT menu
  6. Finally you can close your Codespace!

We will build a professional-looking webpage for a fictional art gallery using ONLY Bootstrap classes for all of the styling and layout.

PART A: Design a Hero Section

  1. Decide on a theme! Your gallery can be focused on an art history period (Renaissance, impressionist, postmodern, etc.), an artistic medium (photography, sculpture, etc.), or specific subject.

  2. In your HTML’s <body> section, add two <div> elements with Bootstrap container classes. One should be a fluid container, the other a fixed container.

  3. In the fluid container div, include an <h1> element with a title for your gallery, and a <p> element with a description of your gallery.

  4. Download an image that represents the “storefront” of your gallery and upload it to your repository’s File Explorer tab.

  5. In the fixed container div, include an <img> element with the src set to your storefront image. Give the image a class of class="img-thumbnail".

PART B: Apply Styles with Typography & Color Classes

Now that your page has some opening content, let’s enhance the appearance using Bootstrap’s built-in typography and color utility classes.

  1. Use text classes to change the appearance of your gallery’s title and description. Try adding emphasis with classes like fw-bold, fst-italic, or text-uppercase. 👉 Optional challenge: Use display-* classes for oversized titles (e.g., display-1, display-2…).

  2. Choose a color scheme for your hero section. Use text color, background color, and border utility classes from Bootstrap. Make sure your colors complement each other! 👉 Examples: bg-dark text-light, border border-primary, bg-warning text-dark, etc.

  3. Try adjusting spacing with Bootstrap’s margin (m-*) and padding (p-*) utility classes to better position your elements on the page.

  4. Optional: Use text-center, text-end, or text-start to align your text.

PART C: Set up a Responsive Grid Structure

Let’s create a layout for your artwork using Bootstrap’s grid system.

  1. Inside a <div class="container">, add a <div class="row"> to begin your grid.

  2. Create at least 3 columns (<div class="col">) inside your row. These will hold the featured artwork for your gallery.

  3. Explore responsive column classes like col-sm-6, col-md-4, or col-lg-3 to make your layout adjust on different screen sizes. 👉 Try mixing column sizes to experiment with how Bootstrap adapts your layout!

  4. Give each column a unique border or background color class so you can easily see the structure.

PART D: Populate the Grid with Images

Time to bring your gallery to life by adding some artwork!

  1. Inside each column from Part C, add an <img> element to showcase a piece of art. You can find royalty-free artwork online (e.g., Unsplash, Pexels, or WikiArt).

  2. Use the Bootstrap class img-fluid on your images so they scale correctly on all screen sizes.

  3. Add a caption below each image using a <p> or <small> tag. Style these captions using text-muted, fw-light, or alignment classes (text-center, etc.).

  4. Optional: Wrap each image and caption in a <div class="card"> to give it a framed, elevated look. Try combining with shadow, border, or rounded classes for extra polish.