Due Date: Friday, 4/5/24
The goal of this project is for you to show your accumulated web design skills in a web site of your choice
This website should represent your best efforts to show your web design skills
Requirements
Clear design concept
- thought given to design
- design creates a sense of unity in the site
- shows a clear look and feel
Layout
- Now that you have learned the box model, do not go back to using tables to layout a web page. Instead, use your new knowledge of the box for layout. Keep building on that so you continue to learn.
Styling for Responsive Web Design
- columns collapse at smaller screen sizes. You can copy a template if you want: First Template or More Templates.
- Include a set of media queries with standard break points.(600, 768, 992 and 1200px)
- media queries are used to cause images to change size as screen changes size
- media queries are used to determine at least one other aspect of styling on small vs. large screens
Other CSS Styling
- All styling through the external style sheet
- Don't use a table for laying out the page.
- Show an understanding of the layout of webpages using CSS. This includes aspects of the box model, such as floating and efficient use of selectors
- style font
- style font size
- style background
- use colors well
Cite all work that you are using that is not yours. For example, you may quote information from another source, but you need to give a citation for that source to give the creator credit. This includes written and visual work. Visit and read the "Citing Sources" links. Here's an example of how I do citations on my own web pages.
Comment all code to briefly explain what each section of code does.
Rubric
| Category | minus 15 points | minus 10 points | minus 5 points | Full points |
|---|---|---|---|---|
| Does not use table for layout | Some knowledge of the box model is displayed. | A really good layout is made with float, width, etc. | ||
| Uses responsive layout | No responsive layout. | Responsive layout attempted, but doesn't work well. | Overall layout is made responsive using bootstrap classes, like col-sm-3 or whatever you choose. | |
| Media queries | Does not use media queries. | Uses media queries. | Has a set of media queries with standard break points. Includes at least some styling in each one. | |
| Responsiveness | Doesn't look so hot on a phone. | Some things work well on a phone. | Most things work well on a phone. | Everything looks good and behaves well on a phone (getting around on the page, font size, image size, menu clickability) |
| Images | No images at all | Images don't shrink | images shrink to fit when viewed on a phone | |
| Creativity | Student does not show basic creative effort (i.e. no addition of content, text/headers/etc) | Student shows minimal creativity from base requirement (i.e adds a couple things but not much) | Student shows some creativity from base requirement (i.e creates some content, text/headings/etc and some nice styling) | Student goes above and beyond base requirement and shows understanding of project (i.e. additional content, styling) |