Simple Website Assignment
Due Friday, February 14
Submit your URL on Moodle by end-of-day Friday.
For this assignment, you will practice HTML, CSS, and web design skills by designing and developing a simple static website. The exact form and content for the site are up to you. Depending on what your primary goals are for this class, you may wish to focus your efforts more on building coding skills, emphasizing design and storytelling, or executing a more complex vision.
Your site must be deployed live on the web, and it must include:
- A site title and individual page titles
- A navigation menu with 2-3 links
- At least 3 distinct pages
- Several images (that you have the rights to use) with appropriate credits and alternative text
- Implementation of style, color, font, and layout choices
- Several different types of elements, such as: headers, paragraphs, lists, embedded content, buttons, sections, divs, footnotes, footers, block quotes, etc (see the Mozilla Developer Docs for a full list)
- An “About” page where you describe how you designed the site and what tools you used
- Responsive layout and content that follows accessibility best practices
- Text must be coherent and descriptive, with headers and sections as appropriate
Content options
To demo these skills, please choose an overall purpose for your site to guide your design choices and content selection. Here are a few examples of what this could be:
- A personal website showcasing your interests, your resume, creative or professional projects, or other work
- An original work of fiction or biography of a fictional character
- An educational or scholarly resource telling a historical narrative or teaching content
- A portfolio for this class, featuring content from your assignments and responses, and placeholder content for future assignments
- A site showcasing selections from “Lady Susan” or another public-domain text
Advanced options and tools
These are not required, but if you are interested in building additional skills towards web development, feel free to pursue one of these options:
- Use Jekyll or another static-site builder tool (as long as your theme is your own)
- Use Bootstrap or another responsive layout tool
- Include Javascript to add interactivity
Resources
- W3 schools has great tutorials and cheatsheets for HTML, CSS, and more: W3 schools HTML
- FreeCodeCamp has a free, interactive course that starts with HTML and CSS Learn Responsive Web Design
- CSS Diner Game - game for practicing CSS selectors
- You can also help each other; use StackOverflow, and borrow from other sources (if you credit them)
Grading criteria
- Functionality: does the site follow the assignment guidelines? Does it include well-formed code and does it meet standards for accessibility?
- Design: is the site appealing and easy to navigate? How well does its construction and aesthetic meet its purpose and audience? Is it responsive?
- Execution: does the site show strong effort, either in complexity, advanced features, content originality, or creativity?
- Reflection: does the ‘about’ page clearly describe the aims and strategies used to create the site? Does it show an understanding of the process?