"Responsive Web Tasarımına Giriş (RWD) Eğitimi'nde" , tasarımcılar ve geliştiriciler; bilgisayar, tablet ve mobil telefon gibi çok çeşitli cihazlara uyarlanan web uygulamalar ve siteler oluşturmak için gerekli HTML, CSS ve JavaScript becerilerini öğreneceksiniz.
Hedefler:
Understand the benefits and the fundamentals of using RWD
Learn responsive layout techniques including liquid and adaptive layouts
Use responsive typography techniques
Incorporate responsive images using HTML, JavaScript, and CSS
Learn how to present images in different resolutions adaptively across a wide array of devices
Display data cleanly on multiple devices using responsive tables
Learn to use CSS3 for transforms, transitions, and animations
Use Bootstrap layout techniques
Create responsive tables
Topics:
Introduction to Responsive Web Design
What is responsive Web design?
Why should I use RWD?
Where did RWD come from?
Who is responsible for RWD?
When should I use RWD?
How do I implement RWD?
Fundamental Techniques of RWD
Feature detection
The viewport element
Overview of responsive layouts vs. adaptive layouts
Media queries
Responsive images
Responsive tables
Introduction to Feature Detection
What is Modernizr
Using the Modernizr JavaScript library
Understanding how Modernizr works
Using the Modernizr object
Using the Modernizr API
The Modernizr library and the HTML5 shim
CSS Feature Queries
CSS @supports
CSS.supports() method
Understanding the Viewport
What is the viewport?
How is the pixel width of the viewport measured?
Understanding the viewport meta tag
Media Attribute and Media Queries
How do I specify a media type?
Recognized media types
Understanding the HTML media attribute
Understanding Media Queries
What is a media query?
Media query syntax
Media query repositories
Where can I write a media query?
About respond.js
About css3-mediaqueries.js
Media queries and the cascade
Media query features
A media query strategy
Understanding the media query
The CSS Box Model
Understanding the CSS box model and box size
What is the CSS box model?
The CSS Reset
Why use a CSS reset?
Understanding the CSS reset
The Display Property
Introduction to the display property
Inline vs. block
Important display properties
Overview of RWD Layout Techniques
Fixed layout vs. liquid layout
A word about elastic layouts
Responsive
Adaptive
New CSS Properties: Flexbox and Grid
Understanding Flexbox Layout
Flex-box layout: New feature of Bootstrap 4
Creating a flex box
What is a flex box?
The flex box model
Flex display properties
Understanding the flex layout model
The flex grow, shrink and basis properties
Practice your flex property knowledge
Creating a responsive flex box layout
Flex box layout
Grid Layout
Introduction to the Grid layout
Grid Glossary
Grid terminology and behavior
Using grid properties
Create a grid and use grid properties
Use named grid lines
Memorizing grid properties
Introduction to CSS Frameworks and Bootstrap
Responsive Frameworks
What is Bootstrap?
Who created Bootstrap?
Why use Bootstrap
Important information for users of Bootstrap 3
The Bootstrap Playground
Customizing Bootstrap
Acquiring Bootstrap 4
Download options
What you get
Using the starter template
Browser support for Bootstrap
Customizing your version of Bootstrap 4
Introduction to Bootstrap 5
Fundamentals of Layout with Bootstrap
Containers
Media queries – responsive breakpoints
Z-index
The Bootstrap 4 Grid System
How it works
Grid options
Controlling alignment
Working with columns
Build a simple layout with the Bootstrap 4 grid
Bootstrap 4's new media feature
Build a complex layout with the Bootstrap 4 grid
What’s new in Bootstrap 5
Bootstrap Built-in Styles
Typographic styles
Using Bootstrap typographic styles
Table styles
Image styles
Bootstrap Components
Introduction to Bootstrap Components
Bootstrap components chart
Bootstrap Cards
Bootstrap Modals
Bootstrap Forms
Bootstrap Editors
Responsive Typography
What is responsive typography?
Font Sizing options
Working with ems
Working with rems
Working with viewport widths
Creating type with the optimal characters per line
Responsive Images
What are responsive images?
Issues surrounding responsive images
Basic image terminology
HTML techniques
CSS techniques
Responsive techniques
Adaptive techniques
Scaling foreground images with CSS
Using the max-width property
Scaling background images with CSS
Cropping foreground images with CSS
Cropping background images with CSS
Server-side solutions
Other solutions
Responsive Tables
Introduction to Responsive tables
Responsive table techniques
Hiding table data
Manipulating the table display
Scrolling table data
Diğer Eğitimler
Digital Vizyon
444 Eğitim Seti
