- Date: Please check our class in Canvas for due dates
- html and support files uploaded to the server
- 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 to our class server making this the parallel directory path:
- 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:
- If you are in the onsite class, go to:
- 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.
- If you are in the ONLINE class, go to:
Example Student Work
- Example 1 : uses navigation as branding
- 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
- Responsive Web Design: an Introduction
- Making a Responsive Layout with Media Queries lesson
- Assignment-4 student resources
Textbook Reading Reference
Read pp.265-339 of required text, Learning Web Design (Robbins)
- “Colors and Backgrounds” – CSS – Chapter 13
- “Thinking Inside the Box” – Chapter 14, explaining CSS box model
- Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?
- Mobile-First Responsive Web Design GREAT ARTICLE by Brad Frost
- Responsive Web Design: What It Is and How To Use It by Kayla Knight
- Mobile First Design: Why It’s Great and Why It Sucks by Joshua Johnson
- Mobile First? Not So Fast! by Laura Klein (optional: if you have time)
CSS3 Design Tools
Here are some good CSS3 resources to help you design quickly.
- CSS Reset: http://www.cssreset.com/
- http://html5css3box.com/rgba/ ***This one is awesome and links to a lot of other tools, too!
- Font Shorthand Order
- CSS3 Transitions
Understanding CSS Properties
Free Web Fonts
Background Image Patterns:
Free Stock Images (great for textures, etc.):
…(upon getting Google search results, use “Search Tools” button to then filter by “Size” to get only large images or ones with open “Usage Rights.”
Awesome Color Palette Tool
http://paletton.com/ ***This site will generate hexadecimal values for you for all color samples.