Posted over 2 years ago. Visible to the public.
- Learn what CSS is and why we use it.
- Understand the following concepts
- Ids and classes
- Styling basic attributes (
- Style inheritance
paddingand the box model
- 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 Compass is
- Look at a few projects and see what parts of Compass we use and what parts we don't
- Look at a few projects that don't use Compass and understand how a
helpers.sassserves a similar purpose
- 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
- A Beginner's Guide to HTML & CSS
- Specifics on CSS Specificity
- The 30 CSS Selectors you Must Memorize
- cssreference.io is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.
- Sass Basics
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 difference 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. Implement this side-by-side layout with either
- Please don't use Bootstrap or another CSS framework. Stick with plain CSS (or Sass) for now.