Project 0: Building a Webpage

Your first project is to build a small website and publish it on the internet. Choose any safe-for-work topic. The rubric defines the required HTML and CSS features. Some requirements use material we did not cover in class, so follow the linked instructions and look up the unfamiliar details.

Due: Wednesday, September 16 at 11:59pm, 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 34/34, and you lose the stated number of points for each checkbox you do not complete. An unmarked checkbox is worth 1 point; the seven more demanding requirements marked below are worth 2 points each. Gradescope checks the first 25 requirements for 32 points from the files in your GitHub repository. The final two domain requirements are worth 1 point each and are reviewed by the instructor from the evidence in submission.toml, because the autograder deliberately does not depend on live third-party websites. The autograder checks that this evidence file is present and well formed.

• 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) (2 points)

    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 (2 points)

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

  • have an appropriate <meta name="description" content="..."> tag (2 points)

    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 (2 points)

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

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

  • NOT contain any broken links (2 points)

  • pass the W3 HTML Validator with no errors (2 points)

• 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 (2 points)

  • 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. Use Google, an LLM, or the textbook to figure them out.

Extra credit

“Look nice” and “good content” are too subjective for the required rubric. Complete either task below for 1 point of extra credit, so the maximum score is 35/34:

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

Black hat techniques are allowed for the extra credit.

Submission

Push the complete website to GitHub, then submit that repository and branch to the Project 0 programming assignment on Gradescope. Gradescope grades the exact commit you select; a later push does not change an existing submission, so resubmit after pushing a fix.

Add this submission.toml file at the root of your repository:

[evidence]
site_url = "https://example.com/"
archive_url = "https://web.archive.org/web/..."
backlink_urls = [
  "https://first-other-domain.example/page",
  "https://second-other-domain.example/page",
]

The autograder awards 32 points for the repository checks. The instructor verifies the live archive and backlinks and enters the remaining 2 points in Gradescope. You may resubmit as often as the course submission policy allows.

If you completed extra credit, attach the evidence requested by the Gradescope question.