All in One Offer! | Access Unlimited Courses in any category starting at just $29. Offer Ends in:

Browse Library

  • Business Solutions
  • Become an Instructor
  • 0
    Shopping Cart

    Your Cart is empty. Keep shopping to find a course!

    Browse Courses
Get Unlimited Learning Access
1 days left at this price!
30-Day Money-Back Guarantee

This plan includes

  • Instant access to 11,000+ online courses
  • Play & Pause Course Videos
  • HD Video Recorded Lectures
  • Learn on Mobile/PC/Tablet
  • Quizzes and Real Projects
  • Lifetime Course Certificate
  • Instructor Chat Support
  • Cancel Plan Anytime
Subscribe to Learnfly’s top courses
Get this course, plus 11,000+ of our top-rated courses for one year with Go Annually Plan.
$348 $244 a year Save 30%
1 days left at this price!
30-Day Money-Back Guarantee

This plan includes

  • Instant access to 11,000+ online courses
  • Play & Pause Course Videos
  • HD Video Recorded Lectures
  • Learn on Mobile/PC/Tablet
  • Quizzes and Real Projects
  • Lifetime Course Certificate
  • Instructor Chat Support
  • Cancel Plan Anytime
  • 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 5 Lectures 00:05:57

    • 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 9 Lectures 00:28:11

    • 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 13 Lectures 01:04:13

    • 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 5 Lectures 00:28:05

    • 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 3 Lectures 00:16:08

    • 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 6 Lectures 00:27:47

    • 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 3 Lectures 00:12:13

    • 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 10 Lectures 00:41:10

    • 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 1 Lectures 00:00:56

    • 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.
  • How do i access the course after purchase?

    It's simple. When you sign up, you'll immediately have unlimited viewing of thousands of expert courses, paths to guide your learning, tools to measure your skills and hands-on resources like exercise files. There’s no limit on what you can learn and you can cancel at any time.
  • 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.
  • 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.
  • 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.
  • 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.
  • Do i get any certificate for the courses?

    Yes. Once you complete any course on our platform along with provided assessments by the instructor, you will be eligble to get certificate of course completion.
  • For how long can i access my course on the platform?

    You require an active subscription to access courses on our platform. If your subscription is active, you can access any course on our platform with no restrictions.
  • Is there any free trial?

    Currently, we do not offer any free trial.
  • Can i cancel anytime?

    Yes, you can cancel your subscription at any time. Your subscription will auto-renew until you cancel, but why would you want to?

3608 Course Views

1 Courses

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, LinkedIn Learning,, CreativeLive,, or on Amazon Video. Find more of Chris' events at
View More...
  • Unmatched Variety and Value!
    Learnfly's monthly subscription offers unlimited access to a vast range of courses. Affordable pricing, compared to competitors, makes it the ultimate choice for continuous learning.
    Jessica M.


  • Top-Notch Quality, Affordable Rates!
    High-quality courses with certified instructors make Learnfly stand out. The affordable pricing is a game-changer for those seeking premium education.
    Alex P.


  • Certified Excellence Every Time!
    Learnfly's courses, taught by certified instructors, ensure top-notch learning experiences. The course completion certificates add significant value to one's skill set.
    Sarah R.


  • Round-the-Clock Support!
    Learnfly goes the extra mile with 24/7 course support. Their dedication to helping students succeed is commendable.
    Ryan K.


  • Learn Anywhere, Anytime!
    Whether on mobile, PC, or tablet, Learnfly's platform offers flexibility. Learning on the go has never been easier.
    Emily S.


  • Job-Ready Skills!
    Learnfly's job-oriented courses equip learners with practical skills for the workplace. An investment in career growth!
    Jake M.


  • Budget-Friendly Brilliance!
    Learnfly's pricing is a steal for the quality and variety of courses offered. Quality education without breaking the bank.
    Olivia T.


  • Instructor Excellence Unleashed!
    Learn from the best with Learnfly's certified instructors. The platform ensures that knowledge is imparted by industry experts.
    Daniel L.


  • Achievement Unlocked!
    Learnfly not only offers courses but also recognizes your efforts with course completion certificates. A sense of accomplishment with every course finished.
    Maya H.


  • Learning Revolution!
    Learnfly's platform is a revolution in education. Access to unlimited courses at affordable rates is a game-changer.
    Ethan W.


  • front-end-web-design-using-wysiwyg-web-builder-like-a-pro

    Front End Web Design Using WYSIWYG ...

    By : Ishmeal Lamptey

    Lectures 39 Beginner 0:0:0
  • front-end-web-developer-masterclass-html-css-javascript

    Front-end Web developer MasterClass...

    By : Laurence Svekis

    Lectures 247 Beginner 17:12:46
  • bootstrap-4-complete-course

    Bootstrap 4 Complete Course

    By : Laurence Svekis

    Lectures 23 Beginner 2:7:43
  • javascript-draw-on-html5-canvas-element

    JavaScript Draw on HTML5 Canvas Ele...

    By : Laurence Svekis

    Lectures 13 Beginner 0:48:12

Students learning on Learnfly works with Fortune 500 companies around the globe.

Sign Up & Start Learning
By signing up, you agree to our Terms of Use and Privacy Policy
Reset Password
Enter your email address and we'll send you a link to reset your password.