Project 0: Building a Webpage

Your first project is to build a small website of your own and publish it to the real internet. You pick the topic: anything safe for work, and by the end you will have a live page with your name on it that anyone in the world can visit. Unlike the manager above, this project tells you exactly what “webbish” means: a rubric of concrete, checkable requirements.

This project is about more than practicing HTML and CSS. It is practice at what every working programmer does all day: follow technical instructions, and look up the parts you were never taught. A handful of the requirements below cover things we did not do in class, on purpose.

Due: Wednesday, September 16, see the schedule.

Learning objectives

Primary:

1. develop a basic working knowledge of HTML and CSS
2. be able to follow directions in introductory tutorials written for programmers

Secondary:

1. understand the basics of search engine optimization
2. understand the basics of web tracking

Instructions

Start from the page you built while working through the HTML and CSS readings, and expand it until it meets every requirement in the rubric below.

Grading rubric

Your webpage must satisfy each checkbox below. Your grade starts at 27/27, and you lose one point for each checkbox you do not complete. Complete all of them and you get 27/27.

• Your webpage must contain at least:

  • 3 HTML files

  • 1 external CSS file

  • 3 images

• At least one HTML file must:

  • be named index.html

  • contain a “follow” link to the course webpage (https://github.com/rtealwitter/introcs2026fall) and a “follow” link to the instructor’s personal webpage (https://www.rtealwitter.com)

    Note: See this tutorial for the difference between follow and nofollow links. I want that sweet, sweet pagerank…

  • contain either an unordered or ordered list (<ul> or <ol>) with at least 3 list items (<li>)

  • contain a table with at least 3 rows and 3 columns

• Every HTML file must:

  • have consistent formatting between pages

  • use the <link> tag to include the CSS file

  • have an appropriate <title> tag

  • have a CSS navigation bar with links to every other HTML file

    Note: See this tutorial for details. Either a vertical or horizontal navigation bar is fine.

  • have an appropriate <meta name="description" content="..."> tag

    Note: see this tutorial on meta descriptions and this one on other meta tags for details.

  • have an appropriate <h1> tag

  • contain at least 1 <img> tag with appropriate alt text; the image must correctly display

  • contain at least three paragraphs of text using <p> tags

  • contain at least 3 <div> tags styled using CSS

  • contain at least 1 <span> tag styled using CSS

  • contain a Google Analytics tracker using the <script> tag

  • NOT contain any broken links

  • pass the W3 HTML Validator with no errors

• The CSS file must:

  • set the color of <a> tags

  • use the :hover pseudo-class on at least one tag

  • define at least 2 class selectors and 1 id selector

  • use the @media rule to modify some attribute for small screen sizes

  • pass the W3 CSS Validator with no errors

• Your domain must:

  • have at least two dofollow backlinks from other domains (other students’ projects are okay)

  • be archived by the Internet Archive; see these instructions for submitting your webpage

Note: If you believe one of these checkboxes is not appropriate for your webpage, post an issue on the course repository and I may grant an exception.

Note: We did not cover the italicized steps in class, and that was intentional. You will have to use Google, an LLM, or the textbook to figure them out. No programmer understands all of HTML and CSS; everyone relies on looking things up while they work. The purpose of the italicized steps is to give you practice leaning on outside resources.

Extra credit

There is no requirement that your page “look nice” or have “good content,” because those are too subjective to grade. Instead, you can earn extra credit by making a page good enough that real people engage with it. Complete either task below for 1 point of extra credit, so the maximum score is 28/27:

• Post your site to Reddit and get at least 100 upvotes on a single submission (not cumulative across posts). For ideas, read this thread on getting upvotes and how Reddit’s ranking works.

• Get more than 1000 unique visitors to your webpage in a single 48-hour period, as shown by your Google Analytics tracker.

For the extra credit, feel free to get creative and use whatever black hat techniques you can think of.

Submission

Submit two URLs on Gradescope:

1. the URL to your webpage, and
2. the URL to the Internet Archive’s copy of your webpage.

If you completed extra credit, also submit a screenshot proving it.