Posted almost 3 years ago. Visible to the public.

CSS basics

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 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 mixins.sass or helpers.sass serves 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 .sass syntax)

Resources

Exercises

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 float or position attributes.
  • Please don't use Bootstrap or another CSS framework. Stick with plain CSS (or Sass) for now.

Author of this card:

Avatar
Henning Koch
Last edit:
3 months ago
by Florian Leinsinger
Posted by Henning Koch to makandra Curriculum