FREELessons: 7Length: 47 minutes
- Overview
- Transcript
1.1 Welcome
Welcome to “Breaking the Grid With CSS Grid Layout”. In this course, you will learn how to use the CSS Grid Layout model to build a layered, broken-grid web design.
Useful links
- Create a Broken Grid Layout Using CSS Grid Tutorial on Envato Tuts+
1.Introduction1 lesson, 00:36
1 lesson, 00:36
1.1Welcome00:36
1.1
Welcome
00:36
2.Breaking the Grid5 lessons, 46:13
5 lessons, 46:13
2.1Grid Planning11:06
2.1
Grid Planning
11:06
2.2Setting Up the First Grid13:26
2.2
Setting Up the First Grid
13:26
2.3Laying Out the Elements07:59
2.3
Laying Out the Elements
07:59
2.4The Finished Layout08:46
2.4
The Finished Layout
08:46
2.5Responsive Considerations04:56
2.5
Responsive Considerations
04:56
3.Conclusion1 lesson, 00:30
1 lesson, 00:30
3.1Final Thoughts00:30
3.1
Final Thoughts
00:30
1.1 Welcome
Hello and welcome to breaking the grid with CSS Grid Layout. My name is Craig Campbell, and I will be your instructor for this course. As the CSS Grid Layout becomes more widely supported across major browsers, web designers are beginning to create some really unique designs that used to be much harder to implement. In this course, we are going to take a look at how to break out of traditional grid systems and create a complex layered broken grid design using HTML and CSS. So I wanna thank you for watching. And we'll get started in the next lesson.
Craig has been doodling on computers since the first time he opened Paintbrush in Windows 3.0 in 1990. Since then,
he has constantly sought new and exciting ways to make
beautiful things on computers.