Read the comments for the previous assignments.
Keep the same website structure. (Same two pages.)
Keep the same page layout structure.
For the navigation, keep 5–8 items that would make sense with your magazine.
Have actual content. (You may copy from somewhere or even use ChatGPT if you want.) No more filler text.
Find nice images. (Make sure to check the alt attributes.)
Add the colors from your color palette. (Yes, it is ok to change your mind, just make decisions consciously.)
Add your type families from Adobe Fonts to your website.
Design a (simple) logo. Or use the one you’re using in GRC 440. Make sure it’s an SVG file.
Penalties in the list of easy mistakes to avoid are 20 points now. Three or more mistakes is an automatic zero, with no further comments. There’s no reason not to avoid all of them, though.
Beyond your technical skills on the HTML and CSS files, you will be evaluated on your capacity to apply the design principles that we have discussed in class to your work, using the rubric below.
Were aesthetic decisions on the website guided by the appropriate language for the business it’s representing and its functionalities?
Does the placement of elements create a sense of unity and cohesion, contributing to the design’s overall aesthetic and perceived stability? Does the alignment of elements correctly lead the user through the page? Does the visual hierarchy represent the content hierarchy?
Tip: If you have a centered heading for left‑aligned text, you’ll get a 0 for this criterion.
Does the home page conveys its job as the initial point of the website? Does it promote additional interaction? Are the main information and functionalities on each page clearly visible to the user?
Is color being used effectively to direct users to attract attention, group elements, indicate meaning, and enhance aesthetics?
Are similar parts related? Are related parts similar? Are the variations consistently applied in all parts of the website?
Are images being used to complement the information on the website? If you have images of people, is the appropriate face-ism ratio being respected in all images?
Are related elements close together? Are close elements related? Are the amount of blank space on the pages appropriate for the business the website represents?
Is the text legible? Does the text have appropriate size, typeface, contrast, line-length, and spacing? Is the information broken into appropriate chunks, so it is easier to process and remember?
Tip: If you have a centered paragraph, you’ll get a 0 for this criterion.
Is the layout consistent with users’ expectations? Can users easily navigate through the pages of the website? Are the buttons easily understandable? Do the links follow a logical order? Are the buttons easily selectable, even if users are using their fingers on a touch screen rather than a mouse?
Are the possibilities of interaction limited to an appropriate number at each page? If there are too many options, are they broken into easily identifiable divisions in the page?
Other principles, such as Recognition over recall, Errors, Forgiveness, and especially Accessibility must be taken in consideration, but they are covered by other principles and/or by the HTML/CSS part of the evaluation.
If you’re adding more classes, try to reuse classes for consistency.
Don’t rewrite all the properties for an element on its declaration in the media query. Write only what changes in bigger sizes.
Make sure to use appropriate, semantic class names.
Use proper headings for headings, proper paragraph tags for each paragraph, appropriate list and list items tags for the lists, etc.
Make sure to use appropriate, semantic property values in your CSS.
Don’t forget to test in different screen sizes.
Make sure to include the <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag in your HTML to have your page rendering correctly on mobile phones.
Make sure to avoid the simple mistakes. Each mistake from the list of simple mistakes to avoid will be a 20‑point penalty. Three or more mistakes is an automatic zero, with no further comments. It’s easy to avoid them all, though.
Don’t change the hierarchy of your HTML based on how the pages render on the browser. “I don’t like the bullets” is not a good reason not to use lists or list items; you can style the bullets out in CSS. “I want the navigation to be bigger” is not a good reason to make them headings; again, just style it in CSS.
You don’t have to submit anything on Canvas.
Go to your grc339/digital-magazine/ folder in your public repository on GitHub. ➤
Upload your HTML files (index.html, mainstory.html) to your GitHub repository. ➤
Upload your CSS file.
Upload all your image files too. Don’t forget your logo.
Click on your name to check if it’s working.
Check Canvas for deadlines.