12/October - Practical Demonstration of HTML and CSS

Prerequisites

Class Curriculum

Section content Expected time (mins) Pre - Requirements
Kahoot on Previous Material 15 minutes ❌
Lesson Agenda and Demo of Project Goals 15 minutes ❌
HTML/CSS Activity (in smaller groups) 30 minutes VsCode and Git installed
Class Break 10 minutes ❌
HTML/CSS Activity (in smaller groups) 40 minutes VsCode and Git installed
Questions and Review 10 minutes VsCode and Git installed

Lesson Goal

Practice using HTML and CSS to build a website.

The following tutorial will go through the process of making a basic website for you, but you can adapt it to make the website for anything you want.

We will be working in small groups on this. Each person in the group should be going through the tutorial. Make sure to go through each of the Group Check-in's together as checkpoints! If anyone gets stuck, the group should work together on debugging their issue. It may be helpful if that person shares their screen.

Legend

✏️ - do this section in your IDE (VSCode) or terminal
🎨 - this is a section that you can customise and make changes
📖 - this is a note, you do not need to do anything with this code

0. Set up the repository

✏️ We will start working from the following repository: https://github.com/ReDI-School/ber-intro-to-cs-2021-html-css-website

Fork the repository and then clone your fork of the repo. Hint: git clone ...

Note: there is a branch corresponding to each section of the tutorial. If at any point you get stuck, you can check out the completed code for that section. These are the branch names:

  1-starting-html
  2-navigation-bar
  3-introduction
  4-about-section
  5-contact-section

Group Check-In: Make sure that everyone has the repository forked and cloned.

Review questions (discuss as a group):

  • What is a fork?
  • What is a clone?
  • How would you change to one of the branches with the solutions?

1. Adding some HTML to start

✏️ Open the repository in VSCode. Go to the file index.html. Add the following HTML page structure and make sure to save the changes:

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <meta charset="UTF-8" />
 5    <meta name="viewport" content="width=device-width, initial-scale=1" />
 6    <link rel="stylesheet" href="assets/css/style.css" />
 7    <title>PLEASE CHANGE ME</title>
 8  </head>
 9  <body>
10    <!-- Leave this space empty for content -->
11  </body>
12</html>

📖 What does each of these lines mean?

  1. The page is defined as an HTML document:
1<!DOCTYPE html>
  1. The character set is defined as UTF-8:
<meta charset="UTF-8">
  1. A meta viewport tag is used to ensure the site looks good on different screen sizes e.g. mobile, laptop:
<meta name="viewport" content="width=device-width, initial-scale=1">
  1. A link to the CSS file we will use to style the site is added. This file is located elsewhere in the repository (at ):
<link rel="stylesheet" href="assets/css/style.css">
  1. A title is added:
<title> PLEASE CHANGE ME </title>
  1. The visual website content will be contained within the body. Right now it contains only a comment:
<body>
<!-- Leave this space empty for content -->
</body>

Now view this in the browser.

✏️ First we need to know the present working directory. Open the terminal and cd into the website repository. Then print the current working directory (hint: pwd) and copy the output.

Open your browser and copy the following into the address bar (but replace YOUR_WORKING_DIRECTORY with the paste of your working directory):

file://YOUR_WORKING_DIRECTORY/index.html

Note: if you have trouble finding the file path, you can also right-click on the file name (in the left-hand file tree) in VSCode and select "Copy Path", then paste this path into your browser where you normally type a URL. This should also take you to the same path.

You should see:

  • The text in the tab says PLEASE CHANGE ME
  • The webpage is blank

🎨 Lastly, change the text PLEASE CHANGE ME in index.html to my website (or your preferred text), and refresh the page. What has changed?

Now, in the index.html file within the <body></body> tags, type some text (for example: "nothing to see here") and save the file. Double check that this text appears on your web page, and then remove this text and save again. (We will fill the page with more interesting things in the next steps!)

If nothing has changed, make sure that you have saved the changes you made to index.html! The browser will only display saved file changes!

Group Check-In:

Make sure everyone:

  • is able to view the file in their browser.
  • has made the above changes to this file.

2. Navigation Bar (navbar)

