L4 - Build the Two Main Content Sections

📖 1.4.1. Introduction

The Run Buddy webpage is looking good! We've finished some pretty tricky sections like the header, hero, and sign-up form.

Currently, the page resembles the following image:

In this lesson, you'll continue adding to the Run Buddy webpage to accomplish the following:

• Use <img> elements to display graphical content.

• Use <span> elements to highlight inline content.

• Use CSS declarations to center non-text content.

• Create HTML elements that use multiple CSS classes.

📖 1.4.2. Preview

Up next, we'll build these two more informative sections: "What We Do" and "What You Do".

The following image shows how they look in the mock-up:

This lesson might feel like a bit of a break because we won't need to use any complex CSS properties like floats or positioning. But a few new concepts will still be introduced.

Here's a high-level overview of how we'll do this:

1. Fill in the HTML content, adding placeholder text.

2. Add the new icon images. You'll work with a new image format (SVG) for the "What You Do" section.

3. Style the "What We Do" section. You'll create new CSS rules to style this section's typography and box model properties.

4. Style the "What You Do" section. You'll create new CSS rules to style this section, and use multiple class attributes in the same element.

📖 1.4.3. Fill In the HTML Content

Previously, we left placeholders for the following sections:

<!-- "what we do" section -->

<section>

  <h2>What We Do</h2>

</section>

<!-- "what you do" section -->

<section>

  <h2>What You Do</h2>

</section>

Let's fill in the missing HTML content per the mock-up. Ignore the blue icons shown in the mock-up for now, but take into consideration which elements would be appropriate to best organize the code.

In index.html, add HTML content between the corresponding <section> elements so that they resemble the following code:

<!-- "what we do" section -->

<section>

  <h2>What We Do</h2>

  <p>

    butcher selfies chambray shabby chic gentrify readymade yr Echo Park XOXO Tumblr normcore Banksy direct trade Blue Bottle chillwave you probably haven't heard of them single-origin coffee Vice fanny pack fixie Odd Future Austin fingerstache pickled twee synth Wes Anderson Thundercats viral bitters flannel meggings narwhal Marfa Schlitz sustainable Intelligentsia umami deep v craft

  </p>

</section>

<!-- "what you do" section -->

<section>

  <h2>What You Do</h2>

  <div>

    <h3>Step 1: Fill Out the Form Above.</h3>

    <p>You're already here, so why not?</p>

  </div>

  <div>

    <h3>Step 2: Consult with One of Our Trainers.</h3>

    <p>Are you here to build muscle, lose weight, or just feel good?</p>

  </div>

  <div>

    <h3>Step 3: Get Running.</h3>

    <p>Hit the ground running (literally) once your trainer lays out your plan.</p>

  </div>

  <div>

    <h3>Step 4: See Results.</h3>

    <p>Bi-weekly checkins with your trainer will keep you focused</p>

  </div>

</section>

Note how every step is wrapped in its own <div> to help keep the step title and description coupled together. This will make it easier to style them later with CSS, too.

This would be a good time to start adding the id for each section that we described earlier. Remember how we updated the attributes on the <a> elements to look like href="#what-we-do"? Right now, those links in the header don't work because we never defined what-we-do anywhere else. So let's do that now.

In index.html, add the following id attributes to the appropriate sections:

<!-- "what we do" section -->

<section id="what-we-do">

  ...

</section>

<!-- "what you do" section -->

<section id="what-you-do">

  ...

</section>

You'll see that the browser jumps down to these sections. Notice that the URL is appended with the hashed section that you selected (for example, /run-buddy/index.html#what-you-do). Very cool! We'll fill in the remaining id attributes in upcoming lessons.

📖 1.4.4. Add New Icon Images

The company's design team has given us some new images to use for the trainer's profile pictures. Download this zip file and extract the SVG files to your assets/images folder.

You might be wondering why these are SVGs and not JPGs or PNGs. In fact, what is an SVG?

