Goal

• Using HTML5 and CSS3 design a responsive design web page for a portfolio splash page.

Standards

• To be added

Product

1. Create your blog post named, Responsive Web Design with HTML5 and CSS3
2. Include a link to your Hulk account and the responsive design web page
3. Include a screenshot of some code from Dreamweaver with comments

The Why and How of Responsive Design

Research and Example

• Read about TED.com Redesign
• Read the TED.com Introduction

Steps

1. Learn basics of HTML5 from W3schools.com
2. Learn basics of CSS3 from W3schools.com
3. Learn basics of Javascript from W3schools.com
4. Find a tutorial to follow on YouTube like this one:
6. Build a responsive web page
7. Upload to Hulk

Tools

• Adobe Dreamweaver (Free for 30 day trial)
• Adobe Photoshop (Free for 30 day trial)
• Adobe Illustrator  (Free for 30 day trial)
• TextWrangler (Free)
• Notepad 0nline tool (Free)
• Notepad++ (Free)
• Inkscape (Free)
• W3schools.com (Free)

Resources

• Responsive Web Design for Beginners – How to get started in 3 steps
  • Download the files from the video tutorial
• Responsive Web Design: Navigation by phpacademy
  • Watchand follow the whole video to create a basic responsive page with navigation switch from horizontal to vertical
    • Includes using pre-built javascript, too
    • Very easy to follow!
• HTML5 and CSS3 navigation tutorial by 1stWebDesigner from 1stWebDesigner with downloadable sample code
  • Watch the whole tutorial, but the times listed below will focus specifically topics:
    • Watch from 9:30 to 10:30 for the HTML of the navigation bar
    • Watch from 25:00 to 35:00 for the CSS styling for the navigation bar
    • Watch media queries from 52:00 to 59:00 for the resizing of the navigation bar
    • Download the files and experiment
• Responsive design tutorial from Drew Ryan with downloadable sample code
  • Brolik.com for layout and code ideas
• Download pre-built Creative Commons licensed code from HTML5UP.net

• Files for the project at GitHub
• Series Introduction
• Discovery & Documentation – Part1
• Sketching, Wireframes & Design– Part2
  • Complete Photoshop build video 2x’s fast
• Getting Started With Jekyll, The Static Site Generator– Part 3-ish
  • DevTips Starter Kit – part 3-ish
• Coding the Header and Footer – part 4
• Profile Section – part 5
• GitHub Pull Requests & Refactoring – part 6
• More Pulls!! – part 7
• Some quick pulls – part 8
• The work section – part 9
• Animations! – part 10
• Work section interactions – part 11
• Ajax Content – part 12
• Grunt.js & Jekyll 2.2 Fix – part13
• Community Pull Requests – Part14
• Dylans Pull – part 15
• Testimonial Markup and Style – part 16
• Testimonial Javascript – part 17
• Responsive Clients – part 18
• Community Pulls – part 19
• Font icons & social contacts – part 20
• Contact Form – part 21
• Use FitText for responsive text – part 22
• Free hosting with GitHub! – part 23

Feedback Form

• ??? (PDF)