Apply for the next session

Introduction

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?”

Under construction

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.

old page

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.

One way to center the body element

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

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

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

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

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

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.

Apply for the next session