Responsive Web Design Academy
4.6 (87 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.
765 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Responsive Web Design Academy to your Wishlist.

Add to Wishlist

Responsive Web Design Academy

Take your HTML & CSS skills to the next level by creating responsive websites! Flexbox, media queries, grids all covered
Bestselling
4.6 (87 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.
765 students enrolled
Created by Chris Dixon
Last updated 7/2016
English
Current price: $10 Original price: $20 Discount: 50% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 4.5 hours on-demand video
  • 3 Articles
  • 2 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Understand what responsive design it and why it is important.
  • Produce websites using fluid grids.
  • Adopt a mobile first approach to design to make sure the user experience is the same regardless of the device size.
  • Use relative units confidently to improve responsive design.
  • Add the viewport meta tag to your projects.
  • Understand and be able to apply media queries and breakpoints.
  • Confidently build a responsive website from scratch or by using a framework.
  • Add responsive jQuery plugins such as sliding carousels and social share buttons.
  • Include the picture element to serve the correct size images for the users device.
  • Improve website performance and page loading times.
  • Improve page layout using the CSS Flexbox
  • Overcome common design problems using the Flexbox.
  • Use Bootstrap framework for creating responsive, mobile first websites.
  • Create a responsive jQuery drop down menu.
  • Learn how to use jQuery Mobile to build touch optimised mobile websites.
View Curriculum
Requirements
  • A basic computer knowledge.
  • A basic knowledge of HTML & CSS.
Description

There has never been a better time to learn responsive web design and take a mobile first approach.

Smartphone and tablet users no longer accept that they should have a poor web browsing experience because of the device they are using. Catering for mobile users is now essential.

This course teaches you how to put your HTML & CSS skills to great use by creating mobile first and responsive websites, which look great on any device.

This course covers:

  • We will go over what responsive design is and why a mobile first approach can be beneficial
  • Tools you can use to help your project
  • Fluid grids and relative sizes
  • The Viewport Meta Tag
  • Media queries and breakpoints
  • Building a responsive website project from scratch, using a responsive grid
  • We will then add jQuery plugins to the project to create a responsive sliding carousel and social sharing buttons
  • Dealing with responsive images and the picture element
  • How to optimise our images and files
  • CSS Flexbox including building our own basic grid
  • Using responsive frameworks such as Bootstrap

This course is beginner friendly but at least a basic HTML & CSS knowledge is required.

The web is going mobile, make sure your websites are ready!

Who is the target audience?
  • This course is beginner friendly, however you should have some HTML & CSS experience, I will be trying to concentrate on the responsive elements rather than explain HTML & CSS in detail.
  • You should take this course if you are new to responsive design or need to fill in some gaps.
  • This course is not intended for experts or experienced web designers/developers.
  • This course may also be useful for anybody looking to learn modern techniques such as dealing with different images sizes to suit different devices, CSS flexbox or even to gain a better understanding of responsive frameworks such as Bootstrap.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
37 Lectures
04:19:01
+
Welcome & Getting Started
5 Lectures 22:27

This video is for students new to Udemy. We look over the Udemy screenshot and emphasise using the HD button to get clearer, sharper HD video on this course.

Finding your way around
02:36

We will discuss what responsive design is and take a look at 3 examples of great responsive design. We will take a look at the Microsoft, Bootstrap and BBC News websites, shrinking down the browsers to see how the websites react on smaller or larger screens.

What is responsive design?
09:42

Why are we designing first? Well lets find out what all the fuss is about.

Preview 05:25

Why are we designing first? Well lets find out what all the fuss is about.

Why mobile First?
02:48

Understanding Responsive Design
2 questions
+
Fluid Grids & Responsive Essentials
4 Lectures 31:49

The fluid grid is essential to responsive design. While we rely on media queries to make layout changes etc, a fluid grid is really important for the content to flow between breakpoints.

Getting started with the fluid grid
07:51

Relative units allow text, elements etc to be fluid and shrink/expand as screens get bigger or smaller. Fixed sizes such as pixels are always useful, but they have limitations when we are designing for different size screens.

Relative units
06:29

The viewport meta tag allows our responsive design to consistently render as we expect in browsers. Avoiding problems such as smartphones zooming out so the full page appears on the screen making our site often unreadable.

Viewport Meta Tag
03:10

When combined with a fluid grid, media queries are essential to creating layout/design changes in responsive websites. This video shows the various ways of adding media queries to your projects and how to use them effectively.

Preview 14:19
+
Lets Get Building
9 Lectures 01:26:10
Download Project Images
1 page

This video shows how the project was designed with Gliffy. This is a really important step to ensure we use our grid system correctly in the project.

Wireframe with Gliffy
04:21

*** Slimmenu download is available in this video if you have any issues ***

We get started with the project by setting up all the file/ folder structure. We also include our responsive grid, css and javascript files, jquery and slimmenu plugins, and link to the fontawesome CDN.

Setting up the project
15:43

In this video we add the header section and add our responsive jQuery navigation menu.

Header & Navigation
14:34

We will continue our project by adding the main content area HTML, all using the responsive grid.

Adding the main content
10:01

We finish the HTML for the project by adding the sign up and footer area.

Creating the sign up area & footer
10:41

Our project starts to take shape now as we move on to adding the css. We add the mobile first and global styles.

Mobile first styling
10:43

We continue with the mobile styling and then move onto adding a media query to create design changes for tablet styling.

Mobile styles continued & adding media queries
11:06

In this video we will finish off our project by adding media queries and CSS for larger devices.

Finishing our project
09:01
+
JQuery Plugins for Responsive Design
2 Lectures 14:21

We return to our project to replace the main image with a responsive sliding carousel.

Responsive Sliding Carousel
06:19

This video shows how we can integrate social sharing buttons into our project, and of course they will be fully responsive.

Responsive Social Share buttons
08:02
+
Responsive Images & Improving Page Load Times
6 Lectures 27:57

An introduction into why responsive images are important and a brief demonstration using different image resolutions.

Preview 02:01

We begin to optimise the images we used in the project. This allows us to reduce the file sizes without sacrificing image quality. Therefore improving load times.

Reducing Image File Sizes
03:44

Important Update- please read
00:20

We use Google's PageSpeed Insights to get a better understanding on how we can improve our websites performance. We use free tools to minify our Javascript and CSS files to improve our pages performance.

Minification & Page Speed Insights
07:12

This video shows how we can use the Picture element to allow us to serve correctly scales images for different device sizes and resolutions.

Picture Element
12:17

After discovering the Picture element, we now move on to looking at Adaptive Images. Adaptive Images detects your screen size and provides rescaled versions of your images to suit the screen.

Adaptive Images
02:23

Responsive Images Quiz
2 questions
+
CSS Flexbox
4 Lectures 29:58

An overview into how we can use the CSS Flexbox to better position elements and simplify our page layouts.

Introduction to Flexbox
10:41

We create a basic grid system using flexbox, demonstrating how easily this can be achieved with minimum code.

Flexbox grid
07:32

For many years we have had to work with many different solutions to achieve the 'holy grail' website layout. Flexbox now makes this really simple to achieve.

Holy Grail Layout using Flexbox
08:43

A demonstration on how flex box can solve another existing problem, the sticky footer.

Preview 03:02

Flexbox Quiz
2 questions
+
Responsive Frameworks
4 Lectures 43:46

Bootstrap is one of the most popular frameworks in the world for creating responsive websites. This video will show you how you can quickly get up and running with your website using this popular framework.

Bootstrap Framework
12:02

This video is all about creating a touch optimised mobile version of our Designer-Clothing project, using jQuery mobile. We will take a look over the jQuery mobile website and use the Themeroller tool to create our custom download package with out custom CSS.

We will also:

  • Set up our jQuery mobile project
  • Create the structure
  • Add the header section
  • Create the collapsible menu
  • Add our headline image
jQuery Mobile Part 1
18:33

We will continue with the jQuery mobile project in this video.

This video covers:

  • Adding the 3 promotion boxes
  • Bring into the project our images and section links
  • Create the email signup area and about us text
  • Add the footer section with links
  • Create a slide in hidden panel section
jQuery Mobile Part 2
10:00

A quick roundup of some other popular resources and frameworks which may be useful for your responsive projects.

We take a quick overview of:

  • Foundation 5 framework
  • Foundation for apps
  • Zurb ink for responsive emails
  • Wordpress responsive themes
Other popular frameworks
03:11
+
Thank You
3 Lectures 01:33
Final project files
00:03

Thank You
01:15

Keep on learning
00:15
About the Instructor
Chris Dixon
4.5 Average rating
1,082 Reviews
14,489 Students
7 Courses
Web Developer and teacher at CodeSmart Academy

Hello, My name is Chris and I am a web developer and online teacher. I am passionate about what I do and about teaching others. I have started various online and offline businesses.

Whatever your reason for learning to build websites you have made an excellent career choice.

My personal motivation was to become my own boss and have more freedom and flexibility in my life. I also enjoy the technical challenge it provides and the way it constantly evolves. I built my first website back in 1999 and i have watched the web evolve into what it is today.

I try to make my courses enjoyable and try to remember what it was like when I was learning. I also believe the best way to learn is by doing and try to include as many practical examples as possible in my courses.

Thanks for taking an interest and I look forward to you joining me.

Chris