• Search...

categories: Technology & Innovation | Courses in English

Digital
Technology
Design
SDG 4: Quality Education
SDG 8: Decent Work and Economic Growth
SDG 9: Industry, Innovation and Infrastructure

The Complete CSS Flexbox

Duration: 2 h 20 m / 29 lessons

Level: General

Course Language: English

By the end of this course, you will be able to

  • Build advanced responsive layouts quickly and easily with minimal codes, photo galleries, and menus using flexbox.

  • Build a complete website with advanced responsive layouts like (the holy grail layout - the equal columns layout - the horizontal masonry layout) and so much more.

  • Understand how every property works and how a specific property can be used to control the layout in different ways and how to enhance your productivity and save more time as a web developer.

Course details

  • 2 h 20 m/29 lessons
  • Last updated: 10/3/2022
  • Course completion certificate

Course Content

Free lessons

1.

Creating our first flexbox container

3 Minutes
2.

Understanding main and cross axes

5 Minutes
3.

More about flex flow property

2 Minutes
1.

Creating our first flexbox container

3 Minutes
2.

Understanding main and cross axes

5 Minutes
3.

More about flex flow property

2 Minutes
4.

Learning the flex wrap property

1 Minutes
1.

Aligning elements with justify content property

5 Minutes
2.

More about justify content

2 Minutes
3.

Aligning elements with align items property

4 Minutes
4.

Aligning a single element with align self property

2 Minutes
5.

Aligning multiple lines with align content property

2 Minutes
6.

Learning the order property

2 Minutes
1.

Flex grow

6 Minutes
2.

Flex shrink

4 Minutes
3.

Flex basis

4 Minutes
1.

Section overview and starting files

1 Minutes
2.

Building a simple menu with flexbox

9 Minutes
3.

Building an advanced menu with flexbox

7 Minutes
1.

Overview of our final project

4 Minutes
2.

Building the holygrail layout

5 Minutes
3.

Building our header using flexbox

6 Minutes
4.

Building and styling our posts section

7 Minutes
5.

ِAdding flexbox to our posts

3 Minutes
6.

Building and styling the watch section

4 Minutes
7.

Adding flexbox to the watch section

2 Minutes
8.

Building and styling the download section

7 Minutes
9.

Adding flexbox to the download section

7 Minutes
10.

Building our gallery with the horizontal masonry layout using flexbox

8 Minutes
11.

Adding gallery lightbox plugin to our gallery

3 Minutes
12.

Building our sidebar using flexbox

6 Minutes
13.

Building our menu and our footer

4 Minutes

About this course

If you are still on the fence about where to start an efficient way to create complex layouts easily then this training course is designed to clear your doubts. In this all-in-one course, will create advanced responsive layouts using CSS only with just simple lines of code, You are only one click away from discovering, so start learning now!

Course requirements and prerequisites

This course requires basic Understanding Of HTML & CSS.

Mentor

The Complete CSS Flexbox

Duration: 2h 20m / 29 lessons
Level: General
Course Language: English
Looking for help?