Intro to CSS Grid: Build Your Own Online Portfolio

Luke Fabish, Let's get coding!!

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
9 Lessons (46m)
    • 1. Introduction to the class

      1:12
    • 2. Who this class is for

      0:44
    • 3. What we'll cover in this class

      2:06
    • 4. So what IS CSS Grid?

      3:47
    • 5. How to define CSS Grid columns

      12:46
    • 6. How to create a layout with rows and columns

      15:08
    • 7. How to position content inside grid columns.

      4:07
    • 8. How to make a responsive version of the CSS Grid project.

      5:07
    • 9. Wrapping up our Intro to CSS Grid

      0:48

Project Description

Project - Create an online portfolio page using CSS Grid:

e2dc8590

Downloads - Skeleton HTML file, non-CSS Grid related styles, sample images for portfolio project.

Steps:

  1. Define a basic layout for the portfolio project using CSS Grid.
  2. Position content within the layout.
  3. Make the portfolio project responsive so that it displays correctly on desktop and mobile devices.
  4. Share a screenshot of your awesome portfolio in the project gallery!

Student Projects