Build An HTML5 Website With A Responsive Layout

By Zeng Zong  |  December 11, 2017  |  Website Designing  |  No Comments

In this video we will build a clean coded responsive mobile friendly HTML5 website for a fictional web design company. We will go over semantic HTML tags like header and footer as well as the basics of HTML and CSS. This is a great project for beginners.

CODE DOWNLOAD:
http://www.traversymedia.com/downloads/acme_website.zip

SUGGESTED VIDEO: HTML Crash Course For Absolute Beginners

BECOME A PATRON: Show support & get perks!
http://www.patreon.com/traversymedia

ONE TIME DONATIONS:
http://www.paypal.me/traversymedia

COURSES & MORE INFO:
http://www.traversymedia.com

FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia
Tweets by traversymedia
http://www.instagram.com/traversymedia

NEW DISCORD CHAT SERVER:
https://discord.gg/traversymedia
Video Rating: / 5

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 ♫♫♫
http://www.filedropper.com/responsivewebdesignexercisefiles

——–
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
Video Rating: / 5