Published on: 2022-09-12 19:12:29
Categories: 28
Share:
Flexbox Simplified is a project-based web page layout training course with Flexbox, published by the famous YouTuber Kevin Powell. Kevin Powell is a well-known CSS instructor and YouTuber in the field of website design and programming, working in a completely dedicated and project-oriented field in the field of CSS language. His YouTube channel has more than 250,000 subscribers and is one of the most popular YouTube channels in the field of programming and website development. Flexbox is a relatively new feature of the CSS language that simplifies page layout compared to traditional methods and provides a great deal of flexibility for web developers and designers. Working with Flexbox is very simple, but on a large scale it may be a problem for newcomers.
Flexbox is a semi-modern architecture and mechanism that has changed everything about website layout. Aligning different sections of the website and determining the exact size of columns and rows dynamically and percentage was one of the major problems for web developers, which Flexbox has largely solved. Flexbox behaves in a special and new way, and it is usually a bit difficult for traditional programmers to troubleshoot and debug. Among the most important challenges that programmers face while working with Flexbox can be balancing and sizing columns and rows, changing the size and shape of elements individually and individually, preventing the phenomenon of overflowing elements, aligning elements side by side And on top of each other, he pointed out the responsiveness of the elements and columns, the change of direction starting from right to left and left to right, and so on.
Publisher: Kevin Powell
Instructors: Kevin Powell
Language: English
Level: Introductory to Advanced
Number of Lessons: 70
Duration: 4 hours and 42 minutes
Welcome to the course!
My approach
The software I’ll be using
The Discord Community
The file structure
Introduction to declaring display: flex
The flex container
The flex items – part 1
The flex items – part 2
The flex items – part 3
The flex items – part 4
A challenge
Introduction to flexing our muscles
flex-direction basics
Collapsing margins
flex-direction – part 2
The order property
flex-grow
flex-shrink
Grow & Shrink Challenge
Grow & Shrink Solution
Another challenge
My solution
Visualizing with our dev tools
Introduction to flex-basis
The basics of flex-basis
flex-basis challenge
flex-basis solution
Introduction to alignment and justification
Justification basics
Justification continued
Justification and flex-direction
align-items basics
align-items: baseline
Aligning and justifying buttons
A simple navigation – challenge
A simple navigation – solution
A simple navigation follow-up challenge/solution
A look at align-self
Alignment and Justification form challenge
Alignment and Justification form solution
flex-wrap introduction
The basics of flex-wrap
flex-wrap and flex-direction
flex-wrap challenge
flex-wrap solution
Using flex-wrap with flex-grow and flex-shrink
Layouts with flex-wrap
flex-wrap challenge #2
Solution to the challenge
The flex-flow shorthand
A look at align-content
The place-content shorthand
Introduction to the magic of margins
auto margins and flexbox
Fixing a floating footer
Introduction to gap
the gap property
Creating a fallback for gap
flex-grow, revisited
Pushing flex-grow to it’s limits
A use case
Introduction to patterns and layouts
Equal columns, every time
Content / Sidebar
Adaptable sidebar
Grid-ish
Combining layouts and patterns
The holy albatross
The end!
I’m assuming you are comfortable with the basics of writing HTML & CSS.
I won’t be looking at all the CSS involved, but really focusing specifically on the flexbox parts of it.
After Extract, watch with your favorite Player.
Subtitle: None
Quality: 1080p
1.34 GB
Sharing is caring: