CS 347: Project 1 – Static Site – due September 30
In this first project, you will create a static website for a client using HTML and CSS. A static website is one whose content is baked into the HTML. This is in contrast to a dynamic website whose content is generated on the fly using JavaScript and queries to web services. You will create a dynamic website in project 3.
Your site must meet the following expectations:
- You will create a website with a focused theme and audience of your choosing. Your site might serve a student group, a relative who’s planning a wedding, a business, or an artist who needs a portfolio. The site must serve someone besides yourself. A large part of web design is thinking empathetically, and this requirement makes that explicit.
- 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 external stylesheet. Style rules not shared between pages must be placed in separate external stylesheets.
- Your site must include images, and their
altattributes 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 namedcss. If you include any JavaScript code, these files must be placed in a directory namedjs. - 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.
- The content should have adequate and consistent spacing. Text should never bleed against the edge of its containing box.
- 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. The form need not do anything at this point in your learning, but it must be present. Like all content, it must be neatly aligned.
- 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. Favor
kebab-casecase identifiers overcamelCase. - 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 be available via both
https://project1.YOUR-DOMAIN-NAMEandhttp://project1.YOUR-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.
- In
https://project1.YOUR-DOMAIN-NAME/report.html, write a brief report containing an itemized breakdown of how you believe you have met the expectations listed above.