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.<\/p>\n\n\n\n
Thursday, October <\/strong>14<\/p>\n\n\n\n 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. <\/p>\n\n\n\n This page has more information on how to submit the midterm and schedule your presentation time. View Submitting the Responsive Site<\/a> post.<\/p>\n\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":"Submitting the Responsive Portfolio<\/h4>\n\n\n\n
Responsive Site Scoring Rubric<\/h2>\n\n\n\n
SCORING RUBRIC<\/h3>\n\n\n\n
Scored Areas<\/strong><\/td> % of Overall Score<\/strong><\/td><\/tr> Organization<\/strong>
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<\/a><\/td>10%<\/td><\/tr> Deploy<\/strong>
The site is properly on the web
– The files are stored in a GitHub Repository
– GitHub pages are used to show the files.<\/td>10%<\/td><\/tr> Content<\/strong>
The content of the site is there as described in your Project Brief.<\/td>10%<\/td><\/tr> Responsive 1: Fluid Grid<\/strong>
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<\/a><\/td>15%<\/td><\/tr> Responsive 2: Flexible Media<\/strong>
You have applied the appropriate CSS to allow your images and video to change size with their containing elements. Responsive Images and Video Post<\/a><\/td>5%<\/td><\/tr> Responsive 3: Media Queries<\/strong>
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<\/a><\/td>15%<\/td><\/tr> HTML<\/strong>
<\/strong>Your HTML
– Has the proper doctype, and meta tags. See my example Basic HTML page<\/a>
– 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).<\/td>15%<\/td><\/tr> CSS<\/strong>
Your CSS
– doesn’t have syntax errors
– has meaningful class names<\/td>10%<\/td><\/tr> Visual Design<\/strong>
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.<\/td>10%<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n