Derinlemesine Web Front-End 1 : HTML & CSS

HTML5, CSS3 ile Uzman Web Front-End Geliştirme

Derinlemesine Web Front-End 1 : HTML & CSS
Derinlemesine Web Front-End 1 : HTML & CSS

Derinlemesine Web Front-End 1 : HTML & CSS udemy course

HTML5, CSS3 ile Uzman Web Front-End Geliştirme

Bu eğitimde HTML ve CSS dilleri konuları derinlemesine işlenmektedir. Öncelikle HTML ve CSS dillerinin temel ve orta düzey konuları anlatılmış. Sonrasında HTML5 ve CSS3 sürümleriyle gelen özellikler ayrıntılı olarak gösterilmiştir.

HTML konuları temel dosya (file), belge (document), çizgi-içi (inline) ve tıkam (block) kavramlarıyla başlamaktadır. Sonrasıında belgele biçem (style) eklenmesi gösterilmektedir. Ardından biçim (form) ile kullanıcıdan bilgilendirme alınması anlatılmaktadır. Birden çok nesneyi göstermek için çizelge (table) yapıları gösterilmektedir. Klasik HTML konularının sonunda da imge (image) ve bağ (link) anlatılmaktadır.

CSS kesiminin seçici (selector) yapısıyla başlamaktadır. Ardından kutu (box) yaklaşımı ile serim (layout) gösterilmektedir. Veri gösteren liste ve tabloların biçemleri nasıl verildiği açıklanmaktadır. Son olarak resim ve bağlantıların stilleri işlenmektedir.

HTML5 kesiminin başında girdi billeşenleri ve biçimletme (format) konusundaki özellikler gösterilmektedir. Sonrasında anlambilim (semantics) gibi içerikle ilgili bilgilendirme verilmesi konusu anlatılmaktadır.  Bu bölümde video, ses, MathML ve SVG gibi görsel teknolojiler de işlenmektedir.  Resim çizmeye ve oyun / animasyon yapmaya yarayan tuval (canvas) konusu ayrıntılı olarak işlenmektedir. Masaüstü uygulaması gibi kodlama için konum ve verileri saklama ile ilgili işlevler anlatılmaktadır.

CSS3 kesiminde başlangıçta div (bölüm) öğesiyle ilgili gelen yeni özellikler gösterilmektedir. Ardından renk (color) ve yazı (text) ile ilgili birer bölüm koyulmuştur. Ardında dönüşüm (transition) ve canlandırma (animation) konuları verilmektedir. Son bölümde ise CSS3 standardına eklenen esnetme (flex), ızgara (grid) gibi yerleşim konularıyla değişken (variable) ve özellik (property) konuları eklenmiştir.

Eğitimde bir çok konu için etiket (tag) , öznitelik (attribute), özellik (property) gibi öğeler gerektiğinde ayrıntılı olarak anlatılsa da; amaç ana mantığın anlaşılması olmuştur. Tek tek öğeleri ezberlemek olanaklı olmadığı için her konuda temel işleyişin öğretilmesi amaçlanmıştır.

Eğitim, herhangi biri çatımlama (framework) içerecek biçimde oluşturulmamıştır. Tümü için gerekli bilgiler, taraf tutulmadan verilmektedir. Öte yandan onları öğrenmek için gerekli bütün bilgilerin içerilmesi amaçlanmıştır. Bootstrap gibi Yanıtlı Tasarım (Responsive Design) çatımlamaları için gerekli altyapıyı sağlamaktadır. Bunun dışında Gereçli Tasarımı (Material Design) gibi konuları anlamak için gerekli bilgiler içermektedir. LESS ya SCSS gibi CSS dillerini kullanımı için gereken konular açıklanmaktadır.

Anlatılan konular, JavaScript ile birlikte öğrenildiğinde, Angular, React ve Vue gibi JavaScript çatımlamalarını kullanmak için ön koşul durumdadır.

Eğitim, herhangi bir programlama dili için oluşturulmamıştır. Java, C#, PHP, Python, JavaScript dillerle arka-uç (back-end) programlama yapanların bilmesi gereken front-end (ön-uç) konuları, her biriyle çalışacak biçimde anlatılmaktadır. Bu biçimiyle söz konusu dillerin web programlama konuların tamamlayıcısı konumundadır.

Eğitim masaüstü (desktop) uygulamaları için olduğu gibi taşınabilir (mobile) uygulamalar için kullanılabilecek bilgiler vermektedir. Bu anlamda Ionic, React Native gibi çatımlar kullanarak ya da kullanmadan yapılan melez (hybrid) mobil geliştirmeye giriş oluşturmaktadır.

Anlatım tümüyle uygulamalıdır. Her dersin başında çok kısa bilgi verildikten sonra hemen uygulamaya geçilmekte, kuramlı konular uygulama yaparken, gerektikçe anlatılmaktadır. Eğitimdeki örnekleri uygulayan kişilerin başka bir çalışma yapmasına gerek kalmadan proje geliştirebilecek, piyasada çalışabilecek duruma gelmesi amaçlanmaktadır.