Weather Forecast has now been on our site. Check it out!

L7 - Add a Privacy Policy

📖 1.7.1. Introduction

You're done with the landing page—but you're not done with Run Buddy. Run Buddy's legal department has finalized the privacy policy, and they want it added to the website. This will require that a new page be created, and you're just the person to do it.

Throughout this project, you've learned how to create and organize webpage content, create custom styles and layouts, and use tools to protect, back up, and publish your work. This final lesson reinforces these concepts while guiding you to "take off the training wheels" as you build a new page for the Run Buddy website.

During the lesson, you'll also accomplish the following new objectives:

1. Reuse a CSS style sheet across multiple pages.
2. Link multiple CSS style sheets in the same HTML document.

📖 1.7.2. Preview

The following image shows the mock-up provided by the Run Buddy legal department, featuring the new Privacy Policy page:

As you've probably noticed, this page is full of legalese. Don't worry, you won't need to type out all that text—we'll give it to you to paste into your HTML document. You might also notice that this page has many of the same components and styles as the landing page. This means that you can recycle much of the code you wrote earlier.

The steps we'll take to create the Privacy Policy webpage are as follows:

Create the HTML file. Add a second HTML document to the website and update how the site's pages link to each other using <a> elements.
Set up the HTML file. Reuse HTML content via selective copying and pasting.
Add content to the HTML file. You'll download the content and insert it into the page.
Add style. You'll reuse CSS by linking to the same style sheet from both pages.
Add a second style sheet. You'll create a second style sheet and override the hero section rules for the privacy page.
Create new styles. You'll create some new CSS rules specifically for the privacy page.

Let's get started!

📖 1.7.3. Create the HTML File

Do you remember what must be done before you can start writing the HTML for a new webpage? That's right—you have to create the HTML file first. Let's do that for the Privacy Policy page.

Using the command line, create a file called privacy-policy.html in the root of the project folder. Think back to earlier lessons when you created files; what was the command you used? If you can't remember, search the internet or refer to previous lessons.

SHOW HINT

When using the command line to create folders or files, it's easy to lose track of where you're running these commands. Don't forget to use the pwd command first to print out the command line's current location and confirm that the current directory is the one you want to use.

When you're done, there should be two files in the root of the project's folder: index.html and privacy-policy.html.

📖 1.7.4. Set Up the HTML File

Before we add the privacy policy content, we need to create the skeleton of the HTML document. This means we need to get the starting HTML elements in place.

Again, think back to when you started working on the Run Buddy landing page. You might recognize the following HTML:

<!DOCTYPE html>

<head>

<title>Run Buddy</title>

</head>

<body>

</body>

</html>

Go ahead and add that to the privacy-policy.html file.

NERD NOTE

Creating the skeleton of an HTML document is also known as scaffolding.

When we're done scaffolding privacy-policy.html, we'll need to make a couple of edits. Because we're creating a new page, we need to update the <title> to reflect that. The information that's currently between the <title> elements—Run Buddy—isn't necessarily wrong, but it isn't as descriptive as it could be.

The text within the <title> element appears in the top of the browser and as the tab title when a user has multiple browser tabs open. Therefore, a descriptive title lets the user know where they are on the site. It's also important for accessibility and search engine optimization.

Edit the <title> so that it more accurately describes the page, as shown in the following line of HTML:

<title>Privacy Policy - Run Buddy</title>

DEEP DIVE

Because the <title> element's content appears in the browser's tab, it's good practice to structure the content as [page title] - [site title]. Page titles should be descriptive but also concise because Google cuts off search result titles at around 60 characters.

To learn more, refer to the MDN Web Docs on page titles and SEO

Identify Reusable Components

Take another look at the mock-up of the Privacy Policy page and compare it to the Run Buddy landing page you just finished. Do you see any pieces you can reuse? It can be confusing for visitors to experience different styles throughout a single website, so most sites have similar—if not identical—components on every page.

NERD NOTE

A set of HTML code that builds out a part of the overall page's UI is commonly referred to as a component. The idea behind a component is that it can be reused in multiple places throughout a site.

The header Element

Let's identify the reusable components and then copy and paste them into the new document. The first reusable component that we encounter is the <header>. The entire <header> element can be copied over to the new page because its design and layout is the same on both pages.

