Creating a Responsive Web Design

Learn to create a web design that adapts to varying screen sizes and printi

Best Seller 4.5 ( 1 ratings) 1 students enrolled

Instructed by Chris Converse

  • HTML
  • Using HTML5 tags and syntax
  • CSS (with CSS3+ features)
  • Layout strategies for web pages
  • Working with varying screen sizes
  • Formatting content for both screen and paper (print)
  • Combining web graphics with CSS
  • Working with bitmap (PNG & JPG) and vector (SVG) based web graphics
  • Detecting screen size with CSS

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, 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:04 (184 minutes)

  • Positive Attitude : )
  • Modern Web Browser
  • Text Editor
  • Web-enabled Phone/Tablet (optional)
  • Printer (optional)
  • Graphic Designers
  • Web Desginers
  • Administrative Staff
  • Front-End Web Developers
View More...

Section 1 : Introduction

  • Lecture 1 :
  • Introduction to this course Preview
  • Get an overview of what’s covered in this step-by-step course, including the final project, and technologies that will be covered.
  • Lecture 2 :
  • About this course
  • See how we’ll be creating a web design that will provide an optimal reading experience across various devices, as well as paper.
  • Lecture 3 :
  • Terms and technology we'll be covering
  • For those new to HTMl and CSS, we’ll briefly talk about the anatomy of HTML elements and CSS rules.
  • Lecture 4 :
  • What you'll need to complete this course
  • This provides a list of software you’ll need, if you want to follow along with the course.
  • Lecture 5 :
  • About the exercise files
  • Learn about the project files, as well as the final project, that are provided with this course.

Section 2 : Preparing the HTML Content and Structure

  • Lecture 1 :
  • Setting up our project
  • Download the exercise files from this lecture. First we’ll gather files form the exercise files, then set up our main project folder.
  • Lecture 2 :
  • The HTML strategy for our layout
  • We’ll explore the HTML structure we’ll need in order to create the desired layout.
  • Lecture 3 :
  • Creating the main HTML containers
  • These HTML5 elements allow us to structure the outter-most containers for our web layout.
  • Lecture 4 :
  • Adding content into the header
  • Add a linked logo and promotional content into the header area.
  • Lecture 5 :
  • Add content to main section
  • Adding column containers and content into the main promotional section.
  • Lecture 6 :
  • Add content to atmosphere section
  • Adding an article, text and buttons to the Atmosphere section.
  • Lecture 7 :
  • Add content to the How-To section
  • Adding images, text, and column containers to the How-To section
  • Lecture 8 :
  • Adding the navigation
  • Creating a bullet list to be used as the navigation.
  • Lecture 9 :
  • Adding the footer content
  • Add copyright text and hyperlinks to the bottom of the page.

Section 3 : Creating the Style and Layout with CSS

  • Lecture 1 :
  • Importing a Google Font
  • Learn to search and implement a Google font into your web page.
  • Lecture 2 :
  • Defining the basic text styles
  • Creating CSS rules for headings, paragraphs and anchor links.
  • Lecture 3 :
  • Style the heading and page container
  • Adding an image to the background of the header element.
  • Lecture 4 :
  • Style the logo and hero item
  • Transforming the anchor tag into a graphical logo link.
  • Lecture 5 :
  • Creating the button style
  • Style an anchor link into a button with a CSS animated rollover effect.
  • Lecture 6 :
  • Setting up three-column row
  • Learn to create columns using float properties.
  • Lecture 7 :
  • Adding graphics to the main section
  • Adding SVG graphics to the columns in the main section.
  • Lecture 8 :
  • Clearing floats with CSS pseudo-elements
  • Use pseudo-elements to add an element with clear properties to clear floating child elements.
  • Lecture 9 :
  • Styling the Atmosphere section
  • Adding color, style and graphics in order to style the Atmosphere section.
  • Lecture 10 :
  • Styling the How-To Section aside elements
  • Add CSS rules to style images and text within the How-To section.
  • Lecture 11 :
  • Styling the How-To Section blockquote element
  • Add style and positioning properties to a pull quote.
  • Lecture 12 :
  • Adding content with pseudo-elements
  • Keep your HTML clean by adding design-related content with CSS.
  • Lecture 13 :
  • Styling the Footer
  • Add styles for the links and content in the footer area.

