fbpx
Generic filters
Search in title

Responsive Web Tasarımı Eğitimi

HTML5 eğitimleri kategorisi

Eğitim Hakkında

Responsive web tasarımı eğitimi, cep telefonları, tabletler ve masaüstü bilgisayarlar gibi farklı cihazlarda web sayfalarının optimize edilmesi konusunu kapsayan bir eğitimdir. RWT, web sayfalarının farklı cihazlarda büyüklüklerine, çözünürlüklerine ve ekran boyutlarına göre uyumlu hale getirilmesini sağlar.

Responsive Web Tasarımı Eğitimi katılımcılara şunları öğretir:

  1. CSS grid ve flexbox kullanarak web sayfalarının responsive tasarımını yapma.
  2. Media sorgularını kullanarak css tarzlarını cihaz boyutlarına göre uyarlama.
  3. Farklı cihazlar için farklı görüntüleme ölçütleri belirleme ve bu ölçütleri uygulama.
  4. İçerik ve imajları farklı cihazlar için uygun hale getirme.
  5. HTML ve CSS kodlarını optimize etme ve hızlı yüklenme hızını arttırma.
  6. Responsive tasarım tekniklerini kullanarak mobil uyumlu ve kullanıcı dostu web sayfaları tasarımı yapma.

Bu eğitimi almak isteyen kişiler web tasarım ve geliştirme konularına hakim olmalı ve HTML ve CSS dillerini temel seviyede bilmelidir. Ayrıca, responsive web tasarımın önemini anlamak isteyen ve bu konuda daha fazla bilgi edinmek isteyen herkes bu eğitimi alabilir.

Eğitim, web tasarım ve geliştirme konusunda önemli bir adımdır. Bununla birlikte katılımcıların, HTML ve CSS dillerini temel seviyede bilmeleri, eğitimin verimli geçmesi açısından gereklidir. Ayrıca bu eğitim, kullanıcı deneyimini geliştirmek ve farklı cihazlara uyumlu web siteleri oluşturmak isteyenler için faydalı olacaktır. Bununla beraber eğitimde, modern web tasarım trendleri, responsive tasarım prensipleri ve pratik uygulamalar ele alınacak. Katılımcılar, interaktif bir şekilde öğrenirken, kendi projelerini hayata geçirme fırsatı bulacaklar. Ayrıca bu eğitim, web tasarım ve geliştirme becerilerini ilerletmek isteyen herkese hitap ediyor.

Diğer tüm HTML ve Front-End Web Uygulama Geliştirme eğitimlerimiz için buraya tıklayarak inceleyebilirsiniz.

Neler Öğreneceksiniz?

Responsive web tasarımı eğitiminde, şu konuları öğreneceksiniz:
  1. CSS grid ve flexbox kullanarak web sayfalarının responsive tasarımını yapma
  2. Media sorgularını kullanarak css tarzlarını cihaz boyutlarına göre uyarlama
  3. Farklı cihazlar için farklı görüntüleme ölçütleri belirleme ve bu ölçütleri uygulama
  4. İçerik ve imajları farklı cihazlar için uygun hale getirme
  5. HTML ve CSS kodlarını optimize etme ve hızlı yüklenme hızını arttırma
  6. Responsive tasarım tekniklerini kullanarak mobil uyumlu ve kullanıcı dostu web sayfaları tasarımı yapma
Bu eğitim sayesinde, farklı cihazlar için uygun ve kullanıcı dostu web sayfaları tasarımı yapma becerilerinizi geliştireceksiniz ve bu becerilerinizi kullanarak, güncel web tasarım trendlerine uygun, esnek ve kullanıcı dostu web siteleri oluşturabileceksiniz.

Ön Koşullar

Responsive web tasarımı eğitimi için şu ön koşullar gereklidir:
  1. HTML ve CSS düzeyinde bilgi: Responsive web tasarımı eğitiminde HTML ve CSS kullanılacağından, bu dillerin temel bilgisi gereklidir.
  2. Web tasarım ve geliştirme hakkında genel fikir: Web tasarım ve geliştirme hakkında genel bir fikir sahibi olmanız eğitimi daha verimli kılacaktır.
  3. CSS’nin ileri seviyede kullanımı: Responsive web tasarımı eğitiminde CSS grid ve flexbox gibi ileri seviye CSS tekniklerini kullanacaksınız, bu yüzden bu tekniklerin temel bilgisi gereklidir.
Bu ön koşulları yerine getirmeniz durumunda, responsive web tasarımı eğitiminden maksimum faydayı sağlayabilirsiniz.

Kimler Katılmalı

Responsive web tasarımı eğitimi, aşağıdaki kişiler için uygun bir eğitimdir:
  1. Web tasarım ve geliştirme alanında çalışan veya bu alana ilgi duyanlar
  2. HTML, CSS ve JavaScript dillerinin temel bilgisine sahip kişiler
  3. Mobil uyumlu web siteleri tasarlamayı hedefleyen web tasarımcıları ve geliştiricileri
  4. Gelişmiş CSS tekniklerini öğrenmek isteyen web tasarımcıları ve geliştiricileri
  5. Responsive web tasarım trendlerine uygun, esnek ve kullanıcı dostu web siteleri tasarlamak isteyen kişiler
Eğitimi almak isteyen herkes, responsive web tasarımı eğitimine katılabilir. Ancak, eğitimi verimli bir şekilde kullanabilmek için HTML, CSS ve JavaScript dillerinin temel bilgisine sahip olmanız önerilir.

Outline

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 adaptive layouts
  • Media queries
  • Responsive images
  • Responsive table
 

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
  • 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 js
  • About css3-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 block
  • Important display properties
 

Overview of RWD Layout Techniques

  • Fixed layout 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
  • Scroling table data

Eğitim Talep Formu

HTML5 eğitimleri kategorisi

HTML5 Eğitimi

HTML5 Eğitimi: Modern ve İleri Düzey Web Tasarımının Temelleri Kurumlar için HTML5 Eğitiminin Önemi İşletmelerde Modern ve Etkileşimli Web Tasarımı için HTML5’in Rolü HTML5, web

Eğitimi İncele »