The only change we need to make is to edit the navigation <a> elements' href values. For example, we need to add ./index.html in front of the #what-we-do value. That should look something like the following example:

```html

```

Before we move on, let's think about that new value for href. In index.html, we simply provided a value of #what-we-do. That told the browser that, when clicked, it should route the user to another location within the page that has an id attribute with the value set to what-we-do.

We still want this functionality, but now that <a> element is on a different page. So how do we get the user from privacy-policy.html to index.html, specifically to that section with a corresponding id? As you can see by the edit in the preceding code, we include both locations at once.

The value ./index.html#what-we-do can almost be read as the following two parts:

1. Go to the index.html file at the location ./, which means "in the current directory."
2. Once there, navigate within it to the element with an id of what-we-do.

Now that you know how to make these new href values work, make sure that the other three navigation <a> elements follow the same pattern.

REWIND

An <a> element routing you to a different location is an example of the hypertext in HTML.

The footer and section-class Elements

Let's move on to the next section. The other components that can be copied from the landing page to the Privacy Policy page are the following:

1. The <footer> element can be copied directly to privacy-policy.html. Nothing needs to be edited here.
2. The <section class="hero"> element can be reused, but we need to edit the content so it includes Run Buddy's privacy policy verbiage. For now, it is easier to go into privacy-policy.html and type the following code immediately following the closing </header> tag:

</section>

We'll add more content to this section soon, but first let's save the work and open this file in the browser.

If the result doesn't look as expected, the culprit is often something very simple but easy to overlook. Remember—even pros work iteratively, checking their work in the browser as they go. If your page doesn't look like the following image, review the previous steps to troubleshoot:

Add the Privacy Policy to Navigation

Now that we've added a second page in the website, how will the visitor get to it from the homepage? In index.html, we need to change the <a> element's href value in the <footer> element to have a value of ./privacy-policy.html.

We can remove the href attribute from this element in privacy-policy.html because we're already on this page and don't want users accidentally clicking the link and reloading the page for no reason.

SHOW PRO TIP

When an <a> element has an href value that takes the user to the same page they're on, it can decrease the site's performance because it has to download and display all of the page's data again. Therefore, it's best practice to disable these <a> elements when possible.

It won't always be possible depending on the site's requirements, but it is something to keep an eye out for.

We've used relative pathing before in the <img> and <link> elements to target other files in the project's folder structure. Now we're doing the same thing to target the privacy-policy.html file that we created in the same directory as index.html. The biggest difference is how these HTML elements interact with the target file.

When we use <img> and <link> elements, we're telling another file to join this HTML file in some fashion. Those elements don't take us anywhere; they bring resources to us. When we use <a> elements, however, we're doing the opposite by saying "When I'm clicked, I'll leave this location and take you somewhere else in your browser." Again, all of these HTML elements exemplify the concept of hypertext in HTML.

DEEP DIVE

We can use <a> elements to bring a user to a variety of resources and locations. They could bring them to a page in the site or another website entirely, which is the most popular use case, but they can also be used to open photos, PDFs, audio files, etc. Pretty much anything that can be opened in a browser can be used as an href value.

Test it for yourself sometime and set up an <a> that takes you to the path of a style sheet. When you click it, you'll be shown the contents of the CSS file you pointed it to.

Adjust the section-class Element

Now let's take care of the content inside <section class="hero">. As you can see, we removed the sign-up form. We'll repurpose this section to hold the page title by editing it to look as follows:

</h2>

</section>

We won't be adding any more HTML pages to this project. But if we were, this section has now been repurposed so that we could reuse it.

ON THE JOB

It isn't uncommon for a web-based project to be considered complete, only for a manager or client to ask that more be added to it. These additions can come in the form of simple edits to existing files—which is typically an easy change—or they could involve creating more pages, features, or even functionality. Thus when building new projects, it is best practice to set up styles and HTML layouts that can be reused across sections.

📖 1.7.5. Add Content to HTML File

Now that the page's title is being displayed, we'll move on to adding the privacy policy content. Typically when it comes to a privacy policy, a team of lawyers will provide all of the content that needs to be displayed on the page. And this is exactly what has happened with Run Buddy's copy. We just need to paste it in.

