Responsive Personal Site Project

Overview

The Responsive Personal 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.

Due Date

Tuesday, February 28

Submitting the Responsive Portfolio

This page has more information on how to submit the project. 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 Class Recording on Getting Started	10%
Deploy The site is properly on the web – The files are stored in the GitHub Repository created through GitHub Classroom	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: Layout Adapts to Screen (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. – 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%