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