Join Morten Rand-Hendriksen for an in-depth discussion in this video How to use the exercise files, part of Advanced Responsive Layouts with CSS Flexbox.
- For this course, I've created a series of exercise files that allow you to follow along as we experiment with advanced Flexbox layouts. I've also made the files so that you can use the code that you find in them for your own projects later. To be able to follow along in the course, it's important that you have the exercise files, either on your desktop, or somewhere else on your computer, or that you have access to the coding playground on lynda.com. I placed the exercise files here on my desktop. When I open them, you'll see they are split into chapters. So each chapter has its own folder.
And we also have two additional folders. One called final-clean and one called final-prefixed. The final-clean is the final result of the entire project, but it's only marked up for modern browsers. The final-prefixed version is the exact same code, except here I've used an autoprefixer to prefix all the Flexbox code, so that it's backwards compatible to older browsers. I'll talk about the prefixing a little later on, but it's a good idea once you're done with the course to compare the final-clean version with the final-prefixed version, and see what each looks like so you understand what happens once you start prefixing your CSS for Flexbox.
Throughout the course, you'll be using a code editor and I'm using Brackets. I've gone and opened the exercise files folder in Brackets, so that I have access to all the different files. And here you see, I can now open Chapter_02 and movie_02, and then look at any of the items within here, and edit them. When I move on to the next movie, I'll have the finalized version of what I did in the previous movie, and I'll be working from that point onward. So that means even if you don't follow along in one movie, you won't lose track of where you are, because you'll always start at the same place as me in each movie.
There's one more thing I want to draw your attention to, and that is the structure of the content within the exercise files. You'll notice that for each of the exercise file, we have at least one html file. That is the markup that we're gonna be working with. We also have one master stylesheet. So here you'll see, for example, we have the master stylesheet for the Card layout. The master stylesheet in turn, calls in a series of smaller stylesheets from the CSS folder. Now the reason why I've split it out like this, is I want to provide you with components so you can slot in only the components you need.
Some of the components are necessary for all the pages. Reset, accessibility, layout, topography, and masthead. But the other components are dependent on what you're placing on your page. For example, in the case of menus, you'll see that we have one base component that applies to all the menus, and then we have an individual component for each of the different menus we're going to build. That way, when you're done with a project and you want to build, say a mixed menu, you can simply go and grab just the style sheets for that mixed menu and place them into your own project.
This is an approach you normally see when people use Less or Sass to build their CSS, but for demonstration purposes, it also works well because I can now provide you with components. So anytime you see me go into a specific folder, or open a specific file, just do the same in your code editor, and you'll be able to follow along, step by step, as we walk through these advanced layouts with Flexbox.
This course shows how to use flexible boxes to create advanced responsive layouts. Morten Rand-Hendriksen takes the viewer on a tour of Flexbox and provides actionable code snippets that can be implemented safely in almost any website. He puts it all together in a holy grail site complete with card-based layout, mixed content menus, and interactive components that provide visitors with choices about what they see.
- Creating Flexbox-powered menus
- Building a responsive card layout
- Marking up and styling the holy grail layout
- Changing displays
- Showing and hiding the sidebar
- Animating content