CSS FLexbox and Grid Tutorial WIth Website Projects | John Smilga | Skillshare

CSS FLexbox and Grid Tutorial WIth Website Projects

John Smilga

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
96 Videos (9h 56m)
    • Flexbox Grid Course Intro

      1:13
    • CSS Flexbox Tutorial - Browser Support and Vendor Prefixes

      1:56
    • Flex 1 start

      8:19
    • Flex 2 flex direction

      3:12
    • Flex 3 flex row

      4:30
    • Flex 4 justify content

      5:43
    • Flex 5 align items

      5:33
    • Flex 6 centering example

      8:41
    • Flex 7 align content

      3:23
    • Flex 8 main axis cross axis

      4:22
    • Flex 9 order

      4:55
    • Flex 10 align self

      2:08
    • Flex 11 flex grow

      3:40
    • Flex 12 flex shrink

      2:55
    • Flex 13 flex basis,flex

      4:27
    • CSS Flexbox Tutorial - First Project

      10:07
    • CSS Flexbox Tutorial - Second Project

      14:35
    • CSS Flexbox Tutorial - Third Project

      6:59
    • CSS Flexbox Tutorial - Fourth Project

      13:02
    • CSS Grid Tutorial - Intro

      0:41
    • CSS Grid Tutorial - Browser Support and Vendor Prefixes

      1:18
    • CSS Grid Tutorial -template columns rows

      12:50
    • CSS Grid Tutorial - order in css grid

      7:15
    • CSS Grid Tutorial - naming grid lines

      5:43
    • CSS Grid Tutorial -grid gap

      3:20
    • CSS Grid Tutorial -order property

      1:42
    • CSS Grid Tutorial -grid template areas

      9:26
    • CSS Grid Tutorial -repeat and fr

      5:14
    • CSS Grid Tutorial - css grid mini-project

      17:18
    • CSS Grid Tutorial - minimax

      3:53
    • CSS Grid Tutorial -justify content

      4:31
    • CSS Grid Tutorial -align content

      4:23
    • CSS Grid Tutorial -working with grid items

      5:27
    • CSS Grid Tutorial - grid column and rows and span

      4:02
    • CSS Grid Tutorial - auto columns and rows

      4:17
    • CSS Grid Tutorial - Holy Grail Tutorial

      34:25
    • Brackets Extensions- intro

      3:43
    • Brackets Extensions- beatify

      2:44
    • Brackets Extensions- emmet

      5:22
    • Brackets Extensions- bracket icons

      1:03
    • Brackets Extensions- html skeleton

      1:41
    • Brackets Extensions- bootstrap skeleton

      2:09
    • Brackets Extensions- snippets by edc

      8:22
    • Brackets Extensions- indent guides

      4:25
    • Brackets Extensions- minimap

      1:52
    • CSS Flexbox and Grid Project - setup

      9:56
    • CSS Flexbox and Grid Project -banner html

      6:48
    • CSS Flexbox and Grid Project -banner nav css

      26:15
    • CSS Flexbox and Grid Project -header nav responsive

      11:35
    • CSS Flexbox and Grid Project - 4 banner css

      11:40
    • CSS Flexbox and Grid Project - skills html

      5:21
    • CSS Flexbox and Grid Project - 6 skills css

      7:07
    • CSS Flexbox and Grid Project - title styling

      4:09
    • CSS Flexbox and Grid Project -skills responsive

      8:30
    • CSS Flexbox and Grid Project -skills responsive grid

      2:56
    • CSS Flexbox and Grid Project - about html

      3:57
    • CSS Flexbox and Grid Project -about css

      5:46
    • CSS Flexbox and Grid Project -about responsive

      2:28
    • CSS Flexbox and Grid Project - about responsive grid

      1:34
    • CSS Flexbox and Grid Project - services html

      6:19
    • CSS Flexbox and Grid Project - services css

      6:00
    • CSS Flexbox and Grid Project -services responsive flexbox

      3:30
    • CSS Flexbox and Grid Project -services responsive grid

      1:57
    • CSS Flexbox and Grid Project - portfolio html

      5:46
    • CSS Flexbox and Grid Project - portfolio css

      16:55
    • CSS Flexbox and Grid Project -portfolio responsive flexbox

      2:38
    • CSS Flexbox and Grid Project -portfolio responsive grid

      1:42
    • CSS Flexbox and Grid Project -number html

      3:41
    • CSS Flexbox and Grid Project -numbers css

      2:40
    • CSS Flexbox and Grid Project - numbers responsive flexbox

      2:10
    • CSS Flexbox and Grid Project -numbers responsive grid

      1:47
    • CSS Flexbox and Grid Project -team html

      5:34
    • CSS Flexbox and Grid Project - team css

      7:57
    • CSS Flexbox and Grid Project - team responsive flexbox

      3:39
    • CSS Flexbox and Grid Project - team responsive grid

      1:49
    • CSS Flexbox and Grid Project - customer html

      2:41
    • CSS Flexbox and Grid Project - customer css

      3:05
    • CSS Flexbox and Grid Project - customer responsive flexbox

      2:40
    • CSS Flexbox and Grid Project -customers responsive grid

      1:15
    • CSS Flexbox and Grid Project -form html

      7:09
    • CSS Flexbox and Grid Project - form css

      5:43
    • CSS Flexbox and Grid Project -form responsive

      2:14
    • CSS Flexbox and Grid Project -contact responsive grid

      1:08
    • CSS Flexbox and Grid Website Agency Project - Intro

      4:01
    • CSS Flexbox and Grid Website Agency Project - setup

      6:22
    • CSS Flexbox and Grid Website Agency Project -navbar

      15:29
    • CSS Flexbox and Grid Website Agency Project - banner

      10:41
    • CSS Flexbox and Grid Website Agency Project -skills

      11:35
    • CSS Flexbox and Grid Website Agency Project -services html

      7:10
    • CSS Flexbox and Grid Website Agency Project - services

      20:41
    • CSS Flexbox and Grid Website Agency Project - projects html

      4:22
    • CSS Flexbox and Grid Website Agency Project -projects css

      12:20
    • CSS Flexbox and Grid Website Agency Project -filler

      7:38
    • CSS Flexbox and Grid Website Agency Project -posts html

      4:43
    • CSS Flexbox and Grid Website Agency Project -posts css

      10:14
    • CSS Flexbox and Grid Website Agency Project - footer

      6:11

