HTML Öğren - Kodlama Kursu
HTML Öğren - Kodlama Kursu — Cebindeki canlı önizlemeli HTML editörüne sahip HTML kursu
HTML Öğren - Kodlama Kursu, iPhone ve Android için hazırlanmış bir HTML kursudur; her dersten tek dokunuşla canlı önizlemeli bir HTML editörüne geçmeni sağlar. Bir etiket yaz, sayfanın oluşturulmasını gör; ardından 40 kısa kursta ilk başlıktan formlara, tablolara, anlamsal HTML5'e, erişilebilirliğe ve web bileşenlerine ilerle.
- Fiyat
- Ücretsiz, Pro yükseltmesi
- Platformlar
- iOS ve Android
- Diller
- 22
- Yaş sınırı
- 4+
- Gereksinimler
- iOS 15.1 veya üzeri
- App Store
- 3.0 ★ (1)
Bir etiketin ne anlama geldiğini, bir şey oluşturmasını izlediğinde daha iyi anlarsın.
HTML bir işaretleme dilidir; bu nedenle yeni bir öğeyi anlamanın en hızlı yolu onu yazıp sonucu görmektir. Bu uygulamadaki her ders, editör zaten açık ve önizleme işaretlemenin yanında olacak şekilde sona erer; CSS veya JavaScript dosyalarını ise ancak hazır olduğunda eklersin.
Nedir
HTML Öğren - Kodlama Kursu, iOS ve Android için hazırlanmış, başlangıçta ücretsiz bir HTML kursudur. 40 kurs ve 159 kısa ders boyunca web sayfası işaretlemesini öğretir; dersler başlangıç seviyesinden (A1) ileri seviyeye (C1) doğru sıralanır. Her konu, yerleşik bir HTML kod editörü ve anında önizlemeyle; iletişim formu ve erişilebilir fiyat tablosu gibi 20 rehberli projeyle, 20 hata ayıklama göreviyle ve bir AI mentoruyla eşleştirilir. Böylece tamamen yeni başlayan biri boş bir belgeden anlamsal, erişilebilir ve iyi yapılandırılmış sayfalara ilerleyebilir.
Uygulamanın içinde
Nasıl görünüyor
Kurs
HTML kursunun kapsamı
Uygulamanın kendi kurs listesindeki, öğrenme yolunun öğrettiği sırada sunulan 40 kurs ve 159 ders.
Belge Yapısı, Metin, Bağlantılar, Görseller ve Listeler
Her sayfanın iskeleti: belge yapısı, başlıklar ve paragraflar, bağlantılar ve gezinme, görseller ve şekiller ile sıralı ve sırasız listeler.
Tablolar, Öznitelikler ve Genel Öznitelikler
Verileri tablolarda düzenleme; ardından bir öğeyi ayarlayan öznitelikler ve her etikette çalışan genel öznitelikler.
Formlar: Temel Bilgiler, Gelişmiş Kontroller ve Doğrulama
Önce temel giriş alanları, sonra daha gelişmiş kontroller ve son olarak tarayıcının gönderilmeden önce bir alanı kontrol etmesini sağlayan doğrulama öznitelikleri.
Anlamsal HTML5, Head ve Meta Veriler, Audio ve Video
Anlamsal öğeler, belgenin head bölümü ve meta verileri ile audio ve video öğeleri.
Erişilebilirlik, ARIA Rolleri ve Gelişmiş ARIA Kalıpları
Erişilebilirliğin temelleri, ARIA rolleri ve öznitelikleri ile özel widget'larda kullanılan gelişmiş kalıplar.
Data Öznitelikleri, Şablonlar, Canvas, SVG ve iframe'ler
Özel data öznitelikleri, HTML şablonları, canvas öğesi, HTML içindeki SVG ve iframe'lerde gömülü içerik.
Web Storage, Sürükle ve Bırak, SEO ve E-posta Şablonları
Web storage ve sürükle ve bırak API'si, SEO ve sosyal medya meta etiketleri ile HTML e-posta şablonlarının kendine özgü kuralları.
Web Components, Performans ve Büyük Ölçekli HTML
Özel öğeler, shadow DOM, import maps ve progressive enhancement; ayrıca performans, güvenlik, PWA'lar ve testler ile büyük ölçekte HTML.
Nasıl çalışır
Bir etiketi okumadan oluşturmaya nasıl öğrenirsin?
Ders kısa tutulur ve editör hemen yanında yer alır; böylece bir kavramı okumak ve denemek aynı oturumda gerçekleşir.
Kısa bir ders oku
Kaldığın yerden öğrenme yoluna devam et. Her ders, sırasız liste veya alt metinli bir görsel gibi tek bir fikri ele alır ve birkaç dakika sürer.
Editöre yaz ve önizlemeyi izle
Editörü açıp işaretlemeyi yaz. Önizleme sayfanı yeniden oluşturur; sayfayı biçimlendirmek veya tepki vermesini sağlamak istediğinde CSS ve JavaScript sekmeleri hazırdır.
Kontrol et, düzelt, onunla oluştur
Her konu bir test ve kodlama göreviyle tamamlanır. Bir etiket veya hata anlaşılmadığında AI mentoru bunu açıklar; bir hata ayıklama görevi onarman için bozuk bir sayfa verir ve rehberli bir proje sergileyebileceğin bir şey oluşturmanı sağlar.
İçinde neler var
Learn HTML içeriğinde neler var?
40
A1'den C1'e kurslar
159 ders; belge yapısı, metin, bağlantılar, görseller ve listelerden başlayıp tablolar, formlar ve anlamsal HTML5 üzerinden erişilebilirlik, web bileşenleri, güvenlik ve History and Navigation API'ye kadar ilerler.
Canlı
Önizlemeli HTML editörü
İşaretlemeyi yaz ve oluşturulan sayfanın güncellendiğini gör. Aynı projeye CSS ve JavaScript dosyaları ekleyebilirsin; böylece sade bir belge, çalışan küçük bir web sitesine dönüşür.
20
Rehberli projeler
Tarif kutusu sayfası, iletişim formu, fotoğraf galerisi, gezinme çubuğu ve erişilebilir fiyat tablosu gibi adım adım oluşturulan projeler.
20
Hata ayıklama görevleri
İzini sürmen gereken gerçek hatalar: hiçbir şey göndermeyen bir kayıt formu, kimsenin dokunamadığı bir etiket veya telefonda uzaklaştırılmış şekilde yüklenen bir sayfa.
80
Etiket hızlı başvuru kılavuzu
Ne yapmak istediğini bildiğin ama bunun adını bilmediğin anlar için 80 HTML etiketi, öğesi ve özniteliğinden oluşan başvuru listesi.
50
Mülakat soruları
Açık yanıtlarıyla birlikte web geliştirici mülakatlarında sorulan elli soru; ayrıca açıp düzenleyebileceğin kısa örneklerden oluşan bir kod kitaplığı ve kendi kodlarını ve notlarını kaydedebileceğin bir alan.
Arka plan
HTML nedir ve telefonda yazarak öğrenebilir misin?
HTML (HyperText Markup Language), bir web sayfasının yapısını tanımlayan dildir: hangi metnin başlık, hangisinin paragraf olduğunu, bir bağlantının nereye yöneldiğini ve bir formun ne sorduğunu belirtir. Bir programlama dili değildir; bu nedenle uğraşman gereken döngüler veya değişkenler yoktur. Bu yüzden web geliştirmeye atılan ilk adım genellikle HTML'dir. Yazdığın anda sonuç görünür olduğu için HTML, telefondaki kısa çalışma oturumlarına çok uygundur: bir etiket başparmağınla yazabileceğin kadar kısadır ve önizleme işe yarayıp yaramadığını hemen gösterir.
Öğeler, etiketler ve özniteliklerher derste kullanılan üç kelime
Bir öğe, açılış ve kapanış etiketi arasına yazılan, anlam taşıyan bir içerik parçasıdır; örneğin bir paragraf veya liste öğesi. Öznitelikler açılış etiketinin içinde yer alır ve bir bağlantının yöneldiği adres veya bir görseli açıklayan metin gibi ayrıntıları belirler. Yeni başlayanların yaptığı hataların neredeyse tamamı eksik bir kapanış etiketinden veya yanlış yerleştirilmiş bir öznitelikten kaynaklanır.
Anlamsal HTMLbaşlıklar, gezinme, ana bölüm ve alt bilgi
Anlamsal öğeler, bir sayfa bloğunun nasıl göründüğünü değil, ne olduğunu belirtir. Gezinme çubuğunun, makalenin ve alt bilginin her birinin kendine ait bir öğesi vardır; bu da ekran okuyucularına, arama motorlarına ve sayfayı daha sonra düzenlemesi gereken herkese yardımcı olur. Düzenli bir sayfayı genel amaçlı kapsayıcılardan oluşan bir yığından ayıran alışkanlık budur.
HTML, CSS ve JavaScriptkim ne yapar
HTML yapıyı ve içeriği barındırır, CSS bu içeriğin görünümünü kontrol eder, JavaScript ise bir tıklamaya tepki verme gibi davranışlar ekler. Önce HTML öğrenmek, diğer ikisinin üzerine bağlanacağı bir temel sağlar. Uygulamadaki editörde ayrı HTML, CSS ve JavaScript sekmeleri bulunur; böylece bu üç görevi en baştan birbirinden ayrı tutabilirsin.
Formlar ve erişilebilirlikbasit sayfaların ciddileştiği yer
Formlar, bir sayfanın ziyaretçiden herhangi bir bilgi istemesini sağlar. Aynı zamanda erişilebilirlik sorunlarının çoğunun başladığı yerdir: kimsenin dokunamadığı bir etiket veya ekran okuyucunun adını okuyamadığı bir alan. Etiketler, doğrulama öznitelikleri ve ARIA rolleri, bir sayfanın herkes için çalışıp çalışmayacağını belirleyen küçük işaretleme parçalarıdır.
Uygunluk
Kimler için uygun — kimler için değil
Şu durumlarda senin için uygun
- İlk web sayfanı yazıyor ve kullanmadan önce her etiketin açıklanmasını mı istiyorsun?
- Her satırın sonucunu hemen görebildiğinde daha iyi mi öğreniyorsun?
- Bir blog, mağaza sayfası veya portföy işletiyor ve arkasındaki işaretlemeyi düzenlemek mi istiyorsun?
- CSS, JavaScript veya front-end çalışmalarına geçmeyi planlıyor ve önce sağlam bir temel mi istiyorsun?
- Bir web geliştiricisi mülakatına hazırlanıyor ve prova yapmak için sorular mı istiyorsun?
Şu durumlarda doğru araç değil
- Dosyalar, klasörler ve yerel sunucuyla eksiksiz bir masaüstü çalışma akışına mı ihtiyacın var?
- Her kursun ücretsiz olmasını mı bekliyorsun? İlk kurs, ilk rehberli proje ve iki görev ücretsizdir; Pro geri kalanların kilidini açar.
- Zaten her gün üretim ortamında HTML yazıyor ve kurs yerine bir başvuru kaynağı mı istiyorsun?
- Bir tasarım aracı öğrenmek mi istiyorsun? Bu uygulama işaretleme ve sayfaların arkasındaki kod hakkındadır.
Sorular
Sık sorulan sorular
HTML Öğren - Kodlama Kursu nedir?
HTML Öğren - Kodlama Kursu, HTML'yi ilk etiketten ileri düzey konulara kadar öğreten iPhone ve Android uygulamasıdır. Yerleşik bir HTML düzenleyici ve canlı önizlemeyi 40 kısa kurs, 20 rehberli proje, 20 hata ayıklama görevi ve bir AI mentoruyla bir araya getirir. Başlangıçta ücretsizdir ve 22 dilde kullanılabilir.
Telefonda gerçekten HTML yazıp önizleyebilir miyim?
Evet. HTML Öğren - Kodlama Kursu içindeki düzenleyicide HTML, CSS ve JavaScript sekmeleri bulunur; önizleme de işaretlemenin oluşturduğu sayfayı gösterir. Etiketler kısa olduğu için telefon, HTML'nin gerektirdiği odaklanmış pratik için rahattır. Daha büyük bir ekran ancak aynı anda çok sayıda dosyayla çalışırken kullanışlı olur.
Başlamadan önce kodlama deneyimine ihtiyacım var mı?
Hayır. Öğrenme yolu bir HTML belgesinin nasıl oluşturulduğuyla başlar ve her terimi kullanmadan önce sade bir dille açıklar. HTML'de önce öğrenmen gereken döngüler veya değişkenler yoktur; bu nedenle HTML Öğren - Kodlama Kursu tam bir acemiyi istisna değil, normal durum olarak kabul eder.
HTML ile CSS arasındaki fark nedir?
HTML, sayfada ne olduğunu ve her bölümün ne anlama geldiğini tanımlar; örneğin bir başlık, bağlantı veya form alanı. CSS ise renkler, boşluklar ve düzen dâhil olmak üzere görünümünü tanımlar. Uygulama önce HTML'yi öğretir ve düzenleyicide CSS dosyaları eklemene izin verir; böylece görevlerini birbirine karıştırmadan ikisinin birlikte çalıştığını görebilirsin.
HTML'nin temellerini öğrenmek ne kadar sürer?
Çoğu kişi birkaç kısa oturumun ardından basit ve doğru bir sayfa yazabilir; çünkü temel öğelerin sayısı azdır: başlıklar, paragraflar, bağlantılar, görseller, listeler ve temel formlar. Erişilebilirlik, anlamsal yapı ve web components gibi daha derin konular daha uzun sürer. Buradaki dersler birkaç dakika içinde tamamlanacak şekilde yazılmıştır; bu nedenle her gün çalışmak gerçekçidir.
Uygulamada ne tür projeler oluşturabilirim?
20 rehberli proje arasında tarif kutusu sayfası, iletişim formu, fotoğraf galerisi, gezinme çubuğu ve erişilebilir fiyat tablosu bulunur. Her biri adım adım oluşturulur. Bilerek küçük tutuldukları için tamamlayabilir ve kodu kaydettiğin snippet'lerde saklayabilirsin.
Learn HTML erişilebilirlik ve formları kapsıyor mu?
Evet, hem de oldukça kapsamlı biçimde. Formlar; temel bilgiler, gelişmiş kontroller ve doğrulama özniteliklerini kapsayan üç kurstan oluşur. Erişilebilirlik için de temeller, ARIA rolleri ve gelişmiş ARIA kalıplarını ele alan ayrı kurslar vardır. Hata ayıklama görevlerinde, kimsenin dokunamadığı bir label gibi sorunlar da bulunur; bu sayede konular soyut kalmaz, pratiğe dönüşür.
Uygulama ücretsiz mi ve Pro ne ekliyor?
Uygulamayı ücretsiz indirip hemen başlayabilirsin: ilk kurs, ilk rehberli proje, iki görev ve canlı düzenleyici; günlük AI mentor kullanım hakkıyla birlikte dahildir. Pro tüm kursların, projelerin ve görevlerin, sertifika sınavının ve sınırsız AI mentor sorularının kilidini açar ve reklamları kaldırır.
Başla
İlk etiketini yaz ve oluşturulduğunu gör
iOS ve Android'de 22 dilde, başlangıç için ücretsiz.
CoddyKit'ten daha fazlası
iOS ve Android üzerinde kullanılabilir.