Skip to main content

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.

While modern LLMs like Claude and ChatGPT excel at building single page websites, it is important to understand what exactly is being generated. HTML is manipulated extensively in more complex scripts and a basic understanding of its syntax is crucial for you to move forward in this course. Please limit the use of GenAI to the prescribed amount in this lab to ensure the best learning outcomes.

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 on Wednesday at 11:59 p.m. in the following week.

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.
git clone git@github.com:CU-CSCI3308-Fall2025/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​

Reference to CSS Documentation​

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! 🎉​

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

    b. Using bootstrap - an external CSS library as described earlier

  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.

responsive Interaction Design Foundation - IxDF. (2016, June 3). What is Responsive Design (RD)?. Interaction Design Foundation - IxDF. https://www.interaction-design.org/literature/topics/responsive-design

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 generative AI to generate a barebones HTML home page for your website. Make sure the prompt is specific. With GPT-4o, we suggest using this prompt: "Give me a barebones HTML structure for my personal website without adding any additional sections"

  3. Use the Bootstrap documentation as reference to do the following:

    • 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. Here's a website that is generally used to download any kind of icons: https://www.flaticon.com/. You can also import icons directly into your HTML using the fontawesome toolkit.

  4. Stylize the page using the approaches stated above.


HOME Page - Prompt Engineering

Notice that we are suggesting that you use Gen AI to get the basic HTML skeleton. When you ask AI for a solution, make sure you follow the three principles of AI usage:

  • Do not generate any code that you cannot understand. You will need to verify the output of the model at ALL times.
  • Generate small blocks of code or starter code that you will later modify. It is important not to make AI generate overly specific solutions.
  • Always cite AI usage. Include the prompt, the response, and the model used to generate the code.

home

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 generative AI to generate a barebones HTML home page for your website. Make sure the prompt is specific. With GPT-4o, we suggest using this prompt: "Give me a barebones HTML structure for my personal website without adding any additional sections"

  3. Use the Bootstrap documentation as reference to do the following:

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

  4. Stylize the page using the approaches stated above.


index

Projects Page​

The Projects HTML page in your personal website will contain an accordion with an image on the left and a description on the right. Bootstrap grids can be employed again in this case.

3.1. projects.html (To do):​

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

  2. Use generative AI to generate a barebones HTML home page for your website. Make sure the prompt is specific. With GPT-4o, we suggest using this prompt: "Give me a barebones HTML structure for my personal website without adding any additional sections"

  3. Use the Bootstrap documentation as reference to do the following:

    • 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. Make sure to use the bootstrap grid system to correctly format the positioning.

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

  4. Stylize the page using the approaches stated above.


index

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 generative AI to generate a barebones HTML home page for your website. Make sure the prompt is specific. With GPT-4o, we suggest using this prompt: "Give me a barebones HTML structure for my personal website without adding any additional sections"

  3. Use the Bootstrap documentation as reference to do the following:

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

  4. Stylize the page using the 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.

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

Resource: GitHub Pages Documentation

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

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 "Not attempted". This can be replaced by raising a regrade request once you successfully upload your work to Github.

Regrade Requests​

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

Grading specifications​

  • Not attempted

    • Student has not attempted the lab OR
    • Student has not attended the lab without prior approval

  • Below Expectations - If any of the following conditions are met

    • Part A
      • Quiz has not been attempted OR
      • Quiz has been attempted, but
        • The answer to the questions are partially correct
    • Part B
      • Student should have attended the duration of the lab OR
      • Student's work should have been reviewed by the TA and attendance should be marked on Canvas OR
      • Student has not uploaded their work to the submission folder
      • HTML code is present in the repository but does not correctly render a page
      • Only some of the expected components are on the page (errors in navbar, image not displaying, footer icons not linked or displayed)
      • Student has not used Bootstrap to make the page responsive
      • Student has not used Bootstrap classes to style UI components
    • Part C
      • Resume page does not render correctly
      • One or more of the required components is missing

  • Meets Expectations - if all of the specified conditions are met

    • Part A
      • Quiz has been completed
      • Students have been able to demonstrate their understanding by answering all the questions on the quiz correctly
    • Part B
      • Student should have attended the duration of the lab
      • Student's work should have been reviewed by the TA and attendance should be marked on Canvas
      • Student has uploaded their work to the submission folder
      • All of the components are present and the website renders correctly
      • Student has used Bootstrap classes to design UI components
      • Student has correctly used relative paths for style sheets and images
      • All pages have correctly used Bootstrap to make them responsive
    • Part C
      • Resume renders correctly
      • Student has used an appopriate tabular syntax to build the resume

  • Exceeds Expectations

    • Meets Expectation AND
    • Completed both extra credit requirements - hosting of website on GitHub Pages + downloadable resume
    • Implemented webpages with creative styling