We have an empty webpage - so much space to fill! Let's start with a navbar.

A navbar contains a list of the places to navigate to on a website e.g. Home, Notifications, Messages.

Our website will contain three sections: Home, About and Contact.

Content (HTML)

✏️ Add the following in between the two <body> tags (replacing the comment).

1<!-- Header -->
2<header class="intro">
3  <!-- Navbar -->
4  <div class="navbar">
5    <a href="#" class="button">Home</a>
6    <a href="#about" class="button">About</a>
7    <a href="#contact" class="button">Contact</a>
8  </div>
9</header>

📖 What does this mean?

  1. The <header> tag is used to specify that a header is added to the page. This typically contains a navigation bar and/or introductory information.
1<header class="intro">
2  ...
3</header>
  1. The <div> tag represents a new section or division. The <a> tag is used to link from one page to another, or if a # is used, to link to another section on the same page. Later on we will create sections for About and Contact.
1<div class="navbar">
2  <a href="#" class="button">Home</a>
3  <a href="#about" class="button">About</a>
4  <a href="#contact" class="button">Contact</a>
5</div>

Go to your browser and refresh the page to display this content. You will see that the navbar content is present but is unstyled, so we will add some styling with CSS.

Group Check-In:

Make sure everyone:

  • can see an unstyled navbar on their webpage

Questions:

  • What is a div?
  • What CSS classes do the div and a elements have in the snippet you added above?

Styling (CSS)

✏️ In your IDE open the file: assets/css/style.css.

  1. Add the following to style and set the colour of the navbar:
1body {
2  margin: 0px;
3}
4
5.navbar {
6  background-color: #5354f4;
7  overflow: hidden;
8}

🎨 The text #5354f4 represents a hex colour code. Use a colour picker to choose a different colour and change this!

Group Check-In:

  • Why did the background color only change for the navbar and not the entire page?
  1. Next, style the navigation bar links by adding the following to style.css:
1/*Navigation bar links*/
2.navbar a {
3  display: block;
4  padding: 20px 25px;
5  text-align: center;
6  text-decoration: none;
7  float: left;
8  color: white;
9}

