Creating A Responsive Web Design

Creating A Responsive Web Design
 
DURATION
03:47:56

Description

This course was designed to teach you to create a web page that can adapt it’s layout to fit on any screen size, 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, we’ll cover every aspect of converting a design into a fully functioning web page. We’ll create navigation menus, style typography, format and position graphics, create CSS animations, import free web fonts from Google, as well adjust our layout to fit a wide range of screens and devices.

And for those new to HTML, CSS, or web graphics, we have a few lessons explaining the core fundamentals of each, so you’ll be able to work through the course without missing a beat.

Who is the target audience?

• Graphic Designers
• Web Designers
• UX Designers
• Front-End Web Developers
• Developers (looking to enhance their design sensitivities)
• Content Editors (responsible for HTML and CSS)

Basic knowledge

• Patience : )
• A text editor
• HTML5-enabled web browser
• Web-enabled phone or tablet (optional)
• Printer (optional)

What will you learn

• Strategize the HTML needed for a web design
• Create CSS rules to target specific HTML elements
• Work with web graphics (in HTML and CSS)
• Transform user experiences with CSS
• Adapt layouts for varying screen sizes
• Optimize a web page's printing capabilities

Course Curriculum

Introduction

• Introduction
• About this course
• Terms and technology we'll be covering
• What you'll need to complete this course
• About the exercise files

Preparing the HTML Content and Structure

• Setting up our Project
• The HTML strategy for our layout
• Creating the main HTML containers
• Adding content into the header
• Add content to main section
• Add content to atmosphere section
• Add content to the How-To section
• Adding the navigation
• Adding the footer content

Creating the Style and Layout with CSS

• Importing a Google Font
• Defining the basic text styles
• Style the heading and page container
• Style the logo and hero item
• Creating the button style
• Setting up three-column row
• Adding graphics to the main section
• Clearing floats with CSS 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

Creating a Menu System with CSS

• Re-positioning the Nav
• Styling the nav list-items and links
• Showing and Hiding the nav sub menus
• Device compatibility options for nav
• Adding indication arrows

Making Layout Adjustments for Large and Medium Screens

• Making minor adjustments for larger screens
• Making adjustments for large screens
• Making adjustments for medium screens

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

Making Adjustments for the Smallest Screens

• Adjustments for the header and hero
• Adjusting the How-To section
• Adjusting the footer

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
• Setting up the Main section
• Setting up the Atmosphere section
• Switching our image tags with CSS
• Session 8: Styling the footer
• Setting page breaks with CSS

Where To Go From Here

• Where to go from here