Creating a Responsive Web Design

(0 review)
Creating a Responsive Web Design

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.

What are the requirements?

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

What am I going to get from this course?

  • 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

What 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)

Course Staff

Chris Converse

Chris Converse

Designer and Developer at Codify Design Studio

Chris has over 22 years experience in graphic design and interactive media, with a unique focus on both design and development. Chris possesses development skills across such languages as HTML, CSS, JavaScript (including jQuery and AngulatJS), and PHP, making his design execution optimal across various media. In addition to designing and teaching online, Chris speaks at number of industry-related conferences, including HOW Design, Adobe MAX, Adobe ADIM, AIGA, and the Creative Publishing Network.

Frequently Asked Questions

What web browser should I use?

The EnlightMe platform works best with current versions of Chrome, Firefox or Safari, or with Internet Explorer version 9 and above.

Course Features

  • Lectures 55
  • Quizzes 0
  • Duration 4 Hours/Week
  • Skill level
  • Language English
  • Students 763
  • Certificate No
  • Assessments Self
  • Section 1: Introduction

    • Lecture 1.1 Lecture 1:Introduction Locked 0m
    • Lecture 1.2 Lecture 2:About this course Locked 0m
    • Lecture 1.3 Lecture 3:Terms and technology we’ll be covering Locked 0m
    • Lecture 1.4 Lecture 4:What you’ll need to complete this course Locked 0m
    • Lecture 1.5 Lecture 5:About the exercise files Locked 0m
  • Section 2: Preparing the HTML Content and Structure

    • Lecture 2.1 Lecture 6:Setting up our project Locked 0m
    • Lecture 2.2 Lecture 7:The HTML strategy for our layout Locked 0m
    • Lecture 2.3 Lecture 8:Creating the main HTML containers Locked 0m
    • Lecture 2.4 Lecture 9:Adding content into the header Locked 0m
    • Lecture 2.5 Lecture 10:Add content to main section Locked 0m
    • Lecture 2.6 Lecture 11: Add content to atmosphere section Locked 0m
    • Lecture 2.7 Lecture 12:Add content to the How-To section Locked 0m
    • Lecture 2.8 Lecture 13:Adding the navigation Locked 0m
    • Lecture 2.9 Lecture 14:Adding the footer content Locked 0m
  • Section 3: Creating the Style and Layout with CSS

    • Lecture 3.1 Lecture 15:Importing a Google Font Locked 0m
    • Lecture 3.2 Lecture 16:Defining the basic text styles Locked 0m
    • Lecture 3.3 Lecture 17:Style the heading and page container Locked 0m
    • Lecture 3.4 Lecture 18:Style the logo and hero item Locked 0m
    • Lecture 3.5 Lecture 19:Creating the button style Locked 0m
    • Lecture 3.6 Lecture 20:Setting up three-column row Locked 0m
    • Lecture 3.7 Lecture 21:Adding graphics to the main section Locked 0m
    • Lecture 3.8 Lecture 22:Clearing floats with CSS pseudo-elements Locked 0m
    • Lecture 3.9 Lecture 23:Styling the Atmosphere section Locked 0m
    • Lecture 3.10 Lecture 24:Styling the How-To Section aside elements Locked 0m
    • Lecture 3.11 Lecture 25:Styling the How-To Section blockquote element Locked 0m
    • Lecture 3.12 Lecture 26:Adding content with pseudo-elements Locked 0m
    • Lecture 3.13 Lecture 27:Styling the Footer Locked 0m
  • Section 4: Creating a Menu System with CSS

    • Lecture 4.1 Lecture 28:Re-positioning the Nav Locked 0m
    • Lecture 4.2 Lecture 29:Styling the nav list-items and links Locked 0m
    • Lecture 4.3 Lecture 30:Showing and Hiding the nav sub menus Locked 0m
    • Lecture 4.4 Lecture 31:Device compatibility options for nav Locked 0m
    • Lecture 4.5 Lecture 32:Adding indication arrows Locked 0m
  • Section 5: Making Layout Adjustments for Large and Medium Screens

    • Lecture 5.1 Lecture 33:Making minor adjustments for larger screens Locked 0m
    • Lecture 5.2 Lecture 34:Making adjustments for large screens Locked 0m
    • Lecture 5.3 Lecture 35:Making adjustments for medium screens Locked 0m
  • Section 6: Making Adjustments for Small Screens

    • Lecture 6.1 Lecture 37:Adjusting to the logo and hero elements Locked 0m
    • Lecture 6.2 Lecture 37:Adjusting to the logo and hero elements Locked 0m
    • Lecture 6.3 Lecture 38:Rearranging the main and atmosphere sections Locked 0m
    • Lecture 6.4 Lecture 39:Rearranging the how-to section Locked 0m
    • Lecture 6.5 Lecture 40:Rearranging the navigation Locked 0m
    • Lecture 6.6 Lecture 41:Adjusting the spacing of the navigation and footer Locked 0m
  • Section 7: Making Adjustments for the Smallest Screens

    • Lecture 7.1 Lecture 42:Adjustments for the header and hero Locked 0m
    • Lecture 7.2 Lecture 43:Adjusting the How-To section Locked 0m
    • Lecture 7.3 Lecture 44:Adjusting the footer Locked 0m
  • Section 8: Making Layout and Content Adjustments for Print

    • Lecture 8.1 Lecture 45:Strategy for printing Locked 0m
    • Lecture 8.2 Lecture 46:Linking a CSS file for print Locked 0m
    • Lecture 8.3 Lecture 47:Setting up the base styles Locked 0m
    • Lecture 8.4 Lecture 48:Setting up the header Locked 0m
    • Lecture 8.5 Lecture 49:Displaying URLs when printing Locked 0m
    • Lecture 8.6 Lecture 50:Setting up the Main section Locked 0m
    • Lecture 8.7 Lecture 51:Setting up the Atmosphere section Locked 0m
    • Lecture 8.8 Lecture 52:Switching our image tags with CSS Locked 0m
    • Lecture 8.9 Lecture 53:Styling the footer Locked 0m
    • Lecture 8.10 Lecture 54:Setting page breaks with CSS Locked 0m
  • Section 9: Where To Go From Here

    • Lecture 9.1 Lecture 55:Where to go from here Locked 0m
Chris Converse
Chris Converse

Designer and Developer at Codify Design Studio

Chris has over 22 years experience in graphic design and interactive media, with a unique focus on both design and development. Chris possesses development skills across such languages as HTML, CSS, JavaScript (including jQuery and AngulatJS), and PHP, making his design execution optimal across various media. In addition to designing and teaching online, Chris speaks at number of industry-related conferences, including HOW Design, Adobe MAX, Adobe ADIM, AIGA, and the Creative Publishing Network.

Reviews

Average Rating

0
0 rating

Detailed Rating

5 stars
0
4 stars
0
3 stars
0
2 stars
0
1 stars
0