10 Days Of CSS Flexbox
What you'll learn
- Build structured layouts like forms, navigation menus and keyboards using Flexbox
- Design creative UIs including multi-colored grids and triangle patterns with Flexbox positioning.
- Understand and apply key Flexbox properties: justify-content, align-items, flex-wrap, flex and more.
- Create responsive designs using Flexbox in real-world layouts including a webpage and a masonry grid.
- Use project-based learning to master layout techniques over 10 focused, hands-on challenges.
- Improve layout problem-solving and strengthen your ability to think in Flexbox for modern UI development.
Requirements
- Students should have a good understanding of how to setup and create basic HTML documents.
- Students should have a good understanding of generic CSS.
- A web browser is required. We will use Google Chrome and will occasionally make use of the Chrome Dev Tools.
- A coding editor is required. We will use VS Code with the Live Server plugin installed.
Description
Unlock the full power of CSS Flexbox in just 10 days - through hands on, project-based learning. This course guides you step by step as you build modern, professional-looking web layouts using Flexbox. Whether you are just starting with CSS Flexbox or looking to solidify your layout skills, you'll gain with practical experience and the confidence to tackle real-world UI challenges.
Below is an overview of the 10 daily projects you'll build in this course:
Day 1: Form CSS Flexbox Design
Explore how the flex shorthand property can be used to create a form where labels and input fields share equal column widths.
Day 2: Multi Colored Centered Boxes CSS Flexbox Design
Use properties like flex-wrap, justify-content, align-content and gap to build a multi-colored, centered box layout.
Day 3: Multi Colored Triangle Of Circles CSS Flexbox Design
Apply justify-content and align-items to create a triangle layout of colored circles with distinct rows.
Day 4: Symmetrical Bricks CSS Flexbox Design
Use flex-wrap, flex-basis, flex-direction, justify-content to design a structured, symmetrical bricks layout.
Day 5: Mobile CSS Flexbox Design
Construct a basic mobile layout using flex, flex-direction, align-items and justify-content.
Day 6: Keyboard CSS Flexbox Design
Build a keyboard-style layout using flex, flex-direction and justify-content.
Day 7: Multi Colored Steps CSS Flexbox Design
Design a multi-colored steps layout using flex-direction, align-items, align-self.
Day 8: Responsive Masonry Grid CSS Flexbox Design
Create a masonry-style grid layout using flex-direction, flex-wrap and flex-basis.
Day 9: Responsive Website CSS Flexbox Design
Develop a responsive web page using flex, flex-direction, align-items, align-self and order.
Day 10: Responsive Navigation Dropdown Menu CSS Flexbox Design
Build a responsive navigation dropdown menu using flex, flex-direction, justify-content and align-items
By the end of this course, you'll have a solid understanding of how CSS Flexbox works in real-world layouts. You'll be able to confidently use Flexbox to build a variety of web interfaces - from structured forms to responsive grids and navigation menus. Whether you're working on personal projects or professional development, you'll have hands-on Flexbox experience to bring your designs to life.
Who this course is for:
- Anyone looking to feel confident in designing webpages using the CSS Flexbox layout model
- Anyone looking to see how CSS Flexbox can be used given different design layouts
- Anyone that may have theoretical knowledge of CSS Flexbox and would now like to put this into practice by building various practical projects
Instructor
- 4.5 Instructor Rating
- 283 Reviews
- 18,986 Students
- 6 Courses
Hi I'm Joshan Grewal, a web developer with 5 years commercial experience. I also hold a Bachelor's degree in Computer Science to which I obtained First Class Honours. During my time at college and university I learnt many languages and frameworks such as HTML, CSS, Javascript, Java, PHP, Laravel and SQL. I've also had exposure to JQuery, Angular and Vue.
After my studies I then worked for a company for 4 years as a PHP developer which taught me a great deal on the best practices for writing efficient code. I've now got to a stage in my career where I want share the knowledge I've gained in website development to inspire others to take up a career within the tech industry. I find the easiest way to pick up a skill is to continuously practice it. I will aim to provide all the knowledge I've acquired over the years to the best of my ability to ensure you are fully equipped to start your journey within the tech industry.