To find out, let's open one of them in VS Code. It will look something like the following example:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 164.73 130.92"><defs><style>.cls-1{fill:#39a6b2;}</style></defs><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls-1" d="M163.69,109.93H99.88a.75.75,0,0,0-.69.69v2.6a2.92,2.92,0,0,1-3,3H68.67a3,3,0,0,1-3-3v-2.42a.73.73,0,0,0-.69-.69H1a1.12,1.12,0,0,0-1,1v10.58a9.25,9.25,0,0,0,9.19,9.19H155.54a9.26,9.26,0,0,0,9.19-9.19V111.15a1.16,1.16,0,0,0-1-1.22Z"/>

About SVG Files

This is XML, which is like a cousin to HTML. Unlike PNGs or JPGs, which are made up of pixels, SVGs (or Scalable Vector Graphics) are defined as a series of points and lines (the <path> elements you see in the XML) that are filled in with color. SVG images can accommodate basically any screen size without losing quality because the graphics will scale. That makes SVGs perfect for things like icons and logos.

In the first <div> under the <h2>What You Do</h2> heading, add the following <img> element:

<h2>What You Do</h2>

<div>

  <!-- insert this img element -->

  <img src="./assets/images/step-1.svg" alt="" />

  <h3>Step 1: Fill Out the Form Above.</h3>

  <p>You're already here, so why not?</p>

</div>

The img Element

The <img> element is very useful because it can display any image format. We just need to make sure the src attribute points to a file that can be found.

Much like how the <link> element had to relatively reference the style sheet as ./assets/css/style.css, we do the same for images: ./assets/images/step-1.svg.

The alt Attribute

There's an extra attribute we should make sure every image has: the alt attribute. The alt attribute explains the content and context of images to search engines and assistive technology such as screen readers.

Decorative Images and the alt Attribute

In this case, the step-1.svg image is decorative and used to add space and visual interest between text items. It might seem like the alt attribute isn't necessary then, but a screen reader doesn't know that a missing alt attribute means “this is a purely decorative image.” When an image is used for purely decorative purposes such as this, it is best practice to set alt to empty text (alt=“”) to allow the screenreader to skip over the image entirely.

However, it is important to note that most icons are not purely decorative and when they are not they should include a descriptive alt text, especially when the icons stand on their own without text around them.

If this sounds tricky, it is! Whether or not an image is purely decorative or needs descriptive alt text is often a judgment call and should be based on how the user interacts with the image, specific project guidance, and consideration for providing the best experience for a screen reader user.

ON THE JOB

As a developer, you will often have to make a subjective decisions about your project’s HTML and CSS. In these cases, it is important to take time to think about how the image will be used and carefully read the project’s specifications or acceptance criteria for guidance. Many companies also have an in-house style guide that can help inform your choice and make certain your code meets both the client's and users' needs. To learn more about image usage, refer to the alt attribute guidelines from the W3C.

View the Image in the Browser

If you haven't already, save your index.html file and reload it in the browser. As shown in the following image, things aren't looking so good anymore:

The image is enormous! Remember, SVGs are scalable. There's no built-in, hard-set pixel count, so it will fill up any available space. But that's okay. We'll use CSS to size it down later.

For now, add the other three images to Steps 2–4, by adding the following code:

<div>

  <img src="./assets/images/step-2.svg" alt="" />

  <h3>Step 2: Consult with One of Our Trainers.</h3>

  <p>Are you here to build muscle, lose weight, or just feel good?</p>

</div>

<div>

  <img src="./assets/images/step-3.svg" alt="" />

  <h3>Step 3: Get Running.</h3>

  <p>Hit the ground running (literally) once your trainer lays out your plan.</p>

</div>

<div>

  <img src="./assets/images/step-4.svg" alt="" />

  <h3>Step 4: See Results.</h3>

  <p>Bi-weekly checkins with your trainer will keep you focused</p>

</div>

Save Your Progress with Git

This seems like a good stopping point, which means that it's time to add, commit, and push to GitHub! Use the following commands to do so:

git add -A

git commit -m "add what you do icons"

git push origin main

📖 1.4.5 Style the "What We Do" Section

With the HTML in place, we're ready to start designing the "What We Do" content.

First, in index.html, add a class to the <section> element so that it can be uniquely identified it in the style sheet, as shown in the following code:

<section id="what-we-do" class="intro">

Looking at the mock-up again, it looks like everything in this section is centered. We can make this happen by using a familiar CSS property, text-align.

In style.css, add the following code:

