by Joshua Miller | Publisher: Packt Publishing | Release Date: September 2013 | ISBN: 9781782165705

Easily design responsive websites that can adapt to any device regardless of screen size using HTML 5 and CSS3About This VideoLearn how to create fluid styles that flow to fill a browser of any sizeDiscover the best design and coding practices in HTML5 and CSS3 for flexible layoutsContains everything you need to know to create simple to complex responsive sites starting from a design mockup to implementing it as a finished productIn DetailThere's never been a greater range of screen sizes of tablets, smartphones, and even televisions and associated web view user experiences to consider. Web pages being built to be responsive provide the best possible version of their content to match the viewing devices of not just today's devices but tomorrow's too. This course walks you through crafting responsive websites that provide an optimal viewing experience on any device using HTML5 and CSS3.By following this structured video course, you will learn how to convert fix-width layouts to responsive layouts, contain a fluid layout with maximum or minimum properties, write syntax for a media query, select breakpoints, write HTML to embed all the saved elements into a page, and add CSS to your site ensuring that you have the skills to create your very own responsive website quickly and efficiently.Responsive Web Design - From Concept to Complete Site starts with an overview of the technology, the best practices to follow, and then moves on to a complete implementation of a responsive site using HTML5 and CSS3 media queries. After learning the essentials of responsive web design in the introductory section, you will walk through splitting a mockup into images and content areas, defining a fluid grid using those divisions, creating a percentage-based layout for the fluid grid with CSS, and then begin creating a full-functional responsive page. The latter section contains hands-on exercises that will walk you through all the HTML5 and CSS3 code required to build your sample page.This course ends with an overview on the future of web design, the features you can use today, and tips on how to remain current in the field.

1. Chapter 1: Getting Started with Responsive Web Design
   • Exploring Responsive Web Design (RWD) 00:01:58
   • Understanding the Use of RWD 00:02:11
   • Examples of Adaptive Layouts 00:01:58
   • Device Breakpoints 00:02:41
   • Pros/Cons of RWD 00:02:18
   • Course Overview 00:01:16
2. Chapter 2: Building a Fluid Layout
   • Fluid Width Layouts 00:02:04
   • Working with Percent Width Layouts 00:02:15
   • Examples of Fluid Layouts 00:01:23
3. Chapter 3: Media Queries
   • Media Queries 00:02:23
   • Media Query Code 00:01:41
   • Testing a Simple Media Query 00:02:03
   • Best Practices for Media Queries 00:02:50
   • Testing Media Queries on Actual Mobile Devices 00:01:59
4. Chapter 4: Building Our First Responsive Page
   • Using RWD Demo Files 00:02:15
   • Using Sample Files 00:01:57
5. Chapter 5: HTML5 Structure for Our Site
   • Overview of the HTML Structure for the Demo Site 00:01:30
   • CSS Resets and HTML5 00:04:31
   • HTML for Container, Header, and Navigation 00:04:52
   • HTML for a four Column Content Area 00:02:17
   • HTML for a two Column Footer 00:01:50
6. Chapter 6: CSS for Our Site
   • Using Demo CSS for our Site 00:02:42
   • Writing the CSS for the Navigation Bar and Logo 00:03:24
   • Building the CSS for Navigation and its Elements 00:03:15
   • Tweaking the Navigation Using the Inspect Element 00:02:38
   • Formatting the Header 00:02:09
   • Styling the Columns 00:02:50
   • Formatting Headings and Images in the Columns 00:03:16
   • Formatting the Footer 00:03:51
   • Tweaks and Fixes to the Body Layout 00:03:00
7. Chapter 7: Adding Media Queries to Our Fluid Layout
   • Planning for Media Queries 00:02:37
   • Tablet Media Query for the Body 00:02:32
   • Using Media Query for the Navigation Bar and Logo 00:03:19
   • Using Media Query for the Navigation Bar and Logo for Devices Smaller Than the Tablet 00:02:44
   • Using Media Query for Columns to Reorient Horizontally 00:01:56
   • More on Column Queries and Footer 00:02:31
   • Final Tweaks for Phone-Sized Devices 00:02:42
8. Chapter 8: Advanced Features/Considerations for the Future
   • Advanced Features/Considerations 00:02:04
   • Dealing with Font Size EMs 00:03:11
   • Using Percent-Based Fonts and Dealing with Problems with EMs and Percent 00:02:07
   • Demo of EM and Percent-Based Font Sizes 00:02:10
   • Solution to Issues with REMs 00:03:12
   • Future Considerations: VM, VH, VMAX, and VMIN 00:03:09
   • Current Solutions to Text Size Issues and Responsive Background Images 00:02:58
   • Using Background Images, Adaptive Images, and Bandwidth 00:03:13
   • Responsive Grids 00:04:56
   • CSS Pre-processors 00:04:17