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).
What you'll learn
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).
Table of contents
- Importing a Google Font 4m
- Defining the Basic Text Styles 4m
- Style the Heading and Page Container 5m
- Style the Logo and Hero Item 7m
- Creating the Button Style 5m
- Setting up Three-column Row 6m
- Adding Graphics to the Main Section 5m
- Clearing Floats with CSS Pseudo-elements 4m
- Styling the Atmosphere section 3m
- Styling the How-To Section Aside Elements 5m
- Styling the How-To Section Blockquote Element 6m
- Adding Content with Pseudo-elements 6m
- Styling the Footer 3m
- Strategy for Printing 4m
- Linking a CSS File for Print 3m
- Setting up the Base Styles 5m
- Setting up the Header 5m
- Displaying URLs When Printing 6m
- Setting up the Main Section 5m
- Setting up the Atmosphere Section 3m
- Switching Our Image Tags with CSS 5m
- Styling the Footer 4m
- Setting Page Breaks with CSS 3m
About the author
Chris has 25 years of experience in graphic design, interactive and animated media, with a unique focus on both graphic 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. In addition to design and development, Chris is a featured speaker in over 200 industry-related events and conferences, including the Adobe MAX, NAB, How Design Live, and AIGA. For... more