» CS 347: Project 1 – Handcrafted Site

CS 347: Project 1 – Handcrafted Site – due October 15

September 8, 2020 by Chris Johnson. Filed under fall-2020, specifications, webdev.

In this first project, you will create a website for a client using raw HTML, CSS, and JavaScript. You will not use any helper libraries or frameworks. Instead you will gain facility with the foundational elements of web development.

Expectations

Your site must meet the following expectations:

You will create a website for a client of your choosing. Your client could be a family member, a business, a student group, a friend, an online community, and so on. The only restriction is that the client cannot be just you.
Your content must be original and not lifted from other websites. Third-party images are acceptable provided you adhere to their license.
Your site must contain at least five separate pages, each having a meaningful purpose. One of the files should be named index.html, which Apache loads by default.
Your site must include some sort of header.
Your site must include some sort of navigation links.
Your site must support distinct layouts for large and small screens using media queries. For instance, multicolumn layouts on large screens should be reduced to single column layouts on small screens.
Your site must maintain a coherent style across its pages. Repeated style rules must be placed in a shared stylesheet. Style rules not shared between pages must be placed in separate stylesheets.
Your site must include images, and their alt attributes must adequately describe the image content to users of screen readers, user with images disabled, and webcrawlers.
Each page must declare its favicon.
Your site’s non-HTML resources must be organized. Images must be placed in a directory named images. CSS files must be placed in a directory named css. JavaScript must be placed in a directory named js.
Your site must not be built using any libraries or frameworks. Do not use Bootstrap, jQuery, React, Angular, Vue, or any other third-party tools. You may, however, reimplement the ideas you see in these third-party tools.
Each page and stylesheet of your site must validate without any warnings or errors using the W3C’s Nu Validator.
The content should be neatly aligned. The axes of alignment should be clearly visible. Favor left- and right-alignment over centering—as centering does not produce a strong axis of alignment.
Your site must use at least two different font faces. Headings are often rendered in a sans-serif font, and paragraph copy in a serif font.
Your site must include at least one form (or informal collection of input elements). The form might submit data to a server or invoke some client-side JavaScript function that alters the page. The action is not specified.
Your site must include links to external sites.
Your source code must be readable, using conventional and consistent formatting and meaningful names for classes and IDs.
Your site must include at least one animation, powered either by CSS or JavaScript.
Your site must be stored in a Git repository that you have shared with your instructor. On GitHub, GitLab, and Bitbucket, share with the user twodee.
The names of your files must be entirely lowercase and contain only alphanumeric characters.
Your site must have its own domain name.
Your site must be served out over HTTPS on port 443. You are encouraged to use Let’s Encrypt to obtain a free certificate.
Users who access your site over HTTP on port 80 must be automatically redirected to port 443.
Your Git repository should show a steady flow of commits over the course of the project. Committing and pushing should happen steadily, after each work session, and not just right before the due date.

Report

In https://project1.YOUR-DOMAIN-NAME/report.html, write a brief report containing the following sections:

An itemized breakdown of how you believe you have met the expectations listed above.
A critique from your client, if possible. In this time of strained communication, this is encouraged but not required.