Max Design

Build your first Responsive site

Author : RUSS WEAKLEY
Type : ONLINE COUSE
Quantity : 8 LESSONS

Responsive Web Design is now an essential skill for every web designer and developer. This hands-on course will help you solve real world problems associated with building RWD websites: navigation, forms, tables, videos & images. Learn the building blocks of RWD so that you can create beautiful websites that look fantastic on any device.

$45.95 – Add to Cart Excluding 0% tax

All amounts are in AUD (Australian Dollars). An additional 10% GST charge applies to all purchases made from within Australia

What you’ll learn

In this course, you’ll gain the skills and knowledge to build a wide range of Responsive Web Design components, including:

  • An understanding about RWD and mobile first
  • Media queries
  • Fluid images
  • CSS frameworks and grids
  • Responsive forms
  • Responsive tables
  • Responsive navigation

Who should do this course

This course is for web designers and developers who want to learn how to create and style elegant Responsive websites.

A basic understanding of CSS is required.

What will we build?

Build your first Responsive site

Contents

Lesson 1. Introduction

Duration: 21:29 mins

  • What you will need
  • What will we cover
  • What is responsive web design
  • Mobile first
  • Exploring the finished layout
  • Exploring the folder
  • Exploring the index file

Lesson 2. media queries

Duration: 23:50 mins

  • Media types
  • Media queries
  • Media query support
  • Applying media queries
  • Media query breakpoints
  • Our media queries
  • Exercise – increasing font-size using media queries

Lesson 3. Images and buttons

Duration: 15:15 mins

  • Exercise: Fluid images
  • Fluid images and IE6
  • Exercise: Styling buttons

Lesson 4. Responsive grids

Duration: 25:06 mins

  • CSS frameworks
  • The past and present
  • Establishing patterns
  • Exercise: Rows
  • Exercise: Containers
  • Exercise: Columns
  • Exercise: Tinted rows
  • Exercise: Rows with padding

Lesson 5. Complex areas

Duration: 18:56 mins

  • Exercise: The banner
  • Exercise: The contact area
  • Exercise: The header

Lesson 6: Responsive forms

Duration: 16:13 mins

  • Responsive forms
  • Some notes on class names
  • Exercise: Styling our form

Lesson 7: Responsive tables

Duration: 12:29 mins

  • Problems with tables
  • Exploring some solutions
  • Some concerns
  • Preferred solution
  • Exercise: Creating our responsive table

Lesson 8: Responsive navigation

Duration: 20:37 mins

  • Exercise: Styling the nav
  • Exercise: The toggle
  • Exercise: The nav
  • Exercise: Wide screen
  • Exercise: Testing

Downloads

Name Format Size Purpose
Start folder ZIP 250 KB the folder you will use to do all exercises
Finished folder ZIP 254 KB the finished product
Resources TXT 20 KB list of resources discussed during the course
Lesson 1, part 1 MP4 73 MB Movie with explanations and exercises
Lesson 1, part 2 MP4 60 MB Movie with explanations and exercises
Lesson 1, part 3 MP4 97 MB Movie with explanations and exercises
Lesson 2, part 1 MP4 55 MB Movie with explanations and exercises
Lesson 2, part 2 MP4 67 MB Movie with explanations and exercises
Lesson 2, part 3 MP4 99 MB Movie with explanations and exercises
Lesson 3, part 1 MP4 58 MB Movie with explanations and exercises
Lesson 3, part 2 MP4 95 MB Movie with explanations and exercises
Lesson 4, part 1 MP4 44 MB Movie with explanations and exercises
Lesson 4, part 2 MP4 110 MB Movie with explanations and exercises
Lesson 4, part 3 MP4 99 MB Movie with explanations and exercises
Lesson 5, part 1 MP4 99 MB Movie with explanations and exercises
Lesson 5, part 2 MP4 119 MB Movie with explanations and exercises
Lesson 6, part 1 MP4 89 MB Movie with explanations and exercises
Lesson 6, part 2 MP4 85 MB Movie with explanations and exercises
Lesson 7, part 1 MP4 66 MB Movie with explanations and exercises
Lesson 7, part 2 MP4 73 MB Movie with explanations and exercises
Lesson 8, part 1 MP4 105 MB Movie with explanations and exercises
Lesson 8, part 2 MP4 105 MB Movie with explanations and exercises
Back to top

Contact us

To contact Max Design by email, please use the form below. We will try to answer your inquiry as quickly as possible.