Before we add this content, let's create the container that will hold it. Add an <article> element after the closing </section> of the hero with a class of secondary-content.

Now open this HTML file, which contains the privacy policy.

The privacy policy content will display in your browser. Right-click the page and select "View page source" to see its HTML. Copy the HTML from the browser and paste it inside the <article> element of privacy-policy.html in VS Code.

Now that we're done adding content, it's a good time to think about adding styles to the page. But first let's look at how the browser displays this HTML without any custom CSS, as shown in the following image:

When we add CSS, this will look a lot better, but the browser is printing the content to the page in an organized and readable fashion. To reiterate a concept we discussed earlier, this is known as the normal flow of a webpage: all of the content appears on the page in the order in which it was placed in the HTML document and occupies space based on the HTML element that contains it. Even though the result isn't the most visually appealing, it serves its core purpose, which is to get HTML content to the visitor.

Well, that's enough praise for the browser and its default styling. Let's add our own!

📖 1.7.6. Add Style

It's time to make this page look as good as the landing page. Do you have an idea of how we'll do that? That's right—we'll attach our style sheet!

Attach the Style Sheet

Let's add the style.css file to this HTML document. Do you remember which HTML element we used in index.html to connect the style sheet? Go ahead and add that to the privacy policy document's <head>.

PAUSE

Which one of the following examples uses relative pathing, and which one uses absolute pathing? Which one is preferred?

<link rel="stylesheet" href="./assets/css/style.css" />

The first is relative pathing and the second is absolute pathing. Relative is preferred because no matter where the project folder ends up, the files will stay related to one another. Absolute pathing means it only works at that exact path and if the project folder is relocated, the path will have to change.

Now because the <head> element of the HTML document has the exact same <link> element as index.html, the styles from one CSS file are now being applied to both pages!

SHOW HINT

If that didn't work, make sure you saved the file and refreshed the page in the browser.

This is great news, as we now don't have to repeat the style definitions and can reuse them wherever we need to. This is also one of the main reasons why—at the very beginning of this project—we created a separate CSS file for the style definitions instead of including them in index.html itself.

Polish the Styles

There are some styles that are a little out of sorts, however. The <header> and <footer> styles look great, but the hero section is oversized and the page's content in the <article> element doesn't have any styling at all, as you can see in the following image:

Both of these issues are easy to solve. Looking back at the mock-up at the top of this lesson, you can see that there are only a few small differences between the appearance of the Run Buddy homepage and the Privacy Policy page.

To fix the styling of the Privacy Policy page, you'll need to do two things:

1. Keep most of the existing styles for the hero section and make just a few edits to them.
2. Add some new style definitions for the page's <article> element by targeting its secondary-content class.

Let's discuss the first point. If you compare the finished product of index.html with the screenshot of the finished product we're working towards for privacy-policy.html, you'll notice that the hero sections have the same background but the Privacy Policy page has a centered title and is much shorter.

The following image shows how the landing page's hero section looks compared to what we'll have in the privacy policy hero section:

To adjust the hero section of the Privacy Policy page, we'll edit some styles and have them only apply to the privacy policy's hero. There are a couple of ways to do this:

- Change the class names: In this approach, we reuse most of the current CSS rule blocks, make a few edits to the style declarations, and give the CSS selector a new class name. This way, we can target different sections but still have a similar look. A use case for this would be if we wanted both paths to have the same margins and font sizes but different colors, like in the following example:

/* homepage hero */

.hero {

margin: 20px;

background-color: white;

font-size: 20px;

color: blue;

}

/* secondary page hero */

.hero-secondary {

margin: 20px;

background-color: black;

font-size: 20px;

color: red;

}

Keep the class names, but override some of the declarations: This choice seems to be the most efficient with less duplicate code being written, because most of the declarations will be the same except for a few changes. In the following example, an HTML element gets most of its styles from one class but then has a couple of them overridden by a second one:

.hero {

margin: 20px;

font-size: 20px;

background-color: white;

color: blue;

}

/* these two colors will override the ones above in .hero */

.hero-secondary {

background-color: black;

color: red;

}

Overriding CSS declarations can be tricky. Take care not to accidentally reassign working declarations in the hero section.

