A'dan Z'ye Bootstrap 4

Bootstrap 4'ü baştan sona öğrenerek ekran boyutuna duyarlı web sayfaları oluşturun.

Created byBootstrap Eğitimi

Last updated 4/2018

Turkish

What you'll learn

Bootstrap 4'ün tüm özelliklerini öğrenmiş olacaksınız.
Ekran boyutuna duyarlı (Responsive) web sayfaları oluşturabileceksiniz.
Tüm platformlarla ve güncel tarayıcılarla uyumlu web sayfaları oluşturabileceksiniz.
Hayalinizdeki web sayfası tasarımını Bootstrap 4 ile hayata geçirebileceksiniz.
Bootstrap 4'ü kendi ihtiyaçlarınıza göre özelleştirebileceksiniz.

Course content

6 sections • 52 lectures • 2h 20m total length

Bootstrap Nedir?4:06
Bu dersimizde "Bootstrap Nedir?" ve "Neden Bootstrap Kullanmalıyız?" konularına değineceğiz ve https://getbootstrap.com/docs/4.0/examples/ sayfasında bulunan Bootstrap ile geliştirilmiş bazı örnekleri inceleyeceğiz.
Metin Editörünün ve Paketlerin Kurulumu3:40
Bu videomuzda kursumuzda kullanacağımız Atom editörünü https://atom.io/ sitesi üzerinden indirerek kurulumunu yapacağız ve atom-live-server eklentisini kurarak editörde yaptığımız değişikliklerin eş zamanlı olarak tarayıcımızda görülmesini sağlayacağız. Hali hazırda alışık olduğunuz bir editör varsa bu dersi geçebilirsiniz. Atom-live-server paketi kurulu olmadığında editörünüzde yaptığınız değişiklikleri kaydettikten sonra yapılan değişiklikleri görmek için tarayıcınızı yenilemeyi unutmayın.
Projeye Bootstrap 4 Dahil Etmek5:53
Bu videomuzda projemize Bootstrap'i nasıl dahil edebileceğimizi inceleyeceğiz.
Başlangıç Şablonunun İncelenmesi3:44
Bu videomuzda kursumuz boyunca kullanacağımız Bootstrap başlangıç şablonunu inceleyeceğiz.

Izgara (Grid) Sistemi6:58
Bu videomuzda Bootstrap ızgara (grid) sistemini inceleyeceğiz.
Container Sınıflarının İncelenmesi2:04
Bu videomuzda .container ve .container-fluid sınıflarıni inceleyeceğiz.
Satır ve Sütunlarla Çalışma4:19
Bu videomuzda satır (.row) ve sütun (.col) sınıflarını inceleyerek 12'lik grid yapısını daha yakından tanıyacağız.
Kırılma Noktalarının İncelenmesi4:08
Bu videomuzda satır ve sütunları kırılma noktalarıyla (sm, md, lg, xl) birlikte kullanarak içerikleri ekran boyutuna duyarlı (responsive) bir şekilde nasıl yerleştirebileceğimizi inceleyeceğiz.
Satır ve Sütunlarda Hizalama2:47
Bu videomuzda hizalama sınıflarını inceleyeceğiz.
Sıralama Sınıfları3:22
Bu videomuzda sıralama sınıflarını (.order) inceleyeceğiz.
Offset Sınıfları1:41
Bu videomuzda offset sınıflarıyla kolon hizalamalarını nasıl yapabileceğimizi inceleyeceğiz.
İç İçe Satır-Sütun Kullanımı1:44
Bu videomuzda iç içe satır sütun kullanmaya değineceğiz.

Metin Hizalama4:40
Bu videomuzda metin hizalamalarına ve bu hizalamaları ekran boyutuna göre nasıl ayarlayabileceğimize değineceğiz.
Arka Plan ve Metin Renklendirme3:44
Bu videomuzda Bootstrapteki renk sınıflarını arka planlara ve metinlere nasıl uygulayabileceğimizi inceleyeceğiz.
Kenarlık Sınıfları2:40
Bu videomuzda Bootstrap’in sağlamış olduğu kenarlık stillerini inceleyeceğiz.
Margin ve Padding Sınıfları5:32
Bu videomuzda margin ve padding sınıflarını ele alacağız.
Float ve Clearfix Sınıfları3:06
Bu videomuzda float ve clearfix sınıflarını inceleyeceğiz.
Görüntüleme (Display) Sınıfları6:13
Bu videomuzda görüntüleme sınıflarını ele alacağız.
Elementleri Ekran Boyutuna Göre Gizleme ve Görüntüleme3:22
Bu videomuzda görüntüleme sınıflarını kullanarak elementleri farklı ekran boyutlarına göre gizlemeye ve görüntülemeye değineceğiz.
Görünürlük1:48
Bu videomuzda görünürlük sınıflarını (.visible, .invisible) inceleyeceğiz.
Boyutlandırma3:18
Bu videomuzda boyutlandırma sınıflarını ele alacağız.
Dikey Hizalama1:54
Bu videomuzda dikey hizalama yapmak için kullanılan sınıfları ele alacağız.
Position Sınıfları2:29
Bu videomuzda konumlandırma sınıflarını inceleyeceğiz.
Metni Arka Plan Resmi ile Değiştirme1:56
Bu videomuzda .text-hide sınıfını kullanarak metni gizleyip arka plan resminin görüntülenmesini sağlayacağız.
Kapatma İkonu1:22
Bu videomuzda bir butona kapatma ikonu görünümünü nasıl verebileceğimize değineceğiz.
Ekran Okuyucu Optimizasyonu3:36
Bu videomuzda ekran okuyuculara yönelik olan .sr-only ve .sr-only-focusable sınıflarını inceleyeceğiz.

