PopülerYolculuk
HTML Öğren
Ücretsiz, interaktif online HTML kursu. Her derste HTML yazıyorsun — etiketler, öznitelikler, formlar, bağlantılar, görseller ve gerçek bir web sayfasının yapısı — yazdıkça canlı önizleme ve bitirdiğinde ücretsiz sertifika.
256,507+ codders kayıtlı
- Başlangıç dostu
Yapay zeka destekli kodlama yardımı
Uygulamalı interaktif dersler
Her derste sesli anlatım
Bilgini sınamak için testler
Ücretsiz tamamlama sertifikası
Müfredat
Bölüm 1
Fundamentals
Bölüme başlaBaşlaGenişletDaraltLearn the core structure and syntax to create web pages from scratchHTML Temelleri
5 ders531- 01HTML Nedir?Görev
- 02HTML'in Temel YapısıGörevQuiz
- 03Etiketler ve ElementlerGörevQuiz
- 04İç İçe Geçirme ve Kapatma EtiketleriGörevQuiz
- 05HTML'de YorumlarGörevQuiz
Metin ve Biçimlendirme
6 ders1135- 01BaşlıklarGörevUstalıkQuiz
- 02ParagraflarGörevUstalıkQuiz
- 03Satır SonlarıGörevUstalıkQuiz
- 04Kalın ve İtalik MetinGörevUstalıkQuiz
- 05Yeniden Kalın ve İtalikGörevUstalıkQuiz
- 06Özet - BiçimlendirmeGörev
Listelerle Çalışma
4 ders721- 01Sırasız ListeGörevUstalıkQuiz
- 02Sıralı ListeGörevUstalıkQuiz
- 03İç İçe ListelerGörevUstalıkQuiz
- 04Özet - ListelerGörev
Tarif Kartı
Proje4 ders1- 01Projeye Genel BakışGörev
- 02Tarif Başlığı ve AçıklamasıProje
- 03MalzemelerProje
- 04AdımlarProje
İçerik Ekleme
5 ders837- 01HTML ÖznitelikleriQuiz
- 02BağlantılarGörevUstalıkQuiz
- 03Yeni Sayfa BağlantılarıGörevUstalıkQuiz
- 04GörsellerGörevUstalıkQuiz
- 05Görsel ÖznitelikleriGörevUstalıkQuiz
Sayfa Düzeni
5 ders930- 01BölümlerGörevUstalıkQuiz
- 02Satır İçi Span'lerGörevUstalıkQuiz
- 03Semantik EtiketlerGörevUstalıkQuiz
- 04Section ve Article EtiketleriGörevUstalıkQuiz
- 05Özet - DüzenGörev
Kişisel Profil Sayfası
Proje5 ders1- 01Projeye Genel BakışGörev
- 02Header BölümüProje
- 03Profil ResmiProje
- 04Hakkımda BölümüProje
- 05Sosyal BağlantılarProje
Formlar ve Inputlar Bölüm 1
6 ders936- 01Form TemelleriQuiz
- 02Metin InputlarıGörevUstalıkQuiz
- 03Input ÖznitelikleriGörevUstalıkQuiz
- 04Şifre AlanıGörevUstalıkQuiz
- 05Inputlar için EtiketlerGörevUstalıkQuiz
- 06Özet - Temel FormGörev
Formlar ve Girdiler Bölüm 2
7 ders1239- 01Radyo DüğmeleriGörevUstalıkQuiz
- 02Onay KutularıGörevUstalıkQuiz
- 03Açılır MenülerGörevUstalıkQuiz
- 04ButonlarGörevUstalıkQuiz
- 05Formlardaki ButonlarGörevUstalıkQuiz
- 06Özet - Formlar #1Görev
- 07Özet - Formlar #2Görev
Tablolar
4 ders723- 01Tablo TemelleriGörevUstalıkQuiz
- 02Başlık EklemeGörevUstalıkQuiz
- 03Satır ve Sütun BirleştirmeGörevUstalıkQuiz
- 04Özet - TablolarGörev
Etkinlik Kayıt Sayfası
Proje5 ders1- 01Projeye Genel BakışGörev
- 02Header BölümüProje
- 03Etkinlik Detayları BölümüProje
- 04Kayıt FormuProje
- 05Footer BölümüProje
Final Meydan Okumaları
4 ders4- 01Basit Profil KartıGörev
- 02Etkinlik Davetiye KartıGörev
- 03Basit Makale SayfasıGörev
- 04Favori Kitaplar ListesiGörev
Bölüm 2
Styling with CSS
Bölüme başlaBaşlaGenişletDaraltBring your web pages to life with colors, layouts, and stylesGiriş
5 ders540- 01CSS Nedir?GörevQuiz
- 02CSS SözdizimiGörevQuiz
- 03CSS Yorum SatırlarıQuiz
- 04Head EtiketiGörevQuiz
- 05Title EtiketiGörevUstalıkQuiz
CSS Ekleme
4 ders725- 01Satır İçi CSSGörevUstalıkQuiz
- 02Dahili CSSGörevUstalıkQuiz
- 03Harici CSSGörevUstalıkQuiz
- 04Temel Stil Verme MücadelesiGörev
Temel Seçiciler
7 ders1247- 01Seçicilere GirişGörevQuiz
- 02Tür SeçiciGörevUstalıkQuiz
- 03Sınıf SeçiciGörevUstalıkQuiz
- 04ID SeçiciGörevUstalıkQuiz
- 05Grup SeçicilerGörevUstalıkQuiz
- 06Evrensel SeçiciGörevUstalıkQuiz
- 07Seçim Meydan OkumasıGörev
Metin Temelleri
8 ders1450- 01Metin RengiGörevUstalıkQuiz
- 02Yazı Tipi AilesiGörevUstalıkQuiz
- 03Yazı Tipi BoyutuGörevUstalıkQuiz
- 04Yazı Tipi KalınlığıGörevUstalıkQuiz
- 05Metin HizalamaGörevUstalıkQuiz
- 06Metin SüslemeGörevUstalıkQuiz
- 07Tekrar Görevi #1Görev
- 08Tekrar Görevi #2Görev
Renkler ve Arka Planlar
5 ders834- 01Arka Plan RengiGörevUstalıkQuiz
- 02HEX RenkleriGörevUstalıkQuiz
- 03RGB RenkleriGörevUstalıkQuiz
- 04RGBA ile ŞeffaflıkGörevQuiz
- 05Tekrar Görevi #1Görev
Kafe Menüsü
Proje3 ders1- 01Tipografi TemelleriGörev
- 02Metin ŞekillendirmeProje
- 03Renk ve Arka PlanlarProje
Kutu Modeli Bölüm 1
6 ders943- 01Kutu Modeli Nedir?Quiz
- 02PaddingGörevUstalıkQuiz
- 03MarginGörevUstalıkQuiz
- 04KenarlıklarGörevUstalıkQuiz
- 05Genişlik ve YükseklikGörevUstalıkQuiz
- 06Özet Meydan OkumasıGörev
Kutu Modeli Bölüm 2
5 ders834- 01Kutu BoyutlandırmaGörevQuiz
- 02Kenarlık YarıçapıGörevUstalıkQuiz
- 03TaşmaGörevUstalıkQuiz
- 04Kutu GölgesiGörevUstalıkQuiz
- 05Tekrar Meydan OkumasıGörev
Flex Box
6 ders943- 01Flex Box Nedir?GörevQuiz
- 02Flex DirectionGörevUstalıkQuiz
- 03Justify ContentGörevUstalıkQuiz
- 04Align ItemsGörevUstalıkQuiz
- 05Kusursuz OrtalamaGörevQuiz
- 06Flex Box Meydan OkumasıGörev
Giriş Formu
Proje4 ders1- 01GövdeGörev
- 02Form KapsayıcısıProje
- 03InputProje
- 04ButonProje
Yerleşim Teknikleri
7 ders1152- 01Block ve Inline ÖğelerGörevQuiz
- 02Konumlandırma TemelleriGörevUstalıkQuiz
- 03Relative KonumlandırmaGörevUstalıkQuiz
- 04Absolute KonumlandırmaGörevUstalıkQuiz
- 05Fixed KonumlandırmaGörevUstalıkQuiz
- 06Z-Index TemelleriGörevQuiz
- 07Özet Meydan OkumasıGörev
Duyarlı Tasarım Temelleri
6 ders1052- 01Responsive Tasarım Nedir?GörevQuiz
- 02Viewport Meta EtiketiGörevQuiz
- 03Akışkan DüzenlerGörevUstalıkQuiz
- 04Viewport BirimleriGörevUstalıkQuiz
- 05Media Queries TemelleriGörevUstalıkQuiz
- 06Esnek GörsellerGörevUstalıkQuiz
Tonga Web Sayfası
Proje6 ders1- 01Gezinme MenüsüGörev
- 02Karşılama BaşlığıProje
- 03Hakkında BölümüProje
- 04İletişim BölümüProje
- 05Viewport EtiketiProje
- 06Media QueryProje
Son Meydan Okumalar
4 ders4- 01Öğeleri DüzenleGörev
- 02Film ListesiGörev
- 03Düğün DavetiyesiGörev
- 04Yüzen BildirimGörev
Bölüm 3
CSS Mastery
Bölüme başlaBaşlaGenişletDaraltTake you css skills to the next level!Seçici Uzmanlığı – Kombinasyon
6 ders539- 01GirişQuiz
- 02Alt Öğe SeçicisiGörevQuiz
- 03Çocuk SeçiciGörevQuiz
- 04Bitişik Kardeş SeçicisiGörevQuiz
- 05Genel Kardeş SeçicisiGörevQuiz
- 06Özet Meydan OkumasıGörev
Etkileşimli Sözde Sınıflar
5 ders431- 01Sözde SınıflarQuiz
- 02Hover EfektleriGörevQuiz
- 03Odaklanma EfektleriGörevQuiz
- 04Aktif StillerGörevQuiz
- 05Özet Meydan OkumasıGörev
Yapısal sözde sınıflar
5 ders432- 01Yapısal sözde sınıflarQuiz
- 02İlk Çocuğu HedeflemeGörevQuiz
- 03Son Çocuğu HedeflemeGörevQuiz
- 04Desen Gücü: nth-child KullanımıGörevQuiz
- 05Özet Meydan OkumasıGörev
Açılır Menü Projesi
4 ders4- 01Alt Menüyü EkleGörev
- 02Alt Menüyü GösterGörev
- 03Daha Fazla Stil VermeGörev
- 04Input ve ButonGörev
Görsel Efektler
5 ders536- 01GradyanlarGörevQuiz
- 02CSS FiltreleriGörevQuiz
- 03TransformGörevQuiz
- 04Geçişler ve Hover EfektleriGörevQuiz
- 05Tekrar Meydan OkumasıGörev
Açılış Sayfası
5 ders5- 01Header Bölümünü Stilize EtGörev
- 02Butonu Stilize EtGörev
- 03Bölüm DüzeniGörev
- 04Kart DüzeniGörev
- 05Son Dokunuşları EkleGörev
CSS Grid ile İnşa Edin
4 ders426- 01Grid TemelleriGörevQuiz
- 02Grid-row Öğe YerleşimiGörevQuiz
- 03İsimlendirilmiş AlanlarGörevQuiz
- 04Tekrar GöreviGörev
Flavor Fiesta web sitesi
4 ders4- 01Grid yapısını kurmaGörev
- 02HeaderGörev
- 03Ana bölümGörev
- 04FooterGörev
Son Meydan Okumalar
5 ders5- 01Aktif Menüyü VurgulamaGörev
- 02Zebra Tablo SatırlarıGörev
- 03Buton Hover EfektiGörev
- 04Grid Kart DüzeniGörev
- 05Bulanık Hero GörseliGörev
Bölüm 4
Practical Frontend
Bölüme başlaBaşlaGenişletDaraltCombine structure and style to design complete, responsive web pagesDeğişkenler
5 ders432- 01DeğişkenlerQuiz
- 02CSS Değişkenlerini KullanmaGörevQuiz
- 03Design Tokens için DeğişkenlerGörevQuiz
- 04Yerel DeğişkenlerGörevQuiz
- 05Özet Meydan OkumasıGörev
Mobil Öncelikli Strateji
6 ders643- 01“Mobil öncelikli” ne anlama gelirGörevQuiz
- 02Mobil Öncelikli TipografiGörevQuiz
- 03Mobil Öncelikli NavigasyonGörevQuiz
- 04Mobil Öncelikli GörsellerGörevQuiz
- 05Mobil Öncelikli FormlarGörevQuiz
- 06Özet Meydan OkumasıGörev
Temalandırma ve Görsel Stiller
5 ders535- 01CSS'te TemalandırmaGörevQuiz
- 02Karanlık/Aydınlık Mod TemelleriGörevQuiz
- 03Vurgu Renkleri ve Öne ÇıkarmaGörevQuiz
- 04Tipografi TemalandırmaGörevQuiz
- 05Özet Meydan OkumasıGörev
Ekstrem Sporlar
3 ders3- 01DeğişkenlerGörev
- 02Mobil ÖncelikliGörev
- 03TemalandırmaGörev
UI bileşenleri
6 ders642- 01Açılır menüGörevQuiz
- 02SekmelerGörevQuiz
- 03RozetlerGörevQuiz
- 04Araç ipuçlarıGörevQuiz
- 05Bildirim banner'larıGörevQuiz
- 06Tekrar meydan okumasıGörev
Responsive Tasarım Kalıpları
6 ders645- 01Holy Grail DüzeniGörevQuiz
- 02Kart Izgara DüzeniGörevQuiz
- 03Yan Menü + İçerik DüzeniGörevQuiz
- 04Bölünmüş Ekran DüzeniGörevQuiz
- 05Yapışkan Üst / Alt BilgiGörevQuiz
- 06Genel TekrarGörev
Final Meydan Okumaları
4 ders4- 01Profil KartıGörev
- 02Çikolata Galerisi IzgarasıGörev
- 03Yedi HarikaGörev
- 04Yeni Yedi HarikaGörev
Bölüm 5
JavaScript in Action
Bölüme başlaBaşlaGenişletDaraltExplore how javascript is used with html and cssEtkileşim/UI Bileşenleri
4 ders433- 01SekmelerGörevQuiz
- 02Akordiyon (açılır/kapanır)GörevQuiz
- 03Modal (aç/kapat)GörevQuiz
- 04Açılır MenüGörevQuiz
Formlar ve Doğrulama
3 ders325- 01Girdi doğrulamaGörevQuiz
- 02Özel hata mesajlarıGörevQuiz
- 03Gönder butonlarıGörevQuiz
Bildirimler ve Geri Bildirim
3 ders327- 01Toast mesajıGörevQuiz
- 02Kapatılabilir banner'larGörevQuiz
- 03Yükleme göstergeleriGörevQuiz
Toast Bildirimli Form
2 ders2- 01Toast Mesajını GösterGörev
- 02Toast Mesajını GizleGörev
Navigasyon
3 ders329- 01Mobil burger menü açma/kapamaGörevQuiz
- 02Daraltılabilir yan navigasyonGörevQuiz
- 03Açılır menülerGörevQuiz
Temalandırma ve Kişiselleştirme
2 ders217- 01Koyu/açık temalarGörevQuiz
- 02Tema seçimini kaydetmeGörevQuiz
Animasyonlar ve Efektler
3 ders327- 01CSS geçişleriGörevQuiz
- 02Kaydırma ile öğe animasyonlarıGörevQuiz
- 03Buton tıklama animasyonlarıGörevQuiz
Animasyonlu Navigasyon
3 ders36- 01DeğişkenlerGörevQuiz
- 02Olay DinleyicileriGörev
- 03CSS TransitionGörev
Final Meydan Okumaları
4 ders4- 01Etkileşimli SSS AkordiyonuGörev
- 02Giriş FormuGörev
- 03Responsive NavbarGörev
- 04Temalı Blog SayfasıGörev
Neden Coddy ile HTML öğrenmelisin
- HTML'i tarayıcında yaz ve oluşturulan sayfayı yan yana gör. Editör kurulumu yok, hiçbir ayar yok. HTML kodunda yaptığın her değişiklik anında ekrana yansıyor, böylece geri bildirim döngüsü kısa kalıyor.
- Modern, semantik HTML: başlıklar, listeler, bağlantılar, görseller, tablolar, formlar ve
<header>,<nav>,<main>,<section>,<footer>gibi semantik etiketler. Gerçek bir web sitesi kurarken kullanacağın türden HTML. - Yapay zeka ipuçları, HTML hatalarını düzeltmene yardımcı olur — kapanmamış etiketler, bozuk attribute söz dizimi, gözden kaçan erişilebilirlik ayrıntıları — cevabı vermeden, böylece HTML alışkanlıkların kalıcı olur.
- Bitirdiğinde ücretsiz HTML sertifikası. Web geliştirme için sağlam bir ilk adım; CSS ve JavaScript kurslarıyla doğal bir şekilde tamamlanıyor.
HTML öğrenme hakkında sık sorulan sorular
HTML öğrenmek kolay mı?
HTML, teknolojide öğrenebileceğin en kolay şeylerden biri. Programlama dili değil, bir işaretleme dili — mantık yazmak yerine içerik parçalarını (başlıklar, paragraflar, bağlantılar, görseller) etiketliyorsun. Yeni başlayanların çoğu daha ilk saatte ilk gerçek web sayfasını kurar.
HTML öğrenmek ne kadar sürer?
HTML temelleri günlük pratikle genellikle bir iki haftada öğrenilir. Gerçek projeler üretirken rahat etmek için hızına göre bir ila üç ay ayırmak mantıklıdır.
HTML'i CSS ve JavaScript'ten önce mi öğrenmeliyim?
Evet. HTML, sayfanın yapısını tanımlar; CSS görünümünü kontrol eder; JavaScript ise etkileşim katar. Önce HTML öğrenmek, sonra stil verip canlandırabileceğin somut bir şeyin olması demek. HTML kursu bilerek kısa tutuldu; böylece hızlıca CSS ve JS'e geçebilirsin.
HTML bir programlama dili mi?
Açıkçası hayır. HTML, web içeriğinin yapısını tanımlamak için kullanılan bir işaretleme dilidir. Tek başına değişkenleri, koşulları veya döngüleri yoktur. Bir web sayfasındaki asıl programlama JavaScript'ten gelir; o da ayrı bir kursta ele alınıyor.
HTML'i ücretsiz olarak online öğrenebilir miyim?
Evet. Etkileşimli HTML kursu ücretsiz — dersler, kodlama egzersizleri, canlı HTML önizlemesi ve bir sertifika. Her şey tarayıcıda çalışıyor, yani başlamak için herhangi bir editör ya da araç kurmanıza gerek yok.
HTML kursundan sonra sertifika alıyor muyum?
Evet. HTML kursunu bitirdiğinde ücretsiz bir tamamlama sertifikası alıyorsun. Özgeçmişine ekleyebileceğin ya da LinkedIn'de paylaşabileceğin, doğrulanabilir bir kanıt — genelde daha kapsamlı bir HTML, CSS ve JavaScript portföyüne giden yolda bir adım.
