# Flexbox, Grid, & Bootstrap Canonical URL: ## Overview ### Create Responsive Webpage Layouts Easier Than Ever Before CSS Flexbox and CSS Grid are two powerful ways to lay out content on a webpage. Flexbox and Grid are newer CSS layout technologies aimed at making it easier to create responsive layouts that are optimized for any size screen. You’ll learn how both techniques are useful, and when to use each. You’ll also learn how to use Bootstrap (which uses Flexbox) to rapidly code up pages without having to write as much CSS. If you’ve been coding CSS but don’t know Flexbox and Grid yet, it’s time to learn them! They enable you to create layouts that were either impossible to build previously or empower you to build layouts faster and more easily than before. ## What you'll learn - CSS Flexbox to lay out and align webpage content - CSS Grid for an entirely new way to think about laying out entire webpages - Use Bootstrap (which is made with Flexbox) to build out layouts quickly - Learn how Flexbox and Grid change the way you approach webpage layout - Size, position, align, and reorder content using Flexbox and Grid ## Prerequisites Students should feel comfortable coding HTML and CSS equivalent to our [Web Development Level 2](/classes/web-development-level2) class. ## Curriculum ### Section 1 #### Intro to Flexbox - Display Flex - Alignment & Distribution on Main Axis & Cross Axis - Flex Direction (Row & Column) - How Auto Margins Are Useful #### Flexbox: Sizing & Alignment - Controlling Size with Flex-Grow, Flex-Shrink, & Flex-Basis - Aligning All vs. Specific Flex Items - Nesting Flexbox - Flex Shorthand #### Flexbox: Vertical Centering on a Full Screen Background - Creating a Full Screen Background - Using Viewport Sizing Units vh & vw - Vertically Aligning Content With Flexbox - Darkening the Background Image Via CSS #### Flexbox Wrapping - Flex-Wrap - Sizing Flex Items (Flex-Grow & Flex-Basis) ### Section 2 #### Flexbox: Reordering Content - Changing the Order of Flex Items - Positive vs. Negative Order Values #### Flexbox: Creating a Responsive Pricing Grid - Nesting Flexbox - Application of Flexbox Concepts to a Pricing Grid Layout #### Bootstrap: Getting Started - Using Bootstrap’s Grid System (Containers, Rows, & Columns) - Creating Columns & Adding Content - Adjusting Column Sizes Across Screen Sizes - Using Some of Bootstrap’s Components & Pre-Made Styles #### Bootstrap: More About Grids & Components - Nesting Grids - Adding a Navbar & Other Components - Showing & Hiding Elements at Specific Sizes ### Section 3 #### Bootstrap: Spacing & Adapting Layout Across Screen Sizes - Adding an Email Signup Form - Adjusting Spacing - Changing the Layout Across Screen Sizes #### Intro to Grid - Getting Start With Grid (Columns, Rows, & Gaps) - The Explicit vs. Implicit Grid - Firefox DevTools for Grid #### Grid: Sizing & Placing Items Within the Grid - Spanning Columns & Rows - Placing & Sizing Using Numbered Grid Lines - Naming Grid Lines #### Grid: Minmax, Auto-Fit, & Auto-Fill - Sizing with Minmax - Auto-Fit vs. Auto-Fill - Max-Content & Min-Content ### Section 4 #### Grid: Template Areas - Setting Up Grid Template Areas - Creating Empty Grid Areas - Using Automatically Created Named Lines - Multiple Elements Occupying the Same Grid Area - Viewing Grid Template Area Names In Firefox’s DevTools #### Grid: Alignment, Centering, & Reordering Content - Aligning Grid Items - Aligning Within the Grid Container - Aligning Individual Grid Items - Ordering Grid Items #### Grid: Laying out an Article - Using Grid to Lay Out an Article - Making Elements Go Full-Width - Adding Elements into the Side Columns #### Grid: A Responsive Image Gallery (Masonry Layout) - Creating the Grid Layout - Enlarging Some Photos to Create a Masonry Layout ## Schedule - Jul 9, 2026 – Jul 10, 2026 — NYC - Sep 17, 2026 – Sep 18, 2026 — NYC ## Instructors ### Dan Rodney — School Director, Instructor, & Senior Course Developer Dan Rodney has been a designer and web developer for over 20 years, creating coursework and leading innovative training initiatives at Noble Desktop. He teaches courses covering Figma, HTML & CSS, Adobe Photoshop, InDesign, Illustrator, and Power BI. Dan has also been at the forefront of integrating AI into design and business workflows, spearheading Noble Desktop’s latest AI course offerings. In addition to teaching and curriculum development, he writes custom scripts for InDesign (Make Book Jacket, Proper Fraction Pro, and more) and works with automation and AI-driven tools in his free time. You can find Dan on X (Twitter), LinkedIn, Facebook, and at danrodney.com. Learn more about [Dan Rodney's](/dan-rodney) background and expertise. ### Brian McClain — Program Director & Senior Instructor Brian McClain is an experienced instructor, curriculum developer, and web developer. Brian served as Director for a coding bootcamp before joining Noble Desktop in 2022, where he is now a lead instructor and course developer for both JavaScript and Python. He teaches Web Development, JavaScript, Python for Data Science, Machine Learning, and AI. Prior to Noble, he taught Python Data Science and Machine Learning as an Adjunct Professor of Computer Science at Westchester County College. Brian is also an active industry professional in the field of generative AI app development. His website and iOS app, Artmink, provides appraisals of art and antiques from user-uploaded images. ### Colin Jaffe — Instructor Colin Jaffe is a programmer, writer, and teacher with a passion for creative code, customizable computing environments, and simple puns. He loves teaching code, from the fundamentals of algorithmic thinking to the business logic and user flow of application building—he particularly enjoys teaching JavaScript, Python, API design, and front-end frameworks. Colin has taught code to a diverse group of students since learning to code himself, including young men of color at All-Star Code, elementary school kids at The Coding Space, and marginalized groups at Pursuit. Colin lives in Brooklyn with his wife, two kids, and many intricate board games. ### Greyson Frazier — Instructor Greyson Frazier is a Software Engineer with over a decade of experience building applications using JavaScript, React, Node.js, Angular, TypeScript, Java, AWS, Tailwind, and Next.js. He holds a Bachelor of Science in Computer Science from Rutgers University and previously worked as a software engineer at Capital One, where he developed scalable, enterprise-level applications. Greyson is an experienced instructor who has previously taught at Code Immersives and Coding Temple. He is passionate about creating hands-on, supportive learning environments and has developed curriculum designed to make complex technical concepts approachable and practical for students. Based in Bloomfield, NJ, Greyson stays current with evolving web development frameworks, particularly React and Next.js, and is dedicated to helping students develop the skills needed to succeed in today’s technology landscape. ### Chett Tiller — Instructor Chett Tiller is an experienced web developer who has brought his expertise with React, Node, and full-stack development to multiple companies over his career. After transitioning six years ago to an instructor, first at the Flatiron School and now at Noble Desktop, Chett has brought his passion for full-stack engineering to hundreds of students and guided them on their journeys from fledgling developers to their first job offers. When Chett isn't busy teaching students or writing curriculum, he builds online products for local volunteer organizations and dabbles in game development. ## FAQ ### Do I need to bring anything to the class? No. We provide computers (Mac or PC) with a coding editor installed. Choose your operating system at checkout. ## Pricing **Tuition:** $650