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:
  • logo graphic options (choose only one style)
  • minimum copy for each page (all copy required)
  • portfolio images for each mock project (required to accompany “current work” text)
  • team members’ mock photos (required accompanying  employee titles in “About Us.”)
  • DOWNLOAD ZIPPED FILES : Assignment-4 student resources
  • Alternative download for individual files: http://mat.miracosta.edu/MAT125_Cotnoir/instructor/Assignment-4-student-resources/
• 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
  • HINT: for additional help using an SFTP program to upload your work, please watch the demo using SFTP to log into the mat.miracosta.edu server.