Learn practical CSS responsive design techniques to make your website look great on phone and on tablet. Read more.
Buy this course for $199 $10
and keep lifetime access.
Access all courses in our library for only $9/month with All Access Pass
About This Course
Who this course is for:
- CSS developers looking to add to their skillset
- Students of web design considering a move into a more CSS oriented-position
- Graphic/UX/UI Designers looking to increase their prototyping ability
- Developers working in real workplaces where responsive design is a requirement
What you’ll learn:
- What responsive design is
- When to use responsive design
- How to implement responsive design with CSS
- What CSS breakpoints are
- Responsive design workflow
- Styling navigation for mobile devices
- Styling two-column layouts for mobile devices
Requirements:
- Beginner understanding of CSS (See Course: Fundamentals Of CSS )
CSS is an incredibly ubiquitous tool that is used throughout almost all websites and mobile applications.
However, a one-size-fits-all-approach doesn’t work when one user may be using your site on a phone, and another on a computer.
How can we support multiple devices without essentially creating multiple projects? The answer is Responsive Design.
In this course, you’ll use responsive design to make a single website professional and functional on PC, tablet and mobile.
By the end of this course, you should feel confident updating standard desktop apps to support mobile. You will also be able to intelligently discuss responsive design with your team. Finally, you’ll be able to prototype basic responsive applications quickly and efficiently.
Our Promise to You
By the end of this course, you will have learned to prototype basic responsive applications quickly and efficiently.
10 Day Money Back Guarantee. If you are unsatisfied for any reason, simply contact us and we’ll give you a full refund. No questions asked.
Get started today!
Course Curriculum
Section 1 - Introduction To Responsive Design | |||
Why Responsive Design? | 00:00:00 | ||
What Is Responsive Design? | 00:00:00 | ||
Let’s RAP About BOOTSTRAP | 00:00:00 | ||
Previewing The Demo Application | 00:00:00 | ||
CSS Responsive Design Handout | 00:00:00 | ||
Section 2 - Application Setup And Workflow | |||
Setting Up The Demo Project | 00:00:00 | ||
Why Add Non-Responsive Styles First? - Responsive Design Workflow | 00:00:00 | ||
DEMO: Adding Regular CSS Styles Part I | 00:00:00 | ||
DEMO: Adding Regular CSS Styles Part II | 00:00:00 | ||
Section 3 - Adding Responsive Styles | |||
What Are CSS Breakpoints? | 00:00:00 | ||
Demo - Adding CSS Breakpoints | 00:00:00 | ||
Demo - Making Navigation Responsive | 00:00:00 | ||
Demo - Making Layout Responsive | 00:00:00 | ||
Demo - Creating a Responsive Footer | 00:00:00 | ||
Course Summary | 00:00:00 |
About This Course
Who this course is for:
- CSS developers looking to add to their skillset
- Students of web design considering a move into a more CSS oriented-position
- Graphic/UX/UI Designers looking to increase their prototyping ability
- Developers working in real workplaces where responsive design is a requirement
What you’ll learn:
- What responsive design is
- When to use responsive design
- How to implement responsive design with CSS
- What CSS breakpoints are
- Responsive design workflow
- Styling navigation for mobile devices
- Styling two-column layouts for mobile devices
Requirements:
- Beginner understanding of CSS (See Course: Fundamentals Of CSS )
CSS is an incredibly ubiquitous tool that is used throughout almost all websites and mobile applications.
However, a one-size-fits-all-approach doesn’t work when one user may be using your site on a phone, and another on a computer.
How can we support multiple devices without essentially creating multiple projects? The answer is Responsive Design.
In this course, you’ll use responsive design to make a single website professional and functional on PC, tablet and mobile.
By the end of this course, you should feel confident updating standard desktop apps to support mobile. You will also be able to intelligently discuss responsive design with your team. Finally, you’ll be able to prototype basic responsive applications quickly and efficiently.
Our Promise to You
By the end of this course, you will have learned to prototype basic responsive applications quickly and efficiently.
10 Day Money Back Guarantee. If you are unsatisfied for any reason, simply contact us and we’ll give you a full refund. No questions asked.
Get started today!
Course Curriculum
Section 1 - Introduction To Responsive Design | |||
Why Responsive Design? | 00:00:00 | ||
What Is Responsive Design? | 00:00:00 | ||
Let’s RAP About BOOTSTRAP | 00:00:00 | ||
Previewing The Demo Application | 00:00:00 | ||
CSS Responsive Design Handout | 00:00:00 | ||
Section 2 - Application Setup And Workflow | |||
Setting Up The Demo Project | 00:00:00 | ||
Why Add Non-Responsive Styles First? - Responsive Design Workflow | 00:00:00 | ||
DEMO: Adding Regular CSS Styles Part I | 00:00:00 | ||
DEMO: Adding Regular CSS Styles Part II | 00:00:00 | ||
Section 3 - Adding Responsive Styles | |||
What Are CSS Breakpoints? | 00:00:00 | ||
Demo - Adding CSS Breakpoints | 00:00:00 | ||
Demo - Making Navigation Responsive | 00:00:00 | ||
Demo - Making Layout Responsive | 00:00:00 | ||
Demo - Creating a Responsive Footer | 00:00:00 | ||
Course Summary | 00:00:00 |