CSS

Course overview

Learning outcomes

1. Foundation

   In this unit we will begin with an introduction to CSS, a brief overview and background to the topic. Then we will move over to the basic of the language; where is it written, how to write it, the syntax and rules of writing CSS and so on. We will see what are properties and how can they be used to do different things with HTML elements. Lastly we'll consider selectors and combinators in CSS together with detailed concepts like style inheritance and precedence.

   1. Introduction
      3 mins
   2. Get Started
      8 mins
   3. Syntax
      10 mins
   4. Basic Styling
      9 mins
   5. Selectors
      10 mins
   6. Combinators
      6 mins
   7. Style Precedence
      14 mins
   8. Style Inheritance
      8 mins
   9. Data Types
      2 mins
   10. Quiz
       17 questions

2. Color

   In this unit we will be looking over how to represent colors in computer, particularly in CSS. We will examine colornames, the hexadecimal notation, and other functions to denote color values. The concept of alpha filtering and opacity is also what you'll learn in this unit.

   1. Introduction
      2 mins
   2. Adding Color
      9 mins
   3. Alpha and Opacity
      4 mins

3. Text

   It would be truly wrong to say that websites are least comprised of text - if this was the case then what would be left in websites? In this chapter we will take a look at how to style text on web pages in different ways for instance making them small or large, thick or thin, italicised or underlined and so on.

   1. Introduction
      2 mins
   2. Setting a Font
      2 mins
   3. Font Styling
      6 mins
   4. Spacing
      13 mins
   5. Text Alignment
      3 mins
   6. Text Shadows
      3 mins
   7. Whitespacing
      4 mins
   8. Quiz
      16 questions

4. Backgrounds

   Being able to play with the backgrounds of elements is a good thing to have. In this unit we'll discover numerous concepts involved in backgrounds including background colors; background images, their styling; gradients and so on.

   1. Introduction
      2 mins
   2. Background Color
      6 mins
   3. Background Images
      3 mins
   4. Styling Images
      7 mins
   5. Quiz
      8 questions

5. Strokes

   You'll learn how to apply strokes to HTML elements using borders and outlines. We'll consider different sides of an element and how to play with borders on each of them. Also we'll consider how to give strokes to an element that don't somewhat count in its final dimensions using outlines.

   1. Borders
      9 mins
   2. Outlines
      2 mins
   3. Quiz
      7 questions

6. Spacing

   A design is meaningless if it doesn't employ the idea of spacing. In this unit you'll be introduced to the two concepts of spacing in CSS, namely margins (outer-spacing of an element) and padding (inner-spacing of an element).

   1. Margins
      9 mins
   2. Padding
      7 mins
   3. Quiz
      9 questions

7. Layout

   A web page's layout is an essential part to designing any website. This is the case with CSS too - it has literally got a ton full of concepts revolving around placement and positioning of elements that make up a web page's structure and layout.

   1. Display and Visibility
      8 mins
   2. Positioning
      15 mins
   3. Floating
      10 mins

8. Overflows

   Times can come when things go out of the bounds of an element - we call this an overflow. In this unit we will see what can cause an overflow, how to rectify it and that what is the idea of text wrapping in CSS.

   1. Overflow
      8 mins
   2. Wrapping
      4 mins
   3. Quiz
      6 questions

9. Dimensions

   How to increase the width or height of an element; how to set up bounds on these, such as a maximum height or a minimum width; how to make the CSS interpreter apply dimensions to a specific box; all these questions have their answers in this very unit.

   1. Basics
      5 mins
   2. Box Sizing
      3 mins
   3. Setting Limits
      3 mins
   4. Quiz
      12 questions

10. Transformations

    In this unit you'll learn how what are CSS tranformations and how they can be used to do endless jaw-dropping things on the web. Particularly we'll look over translating, rotating, skewing and scaling HTML elements using functions provided by CSS.

    1. Introduction
       2 mins
    2. Translation
       11 mins
    3. Rotation
       4 mins
    4. Skewing
       3 mins
    5. Scaling
       4 mins
    6. Quiz
       8 questions

11. 3D Transformations

    After learning about CSS 2D transforms, the next logical step is to get familiar with CSS 3D transforms. In this unit, we start by exploring the intricate concept of perspective before diving into unraveling the different functions used to perform 3D transformations, for e.g. translateZ(), rotateX(), rotateY(), and so on.

    1. Perspective
       28 mins
    2. Translation
       6 mins
    3. Rotation
       9 mins
    4. Transform Style
       20 mins
    5. Backface Visibility
       8 mins

12. Transitions

    Want to get an element smoothly go from one style to another? You need a CSS transition. In this unit we will discover the whats and how-tos for CSS transitions. We'll see how to time, delay and specificy properties for transitions, in addition to learning how timing-functions work to speed up or slow down transitions with respect to time.

    1. Introduction
       3 mins
    2. Basics
       6 mins
    3. Timing Functions
       6 mins

13. Animations

    In this unit you'll be introduced to the idea of CSS animations; how they differ from transitions and how can they be used to do even more of endless things as compared to transitions. We'll see what are keyframes in animations and how they serve to run an animation.

    1. Basics
       12 mins
    2. Keyframes
       10 mins
    3. Vendor Prefixes
       4 mins

FAQs