Posted about 6 years ago. Visible to the public.

CSS basics [3d]


  • 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.

Owner of this card:

Henning Koch
Last edit:
4 months ago
by Judith Roth
Posted by Henning Koch to makandra Curriculum
This website uses short-lived cookies to improve usability.
Accept or learn more