The way to avoid this is to create a second CSS file and have it accessible only to the privacy-policy.html file. You can do this by placing the secondary style sheet link in privacy-policy.html and not index.html. This is also useful because the folks at Run Buddy are currently reviewing the work you did on the landing page, so making edits to style.css at this moment could break things during the review, and an unhappy client makes for an unhappy developer.

IMPORTANT

Not every HTML page needs a unique style sheet attached to it. In many cases, an entire site uses a single style sheet. Having separate style sheets can be useful when there are too many styles to keep organized in a single sheet and/or when multiple CSS developers are handling different parts of the site and don't want to step on each other's toes.

With most problems you'll face in programming, there will usually be a number of ways to solve them. You might not always lean towards one over the other, and the option you choose should always depend on the problem at hand. The key is to not get overwhelmed by these decisions. You can always go back and change it if you don't like how it turns out (one of the many reasons we use Git!), and you'll never know which solutions you like until you try them.

For the sake of seeing how it works, let's go with the second option. The first one is a more than acceptable solution, but the second lets us learn how to use two style sheets with a single website.

📖 1.7.7. Add a Second Style Sheet

Let's start by using the command line to create another CSS file. Try doing this on your own.

Here's an overview of what you need to do:

1. Add this file to the css directory, which is inside the assets directory. Use the cd command to change the working directory to assets/css.
2. Once inside the css directory, use the touch command to create a file named secondary-styles.css.
3. Add that style sheet to privacy-policy.html by adding a second <link> element below the current one and set the href value to ./assets/css/secondary-styles.css.

SHOW HINT

Use pwd and ls to navigate your computer's file system.

The result should be that the Privacy Policy page's <head> element contains the following code (in this order):

Now that your files are in place, add the following style definitions to secondary-styles.css to take care of the hero section:

.hero {

background-position: bottom;

height: auto;

text-align: center;

margin-bottom: 40px;

}

That should have fixed the spacing issues in that section. We overrode the background-position and height properties and added text-align and margin-bottom. Did you notice that we didn't even list the background-image and background-size properties?

To get a better idea of what's happening, right-click the hero image and open the Chrome DevTools. You'll see something like the following image:

As you can see, there are two sets of styles being applied to the hero class. One is in secondary-styles.css at line 2 (in this screenshot), and the other is in style.css at line 75. To explain how the browser chose which styles to apply and which to discard, just look at how the secondary-styles one is listed on top of the other one, as if it's taking precedence. That's because it is.

REWIND

This is an example of the CSS cascade in effect. Think back to when you first learned about CSS. Three factors in CSS determine which styles get applied: importance, specificity, and source order. This is an example of source order affecting which style definitions win.

Try switching the order of the <link> elements in the <head> element to see how it affects source order.

To learn more, refer to the MDN Web Docs on CSS cascade and inheritance

In privacy-policy.html, the <link> element for secondary-styles.css comes after style.css. The browser reads these elements in order of appearance, so everything from style.css is applied first. Then it sees the styles defined in secondary-styles.css and applies those. Any conflicting property definitions are overridden by the declarations that are read last. This is what source order means: the declarations that come last prevail.

A useful feature of CSS is that it overrides at the declaration level, not the rule level. Any property declarations in the overridden rule will remain intact if the overriding rule does not redeclare them. We didn't define new values for background-image, background-size, or position because we want to use the same styles, so they get to carry over from the other style definition.

To see declaration level overrides in action, watch the following video:

Again, we can observe these CSS rules and overrides working together to create this updated hero section in Chrome's DevTools, as shown in the following image:

The hero section in privacy-policy.html sees two sets of CSS rules from the two style sheets and combines them, then prioritizes the values that come later in conflicting declarations. The resulting CSS rule for the .hero class resembles the following code in the browser:

.hero {

background-image: url(../assets/images/hero-bg.jpg);

background-size: cover;

background-position: bottom;

position: relative;

height: auto;

text-align: center;

margin-bottom: 40px;

}

Now that all of the style overriding is done, we can focus on creating the new style definitions for this page.

📖 1.7.8. Add New Style

We're nearing the finish line! We just need to add a few more styles to the Privacy Policy page to make it look like the mock-up.

Add page-title Style

