Continuing your website from the last assignment, now you want to add another page to your website. It needs to be a photo gallery, as the one we worked on before.
It needs to be, of course, related to the focus of your publication.
Make a copy of your mainstory.html file and rename it to photogallery.html. Keep the head, the header, and the footer, but delete everything in the article and in the aside of the new file.
Create a new <main> element just after </header> and create a photo gallery in it, with at least 8 images.
On the homepage, add a link to the the photo gallery, with an image. (You may want to replace one of the stories.)
You may use grid and/or flex properties on your gallery.
Make a copy of your mainstory.html file and rename it to newsletter.html. Keep the head, the header, and the footer, but delete everything in the article and in the aside of the new file.
Create a new <main> element just after </header> and create a subscription form in it.
On the homepage, add a link to “subscribe to our newsletter”.
Style your website using one single CSS file. Just add the necessary new styles to the same CSS file you used before.
You want to use flex properties on your form.
A new web page and one photo gallery, with tentative final style and at least eight images.
A new web page with a form. You want to include at least three option of newsletters with checkboxes (not radio buttons). You want to ask for the reader’s name and email in two different fields. If the page is too blank, you should include an image.
Don’t forget to include the header with its logo and navigation.
When you’re done, use tools such as FreeFormatter, HTML Formatter, or Code Beautify to organize your HTML and CSS code.
Only one CSS file for all the pages. (Not one for each page.)
Check the list of easy mistakes to avoid from GRC 338.
Think of this submission as the first draft of your final submission.
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.
You don't need to submit anything to Canvas.
Go to your grc339/digital-magazine/ folder in your public repository on GitHub. ➤
Upload your HTML files (index.html and mainstory.html) to your GitHub repository as necessary. ➤
Upload your photogallery.html and newsletter.html as well.
Upload your CSS file.
Don’t forget to upload your images.
Make sure to click on your name to check if it’s working.
Check Canvas for deadlines.