Lab 3: GUI development

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

git clone git@github.com:CU-CSCI3308-Spring2025/lab-3-gui-development-<YOUR_USER_NAME>.git

Using a Personal Access Token (PAT)

git clone https://github.com/CU-CSCI3308-Spring2025/lab-3-gui-development-<YOUR_USER_NAME>.git

Navigate to the repository on your system.

cd lab-3-gui-development-<YOUR_USER_NAME>

Website Overview & Directory Structure

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.

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 submission folder.
• Create the views folder within submission which should contain all the HTML pages you create for the personal website.
• Create the resources folder (also within submission) 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.

|--submission
  |--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>

References to HTML Documentation

• MDN Web Docs
• W3Schools
• devdocs

Reference to CSS Documentation

• MDN Web Docs
• W3Schools

Let's build our website! 🎉

We will be building a minimum of 4 pages for this website. You may include more pages as you see fit. The approach is to:

1. Build the website structure in HTML.

2. Add styles to enhance the appearance of the website by

   a. Writing our own CSS style rules in style.css, OR

   b. Using an external CSS framework. Some of the popular frameworks are listed in the resources below:

   • Browserstack
   • Freecodecamp

3. Make sure to follow consistent styling/themes across all the pages of the website.

4. The pages must be responsive as well. You can read about responsive design so you can make good design decisions.

Home Page

Your first HTML page will be the home page to your personal website that contains an image and a short description.

home.html:

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

2. Use a generative AI to generate a barebones HTML home page for your website. It should meet the following requirements

   • Create a Navigation Bar add links to the Home, Hobbies, and Projects pages.

   • 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.

   • Write a short description on the right of the image as shown.

   • Add a link to the Resume page below the description (this should take you to resume.html).

   • Add a footer with all social media links you would like to provide. Include at least one.

3. Stylize the page using one of two approaches stated above.

HOME Page

If you use bootstrap, here's one potential way your home page may look once you are done with this part.

Hobbies Page

Your Hobbies HTML page in your personal website would contains cards with an image and a short description, lined up horizontally.

hobbies.html:

1. Create an empty hobbies.html file in the directory .

2. Use a generative AI to generate a barebones HTML home page for your website. It should meet the following requirements

   • Create a Navigation Bar add links to the Home, Hobbies, and Projects pages.

   • 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.

   • 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.

   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. Include at least one.

3. Stylize the page using one of two approaches stated above.

HOBBIES Page

If you use bootstrap, here's one potential way your hobbies page may look once you are done with this part.

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.

3.1. projects.html (To do):

1. Create an empty projects.html file in the directory.

2. Use a generative AI to generate a barebones HTML home page for your website. It should meet the following requirements

   • Create a Navigation Bar add links to the Home, Hobbies, and Projects pages.

   • On the extreme right of the Navigation Bar add an icon, this can be an icon of your choice.

   • Add at least 3 projects with images and description. These can be presented in a style of your choice.

   • Add a footer with all social media links you would like to provide. Include at least one.

3. Stylize the page using one of two approaches stated above.

HOME Page

If you use the bootstrap carousel, here's one potential way your projects page may look once you are done with this part.

Part C - Take home section

Resume Page

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

2. Use a generative AI to generate a barebones HTML home page for your website. It should meet the following requirements

   • Create a Navigation Bar add links to the Home, Hobbies, and Projects pages.

   • On the extreme right of the Navigation Bar add an icon, this can be an icon of your choice.

   • Add your resume in your desired format. It could possbly be an HTML table or a series of divs.

   • Add a footer with all social media links you would like to provide. Include at least one.

3. Stylize the page using one of two approaches stated above.

Extra Credit

1. Hosting your website

1. Create a public repository of your own on GitHub and upload the website files you created for this lab.

Note: It is imperative that your repository is public. Otherwise github will require you to set up an enterprise account.

2. Go to the repository settings and enable GitHub Pages by selecting the main branch under the "Pages" section.

Resource: GitHub Pages Documentation

3. Share the live link in a file called personal_website_link.txt within the lab repository for extra credit.

2. Resume Download

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>

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 downloaded 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

1. Make sure you copy your files for submission into your local git directory for this lab, within a "submission" folder that you need to create.
2. Run the following commands at the root of your local git directory, i.e., outside of the "submission" folder.

git add .
git commit -m "add submission"
git push

3. Submit a link to the GitHub repository on Canvas.

Once you have run the commands given above, please navigate to your GitHub remote repository (on the browser) and check if all the files have been updated/uploaded. Once that is done, please submit a link to your repository on Canvas.

You will be graded on the files that were present before the deadline. If the files are missing/not updated by the deadline, 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. Please do not submit a regrade request for this.

Regrade Requests

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

Rubric

Criteria	Description	Points
Part A - Lab Quiz	Complete Lab Quiz on Canvas before your scheduled lab time	20
HTML Structure	The pages have been properly structured	20
Use of CSS	Efectively used CSS Style rules to enhance the appearance of the website	15
Creativity	Creative, intuitive, and accessible choices made when designing the website	10
Functionality	All sections are functional and complete	10
Responsiveness	All webpages are responsive	5
TA check-in	You showed your work to the TA.	20
Extra Credit	1. Website has been correctly hosted on GitHub pages 2. Resume file download has been implemented	15
	Total	100 + 15(EC)

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