Browse Library

Creating a Responsive Web Design

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

Instructed by Chris Converse

5 days left at this price!
  • Single Course access $25
    Buy
    Buy
    $25
    It Includes:
    Get access to this course only.
    Access to all marketplace courses
    Lifetime Course Access
    Play & Pause Videos
    High Quality Recorded Lectures
    Learn Online from Mobile/PC/Tablet
    Download Course for Offline Viewing
    Inlcudes Real Projects
    Free Instructor Support
  • 1 Month Full Access$19/moLimited offer! (Access 3000+ courses)
    Buy
    Buy
    $19
    It Includes:
    Get Monthly Unlimited Access (1 user)
    Access to all marketplace courses
    Play & Pause Videos
    High Quality Recorded Lectures
    Learn Online from Mobile/PC/Tablet
    Download Course for Offline Viewing
    Inlcudes Real Projects
    Certificate of Completion
    Free Instructor Support
  • Monthly $15/Per user (min 5 users) ($14/user/mo)
    Buy
    Buy
    $15
    It Includes:
    All Personal plan features +
    Best for small teams or Business
    Unlimited access for team
    Admin Dashboard & Analytics
    Basic reporting
    User Management
    Custom Branding Options
  • Yearly $169/Per user (min 5 users) ($14/user/mo)
    Buy
    Buy
    $169
    It Includes:
    All Personal plan features +
    Best for small teams or Business
    Unlimited access for team
    Admin Dashboard & Analytics
    Basic reporting
    User Management
    Custom Branding Options
  • 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.
  • 1. How do i access the course after purchase?

    Once you purchase a course (Single course or Subscription), you will be able to access the courses instantly online by logging into your account. Use the user name & password that you created while signing up. Once logged in, you can go to the "My Courses" section to access your course.
  • 2. Are these video based online self-learning courses?

    Yes. All of the courses comes with online video based lectures created by certified instructors. Instructors have crafted these courses with a blend of high quality interactive videos, lectures, quizzes & real world projects to give you an indepth knowledge about the topic.
  • 3. Can i play & pause the course as per my convenience?

    Yes absolutely & thats one of the advantage of self-paced courses. You can anytime pause or resume the course & come back & forth from one lecture to another lecture, play the videos mulitple times & so on.
  • 4. How do i contact the instructor for any doubts or questions?

    Most of these courses have general questions & answers already covered within the course lectures. However, if you need any further help from the instructor, you can use the inbuilt Chat with Instructor option to send a message to an instructor & they will reply you within 24 hours. You can ask as many questions as you want.
  • 5. Do i need a pc to access the course or can i do it on mobile & tablet as well?

    Brilliant question? Isn't it? You can access the courses on any device like PC, Mobile, Tablet & even on a smart tv. For mobile & a tablet you can download the Learnfly android or an iOS app. If mobile app is not available in your country, you can access the course directly by visting our website, its fully mobile friendly.
  • 6. Do i get any certification after completing the course?

    Yes. Once you succesfully complete any course on Learnfly marketplace, you get a certiifcate of course completion emailed to you within 24 hours with your name & the Learnfly badge. You can definately brag about it & share it on your social media or with friends as one of your achievement. Click here to view the sample certificate Click Here
  • 7. For how long can i access my course after the purchase?

    If you buy a single course, that course is accessible to you for a lifetime. If you go for a premium subcription, you can access all the courses on Learnfly marketplace till your subscription is Active.
  • 8. Whats the difference between Single Course Purchase & Go Premium option?

    With Single Course Purchase, you only get an access of one single course. Whereas, with premium monhtly or annual subscription, you can access all the existing or new courses on learnfly marketplace. You can decide what option suits you the best and accordingly you can make your purchase.
  • 9. Is there any free trial?

    Currently, we don't have any free trial but it may be available in near future.
  • 10. What is the refund policy?

    We would hate you to leave us. However, if you are not satisfied, you can ask for a full refund within 30 days & we will be happy to assist you further.

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...
front-end-web-design-using-wysiwyg-web-builder-like-a-pro

Front End Web Design Using WYSIWYG ...

By : Ishmeal Lamptey

Lecture 39

Free

front-end-web-developer-masterclass-html-css-javascript

Front-end Web developer MasterClass...

By : Laurence Svekis

Lecture 247

bootstrap-4-complete-course

Bootstrap 4 Complete Course

By : Laurence Svekis

Lecture 23

javascript-draw-on-html5-canvas-element

JavaScript Draw on HTML5 Canvas Ele...

By : Laurence Svekis

Lecture 13

Sign up and start learning
By signing up, you agree to our Terms of Use and Privacy Policy
Forget Password