COMP126: Practical Web Design & Development for Everyone

COMP 126 Final Project

In our final project of the semester, we’ll experiment with the client-driven web development model.

In teams of 1-4 people (the project was designed as a team project, but if you strongly prefer, you may work alone), you will operate as a web design and development team hired to build a site for a client. I encourage you to find a "real" client for a "real" project among yourselves or in the community: an individual, group, club, company, whatever. The important thing is to have a way to define a client's needs, goals, and priorities for the design and build of the site, so why not offer your web development services to a group in need? (There's no requirement that your client adopt the site formally, but many past clients have been pleased enough with the final project that they've decided to do so.)

Final Project Site

Here are your requirements:

No project should have fewer than three pages or discrete, well-organized, useful content areas. What's a "discrete content area"? For our purposes, this means at least enough content to fill an average laptop's browser window--more is okay, less not so much. These content areas can be part of one or more scrollable pages (as an example, note the large content areas that appear one at a time as you scroll down the home page of https://www.unc.edu/), separated into separate html documents/pages, or a combination of the two. Note that these "content areas" are in addition to--not including--your header, footer, and navigation menu, since those things are about your site's overall usability scheme, not part of its actual content.
If you're working with a group, each team member must produce at least two unique content areas, to be arranged and documented in advance.
Your website or app must be mobile-first and fully responsive.
You must include a navigation menu through which users can access the pages or content areas within the project.
Your project's file structure must be set up and organized according to the best practices we've discussed in class.
Class and ID names must be semantic and appropriate.
All HTML and CSS must validate per W3C standards.
You must create your project's layout with CSS grid, flexbox, or a combination of the two. Do not download a template from the Internet and submit part or all of it with a few minor modifications. Do not ask ChatGPT or another generative AI tool to write you an entire website. If we discover or even strongly suspect that you've done either of these things, your project will be flagged for investigation by the Honor Court.
All text must be purposeful and original to either you or your client.
Images and media must come from the public domain, be Creative Commons or otherwise licensed for reuse and sharing, or you must give credit to the original author of the media item you plan to use via a caption.
There should be no broken links or missing images.
HTML5 structural-semantic elements should be used instead of generic divs when appropriate, but divs are fine to use, too.
The site follows accessibility guidelines and considers the needs of users with restrictions such as visual impairments or mobility restrictions, as well as anyone using assistive technologies to access the Internet: e.g., images include alt tags, all :hover pseudoclasses have corresponding :focus pseudoclasses, all contrast ratios pass at at least for the WCAG AA level to ensure readability (you can test this with tools like this one).
The site is deployed live on the Internet. We'll discuss this further in class.
The site meets the usability criteria on the UI Checklist we've used in class.

A Note on Borrowing

As you know, I do allow some amount of code borrowing in assignments for this class. I also recognize that some use of generative AI like ChatGPT is inevitable, and I'm not opposed to the use of it to solve problems. However, there is such thing as too much. There is a point at which it becomes clear that this isn't an original site that incorporates methods borrowed and inspired by others that are modified for your own purposes, but a cobbling together of large areas of code, even an entire website template, created by an advanced and skilled developer and/or generative AI and slightly modified to pass as a student project. The latter approach counts as plagiarism even if the original author of the code or template has offered it freely for use and reuse. Copyright violations and plagiarism are not the same thing! Don't do this, please.

I say more about this on the course Syllabus page on Canvas. Please review those guidelines carefully and let me know if you have any questions.

Rubric

Your final projects will be graded holistically, with consideration to both form and function. However, here are some general guidelines.

In an A-range project...

The project was clearly developed for a client (even if that client if you) for a clear purpose. It exhibits a unified perspective that is reflected in its content, styling, layout, branding, and functionality.
The website/webapp is well-organized in a layout created with CSS grid and/or flexbox properties.
The website/webapp is mobile first and fully responsive.
Everything functions as it should, with no broken links or paths.
Navigation is intuitive and easy to access.
The project adheres consistently to a coherent, well designed style guide throughout. If developed by a team, it should be impossible to tell where each team member's contributions begin and end.
All design elements including color, typography, and layout come together in a harmonious whole.
Color scheme, font/s, and styling were chosen according to the best practices we've discussed, are appropriate to their purposes, and promote usability.
The content requirements detailed in the project description have been met or exceeded.
Content is well-chosen and well-organized.
All text is original and purposeful; no lorem ipsum/filler. Photographs must be original, freely offered for reuse, or provided the appropriate photo credit.
All code was written and/or adapted expressly for this project. All "borrowed" code snippets are brief, customized, and fully integrated/made your own.
HTML element tags are used appropriately.
Class and ID naming is semantic and consistent.
Contrast ratios pass WCAG standards at at least the AA level.
Images and media are fully responsive as well: no issues with image distortion or loading time.
Alt tags are included for all images and media.
Both HTML and CSS validate without errors.
The site meets the usability criteria on the UI Checklist we've used in class.

In a B-range project...

The project was developed for a client (even if that client if you) for a clear purpose. It mostly exhibits a perspective that is reflected in its content, styling, layout, branding, and functionality, but it may be less cohesive than an A-range project.
The website/webapp is well-organized in a layout created with CSS grid and/or flexbox properties.
The website/webapp is mobile first and mostly to fully responsive.
Everything functions as it should, with no broken links or paths.
Navigation is intuitive and easy to access.
The project generally adheres to a style guide. However, there may be some inconsistencies.
Design elements like color, typography, and layout may be overly generic or disharmonious.
Color scheme, font/s, and styling are reasonable but may not have been as thoughtfully chosen, appropriate to purpose, and/or usable as in an A-level project.
The content requirements detailed in the project description have been met reasonably well.
Content is well-chosen and generally well-organized.
All text is original (not filler) or provided by the client. Photographs must be original, freely offered for reuse, or provided the appropriate photo credit.
All code was written and/or adapted expressly for this project. All "borrowed" code snippets are brief, customized, and fully integrated/made your own.
HTML element tags are mostly used appropriately.
Class and ID naming is mostly semantic and consistent.
Contrast ratios pass WCAG standards at at least the AA level.
Alt tags are included for all images and media.
Images and media are responsive as well: no or only minor image distortion or loading time problems.
Both HTML and CSS validate with only minor errors.
The site meets almost all the usability criteria on the UI Checklist we've used in class.

In a C-range project...

The project may not have been developed with a single client in mind, or its purpose may not be clear. Its purpose and perspective may be expressed unevenly and inconsistently.
There may be clearly identifiable content, layout, and stylistic inconsistencies between sections and/or pages.
The layout may not use CSS grid and/or flexbox properties or may not implement them properly.
The website/webapp may not be mobile-first and/or consistently responsive.
The website/webapp mostly functions as it should, but there may be broken links and other things that don't work.
Navigation may not make sense, function well, or be easy to find.
Design choices may be disharmonious or seem unrelated or counter to the purpose of the site/app.
The content requirements detailed in the project description may be unmet or only barely met. Content may be pretty thin and not appear to have taken much time or thought to develop.
Content may be generic, filler, poorly written, or contain many errors.
All text is original (not filler) or provided by the client. Photographs are original, freely offered for reuse, or provided the appropriate photo credit.
Although the overall code structure was assembled by the project's author/s, there may be a significant amount of clearly cut-and-pasted/only barely customized/adapted code.
HTML element tags may be used randomly and/or inappropriately.
Class and ID naming is non-semantic and/or random.
Contrast ratios may not pass WCAG standards at at least the AA level.
Alt tags may not be present for images and media.
HTML and CSS may not validate.
The site meets only some of the usability criteria on the UI Checklist we've used in class.

In a D- or lower-range project...

The project's purpose or client are not clear or are highly inconsistent.
The layout does not use CSS grid and/or flexbox properties in any functional way.
The website/webapp is not mobile-first and may not be responsive.
There may be broken links and other things that don't work.
There may not be a navigation scheme and/or identifiable content areas to peruse, just a single page with some content on it.
Design choices are disharmonious, random, or unrelated or counter to the purpose of the site/app. They do not reflect the best practices or theory discussed in class.
The content requirements detailed in the project description are unmet or barely met.
Content may be generic, filler, poorly written, randomly chosen, or contain many errors. Text may not be original.
The code is either clearly cobbled together from a bunch of sources and not properly integrated, or it's a slightly (or not at all) customized/adapted version of an existing template. (Depending on severity, this may result in both an F and an Honor Court case.)
HTML element tags are used randomly and/or inappropriately.
Class and ID naming is non-semantic and/or random.
Contrast ratios may not pass WCAG standards at at least the AA level.
Alt tags may not be present for images and media.
HTML and CSS may not validate or may have many many errors.
The site's design doesn't appear to have considered the usability criteria on the UI Checklist we've used in class.