Full Stack Web Development for Beginners- Part 2: Flexbox, CSS Grid and Bootstrap 4

Chris Dixon, Web Developer & Online Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
34 Videos (2h 60m)
    • Welcome to the course!

      1:54
    • What is Flexbox?

      3:26
    • Flex direction

      4:42
    • Flex wrap and justify content

      5:16
    • Align items

      5:21
    • Align content

      4:26
    • Controlling child items: order

      2:57
    • Controlling child items: grow and shrink

      6:15
    • Controlling child items: alignment

      2:37
    • Time to practice: Integrate Flexbox into Tech Store

      1:01
    • What is the CSS Grid?

      0:56
    • First look at the CSS grid

      7:16
    • Grid gaps

      2:28
    • Track repeating and the fr unit

      3:42
    • Min and max track sizes

      2:06
    • Grid line numbers

      7:06
    • Grid line names

      5:53
    • Grid template areas

      7:11
    • Nesting grids

      2:32
    • Alignment

      5:47
    • Time to practice: Song Finder layout

      6:55
    • What is Bootstrap?

      3:33
    • What we will be building

      2:29
    • Creating a Bootstrap project

      7:01
    • The Bootstrap grid

      8:27
    • Adding images and text

      11:35
    • Bootstrap navbars

      9:54
    • Bootstrap carousels

      6:33
    • Adding controls to the carousel

      4:34
    • Bootstrap modals

      8:32
    • Bootstrap forms

      13:52
    • Bootstrap utilities

      12:12
    • Thank you

      0:52
    • Follow me on Skillshare!

      0:23

About This Class

Welcome to Full Stack Web Development for Beginners!

This course is designed to teach beginners everything they need to know to build full stack websites and applications!

This is part two of this huge course, teaching you all about the CSS Flexbox, CSS Grid and the Bootstrap 4 framework.

We begin with the CSS Flexbox, where you will learn all about:

  • What the CSS Flexbox is
  • Flex direction
  • Flex wrap and justify content
  • Aligning items
  • Aligning content
  • Controlling the order of child items
  • Child items grow and shrink values

We then move onto the CSS Grid, learning about:

  • What is the CSS Grid
  • The grid display type
  • Grid gaps
  • Repeating tracks
  • The fr unit
  • Min and max track sizes
  • Grid line numbers
  • Grid line names
  • Template areas
  • Nesting grids
  • Alignment

After this we learn about the responsive Bootstrap 4 framework:

You will learn about:

  • What Bootstrap is and what it can do
  • Setting up Bootstrap projects
  • Whats include in the CSS files
  • The grid system
  • Adding images and text
  • Responsive navbars
  • Carousels
  • Using carousel controls and captions
  • Modals
  • Forms
  • Bootstrap utility classes

All while building a gourmet burgers project.

This second part of the course covers all of the layout fundamentals you need to go on to building full stack websites.

So, enjoy this class and check out the rest of the parts as they become available!

72

Students

--

Projects

Chris Dixon

Web Developer & Online Teacher

Hello, My name is Chris and I am a web developer and online teacher. I am passionate about what I do and about teaching others. I have started various online and offline businesses.

Whatever your reason for learning to build websites you have made an excellent career choice.

My personal motivation was to become my own boss and have more freedom and flexibility in my life. I also enjoy the technical challenge it provides and the way it constantly evolves. I built my first website...

See full profile