Apply for the June 7th session

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.

“Setup?”

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.

(another version with borders)

More HTML cheatsheet stuff

Maybe this one – where you can interactively highlight the elements will do the trick! Which one works for you?

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.

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.

Squishy images

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.

Box-sizing

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.

Squishy headings

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!

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?

Apply for the June 7th session