Özet
Hedefler
Topics
Diğer Eğitimler

"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
455 Eğitim Seti
Eğitimlere Dön