Introduction to CSS (e-learning)

Course duration: 3 days (24 academic hours).

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

Prerequisites: HTML experience is required for this CSS class.

To complete the training and get a certification you need to pass the quiz 100%.

 

Course description:

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.

Lesson 1: Crash Course in CSS

  • Understand the benefits of Cascading Style Sheets.
  • Use styles to redefine how elements are formatted.
  • Understand and use different CSS selectors.
  • Understand and use CSS combinators to narrow CSS selections.
  • Understand the CSS Cascade.
  • Understand and use CSS Resets.
  • Understand and use CSS Normalizers.
  • Use external stylesheets, embedded stylesheets, and inline styles.
  • Use <div> and <span> elements.
  • Understand different media types.
  • Understand and use the viewport meta tag.
  • Use the different units of measurement available in CSS.
  • Understand how browsers style pages.
  • Understand inheritance.
  • Test

Lesson 2: CSS Fonts

  • Work with the font-family property.
  • Use @font-face.
  • Work with the font-size property.
  • Work with the font-style property.
  • Work with the font-variant property.
  • Work with the font-weight property.
  • Work with the line-height property.
  • Understand shorthand properties.
  • Work with the font property.
  • Test

Lesson 3: Color and Opacity

  • Understand color and opacity.
  • Work with the color property.
  • Work with the opacity property.
  • Test

Lesson 4: CSS Text

  • Work with the letter-spacing property.
  • Work with the text-align property.
  • Work with the text-decoration property.
  • Work with the text-indent property.
  • Work with the text-shadow property.
  • Work with the text-transform property.
  • Work with the white-space property.
  • Work with the word-break property.
  • Work with the word-spacing property.
  • Test

Lesson 5: Borders, Margins, and Padding

  • Understand and use the CSS basic box model.
  • Understand and work with the padding property.
  • Understand and work with the margin property.
  • Understand and use border properties.
  • Understand and work with the box-sizing property.
  • Understand and work with the box-shadow property.
  • Test

Lesson 6: Backgrounds

  • Work with the background-color property.
  • Work with the background-image property.
  • Work with the background-repeat property.
  • Work with the overflow property.
  • Work with the background-attachment property.
  • Work with the background-position property.
  • Work with the background-size property.
  • Work with the background-origin property.
  • Work with the background-clip property.
  • Work with the background property.
  • Test

Lesson 7: Display and Visibility

  • Work with the display property.
  • Work with the visibility property.
  • Test

Lesson 8: Pseudo-classes and Pseudo-elements

  • Understand and use pseudo-classes.
  • Understand and use pseudo-elements.
  • Test

Lesson 9: Styling Tables with CSS

  • Use CSS to format tables.
  • Test

Lesson 10: Positioning

  • Understand Normal Flow.
  • Work with the position, top, bottom, left, and right properties.
  • Work with the z-index property.
  • Work with the float and clear properties.
  • Lesson 11: Transforms and Transitions
  • Test

Lesson 11: Transforms and Transitions

  • Use transition to animate changes to an element’s style.
  • Use transform to move, scale, rotate, and skew elements.
  • Test

Lesson 12: Layouts

  • Understand the basics of CSS Flexbox Layout.
  • Understand the basics of CSS Grid Layout.
  • Understand the basics of CSS Multi-column Layout.
  • Test

Lesson 13: CSS Lists as Hierarchical Navigation

  • Turn CSS lists into horizontal and vertical navigation bars.
  • Use nested lists for multi-level navigation, creating dynamic drop-down and fly-out menus.
  • Test

Lesson 14: Media Queries

  • Understand what media queries are.
  • Use Font Awesome.
  • Understand and use media queries to create breakpoints.
  • Understand and use media queries to target media types.
  • Test

Purpose of the course

The main purpose of this e-course is to give students a good understanding of CSS as it is used in web design today.

Learning outcome

After completing this course, students will:

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

 

Training takes place in an e-learning environment, which can be accessed using personal username and password. Username and password will be sent to you after the payment or by special agreement. 

Cost

390€ +VAT
Register

Trainer

Related Events