MasteryVault

About the Course

An advanced CSS course touching on responsive web design technologies including:

  • flexbox
  • grid layout
  • media queries

And also an inclusion of SASS – Syntactically Awesome Stylesheet.

 

Objectives

This course is built and structured to make reponsive concepts in easy to grasp.

You will learn to work with:

  • flexbox and its properties. Properties that affects the flex container and flex items.
  • grid layouts and so many special grid properties to create different layouts and designs.
  • media queries, breakpoints and working with different design approaches (mobile-first approach and desktop-first approach).
  • SASS technology, its different features that makes it an amazing tool to use for styling and also why you might prefer SASS over standard CSS. 

 

Who the course is for

The course is an advanced CSS course, so some basic knowledge of HTML and CSS is highly recommended. The course focuses more on making designs responsive and so some other properties in CSS might not be totally explained.

 

Section 1 - Welcome

1
Overview
3 mins
2
Preparing our tools
7 mins

Section 2 - Flexbox

1
Box-sizing & developer console
7 mins
2
Responsive concepts
10 mins

You can check our this YouTube video to undersand em and rem even better

3
Flexbox basics
9 mins
4
Flex-container properties
4 mins
5
Space between items
7 mins
6
Challenge 1
1 min

TRY OUT WHAT YOU LEARNED SO FAR.

7
Challenge 1 – solution
5 mins
8
Reducing the amount of HTML markup
5 mins
9
Flex-container continuation
12 mins
10
Flex-item properties
10 mins
11
Challenge 2
2 mins

ANOTHER CHALLENGE TO TRY OUT YOUR FLEXBOX SKILLS.

12
Challenge 2 – solution
26 mins

Section 3 - Grid layout

1
Target points in this section
3 mins
2
Grid templates
15 mins
3
Grid gap
12 mins
4
Challenge 1
1 min

Try out your first grid challenge.

5
Challenge 1 – solution
5 mins
6
Grid-auto
10 mins
7
Spanning items
24 mins
8
Grid-areas
13 mins
9
Grid-items positioning
7 mins
10
Challenge 2
2 mins

Time to try out your second grid challenge.

11
Challenge 2 – solution
25 mins

Section 4 - Media queries

1
Specifying media queries
5 mins
2
Declaring media queries for different devices
18 mins
3
Media queries – example
26 mins
4
Challenge
3 mins

Try out this challenge on media query using grid.

5
Challenge – solution
24 mins

section 5 - SASS Technology

1
Introduction to SASS
5 mins
2
Sass installation
22 mins

Check out the sass documentation and other installation processes on their official website.

3
SASS compiler extension
6 mins
4
Variables
11 mins
5
Nesting in SASS
17 mins
6
@import
10 mins
7
@mixins and @includes
15 mins
9
Arithmetic operations with sass
8 mins

Section 6 - Porfolio page project

1
Project overview
3 mins

You can check out this website for the template used in this project and also to check out others you can try out yourself.

2
Creating our HTML
21 mins

Check out HTML entities on:

3
Styling the header section
25 mins
4
Styling grid section
27 mins
5
Styling the base
21 mins
6
Project conclusion
31 mins

So I figured out the Javascript issue 😊 I forgot the defer attribute in my <script> tag on the HTML document.

So replace,

<script src="./index.js"></script>
 
with;
 
<script src="./index.js" defer></script>

Be the first to add a review.

Please, login to leave a review
Layer 1
Login Categories