2015
Lynda
Chris Converse
3:47
English

Discover how to use responsive web design to make your site more readable and efficient—on any device. Chris Converse shares his own specialized techniques for combining HTML and CSS into a web layout that can adapt to different screen sizes and orientations. The course takes the site from start to finish, from setting up the HTML page and containers to styling established elements for small, medium, and large screens. Along the way, Chris shows how to reposition the nav bar for better viewing on mobile devices, create animated transitions, and turn bulleted lists into interactive menus with full touch support. Plus, learn how to use CSS pseudo-elements and adapt layouts for print to save ink and paper.

Introduction
Introduction to this course
About this course
Terms and technology we'll be covering
What you'll need to complete this course
About the exercise files
1. Preparing the HTML Content and Structure
Setting up our project
The strategy for our layout
Creating the main HTML containers
Adding content into the header
Adding content to the main section
Adding content to the atmosphere section
Adding content to the how-to section
Adding the navigation
Adding the footer content
2. Creating the Style and Layout with CSS
Importing a Google Font
Defining the basic text styles
Styling the heading and page container
Styling the logo and hero item
Creating the button style
Setting up a three-column row
Adding graphics to the main section
Clearing floats with pseudo-elements
Styling the atmosphere section
Styling the how-to section aside elements
Styling the how-to section blockquote element
Adding content with pseudo-elements
Styling the footer
3. Creating a Menu System with CSS
Repositioning the nav
Styling the nav list items and links
Showing and hiding the nav submenus
Device compatibility options for nav
Adding indication arrows
4. Making Layout Adjustments for Large and Medium Screens
Making minor adjustments for larger screens
Making adjustments for large screens
Making adjustments for medium screens
5. Making Adjustments for Small Screens
Moving the navigation for smaller screens
Adjusting to the logo and hero elements
Rearranging the main and atmosphere sections
Rearranging the how-to section
Rearranging the navigation
Adjusting the spacing of the navigation and footer
6. Making Adjustments for the Smallest Screens
Adjustments for the header and hero
Adjusting the how-to section
Adjusting the footer
7. Making Layout and Content Adjustments for Print
Strategy for printing
Linking a CSS file for print
Setting up the base styles
Setting up the header
Displaying URLS when printing
Main section
Atmosphere section
Switching our img tags with CSS
Styling the footer
Setting page breaks with CSS
Conclusion
What's next?

lynda.com/CSS-tutorials/Creating-Responsive-Web-Design/424046-2.html

Download File Size:680.19 MB

---