Library

Course: Creating a Responsive Web Design

Creating a Responsive Web Design

  • Life Time Access
  • Certificate on Completion
  • Access on Android and iOS App
About this Course

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 you will 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
Curriculum
Number of Lecture: 55
Total Duration: 03:47:56
Introduction
  • Introduction  

    Get an overview of what’s covered in this step-by-step course, including the final project, and technologies that will be covered.

  • 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.

  • 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.

  • 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.

  • About the exercise files  

    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
  • 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.

  • The HTML strategy for our layout  

    We’ll explore the HTML structure we’ll need in order to create the desired layout.

  • Creating the main HTML containers  

    These HTML5 elements allow us to structure the outter-most containers for our web layout.

  • Adding content into the header  

    Add a linked logo and promotional content into the header area.

  • Add content to main section  

    Adding column containers and content into the main promotional section.

  • Add content to atmosphere section  

    Adding an article, text and buttons to the Atmosphere section.

  • Add content to the How-To section  

    Adding images, text, and column containers to the How-To section.

  • Adding the navigation  

    Creating a bullet list to be used as the navigation.

  • Adding the footer content  

    Add copyright text and hyperlinks to the bottom of the page.

Creating the Style and Layout with CSS
  • Importing a Google Font  

    Learn to search and implement a Google font into your web page.

  • Defining the basic text styles  

    Creating CSS rules for headings, paragraphs and anchor links.

  • Style the heading and page container  

    Adding an image to the background of the header element.

  • Style the logo and hero item  

    Transforming the anchor tag into a graphical logo link.

  • Creating the button style  

    Style an anchor link into a button with a CSS animated rollover effect.

  • Setting up three-column row  

    Learn to create columns using float properties.

  • Adding graphics to the main section  

    Adding SVG graphics to the columns in the main section.

  • Clearing floats with CSS pseudo-elements  

    Use pseudo-elements to add an element with clear properties to clear floating child elements.

  • Styling the Atmosphere section  

    Adding color, style and graphics in order to style the Atmosphere section.

  • Styling the How-To Section aside elements  

    Add CSS rules to style images and text within the How-To section.

  • Styling the How-To Section blockquote element  

    Add style and positioning properties to a pull quote.

  • Adding content with pseudo-elements  

    Keep your HTML clean by adding design-related content with CSS.

  • Styling the Footer  

    Add styles for the links and content in the footer area.

Creating a Menu System with CSS
  • Re-positioning the Nav  

    Move the navigation menu below the content on smaller screens.

  • Styling the nav list-items and links  

    Style the anchor links within the bullet list to resemble a menu.

  • Showing and Hiding the nav sub menus  

    Set the display property of nested bullet lists to create the sub menu effect.

  • Device compatibility options for nav  

    Adding support for ARIA, for multi-input devices and operating systems.

  • Adding indication arrows  

    Create triangles with CSS to indicate which menu items have sub menus.

Making Layout Adjustments for Large and Medium Screens
  • Making minor adjustments for larger screens  

    Making minot layout adjustments when the layout touches the browser’s edges.

  • Making adjustments for large screens  

    Creating our first major layout adjustments for slightly smaller screens.

  • Making adjustments for medium screens  

    Creating layout adjustments for medium sized screens.

Making Adjustments for small screens
  • Moving the navigation for smaller screens  

    Relocating the navigation to follow to the content.

  • Adjusting to the logo and hero elements  

    Using an alternate logo and header information.

  • Rearranging the main and atmosphere sections  

    Making layout adjustments to the promotional and feature areas.

  • Rearranging the how-to section  

    Adjusting the images, text, and blockquote in the How-To section

  • Rearranging the navigation  

    Converting the menus into a single, indented list for small screens.

  • Adjusting the spacing of the navigation and footer  

    Making final layout adjustments tot he navigation and footer elements.

Making Adjustments for the Smallest Screens
  • Adjustments for the header and hero  

    Making content and layout adjustments to the logo and hero content.

  • Adjusting the How-To section  

    Making layout changes to the How-To section.

  • Adjusting the footer  

    Making additional adjustments to the footer content.

Making Layout and Content Adjustments for Print
  • Strategy for printing  

    Considering the possibilities for transforming the display of our HTML content for the printed page.

  • Linking a CSS file for print  

    Using a separate CSS file specifically for printing.

  • Setting up the base styles  

    Creating the base styles for optimizing readability for print.

  • Setting up the header  

    Combining pseudo-elements and layout adjustments to optimize printing of the header composition.

  • Displaying URLs when printing  

    Using CSS pseudo-elements to display the url destination of anchor links.

  • Setting up the Main section  

    Adjusting the layout and styles for the main promotional area.

  • Setting up the Atmosphere section  

    Adjusting the layout and styles for the Atmosphere section.

  • Switching our image tags with CSS  

    Referencing alternate images with CSS when confronted with HTML image tags.

  • Session 8: Styling the footer  

    Making adjustments for printing the footer content.

  • Setting page breaks with CSS  

    Using CSS to help inform possible page breaks when printing multiple pages.

Where To Go From Here
  • 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.

Reviews (0)