Skill Assignment

Grid System Web Layout

In this assignment, you will use a grid system as a framework to build a webpage. This means someone else has already done a lot of the work, and you can use the components they’ve created for you.

Understanding Divs and Classes

In the previous assignment, you used HTML tags such as <h1> and <img> to add content to your webpage, and then wrote corresponding CSS rules to style those elements. But what if you want some images to have a white border, and some images to have no border? What if you want to style photo captions on your page differently from the rest of the <p> text? And, perhaps, most glaringly, what if you want to use a grid or lay out your content so it’s not just one long list aligned with the left side of the page? There are two important principles we’ll add this week: divs and classes.

Divs

The <div> tag is an all-purpose containing element. You can group content on your webpage by putting it between div tags, the same way you can organize things in the real world by putting them in drawers, bags, cupboards, etc. You can have nested divs for multilevel organization, the same way you probably have a fridge that has several shelves and compartments, and then packages and containers further organizing the content (in this case, the food).

You can also think of a div sort of like a plastic grocery bag — it doesn’t have any structure of its own, but it contains and groups other things, and often takes the form of those things. In HTML, using div tags is an essential way to structure content so it can be styled to have visual hierarchy and organization.

Classes

To style elements selectively, you can use classes to label those elements in both your HTML and CSS. Classes are a way of differentiating content that uses the same tag.

For example, you might have a style rule that adds borders to all the images on your page. But suppose you want some images to have thick borders, and some smaller images to have thin borders. They all use the same <img> tag. But you can use classes to style them separately. You get to make up the names for classes, though each class name must not have spaces or punctuation other than hyphens and underscore.

In HTML, the class is listed within the tag:

<img class="thin-border" src="sunset.jpg" />
<p class="caption">View from campus</p>

In CSS, classes can be used as selectors with a period in front of the class name:

.thin-border {border: 1px solid white;}
.caption {font-size:13px; color: gray;}

Classes and divs can be used in complex ways, but now you know all the essential building blocks for building webpages.

Reference Videos

The most questions about this assignment come up when you’re just getting all the files organized and set up. This video goes over that part, and explains how those files work together:

This video goes through the actual coding steps. It’s recommended that you watch the whole thing before getting started if you’re feeling uncertain about the process, or you can skim it if you run into questions about a particular step.

Part 1: Find Your Content

For this assignment, you’ll be displaying 8 photos on your webpage.

  • Choose any theme for your photos. This can be as simple as something like “fruit” or “dogs,” or something more abstract like “friendship” or “anger” to see how it’s portrayed in free-to-use photos.
  • Find and download 8 free-to-use photos. Keep track of the links and source information for all of them.
  • 1000px wide is plenty large enough for our purposes. It’s recommended that you resize any larger files down to 1000px so they don’t make your webpage load slowly.
  • Put all your photos into a folder named img

Part 2: Using Bootstrap

The template in this assignment uses the Bootstrap framework. There are many different frameworks and grid systems available to front-end web developers, and Bootstrap is one popular option. It’s time-consuming to build all the classes and styles you need from scratch, especially for a responsive website that adjusts automatically to screens of different sizes. Bootstrap is essentially a whole bunch of readymade classes for laying out a responsive grid and styling other common elements, like buttons and slideshows.

You’ll create a responsive webpage that displays a collection of photos. It will be helpful to sketch a wireframe of your page, which will look generally like this, with additional notes about which image goes where:

1. To get started, download this zip folder: Bootstrap-Com320.zip

Unzip it so you can use all the files. This folder contains:

  • index.html (a template set up to use the Bootstrap system)
  • style.css (an almost-blank CSS file for adding custom styles)
  • folder named img (move your photos here or replace this with your own)

(If you see any other files, such as .DS_Store, you can delete them. These are files automatically created because this zip folder was created on a Mac, if you are using a Windows computer.)

In the previous assignment, we used internal CSS that was written into the <head> portion of the HTML file. It is far more common to set up webpages with a separate CSS file, like we have in this assignment. The two are connected by a resource link in the <head> portion of the HTML document.

As you work on this page, you will frequently switch between the HTML file, the CSS file, and the browser window where you can preview your changes. It’s beneficial to get the windows on your screen set up so you can quickly switch between these three views.

