Modernizing CSS Skills Training

Modernizing Your CSS Skills Eğitimi

About the Training

The Modernizing CSS Skills training focuses on understanding how CSS can be updated and enhanced with evolving technologies. This course helps bring your existing CSS skills to a modern level by comparing old and new CSS technologies.

The training will cover basic CSS concepts and move on to more advanced topics. Supported by examples and exercises, you will learn how CSS is applied and used for modern web development.

Throughout the course, you will reinforce the techniques and concepts learned through practical exercises and enhance the professional look of your web projects. By the end of the training, you will have a deeper understanding of how CSS can be effectively used and applied, giving your web pages a more modern and powerful appearance. The course includes:

  • Presentation and explanation of theoretical topics
  • Sample projects and applications
  • Practical assignments and projects
  • In-class work and discussions
  • Personal and group consultations

The Modernizing CSS Skills training is a comprehensive program designed to improve your design abilities and development skills by teaching you current CSS techniques and concepts. You will use CSS more efficiently, gaining practical experience to make your web projects more professional.

In the first part of the course, you will review basic CSS principles and learn modern layout techniques like CSS Gridand Flexbox. Using these techniques, you’ll create more flexible and responsive web designs. You’ll also work with CSS preprocessors (Sass, Less) and CSS frameworks (Bootstrap, Foundation) to streamline your workflow.

Additionally, you will advance your skills in creating responsive designs using modern CSS methods and techniques. The Modernizing CSS Skills training updates your CSS abilities, allowing you to achieve a professional look in your web design and development projects. Upon completion, you will use CSS more efficiently and modernly, enhancing the user experience and making your web projects more impactful.

What Will You Learn?

During the Modernizing Your CSS Skills training, you will learn the following topics:
  • Modern CSS techniques and concepts
  • Optimizing CSS for improved performance
  • The relationship between CSS and accessibility (A11Y)
  • Common CSS mistakes and how to avoid them
  • Current and future trends in CSS
  • Best practices and practical tips for CSS
  • Responsive web design
  • Modern layout techniques like CSS Grid and Flexbox
  • Using CSS preprocessors (Sass, Less, Stylus)
  • CSS animations and transitions
Throughout the training, you will reinforce the techniques and concepts learned through practical assignments, gaining hands-on experience. By the end of the course, you will have the skills to use CSS more efficiently and modernly, giving your web projects a more professional look.

Prerequisites

To participate in the Modernizing Your CSS Skills training, the following prerequisites must be met:
  • Basic knowledge of HTML: The training explains how CSS is used with HTML, so understanding the basic concepts of HTML is essential.
  • Basic knowledge of CSS: The training aims to teach modern CSS techniques and concepts, but you need to understand the basic principles and usage of CSS.
  • Interest in web design and development: The training focuses on how CSS can be used to enhance web design using modern techniques.
  • Access to a computer and the Internet: The training will be delivered online, and practical assignments will need to be completed, so access to a computer and the Internet is necessary.

Who Should Attend?

The Modernizing Your CSS Skills training is suitable for the following individuals:
  • Professionals or students interested in web design and development who want to learn modern CSS techniques.
  • Web developers with basic HTML and CSS knowledge aiming to use these techniques more efficiently and modernly.
  • Graphic designers who want to create more professional and attractive designs for web projects using CSS.
  • Web designers interested in learning modern CSS techniques like responsive web design, CSS animations, and transitions.
Anyone who completes this training will be equipped to use CSS more effectively and modernly, enhancing the professional appearance of their web projects.

Outline

Power of CSS
  • The Power of CSS
  • CSS Level 3 and CSS Level 4
Selectors
  • The target Pseudo-Class
  • Using CSS Target
  • UI Element States Pseudo-Classes
  • Using CSS Attribute-State Pseudo-Classes
  • Negation Pseudo-Class
  • Structural Pseudo-Classes
  • Using the Structural Attribute Pseudo-Classes
  • Using nth-of-type Pseudo-Class
  • Pseudo-Elements
Fonts and Text Effects
  • Fonts and Text Effects
  • Fonts on the Web
  • Font Services
  • Using Font Services
  • The @font-face Rule
  • Using @font-face
  • Text Shadow
  • Word Wrapping
  • Text Shadow and Word Wrap
Colors, Gradients, Background Images, and Masks
  • Colors, Gradients, Background Images, and Masks
  • Color
  • The opacity Property
  • Using HSL & Opacity
  • Backgrounds
  • Multiple Background Images with background-clip,
  • background-origin, and background-size
Borders and Box Effects
  • Borders and Box Effects
  • Image Borders
  • Image Borders
  • Rounded Corners
  • Box Shadow
  • Rounded Corners & Drop Shadow
Transitions, Transforms, and Animations
  • Transitions & Transforms
  • Transitions
  • Transitions
Layout: Columns and Flexible Box
  • Columns
  • Columns
  • Flexible Box Layout Module
  • Examples
  • Flexible Box Layout
Vendor Prefixes
  • What are Vendor Prefixes?
  • Maybe They Ain’t So Bad
  • Strategies
  • Autoprefixer
  • Autoprefixer with Gulp
Embedding Media
  • Embedding Media
  • Video Formats
  • Styling Video
  • Styling Video
Accessibility Features
  • Web Accessibility
  • The CSS Speech Module
Media Queries
  • Media Queries
  • Targeting Widths and Devices with CSS Media Queries
  • Responsive Images & the viewport Metatag
  • Responsive Design
 

Sass

  • Preprocessors
  • Sass
 

Frameworks

  • Frameworks
  • Bootstrap
  • Setting up Bootstrap
  • Display Utility Classes
  • Foundation
  • Setting Up Foundation
  • UIkit
  • Setting Up UIkit
  • Bootstrap
 

Grid Layout

  • CSS Grid Layout
  • Styling the Parent Element
  • Grid Layout
  • Styling Grid Children Elements
  • Controlling Grid Line Size: Gaps
  • Creating Modern Art
  • Grid Layout for Page Layout
  • Grid Layout and Media Queries
  • Page Layout with Grid Areas
 

CSS Level 4 Selectors

  • CSS Level 4 Selectors
  • Logical Combinations
  • :matches()
  • Case Insensitivity
 

Going Forward/Additional Resources

  • Going Forward/Additional Resources
  • What’s Next?
  • Online Resources
  • Get Involved
  • Testing CSS

Training Request Form

CSS Training

CSS Training: Essentials for Impressive Web Designs The Importance of CSS Training for Organizations The Critical Role of CSS for Businesses CSS (Cascading Style Sheets)

Eğitimi İncele »