Lab 3: HTML & CSS

Overview

Today, you will be building a personal website. We will be working on implementing the front-end using Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS). You will learn how to work with HTML & CSS and then back up your code to your git repository.

To receive credit for this lab, you MUST show your work to the TA during the lab, and push it to the github before the deadline. Please note that submissions will be due right before your respective lab sessions in the following week. For Example, If your lab is on this Friday 10 AM, the submission deadline will be next Friday 10 AM. There is a "NO LATE SUBMISSIONS" policy for labs.

Learning Objectives

LO1. Learn about building websites with HTML
L02. Learn about organizing and presenting content with HTML
L03. Learn about CSS and apply style rules from a pre-built library to beautify a webpage
L04. Apply skills learnt from LO3 by using a CSS library not taught in class/lab.

Part A

Pre-Lab Quiz

Complete Pre-Lab quiz on Canvas before your section's lab time.

Part B

Clone your GitHub repository

info

You need to accept the invite to the GitHub classroom assignment to get a repository.

Github Classroom Assignment

For the next two steps, make sure to edit the name of the repository after the copying the command into your terminal.

Using an SSH key
Using a Personal Access Token (PAT)

git clone git@github.com:CU-CSCI3308-Fall2024/lab-3-html-css-<YOUR_USER_NAME>.git

git clone https://github.com/CU-CSCI3308-Fall2024/lab-3-html-css-<YOUR_USER_NAME>.git

Navigate to the repository on your system.

cd lab-3-html-css-<YOUR_USER_NAME>

1. Website Overview & Directory Structure

1.A. Website Overview

Today: We will learn to use HTML and CSS to create a Personal Website with just the visual elements using HTML and CSS.
Future labs: We will apply this foundational knowledge to create websites with additional functionalities using, client-side and server-side Javascript, linking to databases, and external APIs.

1.B. Directory Structure

info

Please follow the directory structure guidelines to receive full credit for your submission.

Once you accept the GitHub Classroom assignment and clone your repository, in the root of that folder, create a Lab_Website folder.
Create the views folder within Lab_Website which should contain all the HTML pages you create for the personal website.
Create the resources folder (also within Lab_Website) which will contain img folder.
(OPTIONAL) To add custom CSS files, create a css folder under the resources folder and add your files in that folder. You can have as many CSS files as you want.

|--Lab_Website
  |--views
    |--hobbies.html
    |--home.html
    |--projects.html
    |--resume.html
  |--resources
    |--img
      |--favicon.ico
      |--img1.jpg
      |--img2.jpg
      |--img3.jpg
      |--img4.svg
    |--css
      |--style.css <optional>

2. Introduction to HTML, CSS & Bootstrap

TAs will walk you through how to open an HTML file and edit it using a text editor. You may use Sublime, Visual Studio Code, or any basic text editor. We recommend not to use the vim editor as it may be time consuming to make edits to the fairly large file. TAs will also show you how to inspect an HTML page in a web browser and go over the elements in the page.

2.A. What is HTML?

HTML is the standard markup language for creating Web pages. It describes the structure of a Web page.
HTML consists of a series of elements and the elements tell the browser how to display the content.

2.A.1. How to view your HTML files?

To open an HTML file in your web browser, you can:

Double click the file in your File Explorer / Finder (if your OS has your web browser as the default app to open it)

Enter “file://<ABSOLUTE path to your HTML file>” into your web browser address bar example: “file:///home/nikitamenon/file.html”

Drag the file into a new tab in your browser

index

HTML and CSS Resourses

Here are some great resourses to learn HTML and CSS in depth:

W3Schools - HTML and CSS

HTML tags

Heading Tag

<h1>"This is a heading!"</h1>

Output:

"This is a heading!"

Other Heading Tags

h1 - h6

The headings tags are semantic tags. Meaning they add structure to the html document that can help an assistive agent (screen reader) correctly parse the file and know what each piece of text is for. A lot of times it is used to quickly make text larger and bold, but THIS IS BAD and if you do this you're basically a terrible person. We're only slightly kidding... Using the headings tags for changing fonts can cause a lot of problems for screen readers which can cause some serious accessibility concerns. If you're working on a corporate site this could even be a potential lawsuit! So only use heading tags to actually mark up sections of your document (think like an outline for a research paper). For a deeper explanation, check out W3's outline for how heading tags should be used ℹ

.h1 -.h6 classes

