- 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 consoleThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
4Responsive conceptsThis 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 basicsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
6Flex-container propertiesThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
7Space between itemsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
8Challenge 1This 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 - solutionThis 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 markupThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
11Flex-container continuationThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
12Flex-item propertiesThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
13Challenge 2This 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 - solutionThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
15Target points in this sectionThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
16Grid templatesThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
17Grid gapThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
18Challenge 1This 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 - solutionThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
20Grid-autoThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
21Spanning itemsThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
22Grid-areasThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
23Grid-items positioningThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
24Challenge 2This 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 - solutionThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
26Specifying media queriesThis 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 devicesThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
28Media queries - exampleThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
29ChallengeThis 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 - solutionThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
31Introduction to SASSThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
32Sass installationThis 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 extensionThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
34VariablesThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
35Nesting in SASSThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
36@importThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
37@mixins and @includesThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
38Extends in sassThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
39Arithmetic operations with sassThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
40Project overviewThis 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 sectionThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
43Styling grid sectionThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
44Styling the baseThis lesson is locked because you haven't completed the previous one yet. Finish the previous lesson to unlock this one.
-
45Project conclusionThis 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.