Section 4 : Creating a Menu System with CSS

  • Lecture 1 :
  • Re-positioning the Nav
  • Move the navigation menu below the content on smaller screens.
  • Lecture 2 :
  • Styling the nav list-items and links
  • Style the anchor links within the bullet list to resemble a menu.
  • Lecture 3 :
  • Showing and Hiding the nav sub menus
  • Set the display property of nested bullet lists to create the sub menu effect.
  • Lecture 4 :
  • Device compatibility options for nav
  • Adding support for ARIA, for multi-input devices and operating systems.
  • Lecture 5 :
  • Adding indication arrows
  • Create triangles with CSS to indicate which menu items have sub menus.

Section 5 : Making Layout Adjustments for Large and Medium Screens

  • Lecture 1 :
  • Making minor adjustments for larger screens
  • Making minot layout adjustments when the layout touches the browser’s edges.
  • Lecture 2 :
  • Making adjustments for large screens
  • Creating our first major layout adjustments for slightly smaller screens.
  • Lecture 3 :
  • Making adjustments for medium screens
  • Creating layout adjustments for medium sized screens.

Section 6 : Making Adjustments for Small Screens

  • Lecture 1 :
  • Moving the navigation for smaller screens
  • Relocating the navigation to follow to the content.
  • Lecture 2 :
  • Adjusting to the logo and hero elements
  • Using an alternate logo and header information.
  • Lecture 3 :
  • Rearranging the main and atmosphere sections
  • Making layout adjustments to the promotional and feature areas.
  • Lecture 4 :
  • Rearranging the how-to section
  • Adjusting the images, text, and blockquote in the How-To section
  • Lecture 5 :
  • Rearranging the navigation
  • Converting the menus into a single, indented list for small screens.
  • Lecture 6 :
  • Adjusting the spacing of the navigation and footer
  • Making final layout adjustments tot he navigation and footer elements.

Section 7 : Making Adjustments for the Smallest Screens

  • Lecture 1 :
  • Adjustments for the header and hero
  • Making content and layout adjustments to the logo and hero content
  • Lecture 2 :
  • Adjusting the How-To section
  • Making layout changes to the How-To section
  • Lecture 3 :
  • Adjusting the footer
  • Making additional adjustments to the footer content.

Section 8 : Making Layout and Content Adjustments for Print

  • Lecture 1 :
  • Strategy for printing
  • Considering the possibilities for transforming the display of our HTML content for the printed page.
  • Lecture 2 :
  • Linking a CSS file for print
  • Using a separate CSS file specifically for printing
  • Lecture 3 :
  • Setting up the base styles
  • Creating the base styles for optimizing readability for print.
  • Lecture 4 :
  • Setting up the header
  • Combining pseudo-elements and layout adjustments to optimize printing of the header composition.
  • Lecture 5 :
  • Displaying URLs when printing
  • Using CSS pseudo-elements to display the url destination of anchor links.
  • Lecture 6 :
  • Setting up the Main section
  • Adjusting the layout and styles for the main promotional area.
  • Lecture 7 :
  • Setting up the Atmosphere section
  • Adjusting the layout and styles for the Atmosphere section.
  • Lecture 8 :
  • Switching our image tags with CSS
  • Referencing alternate images with CSS when confronted with HTML image tags.
  • Lecture 9 :
  • Styling the footer
  • Making adjustments for printing the footer content
  • Lecture 10 :
  • Setting page breaks with CSS
  • Using CSS to help inform possible page breaks when printing multiple pages.

Section 9 : Where To Go From Here

  • Lecture 1 :
  • 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.

Chris Converse,

Chris has over 25 years experience in graphic and interactive design, with a unique focus on both design and development. Chris possesses development skills across such languages as PHP, HTML, CSS, JavaScript, jQuery and AngularJS, making his design execution optimal across various media. Chris is also a featured speaker at various industry-related conferences, including the Adobe MAX, NAB, How Design Live, AIGA, and CreativePro. Watch his step-by-step courses online at Lynda.com, LinkedIn Learning, Udemy.com, CreativeLive, Pluralsight.com, or on Amazon Video. Find more of Chris' events at codifydesign.com/chris/events.
View More...

Average Rating

4.5

Detail

5 Stars
0% Complete (success)
0%
4 Stars
100% Complete (success)
100%
3 Stars
0% Complete (success)
0%
2 Stars
0% Complete (success)
0%
1 Stars
0% Complete (success)
0%

Josep Pocalles

posted 2 months ago

Front End Web Design Using WYSIWYG ...

By : Ishmeal Lamptey

Lecture 39

Free

Bentley STAAD Pro - Analysis & Desi...

By : Nirav Patel

Lecture 24

$21

A Hands-on Introduction to ANSYS Wo...

By : Nirav Patel

Lecture 20

$21

Excel - Progress Charts

By : Osama Jaber

Lecture 11

$28

Need any help with the platform? Contact us at: support@learnfly.com