3.19 | on-ground | w5 + dev studio

Due Today @ end of class: Blog 3 – 2 Peer Comments / Begin P1 Development

For Today: Review  Finish Warmup 5 / Studio for P1

Project 1 Timeline: tr3.31Final Project Due Date

Final Project 1: Typographic Storytelling Due Date P1: Final Project 1 Due Date Entire site due. Upload published link to Project 1 through D2L. (2% off per 24 hours late).

P1 Development Resources: There is a lot here to help you develop. Some of these are new, but many are reposted. Please skim through these and make note of any pages you’d like to reference in your design.

P1 Points to Consider:

  • Remember to cite all content retrieved from another source. Use links AND sources @ bottom of each page.
  • Set up a unique title tag (name of page).
  • Did you optimize all of your images (appropriate file size, format and image quality)? You can now do this right within Webflow.
  • Style the hyperlinks on your pages. Get rid of the underline with a text-decoration: none; and try a border-bottom instead.
  • Make your headings stand out from your paragraphs. Also, consider making them a different color. Refine the typographic hierarchy.
  • Create clear moments of prominence (easy to scan)
  • User proper file naming (descriptive without spaces).
  • Images: When to insert images through an HTML image tag <img> or through a CSS background image? Rule-of-thumb: If your images displays content in any way, place it as an <img> in the content. If it is decorative or doesn’t make up the content, it can be a background image. Never include large blocks of text in any image. Also, break up multiple series of images into different images. By inserting images using the <img> tag, you can insert a descriptive ALT tag, to describe the content of your image.
  • Test all of your links and site responsiveness.
  • Remember to set up your alt text before exporting and uploading.

CSS Grid + Column Resources: 

Due Next Class: Progress on P1 Dev + Warmup 5