Responsive Web Design with HTML5 & CSS3
In a world of rapidly diversifying devices, the old ways – make a separate mobile site, design for fixed page sizes, a basic lack of, y’know, response – just don’t cut the mustard. Your exacting audience rightly require sites that simply work – on whatever device they choose. On the course you’ll discover some new HTML 5 tags, what they mean, how to use them and how to make them work for you now and in older browsers. CSS has taken huge steps forward with CSS3 – new selectors, media queries, gradients, rounded corners, multiple backgrounds, shadows – all waiting for your excited introduction. By the end of this one day course you’ll be coding responsive sites like you were born to it!
Who should attend?
People who’ve been using HTML and CSS but need to update there knowledge to include HTML5, CSS3 and Responsive Web Design techinques
About Web Standards, the W3c and WHATWG
- Where’s HTML 5 and CSS 3 Coming from?
- Where’s it going?
- Who’s in charge?
- What can I use, when and how?
- Testing responsive design
HTML 5 Semantics
- Main, Article, Sections Header, Footer, Nav and other new elements
- What about divs?
- Headings and HTML outliners
Dealing with Older Browsers
- HTML 5 shiv and Modernizr
- Reset and Normalize
- Internet Explorer’s conditional tags
CSS Media Queries
- What you can test for?
- How Media Queries work
- Backward compatibility with respond.js
Responsive Page Design
- What is Mobile First?
- Understanding relative units, margins and padding
- Working with single and multiple columns
- Flexible, resizable images – promise and compromise
- Using background images
- Setting the viewport and font resizing
CSS 3 Additions
- About CSS3’s development
- Understanding vendor prefixes
- Drop Shadows
- Rounded Corners
- Resizable and Multiple Backgrounds
- RGBA and transparency
- New CSS selectors