About This Class

Two fundamental languages of the web are HTML, CSS and

Html is used for structure, CSS is used for styling.

Everyone who has ever worked with CSS knows  it's biggest flaw - no layout support.

CSS Flexbox and CSS Grid fixes that by providing simple yet powerful solutions.

Reasons to Use CSS Flexbox and CSS Grid

Number One - create more advanced layouts

Number Two - write less code

Number Three - avoid using CSS hacks

Number Four - forget CSS floats ever existed

Number Five (this should be number one) - have fun while doing it.

This step by step course is intended for everyone who wants to start working with CSS Flexbox and CSS Grid

A basic knowledge of HTML, CSS would be preferred. 

We will cover what is CSS Flexbox and CSS Grid, how to add CSS Flexbox and CSS Grid to our projects, how to start working with CSS Flexbox and CSS Grid and step by step we will cover CSS Flexbox and  CSS GRID syntax. After that we will dive deep into world of CSS Flexbox and CSS Grid by creating interesting website projects (small and big) because learning the syntax is only the first step - IF YOU WANT TO BECOME CSS FLEXBOX and CSS GRID NINJA - you need to know how to implement CSS Flexbox and CSS GRID in real world situations. 

6e6ed384

38

Students

--

Projects

  • --
  • Beginner
  • Intermediate
  • Advanced
  • All Levels
  • Beg/Int
  • Int/Adv

Level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

Report class