Class 9 & Lab Session 3: CSS Design & Layout

• Make sure that you review the material and videos provided below
• Review instructions for Lab 3 CSS Layout
• Submit your work via "Assignments" --> "Lab 3 CSS Layout" before the due date.

Intro and Size

This short 6 min video (opens in a new tab) gives us the introduction to today's class and covers some of the basic CSS properties that help us dictate how to size images in a variety of different web browser windows.

While I will not go over width and height properties other than to say that such properties will be set for the image. I want to recap the idea of min- and max- prefixes that you can add to both width and height (e.g. min-width). Both properties typically respond to pixel (px), m-values (em*), percentage (%) and particular keywords values (i.e. auto).

As you resize the page, under certain conditions, the image will also resize, such as when you specify percentage properties. We can use the min and max properties to constrain (AKA clamp) the size of the image so that it does not become too large or too small.

The float property

This next 6 min section (opens in a new tab) covers the float property, Which is an often used property to help break elements out of the traditional flow of a webpage.

Floating particular elements allows us to sometimes better arrange those elements around others as well as to align particular items. We can also use floats in combination with elements that are sized via percentages to make webpages that look good in a variety of sizes. However, floating many elements on a single webpage can also fundamentally change how we perceive our webpage to be functioning, which would also make it more difficult for us to debug any future layout issues.

Clearing floats and additional layout issues

While having a float is sometimes nice, there are other times that we want to avoid having overlapping content from having used the float property. One way to do this is by clearning floats, which is explained further in this video (opens in a new tab).

This video also covers:

• The importance of setting widths when floating elements
• How multiple floats can cause some stacking of elements (though if we want columns, we'll want to look further at the section below on flexbox and grids)
• The overflow property which helps us determine what to do with an element when the content inside of it does not fit with respect to its current dimensions.
• A few other layout issues and how to use fix these either via sizing, additional clear properties or re-ordering elements

A practical self-check exercise

Here we will take a very practical video detour (opens in a new tab) from new information to do a self-check.

In this self-check, we conduct what I believe to be a very practical CSS exercise, which is to look at a particular web page layout (which sometimes is presented via an image or drawing) and then to use CSS to transform the HTML contents of that webpage to make it look like the image. The video shows me fumbling around with doing this exercise, which again, is probably as practical as you can get with CSS. Any front-end developer will have to talk to the client and they may end up asking for websites to look at certain way. It will be your job then in that scenario to come up with the appropriate CSS to make the website look the way the client wants.

Positioning

Now that we have talked about layout, we now get into the dubious world of positioning, with a hefty 15 min video (opens in a new tab) showing some of the different types of positioning.

Make sure that you understand the difference between absolute and fixed positioning:

You should also understand why using absolute positioning everywhere is not recommended and can lead to a lot of trouble. Also make sure you understand how relative positioning can serve as a better alternative to fixed since the elements still stay within the flow of the webpage.

Alignment and Visibility

The last video (opens in a new tab) for today's class will go over the different alignment options for inline elements.

Specifically, we'll walk through an example showing how the different alignment properties end up working to align text. Using alignment along with floats (and things like flexbox and grid) should be the preferred way to arrange a web page. Overuing absolute or fixed positioning to arrange where everything is on the screen will result in a brittle layout that will break easily when resized.

Hiding elements

When hiding elements there are two popular options:

1. display: none
2. visibility: hidden

While these properties applied to an HTML element will cause the element to disappear, visibility: hidden will keep the space that the element would have occupied still visible on the webpage. Conversely, display: none removes all traces of the element from ever having been there in the first place.

Flexbox and Grid

Flexbox and Grid are two newer features for how to design a layout system that were introduced into newer versions of CSS and have become the de-facto way of organizing elements. While most of the videos have explained how to be able to use float and that is still important to use, becoming more familiar with both flexbox and grid have become a more important part of expanding your CSS toolbox, especially when it comes to layout. In the interest of moving you into using official documentation, as that is what you will most likely need to use in the future, I'd like for you to review the two resources given by Mozilla:

• Flexbox Documentation (opens in a new tab)
• Grid Documentation (opens in a new tab)
• Multi-Column Layouts (opens in a new tab)

FYI: As you may start seeing a lot of information about flexbox, you might be thinking that it may be a great idea to combine flexbox with grids, as some libraries out there already do. Mozilla provides a great article on why we may want to reconsider combining the two elements (opens in a new tab)

References

• W3Schools (opens in a new tab)
• Mozilla's MDN Reference Manual (opens in a new tab)