web layout

The foundation of building website layouts.

THE BOX MODEL

FLOATS & POSITIONING

RESPONSIVE DESIGN

Responsive web design is when a site changes layout to respond to different screens and devices. A website should look and behave differently when viewed on a mobile phone and when viewed on a 4K desktop monitor.

Mobile first design is simply the idea that you start building your layout for phones and small screens first and then add extra zing for bigger screens. This idea is also called content-first design.

MEDIA QUERIES

Media Queries are used to detect screen widths and change page layouts accordingly.

FLEXBOX

I need to put resources here.

CSS GRID

CSS Grid is the newest and bestest way to create web layout structure. It is a powerful system, but a bit complex when you first get started. Since it is such a new tool, there are plenty of people writing about it as they try to understand the potential. That means there are plenty of resources available to help.

EXTRA CSS GRID RESOURCES

Here are a few places and authors that are digging deep into CSS Grid

SOME TOOLS TO HELP WITH CSS GRID

Here are a few tools to help build your layout

CREATING NAVIGATION SETUPS

RESET AND NORMALIZE

Streamline the code so your page displays consistently across different browsers.


As always, if you have additional resources or find a broken link, please contact me.

mister chad
mister chad
teacher . artist . human

I make stuff and show people how to make their own stuff.

Related