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 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.
To get a full sense of the scope of this course, watch the first chapter — it’s FREE.
Running Time: 3:47 (225 minutes)
Get an overview of what’s covered in this step-by-step course, including the final project, and technologies that will be covered.
See how we’ll be creating a web design that will provide an optimal reading experience across various devices, as well as paper.
For those new to HTMl and CSS, we’ll briefly talk about the anatomy of HTML elements and CSS rules.
This provides a list of software you’ll need, if you want to follow along with the course.
Learn about the project files, as well as the final project, that are provided with this course.
- Download the files in the next lecture -- Section 2, Lecture 1
Preparing the HTML Content and Structure
- Download the exercise files from this lecture
First we’ll gather files form the exercise files, then set up our main project folder.
We’ll explore the HTML structure we’ll need in order to create the desired layout.
These HTML5 elements allow us to structure the outter-most containers for our web layout.
Add a linked logo and promotional content into the header area.
Adding column containers and content into the main promotional section.
Adding an article, text and buttons to the Atmosphere section.
Adding images, text, and column containers to the How-To section
Creating a bullet list to be used as the navigation.
Add copyright text and hyperlinks to the bottom of the page.
Creating the Style and Layout with CSS
Learn to search and implement a Google font into your web page.
Creating CSS rules for headings, paragraphs and anchor links.
Adding an image to the background of the header element.
Transforming the anchor tag into a graphical logo link.
Style an anchor link into a button with a CSS animated rollover effect.
Learn to create columns using float properties.
Adding SVG graphics to the columns in the main section.
Use pseudo-elements to add an element with clear properties to clear floating child elements.
Adding color, style and graphics in order to style the Atmosphere section.
Add CSS rules to style images and text within the How-To section.
Add style and positioning properties to a pull quote.
Keep your HTML clean by adding design-related content with CSS.
Add styles for the links and content in the footer area.
Creating a Menu System with CSS
Move the navigation menu below the content on smaller screens.
Style the anchor links within the bullet list to resemble a menu.
Set the display property of nested bullet lists to create the sub menu effect.
Adding support for ARIA, for multi-input devices and operating systems.
Create triangles with CSS to indicate which menu items have sub menus.
Making Layout Adjustments for Large and Medium Screens
Making minot layout adjustments when the layout touches the browser’s edges.
Creating our first major layout adjustments for slightly smaller screens.
Creating layout adjustments for medium sized screens.
Making Adjustments for Small Screens
Relocating the navigation to follow to the content.
Using an alternate logo and header information.
Making layout adjustments to the promotional and feature areas.
Adjusting the images, text, and blockquote in the How-To section
Converting the menus into a single, indented list for small screens.
Making final layout adjustments tot he navigation and footer elements.
Making Adjustments for the Smallest Screens
Making content and layout adjustments to the logo and hero content
Making layout changes to the How-To section
Making additional adjustments to the footer content.
Making Layout and Content Adjustments for Print
Considering the possibilities for transforming the display of our HTML content for the printed page.
Using a separate CSS file specifically for printing
Creating the base styles for optimizing readability for print.
Combining pseudo-elements and layout adjustments to optimize printing of the header composition.
Using CSS pseudo-elements to display the url destination of anchor links.
Adjusting the layout and styles for the main promotional area.
Adjusting the layout and styles for the Atmosphere section.
Referencing alternate images with CSS when confronted with HTML image tags.
Making adjustments for printing the footer content.
Using CSS to help inform possible page breaks when printing multiple pages.
Where To Go From Here
Find more resources online that catalog and explain the full set of HTML elements and CSS properties available to you.