Project 0: Building a Webpage

Due: Wednesday, September 16 at 11:59pm · Worth: 34 points

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.

Learning Objectives

Primary:

• Build and publish a webpage with HTML and CSS.
• Follow a programming tutorial and adapt its examples to your own page.

Secondary:

• Explain how page titles, descriptions, and links affect search results.
• Explain what a website can record about its visitors.

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. Keep the visitor and topic you chose in the labs. Expand the page into a small site that helps that visitor explore the topic.

Three Pages for Your Visitor

Choose a job for each page before copying the homepage. For a music guide, index.html could introduce the scene, albums.html compare three albums in a table, and listening.html suggest where to start. Use your own topic and filenames. Give every page its own title, description, image, and three short paragraphs with useful information. The rubric below records the exact required counts.

Copy the existing HTML skeleton into the two new files, then link all three pages to the same style.css. Add a navigation bar to each page using the navigation tutorial. Click every navigation link from every page before styling it. Relative links such as href="albums.html" keep the files connected both locally and on GitHub Pages.

A Consistent Design

Reuse the type, class, ID, hover, and responsive rules you practiced in the CSS lab. Group related content in styled <div> elements and mark a useful detail with a styled <span>. Give the table meaningful comparisons, then check the pages at a narrow window width. The same stylesheet should make the navigation and shared content look consistent across the site.

Descriptions and Visits

A page’s title and description help someone decide whether to visit it from a search result. Write a short <meta name="description" content="..."> for each page, using the linked rubric references when you need syntax. Add the required course and instructor links where they fit your site.

The rubric also asks for Google Analytics tracker markup on each page. A tracker is JavaScript that can send information about visits to an analytics service. Follow Google’s Analytics setup to create a property and web data stream for your published site. In the tag’s installation instructions, select Install manually, then copy the supplied script snippet into each page’s <head> using Google’s tag instructions. Use the snippet for your own property; you do not need to write JavaScript or add a separate Tag Manager workflow. Gradescope checks the tracker markup in the files. Whether visits arrive in the live dashboard is an ungraded browser check.

A Visit Through the Public Address

Commit and sync the site, then visit the GitHub Pages address you published in the CSS lab. Follow every navigation link and check the images and table. Use the checklist below to catch missing features, and keep the optional outreach and archive activities until after the site works.

Grading Rubric

Your webpage must satisfy each checkbox below. Gradescope checks each item separately and adds the points earned. An unmarked checkbox is worth 1 point; other weights are shown beside their requirements. All 34 points are awarded automatically from the submitted files. The graded checklist below uses local syntax and structure checks. Publishing, W3C validation, backlink outreach, archiving, visual polish, and checking analytics in a live browser are practice activities. Use local linked stylesheets and introductory selectors supported by cssselect2 for the graded styling rules. Put any external-only or advanced CSS experiments in additional rules; the required styling must be observable from local files. The HTML and CSS syntax checks use html5lib and tinycss2, not the full W3C validators. External URLs are checked as markup; their live availability and the meaning of titles, descriptions, and alt text are self-checks.

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:

  • Practice: have consistent formatting between pages

  • use the <link> tag to include the CSS file (2 points)

  • have a nonempty <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 a nonempty <meta name="description" content="..."> tag (2 points)

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

  • have a nonempty <h1> tag

  • contain at least 1 <img> tag with nonempty src and alt text (2 points); check the rendered image and description yourself

  • 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 Google Analytics tracker markup using the <script> tag; live tracking is a self-check

  • have working repository-local links and asset paths (3 points); check external links yourself

  • pass the local HTML parser without syntax errors (2 points); use the W3 HTML validator as additional practice

• 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 local CSS parser without malformed rules or declarations (1 point); use the W3 CSS validator as additional practice

• Practice for your domain:

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

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

Choose a topic and page layout that can include every graded requirement. For example, a comparison of three items gives your table useful content, and a shared navigation bar links the three pages.

Note: We did not cover the italicized steps in class. Use Google, an LLM, or the textbook to figure them out.

Practice Beyond the Grade

Publish the site, run both W3C validators, ask other authors to link to it, and try saving an Internet Archive copy. You can also explore analytics or share your work on Reddit. These live-service and popularity activities carry no graded points.

Submit

Commit your HTML, CSS, and local assets, then submit your repository and branch on Gradescope. You may keep submission.toml with evidence.site_url when using full URLs to your own site’s pages; the grader uses it to resolve local navigation. Archive, backlink, and screenshot evidence are not required.

Point Allocation

The automatic checks award: three HTML files (1), external CSS file (1), three images (1), index page (1), required follow-link markup (2), list (1), table (1), every page links a stylesheet (2), titles (1), styled navigation (2), meta descriptions (2), headings (1), image/alt markup on each page (2), paragraphs (1), styled divs (2), styled span (1), tracker markup (1), local links/assets (3), HTML syntax (2), anchor color (1), hover rule (1), class/ID selectors (1), responsive rule (2), and CSS syntax (1). Total: 34.