Flexbox, Grid & Bootstrap

Pre-Requisites: Students should feel comfortable coding HTML, CSS, and JavaScript.

5-stars

Key Features

  • Online live classroom available
  • Quality learning materials
  • Small Class Sizes
  • State of the Art Facility
  • Free Retakes
  • Instructor Led Classroom training
  • Certified Industry Experienced Teachers
  • 100% Job Placement assistance

You’ll learn how to use flexbox and grid to layout, align, and reorder webpage content, as well as make it adapt to different size screens. 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.

  • HTML5 & CSS3
  • JavaScript Front-End
  • Adobe Photoshop
  • Flexbox, Grid & Bootstrap
  • Git (used to set up tracking) & Coding Tips
  • Responsive HTML Email

This certificate course is for anyone who wants to design and code websites/emails, as well as develop a website portfolio of their work. It’s a good fit for:

  • Those who want to start a career as a web designer/developer or do client/freelance work.
  • Art directors, marketing professionals, or anyone who wants to know how design and code work together to make websites and emails.
  • Aspiring front-end web developers who want to design as well as code.
  • Aspiring web designers who want to enhance their skills and develop a portfolio website.

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 they empower you to build layouts faster and more easily than before.

Flexbox and grid to layout, align, and reorder webpage content, as well as make it adapt to different size screens. 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.

Section 1

  • Intro to Flexbox
  • Flexbox: Sizing & Alignment
  • Flexbox: Vertical Centering on a Full Screen Background
  • Flexbox: Wrapping

Section 2

  • Flexbox: Reordering Content
  • Flexbox: Creating a Responsive Pricing Grid
  • Bootstrap: Getting Started
  • Bootstrap: More About Grids & Components

Section 3

  • Bootstrap: Spacing & Adapting Layout Across Screen Sizes
  • Intro to Grid
  • Grid: Sizing & Placing Items Within the Grid
  • Grid: Minmax, Auto-Fit & Auto-Fill

Section 4

  • Grid: Template Areas
  • Grid: Alignment, Centering & Reordering Content
  • Grid: Laying out an Article
  • Grid: A Responsive Image Gallery (Masonry Layout)

Is there mandatory work outside of the classroom?

Students are encouraged to practice the skills learned in class and develop a portfolio of work.

Does this course require any prior knowledge or experience?

Students should feel comfortable coding HTML, CSS and JavaScript.

Course Number : FLEX-0-0100

Duration : 16 hours

1 Step 1

Request Information!

Who you are?

By submitting this form, you are giving your express written consent for Global Information Technology to contact you regarding our programs and services using email, telephone or text.  This consent is not required to purchase goods/services, and you may always call us directly at 1-866-464-4846.

reCaptcha v3
keyboard_arrow_leftPrevious
Nextkeyboard_arrow_right
FormCraft - WordPress form builder