CSS for beginners (in English)

Modern browsers have terrific support for all commonly used CSS features, which means that it is no longer necessary to teach the types of CSS tricks and hacks that had to be used in the past to make pages look the same across browsers. This CSS course provides a thorough introduction to CSS as it is used in web design today. Each student will receive a comprehensive set of materials, including course notes and all the class examples.

Target audience: This course is for students new to CSS features.

HTML experience is required for this CSS class.

1. Crash Course in CSS
   1. Benefits of Cascading Style Sheets
   2. CSS Rules
      1. CSS Comments
   3. Selectors
      1. Type Selectors
      2. Class Selectors
      3. ID Selectors
      4. Attribute Selectors
      5. The Universal Selector
      6. Grouping
   4. Combinators
      1. Descendant Combinators
      2. Child Combinators
      3. General Sibling Combinators
      4. Adjacent Sibling Combinators
   5. Precedence of Selectors
   6. How Browsers Style Pages
   7. CSS Resets
   8. CSS Normalizers
   9. External Stylesheets, Embedded Stylesheets, and Inline Styles
      1. External Stylesheets
      2. Embedded Stylesheets
      3. Inline Styles
   10. Exercise: Creating an External Stylesheet
   11. Exercise: Creating an Embedded Stylesheet
   12. Exercise: Adding Inline Styles
   13. <div> and <span>
   14. Exercise: Divs and Spans
   15. Media Types
   16. Units of Measurement
       1. Absolute vs. Relative Units
       2. Pixels
       3. Ems and Rems
       4. Percentages
       5. Other Units
   17. Inheritance
       1. The inherit Value
2. CSS Fonts
   1. font-family
      1. Specifying by Font Name
      2. Specifying Font by Category
   2. @font-face
      1. Getting Fonts
   3. font-size
      1. Relative font-size Terms
      2. Best Practices
   4. font-style
   5. font-variant
   6. font-weight
   7. line-height
   8. font
   9. Exercise: Styling Fonts
3. Color and Opacity
   1. About Color and Opacity
   2. Color and Opacity Values
      1. Color Keywords
      2. RGB Hexadecimal Notation
      3. RGB Functional Notation
      4. HSL Functional Notation
   3. color
   4. opacity
   5. Exercise: Adding Color and Opacity to Text
4. CSS Text
   1. letter-spacing
   2. text-align
   3. text-decoration
   4. text-indent
   5. text-shadow
   6. text-transform
   7. white-space
   8. word-break
   9. word-spacing
   10. Exercise: Text Properties
5. Borders, Margins, and Padding
   1. The CSS Basic Box Model
   2. Introduction to using Google Chrome DevTools with CSS
   3. Padding
   4. Margin
   5. Border
      1. border-width
      2. border-style
      3. border-color
      4. border-radius
   6. box-sizing
   7. box-shadow
   8. Exercise: Borders, Margin, and Padding
6. Backgrounds
   1. background-color
   2. background-image
   3. background-repeat
   4. overflow
   5. background-attachment
   6. background-position
      1. Keywords
      2. Coordinates
   7. Creating a “hint” Class
   8. background-size
   9. background-origin
   10. background-clip
   11. Modifying the “hint” Class
   12. background
   13. Exercise: Backgrounds
7. Display and Visibility
   1. display
   2. visibility
8. Pseudo-classes and Pseudo-elements
   1. Pseudo-classes
   2. Styling Links with Pseudo-classes
   3. Styling Tables and Articles with Pseudo-classes
      1. :nth-child()
   4. Pseudo-elements
      1. content
   5. Using Pseudo-elements
9. Styling Tables with CSS
   1. A Review of HTML table Elements and Attributes
      1. Spanning Columns and Rows
   2. CSS Properties and Styling Tables
      1. table-layout
      2. border-collapse
   3. Exercise: Styling a Table Exercise
10. Positioning
    1. Normal Flow
    2. position
       1. Positioning with top, bottom, left, and right
    3. z-index
    4. float and clear
       1. float
       2. clear
       3. float, clear, and ::after
    5. Exercise: Positioning
11. Transforms and Transitions
    1. transition
       1. transition-property
       2. transition-duration
       3. transition-timing-function
       4. transition-delay
       5. transition
    2. transform
       1. Rotation
       2. Scale
       3. Skew
       4. Translate
    3. Exercise: Transforms and Transitions
12. Layouts
    1. Introduction to Flexible Box Layout Module
       1. Some Flexbox Properties
    2. Introduction to Grid Layout
       1. Some Grid Properties
    3. Multi-column Layout
    4. Exercise: Layouts
13. CSS Lists as Hierarchical Navigation
    1. Exercise: Basic Vertical Navigation Bars
    2. Dynamic Drop-down and Fly-out Navigation Bars
    3. Exercise: Basic Drop-down Menu
    4. Exercise: Basic Fly-out Menu
    5. Exercise: CSS List Menus
14. Media Queries
    1. What Are Media Queries?
       1. Breakpoints
       2. Media Types
       3. Syntax
    2. Font Awesome
       1. Finding and Using Icons
    3. Exercise: Breakpoints
    4. Exercise: Targeting Print

After completing this course the student:

• knows the benefits of CSS;
• can avoid using deprecated HTML tags and attributes;
• knows CSS syntax;
• can use <div> and <span> tags appropriately;
• knows all the common CSS properties and their values;
• can use CSS resets and normalizers;
• knows best practices for choosing units of measurement;
• knows how to select CSS fonts and to download and use new fonts;
• knows about color and opacity and to create backgrounds;
• can work with borders, margin, and padding (the box model);
• can style tables with CSS;
• can use positioning;
• can use transforms and transitions rotate, scale, and skew elements and create animations;
• knows about flex, grid, and multi-column layouts;
• knows how to style lists and create drop-down and fly-out navigation menus;
• can use media queries to style pages for different device sizes and media.

Koolituse lõpetamise tingimused: koolituse lõppedes väljastab koolituskeskus koolituse läbinule tunnistuse või tõendi. Koolituse lõppedes väljastatakse tunnistus, kui on täidetud õppekava mahust vähemalt 80% igast teemast ja teised koolituskavast tulenevad nõuded (nt eksam, arvestus, praktiline töö jms). Tõend täienduskoolituses osalemise või selle läbimise kohta väljastatakse isikule juhul, kui koolituse käigus ei hinnatud õpiväljundite saavutatust või kui isik ei saavutanud kõiki õppekava lõpetamiseks nõutud õpiväljundeid.

Küsin koolituse kohta lisainfot