Project 6 - Web Design & Development Inspiration
Due: Monday, October 27, 2014
Project Goals
- Watch videos about web design
- Create a web page on which you review these videos and discuss what you have learned
Step-by-Step
- From the list of videos below, choose three videos / sets of videos to watch over the next week. The videos range in length from 20 - 60 minutes. You must choose three from the list.
- Create a new HTML file in your project portfolio. Name it 06videos.html. Remember to link it to your project portfolio index.
- Link a stylesheet to your newly created videos page. You may use your styles.css that you have been using for your main project portfolio page, or create a new stylesheet specifically for this page.
- For each video / video set that you watch, create a section on your page (using appropriate, semantic markup -
<section>
,<article>
, or<div>
). In each section, the following content should be presented- Video Title
- Speaker (if appropriate)
- A link to the video
- Your thoughts about the video (must be at least 150 words for each video)
- Three things you learned while watching this video
Your project should utilize
- Appropriate, semantic markup
- Thoughtful use of fonts & color via external CSS (View Chapter 12 in your book)
- A CSS Reset (we've used normalize already in class)
- A subtle background image (like those at Subtle Patterns) (View Chapter 13 in your book)
- Margins & padding on elements via % or em values (not px values, with the exception of a container) (View Chapter 14 in your book)
- Your HTML and CSS must validate.
To validate your document, copy and paste your HTML code into the HTML validator. Do the same for your CSS code.
Validation helps you see errors in your code. Error messages should tell you the line of the error and will give you information about what the error is. Start with the first error. Once you have fixed an error, recopy and paste your code into the validator and re-validate. Sometimes fixing one error will clear others.
If you are stuck on an error and cannot figure it out, leave a comment in your code that explains this.
Unvalidated code without explaination will result in an automatic deduction of 10 points from your grade.
Delivery
When you have completed this project, commit it to your GitHub Project Portfolio repository. Don't forget to add a link to this new page from your index.html page!
You must submit code to your Project Portfolio by the start of class on Monday. We will have time at the beginning of class to submit our code. If you do not submit code by the start of class (and have not reached out to me regarding issues), you will receive an automatic deduction of 10 points from your grade.
List of Videos
- "How Designers Destroyed the World" (this may have some questionable language)
- "2013/4 Brand Frost"
- "The Spirit of the Web"
- "Designing with details"
- "Mobile First"
- "The Humble Border-Radius (CSS Day)"
- "Ten Commandments of Web Design"
- "10 things I didn't know about HTML"
- "Front End Legos: Better Design with Reusable HTML and CSS"