Recall that the above CSS syntax (thing1 thing2 {...) means: "style all of the thing2's within thing1", so in the above example, we are styling all of the a elements within the .navbar class.

Group Check-In:

🎨 For each of these items, see if you can figure out what it does either by making a search on Ecosia or by trial and error (i.e. editing/removing them, saving your changes, and seeing what happens to your web page).

  1. Lastly change what happens when a mouse is hovering over a link, by adding the following:
1/*Hovering over navigation bar*/
2.navbar a:hover {
3  background-color: #faf800;
4  color: black;
5}

🎨 Again, change each of these to understand what they are doing, and check in with your group about this.

3. Adding an introduction header

Within the header, we want to introduce ourselves and say hello to the world. We will add a greeting here.

Content (HTML)

✏️ Return to the index.html file and add the following content after the navbar section and still between the <header> tags, and save:

1<!-- Introduction -->
2<div class="summary">
3  <h1 class="name">Hello, my name is ___</h1>
4  <h3 class="title">My title</h3>
5</div>

The <h> tags are used to create different headings and subheadings. Here <h1> is used as the main heading, and <h3> as a subheading.

🎨 Now customise the greeting and title with your name and title e.g. your title could be Redi School Student, Programmer or even an emoji like: 💻.

Group Check-In:

Make sure everyone can view the new text on their website.

Questions:

  • What is the difference between h1, h2, h3, ...? What does the number reference?

Styling (CSS)

✏️ Open style.css again.

We will change the font and position the intro text in the centre of the screen. Then we will add a background image.

  1. Change the font

Where you have previously added:

body {
    margin: 0px;
}

Replace this with the following:

 1body,
 2html {
 3  height: 100%;
 4  margin: 0px;
 5}
 6body,
 7h1,
 8h2,
 9h3,
10h4,
11h5,
12h6,
13p {
14  font-family: Arial, sans-serif;
15  font-weight: 500;
16  color: #5354f4;
17}

This will:

  • make the body have 100% of the screen height.
  • change the font for all text types to Arial, and change the text colour and weight.

🎨 Again, customise the following:

  • font
  • font-weight
  • colour
  1. Now we will center the text in the screen

✏️ Add the following to the CSS file:

 1/*Introduction*/
 2.summary {
 3  position: absolute;
 4  top: 50%;
 5  left: 50%;
 6  transform: translate(-50%, -50%);
 7
 8  text-align: center;
 9  letter-spacing: 4px;
10}

Group Check-In:

Read through each of these items. As a group, can you figure out what each of them is doing? Try searching Ecosia (example search terms: "css property transform", for the transform property above), asking one of the instructors or experimenting by changing them.

  1. Lastly, we will add a background image

For this, we will need the image that you selected as part of your preparation work.

Save this image to the folder: assets/images and give it the name background.jpg (or if it is an png image, background.png)

✏️ Now add the following to style.css:

1.intro {
2  height: 100%;
3  background-image: url('../images/background.png');
4  background-size: cover;
5}

If your background image has a .jpg extension, change this to url("../images/background.jpg");.

Group Check-In:

Make sure that each group member has a background image showing up on their website. If anyone's is not working, have that person share their screen and debug as a group.

4. About section

✏️ Next we will add an about section. Between the </header> tag and </body tag, add the following:

Content (HTML)

1<!-- About -->
2<div class="about" id="about">
3  <h2>About Me</h2>
4  <p>Some things I like are ___ . I am learning about ____.</p>
5</div>

🎨 Customise the text between the <p></p> paragraph tags.

Styling (CSS)

✏️ To style the text in the About section, add the following:

 1/*about section*/
 2
 3.about h2,
 4p {
 5  text-align: left;
 6  padding-left: 25%;
 7  padding-top: 1%;
 8  padding-bottom: 1%;
 9}
10
11.about p {
12  font-size: 20px;
13}

This will align the text and change the font size of the paragraph.

🎨 Change the font size and padding.

5. Contact section

Finally, we will add a Contact section with a list of links for how to contact us.

Content (HTML)

✏️ Add the following underneath the About section:

1<!-- Contact -->
2<div class="contact" id="contact">
3  <h2>Contact</h2>
4  <ul>
5    <li><a href="https://github.com/<exampleuser>">GitHub</a></li>
6    <li><a href="mailto:example@email.com">Email</a></li>
7    <li><a href="https://twitter.com/<exampleuser>">Twitter</a></li>
8  </ul>
9</div>

This creates a Contact section with an unordered list (<ul>). Each list item <li> is a link to different forms of contact.

🎨 Customise this list by adding/removing/editing the contents (remember to remove the <> when substituting in your information), but don't add any contact details that you are not comfortable with. Keep in mind that if you do not push this to GitHub, you are viewing and working on a local file and not a published internet website.

Styling (CSS)

We will style the Contact section similiarly to the About section. The main difference is that this time we have a list and we want to style the list and its items.

✏️ Add the following to the style.css document.

 1.contact h2,
 2ul,
 3li {
 4  text-align: left;
 5  padding-left: 25%;
 6  padding-top: 1%;
 7  padding-bottom: 1%;
 8}
 9
10.contact li {
11  padding-left: 1%;
12}
13
14.contact a {
15  border-bottom: dotted;
16  text-decoration: none;
17}

🎨 Learn what each of these is doing by customising the section, looking up what they mean or removing them entirely!

Group Check-In:

  • What do each of the CSS properties mean?
  • Each group member should present their website to the rest of the group

6. Follow-up

Here are some things you can do to continue your work:

  • Compile a list of questions: what didn't you understand? Share the questions in the team slack. Remember if you are unsure about something, then someone else probably is too. Sharing questions openly helps everyone learn, including the teachers and instructors.
  • Further customise the website by adding or removing sections, for example adding a section for photos or fun facts.
  • Commit your changes and push your code to GitHub.
  • Publish your website on GitHub using GitHub Pages

Next class preparation & Homework

  • Recommended: go through the tutorial again on your own and create a new website. Commit and push these changes to a repository. If you run into any problems, please reach out to the teachers on Slack, and free to send the link to the repository for your website if you would like!
Basics of JavaScript