Responsive Blocks

A-4: Multi-Page Responsive Blocks Site

Due

  • Date: Please check our class in Canvas for due dates 
  • html and support files uploaded to the server

Requirements

  • Preparation: View or review the Responsive Web Design: an Introduction lecture presentation to understand what responsive design is.
  • Must Do Second: Do ALL OF the Making a Responsive Layout with Media Queries lesson to creating this assignment’s web pages.
  • Based on the demo video lessons, you will create a small website with five pages utilizing a variety of page configurations within the demo. When creating each layout, think of the type of content that you would ideally have in the desired sections.
  • The following content will be provided in class by the instructor:
  • Things the you will be required to ADD:
    • You will develop artwork, color schemes, and the web formatting of your own to style the website.
    • Header or background image artwork
    • Create a global navigation toolbar.
    • Company logo and copyright in the footer
    • Other footer info in the footer columns (interesting quotes, links, mock social media, etc. – your choice)
    • Correct title of the page
  • The following HTML tags must be present in each page and styled with css :
    • h1 : assign it a unique color, font, size, padding, margins and any other special styles
    • h2 : same as h1, but make sure it is distinct from other heading styles. It should have common visual sense.
    • p : same criteria, but distinct…
    • ol OR ul: ditto
    • body: color, margins, link colors
    • set specific <a> properties (no default link styles!!!)
    • header, section, article, and footer tags (EXCEPTION: You can leave a main footer off of the home page since it is a splash page if you want).
    • meta tag to scale 100% of device width (also allow pinch/zoom on mobile)
    • Select 2 different Google fonts that compliment one another and be sure to include their HTML code before the css stylesheet link.
  • The following CSS tasks need to be accomplished:
    • Be sure to properly nest your media queries.
    • Be certain to properly style all links so that they are not default blue/purple with underlines.
    • Section your CSS files with comments to remind yourself of what the properties and values do to the page.
    • All styling will be done with a single external css page. Do not embed any css in the html files.
    • Be sure to properly style your page using Google fonts. Do not use script or highly decorative fonts for large chunks of body text, as it is difficult to read. Also avoid using all caps in large blocks of text (heading levels ok).
  • All HTML will be done with an HTML5 doctype.
  • Properly title each page in the HEAD of the document
  • Make sure all <img> images have “alt” attributes (“alternate text”).
  • Do NOT use images to present blocks of copy text. You may use image replacement methods for headings, navigation buttons and the like, but not for extended copy.
  • Upload it to the server using SFTP (Secure File Transfer Protocol)

Video Explanation for Approaching Assignment

The following playlist includes two videos. The first walks you through the assignment and explanains all the content and how to approach using it, and the second video illustrates different approaches other students have taken (and what is good about different choices).

Upload


  • Upload to our class server making this the parallel directory path:
    Lastname_Firstname/assignment4/

    • What does that mean? Remember, if you are working inside of a folder on your computer called “assignment4/” then you would drop the entire folder into the server’s “Lastname_Firstname/” directory.
    • Here’s the path you are REQUIRED TO USE:
      YES!Lastname_Firstname/assignment4/
  • Please test it in a browser before submitting your work through Canvas. Go to the following address and navigate to the folder where you uploaded work.
    • If you are in the ONLINE class, go to:
      http://mat.miracosta.edu/MAT125_Cotnoir/studentwork_online
    • If you are in the onsite class, go to:
      http://mat.miracosta.edu/MAT125_Cotnoir/studentwork_onsite

Assignment Resources

Example Student Work

  • Example 1 : uses navigation as branding
  • Example 2 : great textural and color study. Uses quarters. Uses css to expand portfolio images (no javascript used)
  • Example 3 : good example of alternate way to brand both the site ID and page ID
  • Example 4 : example of someone who developed her own logo and corporate feel
  • Example 5 : Example of an unexpected color palette and texture base

Class Lecture Review

Textbook Reading Reference

Read pp.265-339 of required text, Learning Web Design (Robbins)

CSS3 Design Tools

Here are some good CSS3 resources to help you design quickly.

Understanding CSS Properties

CSS Properties Compilation
http://css-tricks.com

Free Web Fonts

http://www.google.com/webfonts

Background Image Patterns:

Free Stock Images (great for textures, etc.):

full resource list available on Free Media Resources page

Awesome Color Palette Tool

http://paletton.com/  ***This site will generate hexadecimal values for you for all color samples.

Digital Art, Design, and Communication Education