
Goal
- Using HTML5 and CSS3 design a responsive design web page for a portfolio splash page.
Standards
- To be added
Product
- Create your blog post named, Responsive Web Design with HTML5 and CSS3
- Include a link to your Hulk account and the responsive design web page
- 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
- Learn basics of HTML5 from W3schools.com
- Learn basics of CSS3 from W3schools.com
- Learn basics of Javascript from W3schools.com
- Find a tutorial to follow on YouTube like this one:
- Build a responsive web page
- 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!
- Watchand follow the whole video to create a basic responsive page with navigation switch from horizontal to vertical
- 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
- Watch the whole tutorial, but the times listed below will focus specifically topics:
- 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
How to Build a Responsive Website From Start to Finish by DevTips (23 Hours) – This is the serious tutorial!!!
- Files for the project at GitHub
- Series Introduction
- Discovery & Documentation – Part1
- Sketching, Wireframes & Design– Part2
- 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)