Albion College

CS 171

Introduction to Computer Science I & Lab

Fall 2025

Lab 1: Webpages using HTML and CSS and Homework

Overview

For this assignment you will create a home page for a simple website about yourself. Imagine you are applying for a job as a web designer and want to impress a potential employer. This assignment is a step along that journey.

Learning Outcomes

This assignment will focus on several web design fundamentals. After successful completion of this assignment, you will

Background

In this assignment you will be creating a home page for your website. As indicated above, this should look professional having a potential employer as your intended audience. The page's content, document structure, and visual presentation are all somewhat independent.

Begin by revisiting several of your favorite website home pages. Note what they have in common. What excites you? How do they engage you? How do they inform you? What do you like and dislike about the design? How do the colors, fonts, and images strengthen your viewing experience. I encourage you to view the source of each page to get a glimpse of the complexity of even simple designs.

Good design requires preparation. You will need to complete the following steps before doing any coding.

  1. Write a paragraph about yourself. Consider writing a paragraph that is a personal mission statement from the Math/CS 299 resume project.
  2. Condense this paragraph to a short tagline.
  3. Identify one image that represents you in some way.
  4. Develop a palette of colors (at least 5) to use on your website.
  5. Identify a main font to use on your website. Consider identifying one or two other fonts that are compatible.

Task

Create a folder for this course, such as ABC12Website. Open and save a copy of the basic web page using CSS from class basic.html in your course folder. Rename the file index.html, the default filename for the main html file in a folder. You will use this as the starting point for your website. The process will involve a cycle of editing, saving, refreshing, and viewing. Finally, validate your page and correct any indicated errors or warnings.

The page creation will consist of cycling through several steps: create/edit, save, view/refresh, and validate.

I encourage you to use the online editor Phoenix Code, which you will need to use Chrome, Edge, or Opera. Phoenix Code has nice integrated tools for code editing and live previewing for website design.

  1. Give the page a good title that includes your name.
  2. Include the paragraph about you in a p element.
  3. Change the page background color using css
  4. Change the default font using css
  5. Customize the h1 and h2 elements with css
  6. Include your title in an h1 tag
  7. Include your tagline in an h2 tag
  8. Include an image
  9. Provide several links to some of your favorite websites

View your site using multiple web browsers (chrome, firefox, safari, edge, etc). Fix and serious issues and note any oddities.

Validate your site using validator.w3.org. Use the file upload or direct input tab. Correct any errors and warnings.

Deliverables

  1. Create a Github account.
  2. Setup Github Pages.
  3. Follw Github's instructions.
  4. Commit your webpage.
  5. Push your webpage.
  6. Verify your webpage is viewable and looks as you intended.
  7. When you are done, send me an email indicating you have completed the assignment.

Homework Grading Rubric

(5 points) HTML usage: html, head, title, body, h1, h2, p, img, a
(5 points) CSS usage
(5 points) Content and links
(5 points) Overall design
20 total possible points

References