Building Responsive Websites with HTML 5 & CSS3

Learning how to build responsive websites has never been easier!
4.2 (12 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
115 students enrolled
$20
Take This Course
  • Lectures 43
  • Contents Video: 3.5 hours
    Other: 0 mins
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 12/2013 English

Course Description

In this hands-on training course, award-winning veteran trainer Geoff Blake shows you, step-by-step, how to build beautifully designed, responsive websites that adjust and function perfectly on smartphones, tablets, and desktop displays. You’ll begin with the fundamentals of responsive design, beginning with multiple style sheets, media queries and various expressions. Next comes the fun part: you’ll be guided through several in-depth chapters that walk you through the responsive design workflow, building HTML structure and CSS formatting for mobile and desktop displays; including tablets, desktop screens, and smartphones. Geoff shows you how to plan out your work, handle common issues that arise in a responsive layout, and how to handle various page components between device displays. Finally, the course closes with additional tricks, advanced techniques, and testing methods to ensure that your layout looks fantastic.

What are the requirements?

  • A basic understanding of HTML and CSS

What am I going to get from this course?

  • Learn the latest techniques for an in-demand skill: building functional, responsive web layouts.
  • Easy to follow, plain-english instructions make learning how to create websites that possess both beautiful design and powerful function a breeze.
  • Learn, step-by-step, how to design layouts to fit various device displays, including tablet, smartphone, and desktop screens.

What is the target audience?

  • Those looking to build a strong foundation in responsive web layouts

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction
Welcome
Preview
00:48
A Look At What We'll Build
Preview
01:35
Section 2: Responsive Design Fundamentals
Key Aspects Of Responsive Design
Preview
02:43
Determining Device Resolutions To Target
Preview
04:20
Wireframing Responsive Layouts
Preview
04:58
Section 3: The Basics: Multiple Style Sheets & Media Queries
The Concept Of Using Multiple CSS Files
10:49
Media Queries & Multiple Style Sheets
08:57
Building Media Queries Into A Single CSS File
07:38
Using Media Query Expressions
05:04
Section 4: Building HTML Structure & CSS For All Screens
Setting Up The HTML & CSS Files
04:19
Getting Started With The Header
07:36
Inserting The Main Nav Menu
06:01
Inserting The Search Field
06:55
Problems With Applying Floats
04:19
Integrating Google Fonts API
03:25
Building The Hero Section Structure
04:25
Formatting The Hero Section
09:04
Inserting & Formatting A Call To Action Button
09:50
Building The Features Section, Part One
05:46
Building The Features Section, Part Two
04:56
Inserting The Organize Section
08:18
Building The Share Section
05:15
Building The Call To Action Area
06:36
Inserting And Formatting The Footer
03:47
Finishing Touches For The High Resolution Layout
04:06
Section 5: Building The Tablet Layout
Setting Up The Medium Resolution CSS & Testing The Media Query
07:01
Formatting The Medium Res Header
04:08
Formatting The Medium Res Hero Section
06:08
Formatting The Features Section
02:13
Formatting The Organize And Share Sections
05:17
Building The Get Section & Finishing Up The Medium Res Layout
02:53
Section 6: Building The Smartphone Layout
Setting Up The Low Res CSS & Testing The Media Query
04:40
Formatting The Low Res Header
02:52
Resolving Problems Caused By Floats
04:21
Formatting The Low Res Hero Section
03:17
Formatting The Features Section
01:46
Formatting The Organize And Share Sections
02:58
Building The Get Section & Finishing Up The Low Res Layout
03:06
Section 7: Advanced Techniques For Responsive Design
Disabling Device Smart Zoom
05:59
Testing Your Responsive Layouts
04:27
Setting Up Retina Display Graphics
06:21
Section 8: Wrapping Up
Where To Go From Here
02:49
Request a Course
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Stone River eLearning, 180,000+ Happy Udemy Students | 320,000+ Students Worldwide

At Stone River eLearning, technology is all we teach. If you're interested in programming, development or design - we have it covered. 

Check out our huge catalog of courses and join the over 320,000 students currently taking Stone River eLearning courses. We currently offer 125+ different technology training courses on our Stone River eLearning website and are adding new courses on hot and trending topics every month. A subscription option is available for those with a real passion for learning.

Ready to start learning?
Take This Course