Özet
Hedefler
Topics
Diğer Eğitimler

Şık, duyarlı web siteleri oluşturmak ve tasarlamak istiyorsanız, giriş seviye niteliğindeki CSS Bootcamp Eğitimi, web tasarımı ve geliştirme için CSS öğrenmenize yardımcı olacaktır. Yeni başlayanlar için tasarlanmıştır, eğitimden en iyi şekilde yararlanmak için daha öncesinde CSS konularını bilmeniz gerekmemektedir.

Temel bilgilerle başlayacak ve her adımda uygulamalara ağırlık vereceğimiz, uygulama ve örneklerle öğrendiğiniz pratik bilgileri uygulayacaksınız. Eğitimin sonunda ise güzel ve işlevsel bir kullanıcı deneyimi yaratmak için CSS'deki temel tasarım öğelerini uygulamayı öğrenmiş olacaksınız.

Hedefler:

  • Style elements using the new selectors, pseudo classes, and pseudo elements

  • Use font and text effects, including @font-face

  • Use the new gradient, mask, and background image techniques

  • Implement animations, transitions, and 2D and 3D transforms

  • Render content appropriately for mobile and tablet devices using media queries

  • Understand vendor-specific prefixes and browser support for various CSS3 techniques

  • Incorporate CSS optimization

  • Understand CSS rendering and performance

Topics:

CSS Introduction

  • What is CSS?

  • CSS Version Numbers and CSS Levels

  • Who is responsible for CSS?

  • Why should I be writing CSS?

  • When was CSS created?

  • Where is the official CSS specification?

 

CSS Syntax 

  • Introduction to Writing CSS

  • CSS @rules

  • CSS functions

  • CSS Scope

  • Critical CSS

  • CSS Keywords

 

Selectors and Specificity

  • Introduction to CSS Selectors and Specificity

  • Helpful definitions

    • Selectors

    • Simple selectors

    • Combinators

    • Compound selectors

    • Complex selectors

    • The CSS “key”

    • CSS Selector types

    • Tag or element selectors

    • Id Selectors

    • Class selectors

  • Specificity

    • Specificity Hierarchy

    • CSS Cascade Rules

    • CSS Specificity Rules

  • Logically-applied selectors

 

Feature Detection

  • Introduction to Feature Detection

  • What is Modernizr?

  • CSS Feature Queries

    • CSS @supports

    • CSS.supports

  • Introduction to the CSS box model

  • What is the CSS box model?

  • CSS border vs. Outline

  • Block vs. inline boxes

  • CSS Float property

  • Setting the box size

  • Challenge Exercise: Using the CSS box model

  • Z-Index and stacking orders

  • CSS logical properties

 

The CSS Reset

  • Introduction to the CSS reset

  • Why use a CSS reset?

  • Why not use a CSS reset?

 

CSS Custom Properties

  • Introduction to CSS Custom Properties

  • What are custom properties?

    • How to declare a custom property

    • Using a custom property

    • Variable types

    • Variable use cases

    • Variable scope

  • Using a custom property

  • @property rule

 

CSS Typography

  • Introduction to Typography

  • Units of Measurement

    • Fixed units of measurement

    • Relative units of measurement

    • Absolute vs. relative units

  • Font Sizes and browser rendering

 

CSS 3

  • Introduction to CSS3

  • What is CSS3?

  • Understanding the CSS Version numbers and CSS Levels

  • CSS3 Transforms

    • What is a CSS transform?

    • CSS3 2D transforms

    • CSS3 3D transforms

    • CSS transform: properties and methods

  • CSS3 Transitions

    • What is a CSS3 transition?

    • How do I execute a CSS3 transition?

  • CSS3 Animations

    • CSS3 animation code

  • CSS3 3D Animations

    • 3D transformations

 

CSS Layout

  • Introduction to page layout with CSS

  • Position property values

    • position: static

    • position: relative

    • position: absolute

    • position: fixed

    • position: sticky

  • CSS display property

    • Introduction to the CSS display property

    • Hiding elements

    • Using the display property for layout

  • Using Viewport units for layout

  • Introduction to Viewport Units

    • Viewport width

    • Viewport height

    • Viewport minimum and maximum

 

CSS Flexbox

  • Introduction to the display: flex property

    • What is a flexbox?

    • Creating a flexbox

    • The flex layout model

    • Flex display properties

  • Flex Grow, Shrink, and Basis

 

CSS Grid Layout

  • Introduction to the CSS grid layout

    • What is a grid?

    • Features of a grid layout

    • Grid glossary

    • Placing items on the grid

    • Grid properties

 

CSS Multi-Column Layout

  • Introduction to CSS columns

    • Creating multi-column layout

    • Column properties

    • Column-related design issues

 

Introduction to CSS Optimization

  • CSS minification

  • CSS color manipulation

  • Use resets

  • Sort CSS rules

  • Write object-oriented CSS

  • Make your CSS modular

  • Use CSS properties and functions

    • CSS calc()

    • CSS inherit

  • Use sprites

  • Using an online minifier

  • Add vendor prefixes

  • Check code quality

    • CSS lint

  • Identify unused CSS

  • Use an online CSS beautifier

  • CSS code organization

    • Code organization tips

    • Use a CSS style guide

    • Use a CSS preprocessor

    • CSS loading techniques        

 

Advanced CSS Optimization

  • Writing scalable, efficient, and maintainable CSS

  • Naming Conventions

  • Semantic CSS

    • BEM

    • OOCSS

    • SMACSS

    • Atomic

  • Formatting CSS

 

Understanding CSS Rendering and Performance

  • Browser rendering and optimization terms

    • Rendering stages

    • Guided Exercise: Understanding the browser’s rendering stages

  • Optimizing CSS

    • Optimize selectors

    • Remove unused CSS

    • Use testing tools

    • Avoid unnecessary DOM manipulations

    • Use a CDN

    • Minimize repaint and reflows

    • Paint cycles and compositor layers

    • CSS and JavaScript

    • More optimization tips

Diğer Eğitimler

Digital Vizyon
455 Eğitim Seti
Eğitimlere Dön