The heading classes, provided by Bootstrap, allow you to have the font styling of a headings tag, without breaking the semantic rules of using one. This lets you have your page appear stylistically the way you want, but also follow the proper rules for only using heading tags for structuring the content of your webpage.

Image Tag

<img
  src="https://images.pexels.com/photos/1805164/pexels-photo-1805164.jpeg"
  alt="An image of a dog"
  width="220px"
/>

Output:

tip

If you specify only the width, the height will be chosen automatically to keep the aspect ratio intact.
Use image URL source to add images as shown above rather than downloading and referring image path from your folder.

Image Attribute Definitions

src="..."

The src attribute is a filepath (relative or absolute), that details where the web browser will find the image. Image not showing?

Image not showing?

If your image isn't loading, trying running through this quick "debugging" list to try and narrow down the problem:

Filename

Some operating systems are case sensitive about the file names being referenced (for example, Linux is case sensitive but depending on the version/settings of Windows you have, it may not be!). So make sure you filename is not only spelled correctly, but it also is the correct case.

Absolute Path

If you are using an absolute file path, make sure it includes the entire address (http:// or https://). Also, make sure it isn't a "local" absolute path that references your local hard drive (C://user/my_documents/folder/image.jpg). An absolute path that references YOUR hard drive can't be used on another computer!

Relative Path

Make sure your relative path is formatted correctly. Sometimes you may have added too many ../ and stepped too far away from your webpage's directory. Try following your relative path manually with your OS's file browser. Do you end in the correct directory?

alt="..."

The alt or alternative text serves two purposes. The first is if the image isn't able to load, the alt text will be loaded by the browser instead. The second purpose is for accessibility. A screen reader can read the alt text to a user so that they can understand what the image is about. For stylistic images (ex. a background image), the alt text can be a short description like "A sunny oceanview", but if content in the image is being referenced in your webpage be more detailed! Ex. "Make sure you eat mushrooms that look like the one on the left, because the ones one the right are poisonous!!" alt="A healthy mushroom, with all brown coloring. Left mushroom" alt="A poisonous mushroom, with all white coloring. Right mushroom."

height="..." & width="..."

The height & width attributes define how tall or wide an image is. If neither is set, then the browser will try to load the image at its full resolution (unless you have applied CSS to override the default image resolution). If only 1 value is set, then the browser will scale the other. For example if an image is 320 x 180 and you set the width="160px", the browser will reduce the height by half to 90px.

Referencing the owner

Always make sure to properly cite the owner of an image! Either add a caption detailing who owns the image, provide a link to the licensor's page, or reference the page you retrieved the image from. Wikipedia Link | Original Source/Owner

Hyperlink Tag

<a href="https://www.google.com">Link to Google </a>

Output:

Link to Google

What are href, relative and absolute paths?

href="..."

The href, hypertext reference, says where (locally or on the network) the anchor tag is pointing too. This can either be a relative or absolute path.

Relative Path

A relative path, defines how the operating system can retrieve a file from your webpage's current directory. To help use navigate around our directory structures, we can use a few handy shortcuts.
../ - Step up one directory
directory_name/ - if text is followed by a forward slash "/" then it will be treated as a directory to step into
file_name.ext - the final piece of text is generally the file you are trying to reference (make sure to include the file extension!)

Example: ../resources/css/signin.css - this is a relative path from your views folder to the css file used to stylize our login page.

Absolute Path

An absolute path, defines how the operating system can retrieve a file based on it's Drive location or network location. In general, this should only be used for referencing files that are on another computer across the network or the Internet. You should avoid using absolute paths with your local hard drive (ex. C:// or F://), because these paths will not work if you try to open the webpages in a different computer. For example, the TA's will be grading on a different computer. So an absolute path for your personal computer's C:// drive will break ... and so will your grade :(

Table Tag

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td rowspan="2">Cell 3</td>
    </tr>
    <tr>
      <td>Cell 2</td>
    </tr>
    <tr></tr>
  </tbody>
</table>

Output:

Header 1	Header 2
Cell 1	Cell 3
Cell 2	Cell 3

Table tags

<table>

The table tag defines the boundaries of where the tabular data begins & ends.

<tr> - table row

The <tr> tag, or table row tag, groups all of the cells together that make up a single row of the table

<th> - table header

The <th> tag, or table header tag, defines the header cells of a table. Typically this is in the first row of a table only. But it is sometimes used in the first column of a table (depending on how the information is being presented).

<td> - table data

The <td> tag, or table data tag, defines the data for an individual table cell

rowspan="#"

The rowspan attribute allows a cell to increase in "height" by expanding downwards and merging into the number of adjacent rows specified

colspan="#

The column span attribute allows a cell to increase in "width" by expanding to the right and merging the number of adjacent rows specified

Further Examples

Want more help with tables? Try checking out W3 schools examples: ℹ

Bootstrap Styling

Make sure and apply some Bootstrap styling to your tables for a more professional look & feel. ℹ

2.B. What is CSS?

Cascasding Style Sheets (CSS) are files used used to format the layout of a webpage.
The word cascading means that a style applied to a parent element will also apply to all children elements within the parent.
With CSS, you can control the color, font, size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!
A detailed CSS tutorial can be found here: CSS Tutorial.
Writing a CSS Style Rule:
- <property>: <value>;
- For eg: color: blue;

CSS can be added in two ways- externally & internally:

HTMLWithCSS

2.B.1. Internal CSS

CSS Style-rules can be written within your webpage one of two ways: Inline and Page-Level

Inline CSS

Inline CSS rules apply to the tag with which it is associated as can be seen in the example below. style attribute of the HTML tag is used to list the style rules for the tag. You may specify any number of style rules in this list.

You can practice adding CSS inline to your web page using this resource: Adding Inline CSS
HTMLWithCSS

Page-Level CSS

Page-level CSS rules allow you to implement rules for one or more tags collectively. This allows for easier maintenance for the page and in some cases fewer style rules to be written.

When writing CSS rules at the page level, you need to make use of the <style></style> in the <head> of the HTML. Within <style>, an identifier needs to be specified for the tag before you mention the style rules. Refer to lecture slides for the different types of tag identifiers you may use.

You can practice adding CSS at the page-level using this resource: Adding Page-Level CSS
HTMLWithCSS

2.B.2. External CSS

In cases where the website may include more than one web page, or where there may be customizations to multiple tags, it is highly advised that a separate stylesheet(s) be maintained for the page. This allows for uniformity across pages and much cheaper maintenance if updates need to made to the formats of the HTML tags.

In an external CSS file, there should be nothing but tag-identifiers and CSS rules. Do NOT include any HTML in an external style sheet.

You can practice adding CSS externally to your web page using this resource: Adding External CSS
HTMLWithCSS

Hierarchy of CSS Style rules

Remember that inline style rules have precedence over page-level style rules that in turn have precedence over the rules in an external style sheet. To override the precedence you can use !important.

For Eg:

h1{
    color: lavender; !important
}

2.C. What is Bootstrap?

Bootstrap is a free, open source framework to add style to your existing web pages.
Bootstrap has ready-to-use customizations for the different components you may want to add to your web page.
Bootstrap comes equipped with styles for common HTML elements like typography, code, tables, forms, and buttons.

2.C.1. How to add bootstrap to your HTML Page:

caution

For this class we will be using Bootstrap: Use Bootstrap 5.3

The official documentation for Bootstrap can be found here.

Incorporate Bootstrap into your HTML files in the following manner

bootstrap_demo.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap demo</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

2.C.2. Bootstrap components in a web page: BoostrapAnnotations

tip

Download Bootstrap code examples if you want to explore some more: https://getbootstrap.com/docs/5.3/examples/

Bootstrap Components that you will need to build your website:

Navigation Bar: NavBar Bootstrap
Container: - Content of your webpage : Use the Container class to include all the content of your webpage.
Cards: Use the Cards component that support a wide variety of content, including images, text, list groups, links, and more.
Footer: You can create a Footer for your webpages that usually includes links to social media platforms and additional information based on your website. Here's another resource on footers that may also be useful.
Carousel: Bootstrap 5.3 has really great carousel documentation that can be used in your website for the projects page.
Grid: Grid documentation which has series of rows, and columns to layout and align content that can be used for the resume page.

Let's build our website! 🎉

3. Personal Website - Home Page

Your first HTML page will be the home page to your personal website that contains an image and a short description.
To create the page similar to the one shown in the image below, you will have to follow the following:

3.1. home.html (To do):

Create an empty home.html file under the views folder as shown in the directory.

home.html
<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>

tip

You are required to use the Bootstrap library for style rules. Make sure to include it to your HTML page. You can reference bootstrap_demo.html

Create a Navigation Bar using bootstrap and add links to 3 pages - Home, Hobbies, Projects. Set the attribute id="navbar" for this element.
On the extreme right of the Navigation Bar add an icon, this can be an icon of your choice.
Add an image of yourself on the page. Set the attribute id="self-image" for this element.
Write a short description on the right of the image as shown. Set the attribute id="self-desc" for this element.
Add a link to the Resume page below the description (this should take you to resume.html).
Add a footer using bootstrap with all social media links you would like to provide. Set the attribute id="footer" for this element.

home

4. Personal Website - Hobbies Page

Your Hobbies HTML page in your personal website would contains cards with an image and a short description, lined up horizontally.
To create the page similar to the one shown in the image below, you will have to the following:

3.1. hobbies.html (To do):

Create an empty hobbies.html file in the directory .

hobbies.html
<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>

Create a Navigation Bar using bootstrap and add links to 3 pages - Home, Hobbies, Projects. Set the attribute id="navbar" for this element.
On the extreme right of the Navigation Bar add an icon, this can be an icon of your choice.
Create a div that will contain all the cards for your hobbies. Set the attribute id="hobbies" for this element.
Create a horizontal list of min 3 Cards, each representing one of your top interests. In each card, include an image that represents the interest, a title of the interest, and why you like the interest. Set the attribute id="hobby-card-1", id="hobby-card-2" .... id="hobby-card-n" for the cards that you create.
tip
Apply the concept of Grids to get the cards in a row.
Add a Footer with all social media links you would like to provide. Set the attribute id="footer" for this element.

index

5. Personal Website - Projects Page

The Projects HTML page in your personal website would contains carousel with an image and a card on the image with the title and description.
To create the page similar to the one shown in the image below, you will have to the following:

3.1. projects.html (To do):

Create an empty projects.html file in the directory.

projects.html
<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>

Create a Navigation Bar using bootstrap and add links to 3 pages - Home, Hobbies, Projects. Set the attribute id="navbar" for this element.
On the extreme right of the Navigation Bar add an icon, this can be an icon of your choice.
Once you have set up the basics in your html file and included Bootstrap, start by creating a new <div> object and making it a class of type carousel slide. Bootstrap has a good documentation on using Carousels. Set the attribute id="projects" for this element.
You will be adding your projects as carousel elements. Create three containers (<div> tags), one for each project. Each container should include an image for the project as the background and project name and description should be on a Bootstrap card, inside the carousel. Feel free to add links to your projects hosted on the cloud or to the github repositories that contain the codebase for the projects.
In this step, you will add controls for navigating through the carousels. Add anchor tags for navigating to the previous and next slide respectively. Set the attribute id="carousel-next" for the next indicator and id="carousel-prev" for the previous indicator.
Next, add indicators on the carousel element to denote, which project we are currently viewing. Clicking on the indicators should move to their respective carousels. You should add at least three indicators, one for each project. Set the attribute id="carousel-bottom-indicators" for this element.
Double check to make sure that the name and description of project, controls and indicators for navigation are visible over the image on the carousel elements. Set the attribute id="carousel-item-1", id="carousel-item-2" .... id="carousel-item-n" for the project slides that you create.
Add a Footer with all social media links you would like to provide. Set the attribute id="footer" for this element.

index

Part C - Take home section

1. Personal Website - Resume Page

In this section, you are required to create a Resume page with the help of any of the following libraries:

danger

Make sure to not only add the library but also incorporate and apply its classes. Neglecting to do this may lead to a reduction in credit for this section.

Using one of these libraries, create an HTML table, within a <div> tag with id="resume", to display your education, experience, achievements, and/or skills as shown in the image below.
Add a link to the Home page on the top right corner of this page.

index

info

OPTIONAL: Apart from creating a resume and displaying it on the webpage, if you would like users to download it, here is the code snippet that allows you to do so:

<a href="path/to/your/filename.pdf" target="_blank" download="filename.pdf">
  <button>Download PDF</button>
</a>

To elaborate on whats happening in the above code:

The <a> (anchor tag) creates a hyperlink. In this case, it links to the filename.pdf and includes the download attribute, which forces the file to be downloaded when clicked. If you want to override the filename that is to be downlaoded just replace filename.pdf in download attribute with any file name of your choice.
The target="_blank" attribute opens the file in a new tab in case the browser doesn't automatically trigger the download. This ensures the file is still accessible even if the download fails.
The <button> is a clickable block element that triggers the download when clicked. :::

Submission Guidelines

danger

Avoid using absolute paths like C:// or F:// in your work, as they won't function on other computers, such as the TA's, during grading. This can lead to broken links, images not loading correctly, and can negatively impact your grade.

Also, make sure that all the images used in your website are compressed.

Commit and upload your changes

Make sure you have all the files added in the directory structure specified.

Run the following commands inside your root git directory (in your lab-3-html-css-<username> directory).

git add .
git commit -m "Added HTML & CSS files"
git push

tip

Once you have run the commands given above, please navigate to your GitHub remote repository (on the browser) and check if the changes have been reflected.

You will be graded on the files that were present before the deadline. If the files are missing/not updated, you could receive a grade as low as 0. This will not be replaced as any new pushes to the repository after the deadline will be considered as a late submission and we do not accept late submissions.

Regrade Requests

Please use this link to raise a regrade request if you think you didn't receive a correct grade.

Rubric

	Description	Points
Part A - Lab Quiz	Complete Lab Quiz on Canvas before your scheduled lab time	20
Part B - Navbar & Footer	NavBar & Footer should be fully functional on all these HTML pages - home.html, hobbies.html, project.html	18
Part B - home.html	Home page is built using HTML & Bootstrap, should display an image, its description by its side, and contain a link to the Resume page below the description	7
Part B - hobbies.html	Hobbies page is built using HTML & Bootstrap, has 3 or more cards (with image & text, appearing in a row)	7
Part B - project.html	Project page is built using HTML & Bootstrap, has fully functional carousel with text, images, arrow and bottom indicators	12
Part C - resume.html	Resume Page is built using one of the mentioned CSS libraries and its classes are used to present the content in a tabular format, and a link back to the Home page must be present on the top right corner	16
TA check-in	You showed your work to the TA.	20

Please refer to the lab readme or individual sections for information on file names and directory structure.

Overview​

Learning Objectives​

Part A​

Pre-Lab Quiz​

Part B​

Clone your GitHub repository

Navigate to the repository on your system.

1. Website Overview & Directory Structure​

1.A. Website Overview​

1.B. Directory Structure​

2. Introduction to HTML, CSS & Bootstrap​

2.A. What is HTML?​

Here are some great resourses to learn HTML and CSS in depth:

HTML tags​

Heading Tag​

"This is a heading!"

h1 - h6

.h1 -.h6 classes

Image Tag​

src="..."

Filename

Absolute Path

Relative Path

alt="..."

height="..." & width="..."

Referencing the owner

Hyperlink Tag​

href="..."

Relative Path

Absolute Path

Table Tag​

<table>

<tr> - table row

<th> - table header

<td> - table data

rowspan="#"

colspan="#

Further Examples

Bootstrap Styling

2.B. What is CSS?​

2.B.1. Internal CSS​

Inline CSS​

Page-Level CSS​

2.B.2. External CSS​

2.C. What is Bootstrap?​

Let's build our website! 🎉​

3. Personal Website - Home Page​

3.1. home.html (To do):​

4. Personal Website - Hobbies Page​

3.1. hobbies.html (To do):​

5. Personal Website - Projects Page​

3.1. projects.html (To do):​

Part C - Take home section​

1. Personal Website - Resume Page​

Submission Guidelines​

Commit and upload your changes​

Regrade Requests​

Rubric​

Overview

Learning Objectives

Part A

Pre-Lab Quiz

Part B

1. Website Overview & Directory Structure

1.A. Website Overview

1.B. Directory Structure

2. Introduction to HTML, CSS & Bootstrap

2.A. What is HTML?

HTML tags

Heading Tag

Image Tag

Hyperlink Tag

Table Tag

2.B. What is CSS?

2.B.1. Internal CSS

Inline CSS

Page-Level CSS

2.B.2. External CSS

2.C. What is Bootstrap?

Let's build our website! 🎉

3. Personal Website - Home Page

3.1. home.html (To do):

4. Personal Website - Hobbies Page

3.1. hobbies.html (To do):

5. Personal Website - Projects Page

3.1. projects.html (To do):

Part C - Take home section

1. Personal Website - Resume Page

Submission Guidelines

Commit and upload your changes

Regrade Requests

Rubric