Learning Responsive Web Design

Learn How To Create Web Sites That Render Correctly On Different Screen Sizes And Operating Systems
4.3 (154 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.
18,986 students enrolled
Instructed by Infinite Skills Design / Web Design
$50
Take This Course
  • Lectures 64
  • Contents Video: 4.5 hours
    Other: 1 min
  • 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 5/2013 English

Course Description

In this Responsive Web Design training course, expert author Geoff Blake shows you how to create custom CSS and HTML so that your web site responds to differing screen sizes. With mobile and tablet web traffic increasing by leaps and bounds every day, all web designers should know how to create breakpoints and custom CSS layouts to adapt their designs to varying device resolutions.

You will learn how to setup your external style sheets for three different resolutions, and how to customize your layouts for each of those. This training video will teach you how to deal with navigation and graphics as well as text and other layout features, making them responsive. You will use the latest in CSS3 and HTML5 techniques to create a website design that will gracefully wrap and adapt to three different screen sizes. Extensive working files are included with this video tutorial, so you can work along with the author throughout each lesson.

When you have completed this computer based video training course, you will be capable of creating responsive, adaptive designs for your websites. You will understand how to create different external CSS files that are called depending on the resolution of the device that is requesting the web page. You will be confident in your ability to create a Responsive Web Site for todays mobile world!

What are the requirements?

  • PC or Mac

What am I going to get from this course?

  • Learn How To Create Web Pages That Render Correctly On Any Platform Or Device

What is the target audience?

  • Web Designers and Web Developers

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: 01. Getting Started
Working Files - Download These First
Preview
Article
0101 Welcome
Preview
02:16
0102 Responsive Design And Targeted Resolutions
Preview
05:14
0103 A Look At What We Will Build
04:10
0104 Tools Of The Trade
03:15
Section 2: 02. Using Dreamweaver CS6 For Responsive Design
0201 Getting Started With Fluid Grid Layouts
03:21
0202 Touring The Fluid Grid Layout View
03:28
0203 A Look At Dreamweavers Style Sheet
04:04
Section 3: 03. Getting Set Up For Responsive Design
0301 Setting Up The External Style Sheet
03:58
0302 Connecting The Style Sheet And Testing
07:07
0303 Setting Up The Low Resolution Media Query
07:14
0304 Setting Up The Medium Resolution Media Query
04:40
0305 Testing The Medium Resolution Media Query
03:17
0306 Setting Up The High Resolution Media Query
03:24
0307 Testing The High Resolution Media Query
02:27
Section 4: 04. Building The HTML Structure
0401 Building The Header Structure
03:47
0402 Building The Main Navigation Menu
06:52
0403 Setting The Body Structure
04:59
0404 Building The News Feed Area
06:34
0405 Setting The Footer Structure
02:32
Section 5: 05. Wireframing The High Resolution Layout
0501 Getting Started With The High Resolution Layout
05:08
0502 Applying Formatting To The Master Container
06:10
0503 Setting Properties For The Header
03:37
0504 Formatting The Main Navigation Menu
08:10
0505 Formatting The Slideshow
03:24
0506 Setting Up The Content Boxes
04:58
0507 Applying Formatting To The News Feed
02:32
0508 Finishing Off With The Footer
03:02
Section 6: 06. Wireframing The Medium Resolution Layout
0601 Setting Up The Medium Resolution Layout
05:41
0602 Formatting The Header
03:25
0603 Formatting The Navigation Menu
06:22
0604 Applying Formatting To The Slideshow
03:25
0605 Setting The Content Box Formatting
04:28
0606 Adjusting The News Feed
03:01
0607 Finalizing With The Footer
03:22
Section 7: 07. Wireframing The Low Resolution Layout
0701 Getting Started With The Low Resolution Layout
05:45
0702 Formatting The Layout Header
03:02
0703 Adjusting The Main Navigation Menu
04:31
0704 Formatting The Content Boxes
04:57
0705 Applying Formatting To The News Feed
03:10
0706 Finishing Up With The Footer
04:36
Section 8: 08. Initial High Resolution Formatting
0801 Fixing The Menu Spacing
06:11
0802 Getting Started With The High Resolution Formatting
02:36
0803 Applying Formatting To The Navigation Menu
04:27
0804 Formatting The Slideshow
01:27
0805 Formatting The Content Box
03:53
0806 Applying Formatting To The News Feed Area
05:07
0807 Getting The Footer Text Formatted
03:43
Section 9: 09. Initial Medium Resolution Formatting
0901 Getting Started With The Navigation Menu
05:13
0902 Formatting The Slideshow And Content Boxes
03:40
0903 Applying News Feed Formatting
04:59
0904 Finishing Up With The Footer
01:27
Section 10: 10. Initial Low Resolution Formatting
1001 Formatting The Main Navigation Menu
03:36
1002 Getting The Content Boxes Under Control
02:41
1003 Formatting The News Feed Area
06:45
Section 11: 11. Adding Graphics
1101 Getting Started With The Header
06:11
1102 Setting Up And Adjusting The Slideshow
08:04
1103 Adding A Background Graphic To The Content Boxes
03:02
1104 Adding Content Box Header Graphics
04:11
1105 Controlling The Content Box Graphics Via CSS
06:16
1106 Implementing The Slideshow - Part 1
05:15
1107 Implementing The Slideshow - Part 2
03:18
1108 Implementing The Slideshow - Part 3
01:43
Section 12: 12. Wrapping Up
1201 Thanks For Watching
01:46

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Infinite Skills, High Quality Training

Infinite Skills is a Canadian based company who offer a huge and ever growing range of high quality eLearning solutions that teach using studio quality narrated videos backed-up with practical hands-on examples and comprehensive working files. All courses are created by trained educators and experts in video based education.

The emphasis is on teaching real life skills that are essential for progressing in today's commercial environment.

Ready to start learning?
Take This Course