The foundation of building website layouts.
THE BOX MODEL
FLOATS & POSITIONING
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 are used to detect screen widths and change page layouts accordingly.
I need to put resources here.
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
rachel andrews is the recognized expert
jenn simmons is also very good at sharing ideas
css layout news has great information and a good newsletter
my website knowledge base collection is full of good stuff, but it isn't overly organized
SOME TOOLS TO HELP WITH CSS GRID
Here are a few tools to help build your layout
cssgr.id is a great way to build your layout. it even allows you to span across multiple cells
layoutit! is an interactive tool to build your grid
firefox grid inspector tool lets you play with the grid in your browser
CREATING NAVIGATION SETUPS
RESET AND NORMALIZE
Streamline the code so your page displays consistently across different browsers.
the best css reset stylesheets - different options and logic for why to choose which reset
normalize.css - a more modern approach
sanitize.css - a modular approach that works with normalize
As always, if you have additional resources or find a broken link, please contact me.