From the course: CSS Layouts: From Float to Flexbox and Grid
Unlock the full course today
Join today to access over 22,500 courses taught by industry experts or purchase this course individually.
Setting up your project - CSS Tutorial
From the course: CSS Layouts: From Float to Flexbox and Grid
Setting up your project
- [Instructor] In this course we're going to build the same layout using float, Flexbox and Grid so we can compare the different methods. In the exercise files there's a start folder containing the HTML file and three CSS files. We're going to use the same HTML and just swap out the CSS file for each exercise. If you don't have access to the exercise files, you can also download them from a GitHub repo. Just select the Clone or download button and Download Zip. I like having backups, so I'm going to make a copy of the whole start folder. And then save the copy to my desktop, and rename the folder to CSS-layouts. These will be the files that I'll be working from for the remainder of these exercises. These other folders in the exercise files are named by chapter and video, and contain the final version of each exercise for that chapter. Let's look at the index.html file in the browser, and go over what we're going to…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
Inline and block elements1m 53s
-
The box model properties3m 32s
-
The display property5m
-
The box model and layouts3m 17s
-
The float property3m 19s
-
Clearing floats5m 46s
-
Setting up your project3m 8s
-
Exercise: Build a layout with float9m 54s
-
Position: Relative and absolute5m 15s
-
Position: Fixed, sticky, and static4m 31s
-
-
-
-