» CS 268: Project 1 – Handcrafted Site

CS 268: Project 1 – Handcrafted Site

February 13, 2020 by Chris Johnson. Filed under specifications, spring-2020, 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 site must include some sort of header.
Your site must contain at least five separate pages, each having a meaningful purpose.
Your site must include some sort of navigation links.
Your site must support distinct layouts for large and small screens. For instance, multicolumn layouts on large screens should be reduced to single column layouts on small screens. You are encouraged to implement separate layouts using CSS media queries.
Your site must maintain a coherent style across its pages. Global style rules must be placed in a shared stylesheet. Individual pages’ style rules must be placed in a 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 HTML validator and CSS validator.
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 should be entirely lowercase and contain only alphanumeric characters.
Your site must be served out of port 8443.
Your site must be accessed only through HTTPS. You are encouraged to use Let’s Encrypt to obtain a free certificate.
Your content should be neatly aligned. The axes should be clearly visible.
Your site must use at least two different font faces. Headings are often rendered in a sans-serif font, and 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. Clicking on external links must open a new tab or window rather than replace your page.
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.

Report

On https://YOUR-IP-ADDRESS:8443/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.