Contents
Overview
The Responsive Site Project is taking the wireframes and other ideas from your Portfolio Brief and creating a responsive web site that will be housed on GitHub and shown through GitHub Pages.
Due Date
Thursday, October 14
We will have a class on Wednesday, 10/13 before that. The site will not be the entire focus of the class (we will also introduce Eleventy) but there will be some time for questions, during that class.
Submitting the Responsive Portfolio
This page has more information on how to submit the midterm and schedule your presentation time. View Submitting the Responsive Site post.
Responsive Site Scoring Rubric
SCORING RUBRIC
| Scored Areas | % of Overall Score |
| Organization Folder and file setup – all .html files in the main project folder (not a sub folder) – all .css files in a css folder – all .js files in a js folder – all images in an images folder See Getting Started Post | 10% |
| Deploy The site is properly on the web – The files are stored in a GitHub Repository – GitHub pages are used to show the files. | 10% |
| Content The content of the site is there as described in your Project Brief. | 10% |
| Responsive 1: Fluid Grid You have created a layout that uses fluid units (fr, %) to allow the grid elements to change width as the browser changes width. CSS Grid Post | 15% |
| Responsive 2: Flexible Media You have applied the appropriate CSS to allow your images and video to change size with their containing elements. Responsive Images and Video Post | 5% |
| Responsive 3: Media Queries You’ve used media queries (and other methods) to change the layout of your site based on the width of the browser being used to view the site (browser’s viewport). Media Queries Post | 15% |
| HTML Your HTML – Has the proper doctype, and meta tags. See my example Basic HTML page – Doesn’t have syntax errors – uses elements semantically; the appropriate element for the content inside of it (ie section, article, main, nav etc. and not just divs for everything). | 15% |
| CSS Your CSS – doesn’t have syntax errors – has meaningful class names | 10% |
| Visual Design The elements of your visual design match the target audience and look and feel described in your Portfolio Brief. I will focus mostly on layout, color, use of images and typography for this project. | 10% |