Başlık Sınıfları2:28
Bu videomuzda başlık elementlerine (<h1>, ..., <h6>) ve Bootstrap başlık stillerine (h1, …, h6, display-1, …, display-4) değineceğiz.
Öne Çıkan Metin (Lead)1:15
Bu videomuzda metinleri öne çıkarmak için kullanılan .lead sınıfını inceleyeceğiz.
Satır İçi Metin Elementleri3:17
Bu videomuzda satir içinde kullanılan metin elementlerine (<mark>, <del>, <s>, <ins>, <u>, <small>, <strong>, <em>) değineceğiz.
Kod Etiketleri1:43
Bu videomuzda satır içi kod (<code>), çok satırlı kod (<pre>), değişken (<var>), klavye girdisi (<kbd>), örnek çıktı (<samp>) etiketlerini inceleyeceğiz.
Alıntı Yapma1:20
Bu videomuzda alıntı yaparken kullandığımız <blockquote> etiketine değineceğiz.
Yazı Kalınlığı ve İtalik Yazı1:38
Bu videomuzda yazı kalınlıklarını (bold, normal, light) ve italik yazıyı inceleyeceğiz.
Metin Dönüştürme1:02
Bu videomuzda metni küçük ve büyük harfe dönüştürmek ve her sözcüğü büyük harfle başlatmak için kullanılan sınıfları inceleyeceğiz.
Metin Kaydırma ve Kesme Durumları1:43
Bu videomuzda metin kaydırmasını önlemek için kullanılan .text-nowrap sınıfını ve uzun metinlerin belirli bir kısmını almak için kullanılan .text-truncate sınıfını inceleyeceğiz.
Listeleme1:51
Bu videomuzda liste elemanlarına uygulayabileceğimiz sınıfları inceleyeceğiz.
Tanım Listesi1:46
Bu videomuzda tanım listelerini (<dl>) inceleyeceğiz.

Resimler3:44
Bu videomuzda resimlere verebileceğimiz Bootstrap sınıflarını inceleyeceğiz.
Figürler1:58
Bu videomuzda <figure> ve <figcaption> etiketlerini ve bu etiketler için hazırlanmış Bootstrap sınıflarını inceleyeceğiz.
Embed1:49
Bu videomuzda <iframe>, <embed>, <video> ve <object> elementlerine verebileceğimiz embed sınıfını inceleyeceğiz.
Tablolar2:40
Bu videomuzda tablolara verilebilecek sınıfları inceleyeceğiz.

Butonlar2:07
Bu videomuzda Bootstrap butonlarını inceleyeceğiz.
Buton Grupları1:20
Bu videomuzda buton gruplarını inceleyeceğiz.
Dropdown2:38
Bu videomuzda dropdown bileşenini inceleyeceğiz.
Dropdown Çeşitleri1:15
Bu videomuzda dropdown bileşeninin dropup, dropright ve dropleft çeşitlerini inceleyeceğiz.
Dropdown Menü: Başlık ve Ayraç Kullanımı1:51
Bu videomuzda dropdown menülerde başlık ve ayraçları nasıl kullanabileceğimize değineceğiz.
Form Oluşturma1:39
Bu videomuzda form elemanlarına verilebileceğimiz Bootstrap sınıflarını inceleyeceğiz.
Inline Form2:34
Bu videomuzda form elemanlarını aynı satırda yan yana nasıl gösterebileceğimize ve erişilebilirliği artırmak için formlarda ne gibi yollar izleyebileceğimize değineceğiz.
Formlarda Izgara (Grid) Sistemini Kullanma1:41
Bu videomuzda grid sistemini kullanarak form elemanlarını nasıl yerleştirebileceğimize değineceğiz.
Yatay Form1:28
Bu videomuzda formları yatay olarak nasıl gösterebileceğimize değineceğiz.
İlerleme Çubukları2:04
Bu videomuzda progress bar yani ilerleme çubuklarından bahsedeceğiz.
Rozetler1:33
Bu videomuzda rozetlerden (badge) bahsedeceğiz.
İçerik Haritası2:06
Bu videomuzda içerik haritalarını (breadcrumb) inceleyeceğiz.

Requirements

Temel seviyede HTML, CSS ve JavaScript bilginizin olması önerilir.
Bootstrap hakkında herhangi bir bilginizin olmasına gerek YOKTUR.

Description

Bu kurs web tasarım konusuna merakı olan, bu konuda kendini geliştirmek isteyen bireylere eğitici bir çalışma kaynağı oluşturmak amacıyla hazırlanmıştır.

Konu anlatımı bütünden parçalara bölünerek videoların süreleri azaltılmış, konunun daha anlaşılır ve net olması hedeflenmiştir. Böylelikle aradığınız konuları kısa videolar içinde kolaylıkla bulabileceksiniz.

Kursumuzda sesli anlatımın yanı sıra altyazı seçenekleri de bulunmaktadır. Bazı sorunlardan dolayı sesi açamadığınızda ya da işitmede sorun yaşadığınızda altyazı seçeneğini açarak derslerimizi izleyebilirsiniz.

Who this course is for:

Web tasarım alanında kendini geliştirmek isteyen, bu alana ilgi duyan ya da bu sektörde kariyer planlayan herkes
Bootstrap 4'ü tüm hatlarıyla öğrenerek profesyonel web sayfaları oluşturmak isteyen herkes

A'dan Z'ye Bootstrap 4

What you'll learn

Explore related topics

Course content

Giriş4 lectures • 17min

Izgara (Grid) Sistemi8 lectures • 27min

Araçlar14 lectures • 46min

Tipografi10 lectures • 18min

İçerik Öğeleri4 lectures • 10min

Bileşenler12 lectures • 22min

Requirements

Description

Who this course is for: