Heart Healthy Website

In this activity, use HTML and CSS to update a heart healthy website and make it your own!

Overview of HTML, CSS, and repl.it

• HTML is a language that lets developers to create websites. A web browser takes the HTML code, and displays it as a nice-looking webpage.
• CSS is a language that lets developers add style to websites. This includes things like fonts, colors, and more.
• repl.it is a website that lets developers create websites.

Website Setup

To get started, follow the steps below. In order to make the setup quicker, you can use the following credentials:

• username: hylandstudent
• password: hyland

Open up a Google Chrome browser, and follow these steps:

1. Go to the existing Heart-Healthy Website
2. At the top of the page, find and click the "Fork" button to create a fork of this project
   
3. If you already have an account, click the "log in" link
   
4. From there, enter your account information and click the "Log in" button
   
5. Next, click the "Run" button at the top of the page to build the website from the HTML
   
6. Verify that both the HTML code and the website appear on the page!
   • NOTE: Make sure to zoom in so everything is easy to read

At this point, it should look something like this:

Looking at the HTML

Notice how the code in the HTML creates the text on the website. Everything in HTML goes between tags, which tell the website what type of element to display.

• The text between the <h1> and </h1> tags becomes a large header
• The text between the <p> and </p> tags becomes normal sized text
• The text within the <li> and </li> tags are bulleted items in a list

The website looks okay, but there's a lot we can do to make it better. The first thing to do is update the header text with your name! For example, if my name were Katara, I could change the header so that it said Katara's Heart Healthy Website.

Update the code in the HTML section, between the <h1> and </h1> tags. It should look something like this:

<h1>Katara's Heart Healthy Website</h1>

Click the "Run" button again, and make sure the text on the website updates with the new header!

Adding an Image

Almost every website has at least one image, and we would like our website to have one too! In fact, the code already has the proper tag in place! All we need to do is find an image, and paste the URL into the HTML code.

1. Go to the Heart Images page, and find a heart that you like
2. Copy the URL listed above the heart by highlighting the text, right clicking, and selecting "Copy"
3. Go back to the Repl
4. In the HTML section, find the <img src="" /> tag
5. Click right between the two quotes (" and ")
6. Paste in the URL by right clicking and selecting "Paste"
7. Verify that the image appears on the website!

The code for the image should look something like this:

<img src="https://i.imgur.com/OEtKLe4.png" />

Updating the List

Currently, the list of heart-healthy foods only has placeholder items. We want it to have some real foods! Update the HTML code so that the website displays a list of foods.

1. Go to the Heart-Healthy Foods page to find a list of some heart healthy foods
2. Select three of your favorite foods from the list
3. Go back to the Repl
4. In the HTML section, find the <ul></ul> tags
   • This is code for the list on the website!
5. Update the text between each <li> and </li> with one of the heart-healthy foods from the list
6. Verify that the new foods appear in the list on the website!

The code for the list should look something like this:

<ul>
  <li>
    Beans
  </li>
  <li>
    Spinach
  </li>
  <li>
    Dark Chocolate
  </li>
</ul>

Updating the Colors

So far, we have updated the content of the website with HTML, but we haven't done anything with the style. That's where CSS comes in! CSS can change the style of the page, without affecting the content.

1. Take a look at the code within the <style></style> tags, and try to figure out what it does
2. Find the area where it sets the background color - background: white
3. Change the "white" to "pink" to change the background color
4. Next, find the area where the CSS sets the text color - color: black
5. Change the "black" to "red" to change the text color
6. Click the "Run" button again, and verify that the colors have updated on the website!

The CSS code should look something like this:

body {
    font-family: arial;
    font-size: 20px;
    background: pink;
    color: red;
}

Using Custom Colors

Some basic colors are built into the web (like pink and red), but it is also possible to use custom colors! Each color can be represented as a hexidecimal color code, which is a hashtag (#) followed by six alphanumeric characters. The easiest way to find a specific color is to use a color picker. Follow the steps below to update the colors on the website.

1. Go to Google's Color Picker
2. Drag the two sliders around to select a new shade of pink
   
3. Once a color is selected, highlight the "HEX" code text under the color picker, and copy it
4. Go back to the Repl
5. Remove the "pink" from the CSS, and paste in the new hex code
6. Verify that the new background color appears on the website!
7. Repeat the steps above to change the color of the text to another custom color

The CSS code should look something like this:

body {
    font-family: arial;
    font-size: 20px;
    background: #ffbdbd;
    color: #bf3636;
}

Finishing Up

Our website is looking pretty good now! Certainly a lot better than it started. It should look something like this:

Congratulations, you've successfully built a heart healthy website!

Sharing

To share your website, you can copy the URL from the bar at the top of the website:

Paste the link anywhere to share it.

Additional Topics

If there is time remaining, there are a lot of additional updates we could make on our website. Some of them can be found here: Additional Topic Challenges