Posted about 6 years ago. Visible to the public.

CSS basics [3d]

Goals

Learn what CSS is and why we use it.
Understand the following concepts
- Ids and classes
- Styling basic attributes (color, font-size...)
- Style inheritance
- margin, padding and the box model
- float
- position: absolute and position: relative
- CSS specificity
- Box sizing: "content-box" vs. "border-box"
Learn how to use your browser's "inspect" feature and how you can see which CSS styles are applied to an element
Learn what a "reset stylesheet" is and why we need it.
- Understand the difference between a "normalize.css" and "reset.css".
- We usually use a "reset.css" and add some typographic defaults in a "theme.css" or similiar.
Learn what "CSS precompilers" are. Examples are "Sass" and "Less" (we use "Sass")
- Learn how Sass works
- Understand the differences between the SCSS and indented Sass syntaxes (we use the .sass syntax)
Learn about Mixins
- Look at a few projects and understand how a mixins.sass or helpers.sass helps with developing their stylesheets

Apply some basic styles to MovieDB.

Here are some hints for this exercise:

The UI does not need to be a master piece, but it should be tidy and clear.
If you have generated styles from Rails scaffolding, delete them all. They don't look nice and we do not use them.
Pay attention to the margins in your styles. Elements that belong together logically (e.g. two navigation sections) should be closer to each other than elements that have no relation.
Your MovieDB should have a navigation bar that lets the user switch between the different model screens (E.g. [Movies] [Actors] [Roles]). To make things interesting, make the navigation bar a sidebar that sits left of the main page content.
Please don't use Bootstrap or another CSS framework. Stick with plain CSS (or Sass) for now.