Three views as you work: The index.html file for editing your HTML, the style.css file for editing your CSS, and the browser window for checking your changes. It’s strongly recommended that you use a software program designed for editing code since this will make it easier to keep it all organized. There are many free options, but try out TextMate or BBEdit for Mac and Notepad++ for Windows.

Open the HTML file in your code-editing software program. It may be helpful to open the software first and go to File > Open to locate the file.

In the HTML file, you can see that there’s a div with the starter-template class. In the CSS file, there is a corresponding rule-set for the .starter-template class.

2. In the HTML file, customize the page title in the <head> portion of the file to include your name and the topic you selected for your photos. This won’t show up on your webpage, but you can see it in the browser tab.

3. In the CSS, there is a style rule for the background color. Change the background color and view the HTML file in your web browser to check that all your files are working together correctly. If the background color changed, you’re good to go!

The Bootstrap Grid

Bootstrap includes predefined styles based on a 12-column flexible grid. One reason Bootstrap is popular is that it comes with detailed documentation, which explains how it’s put together and how you can use it. Read through this main page about using the grid system: https://getbootstrap.com/docs/4.0/layout/grid/

There are other examples and resources on the Bootstrap site — definitely use them!

4. In your HTML document, delete the whole starter-template div. We don’t need that anymore.

5. In place of that deleted div, paste in the three-column example from the beginning of the Bootstrap grid page. (Or you can copy from here.)

<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>

Once you have a bunch of divs, this is where it’s important to keep your HTML document organized with consistent spaces/indents so you can tell at a glance how the elements are nested inside the containers. Preview your file in the browser to make sure your changes have worked.

6. In each of your three columns, insert one of your photos and a short caption. (The bold code is from the previous step when you added columns; add the code shown here in blue to add content inside each column.)

<div class=”col-sm”>
<img src="img/photo1.jpg" />
<p>Include your short caption here.</p>
</div>

Note that since your photos are contained in a folder called img, you need to include that in the relative image path. That source line above is saying, “Look in the img folder to find the file named photo1.jpg.”

7. Your images are most likely showing up too large, because they’re showing at full size. To make them fit into the three columns you set up, go to your CSS file and add a rule:

img {
width:100%;
}

This is telling all images to be 100% of the width of their container. Make your web browser larger and smaller, and you’ll now see your image sizes adjust with it.

(Another way to achieve this same thing is to use the .img-fluid class that’s built in with Bootstrap. There are a number of Bootstrap options for images.)

8. Add two more rows for your other five photos:

This step is where you show how this all works, so it may take a while. At the end of this step, you should have all eight photos displaying in three rows.

9. At the top of your webpage, add a “jumbotron” div with your page topic and a subhead. This is one of the built-in components in Bootstrap that you can use and customize.

<div class="jumbotron">
<h1 class="display-3">Your Topic Here</h1>
<p class="lead">Explanation of this topic or why you chose it</p>
<hr class="my-4">
<p>By FirstName Lastname</p>
</div>

This should go right after the <main role="main" class="container"> line and right before the container div around your rows of photos.

Customize the text for your own topic and name.

10. In your CSS file, add at least three styles to customize the appearance of your page. You might change fonts, colors, backgrounds, etc. For example, changing the font, size and color of your caption text would count as three style changes.

11. Finally, add <a> tags to your images so you can make each one link to its source. This will wrap around your <img> tags so a user can click on the photo itself to get back to the source website.

<a href="http://imageurlhere"><img src=”img/photo1.jpg” /></a>

Test out your page and make sure each image actually links to the correct URL!

Your completed page should look something like this example, with the headline at the top followed by three rows of photos and captions. You can see this actual webpage here (and remember you can right-click and “View Source” to see the code): Bootstrap Web Demo

When you are done, save all the files in your folder and zip it back up for submitting to Canvas.

Part 3: Written Responses

Answer the following questions in a text document or directly in the Text Submission box in your Canvas submission:

  1. What was your prior experience level with HTML and CSS before this course?
  2. How has it been going for you overall?

Submitting Your Work

Submit the following to Canvas by going to “Assignments” and uploading the files with your submission:

Demonstrated Skills: