Temelden İleri Seviyeye CSS Eğitimi
0.0 (0 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
3 students enrolled

Temelden İleri Seviyeye CSS Eğitimi

Temelden ileri seviyeye doğru CSS öğrenmeye başlıyoruz ve HTML ile birleştiriyoruz.Flexbox ve Grid ile devam ediyoruz
New
0.0 (0 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
3 students enrolled
Last updated 5/2020
Turkish
Current price: $25.99 Original price: $39.99 Discount: 35% off
12 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 10.5 hours on-demand video
  • 1 article
  • 4 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • CSS Nedir ve Nasıl Yazılır?
  • CSS Özellikleri ve Değerleri Neler?
  • CSS Grid ve CSS Flexbox
  • HTML Etiketlerine Örnek CSS Uygulamaları
Requirements
  • Temel Bilgisayar Bilgisi
  • Temel HTML Bilgisi
Description

HTML ile bir web sayfasını yaparsınız ama CSS ile bu sayfaya düzen, görsellik, ekranlara uyumlu responsive tasarım ve diğer seçenekleri de eklemeniz gerekir. Aksi halde sayfanız düz bir yapı olmaktan öteye geçemez.

İşte bu kursta öncelikle CSS ile ilgili temel bilgilere bakıp, CSS ve CSS3 ile ilgili özellikleri ve tanımlanabilecek değerleri göreceksiniz. Ardından bazı HTML etiketlerine bu özellikleri ekleyerek uygulamalar yapacağız. Böylece CSS özellik ve değerlerini nasıl kullanabileceğinizi öğreneceksiniz. Son olarak CSS Flexbox ve CSS Grid konularını da temel düzeyde öğrenecek ve kullanabileceksiniz.

Bu kursun sonunda;

  • CSS Tanımlamalarını

  • Yazı Biçimlendirmelerini

  • Yazı Tipleri Tanımlamasını

  • Boşluklar ve çizgiler eklemeyi

  • Katman ve Konumlandırma Tekniğini

  • Resim yerine ikon fontları kullanmayı

  • Şeffaflık, Gölgelendirme, Animasyon ve Geçiş Efektlerini

  • Tablolara, resimlere, form elemanlarına stil tanımlamayı

  • Menü Tasarımını, Image Sprite yapmayı

  • CSS Grid ve Flexbox yapılarını

öğreneceksiniz.

Örnek uygulamalar ile de konuları genel tekrar edecek ve uygulama yaparak CSS öğrenmeyi pekiştireceksiniz.

Who this course is for:
  • CSS Öğrenmek İsteyenler
  • Web sayfasını görselleştirmek isteyenler
  • CSS eksiklerini gidermek isteyenler
  • HTML ve CSS 'i birleştirerek görsel siteler yapmak isteyenler
Course content
Expand all 48 lectures 10:31:13
+ Temel Bilgiler
7 lectures 55:51

CSS eğitimine hoş geldiniz. Bu derste CSS temel konularından ileri seviyeye ilerleyeceğiz. Derslerde HTML bildiğinizi düşünerek ilerleyeceğim için lütfen önce HTML eksiklerinizi tamamlayın.

Preview 02:24

CSS yenir mi içilir mi?

Preview 05:06

CSS yapısı nasıldır?

CSS Yapısı
02:55

Temel kavramları öğrenerek başlıyoruz.

CSS Tanımlaması - Bölüm 1 (Element-id-class kavramları)
08:57
CSS Tanımlaması - Bölüm 2
16:21

Peki CSS kodlarını sayfaya nasıl ekleriz?

Sayfaya CSS nasıl eklenir?
09:41

Renk tanımlaması yapmak için hangi yöntemler varsa kullanabileceğiniz hepsini temel olarak öğreniyoruz.

Renk Sistemi (RGB, HEX, RGBA, HSL, HSLA)
10:27
+ CSS Özellikler ve Değerler
24 lectures 05:38:44

Arkaplan ile ilgili özellikleri işleyerek asıl derslere başlıyoruz.

Arkaplan (Background)
24:14

Çerçeve çizmeyi öğrenelim. Her daim gerekebilir.

Çizgiler (Border)
19:33

Boşluk olmazsa herşey birbirine girer.

Margin (Kenar Boşlukları)
08:50

Bu da bir boşluk ama daha farklı.

Preview 03:50

Herşeyin bir genişliği ve yüksekliği olmayabilir ama bence sınırları olmalı.

Yükseklik ve Genişlik
11:01

Sayfamızın yazı tipini tanımlamazsak olmaz değil mi?

Font ve WebFont
34:39

Sayfadaki yazılara nasıl stil veririz? Dersi izlerken uyumamanız için 2 bölümde işliyoruz.

Yazı Biçimlendirme - Bölüm 1
16:12

Sayfadaki yazılara nasıl stil veririz konusunun devamı

Yazı Biçimlendirme - Bölüm 2
09:00

Linklere stil vermek o kadar basit ki anlatamam.

Linkler
06:55

Resim yerine simgeler kullanmaya ne dersiniz?

Ikonlar
08:48
Outline
11:47

Sıralı ve sırasız listelere HTML tanımlamaları haricinde daha farklı şekiller verebiliriz biliyor musunuz?

Listeler
12:14

Sözde class ve element ile daha fazla seçici kullanacağız.

Sözde Class ve Elementler (Pseudo-classes, Pseudo-elements)
15:43

Şeffaf, transparan olayı nasıldır? Nasıl tanımlarız?

Şeffaflık
08:38

Nasıl gölge efekti verebiliriz?

Gölgelendirme
10:17

Olmazsa olmaz layout konusunu öğrenmeden ilerlemeyin. Daima lazım.

Yerleşimler (Layout) - Bölüm 1
16:39

Layout konusunu öğrenmeden ilerlemeyin. Devamı.

Yerleşimler (Layout) - Bölüm 2
18:24

Yanar döner butonlar yapalım mı?

2D ve 3D Transform
17:29

@media dedikleri şey neymiş öğrenmeden CSS öğrendim demeyin.

@media Özelliği Kullanımı ve Responsive Tasarım
16:31

Çizgi film gibi olmasa da basit olarak animasyon nasıl yaparız?

Animasyonlar (Animation)
17:33

Geçiş efekti tanımlamak hayal gücünüze bağlı olsa da özelliklerini ve değerlerini bilmeden yapamayız.

Geçiş Efektleri (Transition)
08:05

Gazete gibi makaleyi birden fazla sütunda yayınlamaya ne dersiniz?

Birden Fazla Sütun Tanımlaması (Multiple Column)
07:03

HTML kullanmak yerine CSS ile nasıl kolayca yaparız?

Sayaçlar - Counter Özelliği
10:47
Mouse İmleçleri
24:32
+ Örnek Uygulamalar
8 lectures 01:51:49

Tablolara nasıl stil verebiliriz?

Uygulama - 1 : Tablolar
12:34

Form elemanlarına stil nasıl verilir? Hayal gücünüze bağlı olmakla birlikte birkaç örnek stil vereceğim.

Uygulama - 2 : Formlar
10:09

Resimlere nasıl stiller tanımlayabiliriz?

Uygulama - 3 : Resimlere Stil Tanımlama
13:15

Sayfadaki şekilsiz gri butonları CSS ile görselleştirmeye ne dersiniz?

Uygulama - 4 : Butonlara Stil Tanımlama
11:33

İnternette boşuna aramayın. CSS ile tooltip olayını nasıl yaparız onu öğreniyoruz.

Uygulama - 5 : CSS ile Tooltip Yapma
18:42

Tek resmi birden fazla resimmiş gibi göstermeye ne dersiniz?

Uygulama - 6 : Image Sprite
20:30

Sağda solda menü aramayın. CSS ile sizde menüler yapabilirsiniz.

Preview 16:55

CSS ile basit bir yükleniyor uygulaması yapıyoruz.

Uygulama - 8: Yükleniyor Yapımı
08:11
+ CSS Flexbox
3 lectures 44:08

Fırından yeni çıktı sayılır. Hadi başlayalım.

Flex Yapısı ve Container Özellikleri
17:44
Flexbox Item Özellikleri
12:59
Flexbox Örnek Uygulaması
13:25
+ CSS Grid
4 lectures 01:19:44

CSS Grid Nedir? Kullanılan terimler ne anlama geliyor?

Grid Tanım ve Terimleri
15:14

CSS yapısı ve kullanılan özellikleri işliyoruz.

Grid Yapısı ve Özellikleri
15:44
Grid Öğeleri (Items)
27:27
Grid ile Örnek Uygulama
21:19
+ Kapanış
2 lectures 00:56

Ve sonsöz...

Sonsöz
00:47
Bonus
00:09