css-egitimi

css-egitimi copied to clipboard

1) Temel Bilgiler

• Sözdizimi (syntax) ve terminoloji
• CSS yazma yöntemleri
• Basit seçiciler
• Birden fazla seçici kullanmak
• Renk kullanımı (hex, rgb, rgba)
• Bağlantı (link) durumlarını stillendirmek
• Listeler ve özellikleri
• Yazı özellikleri (font, text-align, line-height)
• Kenar çizgisi: border
• Sayfada görsel kullanımı
• Temel ölçü birimleri (px, em, rem, %)

Kaynak

• https://www.w3schools.com/cssref/css_selectors.asp
• https://www.w3schools.com/cssref/pr_font_font.asp
• https://www.wikiwand.com/tr/Web_renkleri
• https://www.rapidtables.com/convert/color/rgb-to-hex.html

2) Kutu Modeli

• Block ve inline elementler
• Genişlik ve Yükseklik
• İç ve dış boşluklar: margin, padding
• Kutu modelini anlamak: box-sizing
• Minimum ve maksimum ölçü vermek

Kaynak

• https://www.paulirish.com/2012/box-sizing-border-box-ftw/
• https://www.youtube.com/watch?v=0G1Q7wRjuTA&t=25s

3) Tarayıcılar ve Davranışları

• Ön tanımlı gelen CSS özellikleri
• Tarayıcı Farklılıkları ve Ön Ekler (prefix)
• Normalize.css ve reset.css

Kaynak

• https://caniuse.com/
• https://autoprefixer.github.io/
• https://www.youtube.com/watch?v=0G1Q7wRjuTA&t=25s

4) Pozisyon ve Katmanlar

• Konumlandırma: position
• Katman: z-index
• Taşma özelliği: overflow
• Transform

Kaynak

• https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
• https://www.youtube.com/watch?v=_FLV6X0druY&t=2s

5) Orta Seviye Önemli Bilgiler

• Gelişmiş seçiciler
• inherit
• Görünüm özellikleri: visibility, display, opacity
• Geçiş animasyonu: transition
• Display özelliğine derin bakış
• pseudo classes & elements

Kaynak

• https://www.w3schools.com/cssref/css_selectors.asp
• https://w3reign.com/difference-between-pseudo-class-and-pseudo-element/
• https://fatihhayrioglu.com/pseudo-siniflari-ve-pseudo-elementleri/
• https://css-tricks.com/examples/nth-child-tester/

6) Float ile Yüzen Kutular

• Yanaştırma özelliği: float
• Yanaşmayı bitirmek: clear
• float ile gelen taşma problemi ve çözümü (clearfix hack)

Kaynak

• http://nicolasgallagher.com/micro-clearfix-hack/

7) Özel yazı tipleri kullanmak

• @font-face
• Google font servisi

Kaynak

• https://transfonter.org/
• https://css-tricks.com/snippets/css/using-font-face/

8) Ekran duyarlı tasarım (responsive)

• viewport etiketi
• media-query
• mobile-first responsive

Kaynak

• https://fatihhayrioglu.com/meta-viewport-etiketi/
• https://getbootstrap.com/docs/4.1/layout/overview/#responsive-breakpoints
• https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Responsive/Mobile_first

9) İleri Seviye Ek Bilgiler

• Cascading, inheritance, and specificity
• Değişken tanımlamak ve kullanmak
• calc() fonksiyonu

Kaynak

• https://specificity.keegan.st/
• http://cssspecificity.com/
• https://www.khanacademy.org/computing/computer-programming/html-css/more-css-selectors/e/quiz--css-specificity-rules
• https://medium.com/@dte/understanding-css-selector-specificity-a02238a02a59

https://www.youtube.com/watch?v=_s15i3MoAyE