Creating a Responsive Web Design

This course was designed to teach you to create a web page that can adapt it's layout to fit various screen sizes across devices, as well as on paper when printed. It covers every aspect of converting a design into a fully functioning web page. Software required: Text Editor, Web Browser, Tablet or Phone (optional), Printer (optional).
Course info
Rating
(37)
Level
Beginner
Updated
Nov 9, 2015
Duration
3h 48m
Table of contents
Introduction
Preparing the HTML Content and Structure
Creating the Style and Layout with CSS
Creating a Menu System with CSS
Making Layout Adjustments for Large and Medium Screens
Making Adjustments for Small Screens
Making Adjustments for the Smallest Screens
Making Layout and Content Adjustments for Print
Where to Go from Here
Description
Course info
Rating
(37)
Level
Beginner
Updated
Nov 9, 2015
Duration
3h 48m
Description

This course was designed to teach you to create a web page that can adapt it's layout to fit on any screen sizes across devices, as well as on paper when printed. Web design requires the coordination of HTML, CSS, and graphics in order to construct a layout and design that can respond to the varying needs of your websites visitors. In this step-by-step course, Creating a Responsive Web Design, you'll learn every aspect of converting a design into a fully functioning web page. You'll create navigation menus, style typography, format and position graphics, create CSS animations, import free web fonts from Google, as well adjust your layout to fit a wide range of screens and devices. For those new to HTML, CSS or web graphics, you'll see a few modules explaining the core fundamentals of each, so you'll be able to work through the course without missing a beat. Software required: Text Editor, Web Browser, Tablet or Phone (optional), Printer (optional).

About the author
About the author

Chris has 25 years of experience in graphic design, interactive and animated media, with a unique focus on both design and web development. Chris possesses development skills across such languages as PHP, HTML, CSS, JavaScript, jQuery, and AngularJS, making his design execution optimal across various media.

Section Introduction Transcripts
Section Introduction Transcripts

Introduction
Hi, I'm Chris Converse, and welcome to Creating a Responsive Web Design. In this course we'll be creating a web design that will respond to various screen sizes. This means the layout will change based on the visitors' screen size, and on smaller screens we'll move our top navigation to the bottom of the screen, so that those users can focus on the content before seeing the navigation. Now as we build our project, we'll be covering many aspects of HTML and CSS, including how to link CSS selectors to HTML elements, giving you a solid foundation, which you can use to explore further techniques once you complete the course. We'll begin by creating an HTML file that will contain only the content and structure, then we'll create a series of CSS rules to style the content and construct various layouts based on your visitors' screen size. We'll also create a set of CSS rules that will rearrange and adapt our content for the printed page, allowing us to reduce the amount of ink needed to print the page, as well as help reduce the number of pages that would need to be printed. And in addition to style and layout, we'll also cover techniques such as creating animated transitions with CSS, as well as transforming a bullet list into a fully interactive menu system, complete with support for touch devices and multi-input operating systems and their browsers. And in cases where we need additional content such as graphics for QR codes or even text and design elements, we'll make use of CSS pseudo-elements. This technique provides a way to add additional information without adding code to our HTML file, keeping our content clean and focused so it's more easily searched and making it easier for us to change aspects of the design in the future. And finally, the exercise files for this course are available to all members, so we've got a lot of ground to cover, so download your files and let's start creating a responsive web design.

Where to Go from Here
So we've just completed our project by converting a web design into the final HTML and CSS necessary to view the page in a browser or print a page to paper. Now the skills you've learned in this course will certainly help you in creating new designs and layouts, as well as give you the insight and direction that you need to explore and research even more possibilities available to you with these technologies. And even though we've covered many aspects of HTML and CSS, we've only scratched the surface. I would encourage you to explore more HTML elements and CSS properties by reviewing the W3CSchools website. Here you can see a list of HTML elements and CSS properties that will introduce you to many more possible items that you can implement into your design. And now that you know how to combine HTML elements with CSS properties, these resources will become a great reference for you in the future and you can begin implementing some of these techniques in your project right away. And with that, that concludes Creating Creating a Responsive Web Design. And as always, I appreciate you watching my course.