You’ve got your CSS reset…
BUT – you also need to get these things set up in order to make layout easier on yourself.
What should we call it? It’s not really a “reset” – we are setting up.
We’re moving this page over !
Take some time
You play with the included CodePen embeds. But don’t forget that you can click “Edit on CodePen” in the upper right-hand corner. Really dig into these – one at a time – until you understand them deeply. We can test you and give you mini-challenges.
Some elements are display: block and some are display: inline
You absolutely have to know the differences — at the very start!
They each have their own set of unique properties that aren’t interchangeable. For example, you can’t put a margin on an inline element. Many developers rush and skip this. Then they promptly decide to hate CSS for life / and well, it’s silly.
Display type visualization
Try it out. Do these make sense? Can you describe which elements are which and why?
You can also resize the frame. (although, it’s a bit janky)
Here’s a version with borders in cases that helps and another version with background-colors.
One way to center the body element
It seemed to be the standard to set the body element to be 960px and to make it centered on the page. In this case, we’ve set it to
max-width: 500px so it’s small enough to see here.
Centering content in each section
That body centering is great… but – it does what it says and centers EVERYTHING. That’s too heavy-handed. By choosing what to do based on the various sections of the website – you’ll have more control.
Images were just fine when they were small and on big screens. But – that time is over. We need them to be more flexible! and if we don’t tell them to be… then no one else will.
The natural layout of the boxes isn’t ideal, so – you can set it to be better.
“Breakpoints” with the @media rule
This little piece of magic is what made responsive design possible. It allows you to create sets of rules that only apply at certain viewport sizes. Here is a very simple example, but you can nest any CSS rules inside the @media query.
Learn "Responsive" layouts - right away
Start off on the right foot
You could just use @media queries and bump up the size at various steps. This clamp() function is very new. Don’t go overboard with it, meaning: don’t put it on your body text. It’s really useful for when you need your headings or other text to change size with the browser – but that’s not all that often!
A (tiny) intro to flexbox layout
Flex-box is how we arrange/position MOST things now. We’ll go over the other ways, but this one is more useful overall – so, naturally – we teach it first!
Grids of items
We WILL talk a lot about the new CSS GRID layout system… but for now, here’s a snippet for making the core/basic ‘grid’ of items. Just copy and paste it!
We think that flexbox is a lot more important than these now, but you certainly should know about these too. We put them in order of importance.
Does this stuff make sense?
If you aren’t a student, then you wouldn’t have the background of the first 6 weeks of the course! These might feel out of context. We’ve tried to put them in order of importance! What do you think?
Want to talk about it?