Discover how to Creating a Responsive Web Design, make your website more readable and efficient across various screen sizes and devices. Join author Chris Converse as he shares his own specialized techniques for creating a responsive site for beginners. The course takes the site from start-to-finish, from comping your ideas in Photoshop (Photoshop Web Design), to setting up the HTML page and containers, to styling established elements for small, medium, and large screens to Design a Responsive Website. ♫♫♫ Download Exercise Files ♫♫♫ https://www.dropbox.com/s/m6jxkbgiozznw1p/Responsive_Web_Design_Exercise%20Files.rar?dl=0 -------- subscirbe for more free tutorials for beginers: https://www.youtube.com/channel/UCquG2N6Yzz6xuv-TnYUQpmA?sub_confirmation=1 ------- In particular, Chris shows how to load images with CSS, reposition the nav bar for better viewing on mobile devices, and how to make the download time faster for small screens by providing multiple versions of your banner graphic and other images. Plus, learn how to Replace graphics with High-resolution versions for Retina Displays using CSS Media queries. This course WAS Created and Produced by Chris Converse. lynda.com is honored to host this training in our library. create websites tailored for gadgets of different sizes. Year : 2015 Producer : Lynda Author : Chris Converse 0. Introduction Previewing the final project About the exercise files Exploring the software you'll need to complete this course Beginning your project 1. For Those Using Dreamweaver What to expect with Design view in Dreamweaver Accessing code for HTML and CSS in Dreamweaver 2. Setting Up Your Project Planning your layout Adding the main HTML containers Adding the promo containers Adding links and the copyright Adding sample content into the HTML containers 3. Creating Web Graphics Creating and slicing multiple-sized banner images Exporting content and template artwork 4. Preparing the HTML File Linking CSS files for all screen sizes Linking CSS files based on screen size with media queries Enabling Internet Explorer 7 and 8 to understand HTML5 Setting the viewport scale 5. Creating CSS Rules Across All Screens Adding the background pattern and the page container color Styling the headings Styling the body text and the links Styling the footer 6. Preparing the HTML File Understanding compound rules Styling the promo links with a CSS sprite Styling the promo text Adding the promo images with CSS 7. Creating the Content and the Layout Containers Adding CSS rules for layout Styling the header on large screens Styling the article on large screens 8. Styling the Promos Styling the navigation links Styling the navigation for large screens Positioning the navigation for large screens Clearing the float for the promos 9. Working with CSS Rules Adding CSS rules with inline media queries 10. Styling for Medium Screens Styling the header for medium screens Styling the navigation for medium screens Styling the promos for medium screens 11. Styling for Small Screens Styling the header for small screens Styling the navigation for small screens Styling the navigation links for small screens Styling the promos for small screens Styling the footer for small screens 12. Supporting High-Definition (Retina) Screens Additional exercise files for this chapter Creating double-sized graphics for high-definition screens Replacing the promo graphics with CSS media queries Replacing the logo and banner graphics with CSS media queries 13. Creating Markup and Styles for Print Additional exercise files for this chapter Creating graphics optimized for printing Including additional content for printed pages Creating print-friendly CSS rules Revealing hyperlink URLs for a printed page Redefining the promo and footer styles Background images vs. image tags Image option one: Using background images Image option two: Adding image tags Adding CSS page breaks Conclusion Where to go from here

• published: 13 Apr 2015
• views: 152414