.intro {

  text-align: center;

}

Now add some CSS declarations that apply to the <h2> element inside the following section:

.intro h2 {

  font-size: 55px;

  color: #024e76;

  margin-bottom: 35px;

  padding: 0 100px 20px 100px;

  border-bottom: 3px solid;

  border-color: #fce138;

}

The majority of this is stuff we've used before, but one thing worth highlighting is that we've specified a border on one side of the element only. We also gave the border two separate declarations, but you could have written it as one, using a shorthand property: border-bottom: 3px solid #fce138;. Which one to use it totally a matter of preference.

Save the file and refresh the webpage in the browser. The heading for the "What We Do" section should now resemble the following image:

That's definitely an improvement, but if we left it like that, the design team wouldn't be happy. Look back to the mock-up and you'll notice that the yellow border isn't supposed to extend to the edges of the screen. You might wonder why that's even happening, because the text "What We Do" doesn't occupy that much space. To figure it out, think back to previous lessons where we talked about inline elements and block elements.

Block elements occupy 100% of the width of their parent, regardless of content size. Inline elements only occupy as much space as their content needs, which means that multiple inline elements can sit next to each other.

The <h2> element, by default, is a block element, which means the styling associated with it is extending to fill up 100% of the width of the parent container. Using CSS, we can change that default behavior.

In style.css, add the following code:

.intro h2 {

  /* add this alongside your other declarations */

  display: inline-block;

}

We chose to use the inline-block value instead of the inline value so it can have the best of both worlds. It's now an inline element, but things like padding still behave like they would on block elements. Coupled with the text-align property from before, we now have a center-aligned heading with an appropriately sized border, as shown in the following image:

LEGACY LORE

In the early days of HTML, developers would center content with the <center> element. While this element still works in modern browsers, it is being officially phased out and shouldn't be used anymore.

Now let's clean up that paragraph of text a little bit, as follows:

.intro p {

  line-height: 1.7;

  color: #39a6b2;

  width: 80%;

  font-size: 20px;

}

Save the file and refresh the webpage. Again, there's not much new here, but the following image shows that we've introduced a new problem:

Because we shrunk the width of the paragraph down to 80%, it no longer looks centered. Only the text inside is centered. We could use the handy display: inline-block; trick to fix it, but there's another common tactic for centering a block element with a width of less than 100%: margin: 0 auto;.

Add the following to your style sheet now:

.intro p {

  /* add this alongside your other declarations */

  margin: 0 auto;

}

This is shorthand for setting a top and bottom margin of zero and a left and right margin of auto. But what does auto mean? Essentially, it tells the browser to calculate the margins for us. When the browser is asked to do this on both sides of an element, it will do its best to make them even, thus pushing the element into the center.

With Chrome DevTools, we can inspect the element's margins before auto is applied and after. In the following image, the orange boxes indicate the margins:

Pretty cool! Yet another CSS trick to put in your toolbelt. Note that this only works for horizontal centering. margin: auto 0 does not vertically center elements.

Save Your Progress with Git

Before you move on, use the following commands to add, commit, and push your work to GitHub:

git add -A

git commit -m "style what we do section"

git push origin main

And that wraps up "What We Do"! Let's move on to "What You Do" next.

📖 1.4.6. Style the "What You Do" Section

The styling for this section will be similar to the previous one. First, add a class to the <section> element, as shown in the following code:

<section id="what-you-do" class="steps">

In your style sheet, let's knock out some of the higher-level styling for the overall section. In style.css, add the following CSS to align and add background color to the section:

.steps {

  text-align: center;

  background: #fce138;

}

Then add the following styling to the heading:

.steps h2 {

  font-size: 55px;

  color: #024e76;

  margin-bottom: 35px;

  padding: 0 100px 20px 100px;

  border-bottom: 3px solid;

  border-color: #39a6b2;

}

By the way, it's a good idea to keep all of the CSS rules related to the "What You Do" section close together in the style sheet so it's easier to find them. It would be bad practice to have one .steps rule at the top and several more scattered throughout the middle and bottom of the file.

Hm. You know what? Those CSS declarations look almost identical to the ones we wrote for .intro h2. The only thing that's different is the border-color. In programming, we want to cut down on duplicate code as much as possible, and this is a great example of unnecessary duplication.

