Şı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
444 Eğitim Seti