Using everything we've learned about CSS, let's work on the page's title first. We'll start by defining which selector will be used. The quickest way to do this is to select the element by its class, page-title.

Here are some specifications for how it should look:

- The font color is #fce138.
- The <h2> element does not go full-width, so change its display property to make it an inline-block element.
- Give its border-bottom a value with a 4px width, a solid style, and the same color as the color property.
- Make the border run wider than the text and give it some space by applying the following padding to its sides:
  1. top: 0
  2. right: 80px
  3. bottom: 15px
  4. left: 80px
- Adjust the font styles as follows:
  1. Set the font-weight to normal; this makes the default bold <h2> not bold anymore.
  2. Change the font-size to 42px.
  3. Here's a new one: set the font-style to italic. As you can probably assume, font-style is a CSS property that creats slanted (italicized) text.

If any of the spacing seems off, remember that you can always use Chrome's DevTools to adjust and see how certain styles will look before actually applying them. This saves a lot of trial-and-error time.

The result should resemble the following image:

Add secondary-content Style

Now we'll add styles to the secondary-content class and its child elements using class selectors and nested selectors. Add the following styles into secondary-styles.css so you don't accidentally overwrite any styles for index.html.

The styles for secondary-content are as follows:

- Set the width to 80%.
- Center it on the page by using margin. Think back to how you centered elements in previous lessons using this property; the values here will be very close if not the same.
- Set the default font color for all text in this <article> to have a value of #024e76.
- Style the <h3> elements in secondary-content (use nested selectors to make sure it only applies to these elements and no other <h3> elements):
  - - Give it a font-size of 25px.
    - Set its margin to have 20px on the top and bottom, and 0 on the left and right.
- Style the <p> elements in secondary-content (use nested selectors to target only these <p> elements):
  - - Give it a font-size of 16px.
    - Make its line-height a little bit bigger by giving it a value of 1.5.
    - Give it the same margin values you gave the <h3> element.
- Style the <ul> elements in secondary-content:
  - - Set the margin to have 15px on the top and bottom and 20px on the left and right.
- Style the <li> elements in secondary-content:
  - - Make them stand out from the rest of the text by giving them a color value of #39a6b2.
    - Give them some space by adding a margin of 10px to the top and bottom, and 0 for left and right.

SHOW HINT

Make sure that you save and refresh the page often to track your progress. Also don't forget to keep Chrome's DevTools open while you work to confirm that the styles you define get the results you want.

And there you have it. You just used HTML and CSS to create your first project! Our friends at Run Buddy will be thrilled to see what we've put together for them.

Save Your Progress with Git

The only task left is to get the finished product onto the internet for the world to see. Use the following commands to push all your hard work to GitHub:

git add -A

git commit -m "privacy policy"

git push origin main

Before you say good-bye to Run Buddy, take the following knowledge check to see what you learned:

📖 1.7.9 Reflection

You made it! At this point, you've learned enough HTML and CSS that you could definitely hold your own if asked to create a basic webpage. Believe it or not, what you've learned is about 75% of what a lot of developers used on a regular basis up until just a few years ago.

In the next module, we'll take on more advanced CSS techniques such as responsive design layouts, animation, and interactivity. But first, let's look back and consider the hard and soft skills we've acquired:

1. Interacted with the computer's file system by using the command line. This is a skill that developers use almost daily.
2. Created an HTML document in VS Code.
3. Applied meaning, context, and functionality to HTML elements by using HTML attributes.
4. Interpreted a mock-up given to us by designers by dividing it into sections, or containers, so that we could create organized HTML content.
5. Used Git to create a repository for the project and create reassuring save points throughout the build process.
6. Used GitHub to create a remote location for the repository, and then published the project to GitHub Pages for others to see.
7. Applied style and layout to HTML content by using CSS, learning about its syntax, rules, and quirks.
8. Used the knowledge gained from building the Run Buddy landing page to create a Privacy Policy page.

If this seems like a lot, that's because it is—you covered a lot of ground in this project! The good news is that you won't be leaving these skills behind. The concepts and tools you learned while building the Run Buddy landing and privacy policy webpages will be applied and reinforced throughout everything you do as a web developer, so there will be plenty of time to practice and polish these skills.

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 to see what your final code should look like.

<<== Previous

Next ==>>

Page updated

Report abuse