We could consolidate these CSS rules into more generic classes that all of the headings (including "Meet the Trainers" in the next lesson) could pull from. Let's reorganize the CSS with a few new rules, shown in the following code:

.section-title {

  font-size: 55px;

  color: #024e76;

  margin-bottom: 35px;

  padding: 0 100px 20px 100px;

  display: inline-block;

  border-bottom: 3px solid;

}

.primary-border {

  border-color: #fce138;

}

.secondary-border {

  border-color: #39a6b2;

}

Now, because we've combined their declarations, we can delete the previous CSS rules for .intro h2 and .steps h2, as shown in the following code:

 /* remove this entire CSS rule */

.intro h2 {

}

  /* and this one */

.steps h2 {

}

We also need to update the HTML code to use these new classes. In index.html, add the following class information beneath the opening <section> tags for each section:

<section id="what-we-do" class="intro">

  <h2 class="section-title primary-border">What We Do</h2>

  ...

</section>

<section id="what-you-do" class="steps">

  <h2 class="section-title secondary-border">What You Do</h2>

  ...

</section>

Note that the <h2> elements in different sections can use the same section-title class, which gives them all the same baseline in terms of size, spacing, etc. We can then add additional classes by separating the class names with a space. The attribute class="section-title primary-border" is actually pulling in CSS declarations from two different classes.

The only thing left to do is some general clean-up to size and color elements correctly. Even though this might feel like repetitive work, take the time to type out the CSS instead of copying and pasting. It'll help you memorize the syntax faster!

Add the following CSS to style.css:

.steps div {

  margin-bottom: 80px;

}

.steps img {

  width: 15%;

  margin: 10px 0;

}

.steps h3 {

  color: #024e76;

  font-size: 46px;

  margin-top: 10px;

}

.steps p {

  color: #39a6b2;

  font-size: 23px;

}

It might seem like we're done now, but anytime we're given a design mock-up to follow, we need to be absolutely sure we covered everything. Designers don't appreciate when developers say, "Eh, it's close enough."

One thing that would be easy to overlook is the font size differences in the step titles, as shown in the following image for Step 1:

Note that "Step 1:" is a bigger font than "Fill Out The Form Above." Ugh, does that mean we have to create two separate elements and meticulously position them side by side? Thankfully, no. We can more easily solve this problem using another HTML element: <span>.

In index.html, rewrite the HTML for the <h3> element in each step to have a <span> element wrap a section of the text. Each one should look something like the following code:

<h3>Step 1: <span>Fill Out the Form Above.</span></h3>

Refresh the browser. Nothing changed—what gives? This is because the <span> element doesn't affect anything visually. It is an inline element meant for highlighting sections of larger text blocks, where the highlighting is something we define ourselves with CSS. Let's define the CSS for <span> now.

In style.css, add the following:

.steps span {

  font-size: 38px;

}

This will shrink the font size of the <span> while the adjacent text in the <h3> keeps its 46px font size. Update Steps 2–4 to follow suit. When you're done, you should see something like the following image:

Save Your Progress with Git

That completes the work for this lesson, so it's time to push it up to GitHub. Use the following commands to save your progress using Git:

git add -A

git commit -m "style what you do section"

git push origin main

Great job! Take a moment now to complete the following knowledge check before moving on to the reflection:

📖 1.4.7. Reflection

This lesson gave us a chance to practice many of the CSS properties we had previously learned as we finished a large chunk of the layout—the "What We Do" and "What You Do" sections. Along the way, we better organized the style sheet with reusable class names and learned more HTML and CSS.

The next lesson will further test your skills with a more complicated layout. But first let's bask in what we accomplished here:

• Used <img> elements to display SVG images.

• Used <span> elements to highlight inline content.

• Centered non-text content using margin: 0 auto and text-align.

• Combined classes on the same element (for example, <h2 class="section-title primary-border">).

Keep these ideas in your back pocket because they'll surely come up again, not only in the next few lessons but in future web-related projects!

Lesson Code Snapshot

Download the code snapshot for this lesson to compare with your own code. It’s okay if your code isn’t exactly the same—use this code snapshot as a starting point for the next lesson.