The Complete CSS Flexbox Guide with a Complete Project [Updated for 2021]

Focused View

Ahmed Sadek

2:24:44

21 View

01.01-course introduction and overview.mp4

04:08

01.02-creating your first flexbox container.mp4

03:08

01.03-main and cross axes.mp4

05:01

01.04-flex-flow property.mp4

02:24

01.05-understanding the flex-wrap property.mp4

01:54

02.01-aligning elements with the justify-content property.mp4

05:38

02.02-more about the justify-content property.mp4

02:13

02.03-aligning elements with the align-items property.mp4

04:49

02.04-aligning a single element with the align-self property.mp4

02:47

02.05-aligning multiple lines with the align-content property.mp4

02:33

02.06-understanding the order property.mp4

02:48

03.01-flex-grow property in cascading style sheets (css).mp4

06:31

03.02-flex-shrink property in cascading style sheets (css).mp4

04:48

03.03-flex-basis property in cascading style sheets (css).mp4

04:21

04.01-section overview and starting files.mp4

01:33

04.02-building a simple menu with cascading style sheets (css) flexbox.mp4

09:00

04.03-building an advanced menu with cascading style sheets (css) flexbox.mp4

07:28

05.01-overview of your final project.mp4

04:10

05.02-building the holy grail layout.mp4

05:32

05.03-building a header using cascading style sheets (css) flexbox.mp4

06:36

05.04-building and styling the posts section.mp4

07:05

05.05-adding cascading style sheets (css) flexbox to posts.mp4

03:51

05.06-building and styling the watch section.mp4

04:43

05.07-adding cascading style sheets (css) flexbox to the watch section.mp4

02:45

05.08-building and styling the download section.mp4

07:20

05.09-adding cascading style sheets (css) flexbox to the download section.mp4

07:53

05.10-building a gallery with the horizontal masonry layout using cascading style sheets (css) flexbox.mp4

08:35

05.11-adding the gallery lightbox plugin to the gallery section.mp4

03:54

05.12-building a sidebar using cascading style sheets (css) flexbox.mp4

06:38

05.13-building menus and footers.mp4

04:38

9781801071574 Code.zip

Description

Do you want to create complex website layouts easily and quickly with just simple lines of code? This course will help you to create those complex website layouts with ease using the magic of flexbox. You will start this course by creating your first flexbox container to understand how flexbox works. Next, you will learn how to control the alignment of elements using the CSS flexbox. Moving along, you will grasp techniques to control the size of elements and to build basic and advanced menus using flexbox. Toward the end, you will learn to build a website with advanced responsive layouts, such as Holy Grail, equal columns layout, and horizontal masonry. By the end of this course, you will be able to create real-world responsive website layouts using flexbox. All the code files and support files are available at https://github.com/PacktPublishing/The-Complete-CSS-Flexbox-Guide-With-a-Complete-Project-2021

More details

User Reviews

Rating

average 0

Total votes0

Focused display

CSS

Ahmed Sadek

Instructor's Courses

Ahmed Sadek is a senior web developer working as a freelancer for the last 7 years. He has developed hundreds of web projects and helped companies of all sizes in improving their business.

PacktPub

View courses PacktPub

Packt is a publishing company founded in 2003 headquartered in Birmingham, UK, with offices in Mumbai, India. Packt primarily publishes print and electronic books and videos relating to information technology, including programming, web design, data analysis and hardware.