Mastering CSS - Responsive Design Course Overview
- Understand the basics of CSS
- Learn why responsive designs are important
- Be able to create responsive websites using CSS and Bootstrap
- Understand the workflow and the steps of CSS
- Be able to find out errors and edit them
- Be able to create easily understandable and beautiful designs
- Be able to make your website more popular among users
- Why do you need responsive design?
This module will discuss why you need responsive designs for your website. You will learn the benefits of responsive design, how it can attract viewers and how can you create one. This lesson will give you a total overview of responsive design.
- What is responsive design?
In this lesson, you’ll learn what responsive design is and the parts of it. You’ll learn how seemingly the same command can vary dispensing on application. You’ll also familiarize yourself with various elements and commands of responsive design.
- The first step of Bootstrap
As a new designer, this lesson is very important. You’ll understand the importance of bootstrap and how it can simplify your design and make your designing journey even easier. This discussion will encourage you to learn more about bootstrap.
- Demo preview
Here you’ll see a demo application. You’ll see various responsive functions. This lesson is going to give you an overview of what you are going to do in the next few classes to build a responsive application.
- Demo project setting
This is the first step of starting practising for yourself. Here, you’ll learn how you can set up your computer for your work, the assistance, software and libraries you’ll need and how to use them.
- Responsive design workflow
This lesson will show you what step comes before another. You’ll see various responsive and non-responsive styles. You’ll be able to understand how non-responsive style helps to make the structure of your design and provide a guideline for responsive style.
- Adding regular CSS style
This lesson will familiarize you with various basic responsive functions. You’ll know about fundamental commands and how they work. You’ll also learn the difference between non-responsive and responsive design.
- Adding regular CSS style
From this lesson, you’ll start to apply responsive functions to your design. You’ll be able to get feedback and responses using these functions.
- What is CSS breakpoint?
This lesson is going to give you an overview of what CSS breakpoint is and why you need it. You’ll learn the functions of CSS breakpoints and how they make your designing experience better.
- Adding CSS breakpoint
Here you’ll learn how to add the CSS breakpoint in your design, when it’s needed and when not. This lesson will teach you tips and tricks to make your work easier and help you understand your design better.
- Responsive navigation
If you can’t navigate your users according to their needs, it will make them disappointed. So. it is important to learn how to navigate them and help them with what they need. In this lesson, you’ll learn how to use responsive navigation to improve your design.
- Responsive layout making
Here you’ll start to see what you’ve learnt so far all together. You’ll see the whole layout, its differences and its beauty. You can feel the difference only by just looking at it now.
- Creating responsive footer
Footer is also important. If you notice, you’ll see that many websites provide their contact information and notices in the footer. In this lesson, you’ll learn how a good footer can make a difference. So, dig in to make your skill advanced and learn skills to create amazing footers.
You’ve learnt the functions and applicability of CSS now. This module will summarise what you’ve learned and how it can make difference in your design. You’ll learn where you can go next to advance your skill and utilize your current skill to make amazing website designs.
|Unit 01: Introduction to Responsive Design|
|Module 01: Why Responsive Design?||00:05:00|
|Module 02: What is Responsive Design?||00:03:00|
|Module 03: LET’S RAP ABOUT BOOTSTRAP||00:02:00|
|Module 04: Previewing the Demo Application||00:03:00|
|Unit 02: Application Setup and Workflow|
|Module 01: Setting Up the Demo Project||00:04:00|
|Module 02: Responsive Design Workflow||00:04:00|
|Module 03: DEMO: Adding Regular CSS Styles (Part I)||00:10:00|
|Module 04: DEMO: Adding Regular CSS Styles (Part II)||00:07:00|
|Unit 03: Adding Responsive Styles|
|Module 01: What are CSS Breakpoints?||00:01:00|
|Module 02: Demo – Adding CSS Breakpoints||00:04:00|
|Module 03: Demo – Making Navigation Responsive||00:05:00|
|Module 04: Demo – Making Layout Responsive||00:04:00|
|Module 05: Demo – Creating a Responsive Footer||00:04:00|
|Module 06: Course Summary||00:02:00|