- Description
- Curriculum
- Reviews
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.
-
3Box-sizing & developer console7 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
4Responsive concepts10 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
You can check our this YouTube video to undersand em and rem even better
-
5Flexbox basics9 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
6Flex-container properties4 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
7Space between items7 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
8Challenge 11 minThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
TRY OUT WHAT YOU LEARNED SO FAR.
-
9Challenge 1 - solution5 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
10Reducing the amount of HTML markup5 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
11Flex-container continuation12 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
12Flex-item properties10 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
13Challenge 22 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
ANOTHER CHALLENGE TO TRY OUT YOUR FLEXBOX SKILLS.
-
14Challenge 2 - solution26 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
15Target points in this section3 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
16Grid templates15 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
17Grid gap12 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
18Challenge 11 minThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
Try out your first grid challenge.
-
19Challenge 1 - solution5 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
20Grid-auto10 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
21Spanning items24 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
22Grid-areas13 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
23Grid-items positioning7 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
24Challenge 22 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
Time to try out your second grid challenge.
-
25Challenge 2 - solution25 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
26Specifying media queries5 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
27Declaring media queries for different devices18 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
28Media queries - example26 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
29Challenge3 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
Try out this challenge on media query using grid.
-
30Challenge - solution24 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
31Introduction to SASS5 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
32Sass installation22 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
Check out the sass documentation and other installation processes on their official website.
-
33SASS compiler extension6 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
34Variables11 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
35Nesting in SASS17 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
36@import10 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
37@mixins and @includes15 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
38Extends in sass10 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
39Arithmetic operations with sass8 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
40Project overview3 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
You can check out this website for the template used in this project and also to check out others you can try out yourself.
-
41
-
42Styling the header section25 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
43Styling grid section27 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
44Styling the base21 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
45Project conclusion31 minsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
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>
-
Understanding CSS3 in Web Development
₦9,000
-
Understanding HTML5 Elements, Attributes and Syntaxes
₦6,000
-
What is Prerequisite coursesA prerequisite is a specific course that you must complete before you can take another course at the next grade level.