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

Start

Continue in the lab-homepage repository you created for the HTML and CSS labs. If you need a fresh copy, use the lab-homepage template to create a repository under your account, then clone that copy. Expand the page 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 file-based requirements for 28 points from your GitHub repository. The instructor reviews the remaining 6 points: consistent formatting (1), W3 HTML validation (2), W3 CSS validation (1), backlinks (1), and the Internet Archive copy (1). Gradescope provides preliminary HTML and CSS syntax feedback, but those parsers cannot establish that a page passes the W3 validators. The autograder checks local links and assets; the instructor also checks external links, displayed images, appropriate descriptions and alt text, and the appearance of your navigation when reviewing your site. These checks apply to the existing rubric, without adding new requirements or points. The evidence URLs in submission.toml support the live-web review, and Gradescope checks that the file is present and well formed.

The site-wide requirements below are checked separately across all submitted HTML files. The two required links, the list, and the table may appear on different pages; they do not need to be together or in index.html. Requirements under Every HTML file still apply to each page.

• Across your website:

  • include at least 3 HTML files

  • include at least 1 external CSS file

  • include at least 3 images

  • include a file named index.html

  • include a “follow” link to the course website and a “follow” link to the instructor’s personal website (2 points)

    Note: See this tutorial for the difference between follow and nofollow links. I want that sweet, sweet pagerank… The previous course repository URL also remains accepted for credit.

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

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

• Every HTML file:

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

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

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

Extra credit is reviewed from evidence committed to your repository. Create an extra-credit/ folder and put one or more screenshots in it. A Reddit claim must show the post, its URL, and at least 100 upvotes; an analytics claim must show the site, the exact 48-hour date range, and more than 1000 unique visitors. Crop or redact account details and other personal information before committing screenshots, because the repository may be public. Do not submit this evidence separately on Gradescope.

Submit

Add submission.toml at the root of your repository with the live-web evidence:

[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",
]

If you completed extra credit, claim exactly one option and list every evidence file the instructor should review:

[extra_credit]
claim = "reddit"  # or "analytics"
evidence_files = [
  "extra-credit/reddit-post.png",
]

Omit the entire [extra_credit] table if you are not claiming the bonus.

Commit and sync the required files. On Gradescope, choose GitHub and submit your lab-homepage repository and the branch containing your commit.