3h 9m – Intermediate
This course demonstrates how to build a web site that automatically adapts its layout to various screen sizes, orientations, and resolutions. Ray Villalobos shows how designers and developers can create a single HTML document and customize its display for desktop browsers and mobile devices such as the iPhone, Android phones, and tablets. The course covers creating a basic HTML5 structure and using reset templates, and styling the site with CSS.
Topics include:
Setting up testing servers and emulators
Creating and formatting a site template
Using free Google fonts
Preparing graphics
Creating style sheets
Loading external pages with AJAX
Creating mobile tabs
Detecting mobile devices
Using JavaScript to deal with scrolling and orientation changes
Testing and debugging site code
Introduction – 3m 33s
Welcome – 53s
Using the exercise files – 2m 11s
Using the code snippets file – 29s
1. Getting Started – 27m 50s
Setting up a local server on a Mac – 3m 24s
Setting up a local server on a Windows computer – 5m 44s
Setting up the iPhone simulator – 2m 21s
Installing the Android emulator on a Mac – 3m 45s
Installing the Android emulator on a Windows computer – 5m 48s
Working with a remote server – 2m 26s
Testing on live devices – 1m 28s
Touring the final project – 2m 54s
2. Design Approaches for Multiple Screens – 8m 34s
Understanding design approaches – 3m 1s
Designing for mobile devices – 2m 22s
Working with adaptive design – 3m 11s
3. Creating and Formatting Site Templates – 13m 44s
Starting with an HTML5 reset template – 2m 39s
Customizing the HTML template – 4m 32s
Using the free Google web fonts – 2m 10s
Modifying the remaining template pieces – 2m 28s
Preparing graphics for a web site – 1m 55s
4. Creating Adaptive Sites – 13m 57s
Creating a page template – 3m 23s
Putting together a menu page – 5m 8s
Developing an “about us” page – 1m 14s
Displaying a Google map on a page – 4m 12s
5. Building Desktop Page Styles – 32m 54s
Creating style sheets – 3m 22s
Building body and header styles – 5m 37s
Crafting footer styles – 2m 24s
Assembling the menu items – 10m 21s
Styling the “about us” page – 3m 5s
Styling the map page – 1m 24s
Crafting utility items – 6m 41s
6. Building Interactivity for Desktop Screens – 25m 29s
Loading external pages with AJAX – 12m 40s
Displaying a high-resolution photo overlay – 12m 49s
7. Styling Pages for Handheld Screens – 23m 58s
Resetting and hiding elements – 4m 56s
Making footer-like buttons for a handheld device – 6m 14s
Modifying menu lists – 3m 33s
Creating mobile tabs – 5m 17s
Modifying other pages for mobile layout – 3m 58s
8. Building Interactivity for Mobile Screens Using JavaScript – 23m 43s
Making the tabs work – 4m 2s
Detecting the mobile device on the client – 6m 58s
Making fixed-position elements work properly on all mobile browsers – 8m 6s
Centering images – 2m 2s
Dealing with orientation changes – 2m 35s
9. Styling Pages for Tablets – 7m 3s
Redefining the menu CSS for tablets – 5m 22s
Changing the CSS to make other pages display properly on a tablet – 1m 41s
10. Troubleshooting – 6m 25s
Testing and debugging – 6m 25s
Conclusion – 2m 20s
Next steps – 2m 20s