Name: Web Tasarım Kursu: Projelerle HTML, CSS, JS ve Bootstrap
Rating: 4.6 (1136 reviews)

Udemy Business

Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Created byBilişim Dünyası

Last updated 5/2026

Turkish

What you'll learn

İleri duzey web site tasarımları yapabileceksiniz. Css Flex yapıları ile responsive site tasarımı yapabileceksiniz.
Eğitim seti içinde bulanan projeler ile öğrendiklerinizi pekiştirecek. Ve sizlerde özgün site tasarımları yapabileceksiniz.
Javascript ve JQuery kullanarak kullanıcı ile etkileşimli siteler kodlayabileceksiniz. Bootstrap ile hızlı ve etkili responsive site tasarımları yapabileceksini
Web sitesi tasarlarken renk uyumu araçlarını, web fontları ve diğer harici araçları tanıyacaksınız.
Uzmanlık gerektiren kodlara hakim olacaksınız
Kendinize ait kod kütüphanesi olusturabileceksiniz
HTML elemanlarını ve HTML5 ile gelen SEO çalışmaları açısından önemli yeni etiketleri kullanacaksınız.
Eğitimimiz içinde bulunan örnek projeler ile masaüstü web siteleri ve responsive(mobil uyumlu) web siteleri geliştirebileceksiniz
CSS ile sitelerinizi görsel açıdan zenginleştirecek, CSS3 ile animasyon ve dönüştürme araçlarını etkin bir şekilde kullanacaksınız
Javascript kullanarak temel programlama mantığını (Algoritma) öğreneceksiniz.
Gördüğünüz web sitelerin hangi yapılar kullanılarak oluşturulduğunu bileceksiniz.
A'dan Z'ye Front-End Kursu, front-end development, html, css, javascript, jquery, bootstrap, responsive web
web proje geliştirme, web sitesi yapma, ileri seviye web tasarım kursu, Web Proje destekli eğitim, web tasarım öğrenin, web tasarım nasıl yapılır, web site html
Kendiniz Javascript ve JQuery kullanarak siteleriniz için animasyonlu slider tasarlayabileceksiniz.

Coding Exercises

This course includes our updated coding exercises so you can practice your skills as you learn.

Course content

20 sections • 256 lectures • 47h 15m total length

Kurs icerigi5:42
Web editörlerini tanıyalım5:16
Web sitesi tasarlamak için kullanabileceğimiz editörleri tanıyalım
Web Editörleri İçin Emmet Eklentisi6:29
Dreamweaver arayüzü tanıma ve sayfaları test etme14:25
Html Ders Notları
Temel html yapısı, head, meta, style ve script tagları18:03
Html etiketleri - h, p, b, strong, u, i, del, sub, sup12:37
Yazılar üzerinde kalın, eğik, altı çizgili, başlık gibi işlemleri yapabilirsiniz.
Html etiketleri - pre, marque, font9:04
Biçimlendirmesiz metin veya bilgisayar kodu gibi metinlerinizi pre etiketi kullanarak oluşturabilirsiniz. Kayan yazılar ekleyebilir(marque) ve font tagı ile yazıları biçimlendirebilirsiniz.
Html Etiketleri - Sıralı ve Sırasız Listeler8:12
Html ile sıralı ve sırasız liste kullanımını göreceksiniz. Ayrıca listeler ile css derslerinde açılır kapanır menü tasarımı yapılacaktır.
Html Etiketleri - Link Vermek8:23
Html Etiketleri - img tagı (Resim Ekleme)7:09
img tagı ile sayfalarımıza resimler ekleyebilirsiniz. Resimler kendi serverınızda yüklü olabileceği gibi harici kaynaklardan da resim ekleyebilirsiniz.
Html Etiketleri - Video ve Ses Ekleme(Video - Audio taglar)7:27
Sayfalarınıza video ve ses dosyaları ekleyebilir. Ses ve video oynatıcı için kontrol düğmelerini gösterip-gizleyebilirsiniz..
Form Kontrol - text, button, submit13:34
Form Kontrol - radio ve checkbox11:24
Form Kontrol - password, tel, email, url15:25
Form Kontrol - Açılır Kutular (select)5:45
Form Kontrol - number, file, resetbutton4:36
Form Kontrol - Tarih ve saat kontrolleri9:49
Html Etiketleri - Tablolar7:38
Sitelerin temel html yapısı9:29
Div yapısı teorik eğitim4:14
Div yapısı uygulama7:27
Html5 ile gelen div etiketleri6:27
Html etiketleri tanıma

Css İle Tanışalım21:52
CSS Ders Notları
Css div float etkisini temizleme(clear)11:15
Position Sınıfları relative ve absolute15:04
Div konumlandırma (position)18:43
Css ile arkaplan renkleri17:53
Css ile arkaplan resimleri ve paralax efekti17:13
Css Display Özelliği10:31
Css Font Kullanımı - Harici Font Kullanımı-1 Google Fonts11:30
Css Font Kullanımı - Harici Font Kullanımı8:59
CSS Font Kullanımı- Fontawesome14:26
Css Font biçimlendirme ve gölgelendirme12:36
Css Yatay Menü Oluşturma20:12
Css Dikey Menü Oluşturma5:34
Css Seçiciler121:56
Css ile sayfamızda bulunan html etiketlerini seçip biçimlendirmek için birçok seçici bulunmaktadır.
1- Evrensel seçici(*)
2- Class seçici ( . )
3- Id seçici ( # )
4- HTML Etiket Seçicileri(p, div, a, img...)
5- Çoklu Seçiciler( X, Y, Z....)
6- İç nesne seçiciler - Torun Seçiciler (X Y)
7- Yanyana seçiciler (X+Y)
8- Çocuk Seçiciler(X>Y)
9- Bitişik Seçiciler(X~Y)
Css Seçiciler29:08
10- Nitelik Seçiciler(Html Etiketlerinde bulunan nitelikleri seçmede kullanılır X[Y])
11- Değer İçeren Nitelik Seçiler(X[Y = "....."])
12-first-letter , first-line seçicisi(İlk harf- satır seçme)
Css Seçiciler315:04
13- Before ve After Seçicisi(X::before, Y::after)
14-nth-child Çocuk Seçicisi( kutu:nth-child(n))
15-Tablo Biçimlendirme(nth-child(even, odd)
Css Seçiciler417:25
16- Sözde(pseudo) seçiciler(hover, visited, active), form elemanlarını biçimlendirme
Css Seçiciler - nth-child() Pratik Uygulama12:09
Temel CSS Kullanımı

Css Ölçü Birimleri26:01
Css Flex Container - Justify-Content6:27
Css Flex Container - align-items2:17
Css Flex Container - flex-direction3:15
Css Flex Container - flex-wrap2:34
Css Flex Container - align-content7:42
Css Flex Container - order2:17
Css Flex Item - flex-grow6:25
Css Flex Item - flex-shrink4:02
Css Flex Item - flex-basis7:00
Css Flex Item - align-self-flex4:19
Flex Yapılar Sınav
css ile kart hazırlama ödev0:01

Css Geçiş Ekleme Transition12:29
Css Animation15:20
Css Transform Araçları (Rotate-Transform-Origin)5:32
Css Transform Araçları - Scale(Büyütme - Küçültme)4:57
Css Transform Araçları - Translate(Konum Değiştirme)8:25
Css Transform Araçları - Skew(Eğme)11:15
Css Transform 3D - Teorik Eğitim5:29
Css Transform Araçları - rotateX ve rotateY8:08
Css Transform Araçları ile Flipcard(önlü arkalı kart) Yapımı6:53
Css Transform Araçları - Koordinat sistemi ve Z-Ekseni7:58
Css Transform Araçları - TranslateZ ve Perspektive-Origin7:34
Css Transform Araçları Preserve-3D - Rotate3D ve Küp Yapımı11:47
Css Overflow - Taşma4:32
Css Overflow - word-wrap ve white-space5:04
Css Overflow - word-break ve text-overflow3:38
Css Overflow - taşan yazıları Üç Nokta(...) ile sonlandırmak7:55
Css Fare İşaretçileri2:29
Css İle Resim Filtre İşlemleri8:36
Form Araçları Biçimlendirme - Text ve Button16:42
Form Araçları Biçimlendirme - Metin Kutularına İkon Ekleme8:51
Form Araçları Biçimlendirme - Checkbox Biçimlendirme14:48
Form Araçları Biçimlendirme - Radio Buton Biçimlendirme2:51

Javascripti Tanıyalım10:39
Yazdırma İşlemleri - innerHTML, write,alert,value,console.log13:57
Değişken Kavramı10:28
Matematiksel işlemler3:10
Önden ve sondan arttırma8:06
Mantıksal Operatörler4:55
Kullanıcıdan Bilgi Alma7:54
Form Olayları 17:01
Form Olayları 27:34
Fonksiyonlar Nedir? Parametresiz Fonksiyonlar11:42
Parametreli Fonksiyonlar7:48
Anonim Fonksiyonlar3:35
Değişkenlerin etki alanı - Global ve Local Değişkenler10:19
Fonksiyonlar Örnek Uygulama6:51

if - else şartlı ifadesi nedir, hangi durumlarda kullanılır?10:33
if-else örnek uygulamalar (&& ve operatörü)15:56
if-else örnek uygulamalar (|| or operatörü)5:15
if-else örnek uygulamalar (Not Sistemi Dönüştürme)6:24
if-else ile form kontrol uygulaması3:49
Şifreyi Göster/Gizle Butonu Nasıl Yapılır? (JavaScript ile)11:44
Döngüler - For döngüsü kullanımı11:24
For döngüsü örnek uygulama 15:40
For - If Örnek Uygulama1- Sayı Tahmin Oyunu8:49
For If Örnek Uygulama2 - Asal Sayı Tespit Etme5:58
105. For If Örnek Uygulama Asal Çarpan8:03
İç İçe For Yapıları5:17
İç İçe For Döngüsü - Yıldız Karakterlerinden Üçgen Oluşturma4:30
While - Do While Döngü Yapıları6:30
While Örnek İstenilen Sayıda Asal Sayı Bulma12:35
Switch Case Yapısı ve Örnek Uygulamalar4:23
Bölüm Sonu Ödevleri0:02

Requirements

Temel Bilgisayar Kullanımını Bilmek
Web Tasarıma İlgili Olmak
Öğrenmeye İstekli Olmak
Sabırlı Olmak
Uygulama Yapmaya İstekli Olmak

Description

Front-End Web Tasarım ve Geliştirme Kursu (HTML, CSS, JS, jQuery, Bootstrap 5)

C ve HTML’den JavaScript’e, Bootstrap ile responsive tasarımlara kadar sıfırdan ileri seviyeye Front-End geliştirmeyi öğrenmeye hazır mısınız? Bu kurs, adım adım uygulamalar ve gerçek projelerle web tasarım becerilerinizi pratikte güçlendirecek.

Bu Kursta Neler Öğreneceksiniz?

HTML ve HTML5: Temel etiketler, sayfa yapısı ve içerik oluşturma.
CSS ve CSS3: Stiller, görsellik, layout ve responsive tasarım.
JavaScript ve jQuery: Animasyonlar, kullanıcı etkileşimi ve dinamik içerik.
Bootstrap 5: Grid sistemi, hazır component’ler ve hızlı, etkili tasarımlar.
Proje tabanlı öğrenme: Kurs boyunca gerçek projelerle öğrendiklerinizi pekiştireceksiniz.

Kursun Kazanımları

Kendi web sitelerinizi tasarlayıp yayınlayabileceksiniz.
Kod yazmanın keyfini yaşayacak, uygulamalarınızı hayata geçirebileceksiniz.
Programlama mantığını öğrenecek, diğer dillere kolay adapte olabileceksiniz.
Front-End araçlarını ve modern web teknolojilerini profesyonel şekilde kullanabileceksiniz.

Neden Bu Kurs?

15 yıllık deneyimle hazırlanmış: Öğrencilerin sık takıldığı noktalar basit örneklerle çözüldü.
Sistematik ve anlaşılır anlatım: Konular kolaydan zora, hiyerarşik bir sırayla işleniyor.
Uygulamalı ve proje odaklı: Teori değil, gerçek hayatta kullanılan yöntemler öğretiliyor.
Her seviyeden öğrenciye uygun; sıfırdan başlayıp ileri seviye web siteleri tasarlayabilirsiniz.

Kurs İçeriği

HTML & HTML5
CSS & CSS3
JavaScript
jQuery
Bootstrap 5
Yardımcı araçlar ve modern web geliştirme teknikleri

Bu kurs ile sadece web tasarımı öğrenmekle kalmayacak, kendi projelerinizi geliştirebilecek ve yayınlayabileceksiniz. Kod yazmanın keyfini yaşayacak, her derste ilerlemenizi göreceksiniz.

Who this course is for:

Kendini Web Tasarım Konusunda Geliştirmek İsteyenler
Meslek Lisesi Web Tasarım Bölümü Öğrencileri
Üniversitede Web Tasarım Dersini Alan Öğrenciler
Web Tasarım Alanında Çalışmak İsteyenler
Hobi Amaçlı Web Tasarım İle Uğraşanlar
Düşündüğü veya Hayal Ettiği Web Sitelerini Kodlamak İsteyenler

What you'll learn

Explore related topics

Coding Exercises

Course content

Kurs Tanıtımı ve Html Etiketleri23 lectures • 3hr 19min

CSS Dersleri19 lectures • 4hr 22min

PROJE 1 : İlk Sitemi Tasarlıyorum7 lectures • 1hr 12min

İleri Seviye Css Dersleri12 lectures • 1hr 12min

Responsive (Mobil Uyumlu) Tasarım İçin Ön Hazırlık5 lectures • 37min

PROJE 2: Responsive Web Sitesi Kodluyorum6 lectures • 1hr 56min

İleri Seviye Css Dersleri 222 lectures • 3hr 1min

Javascript İle Programlama14 lectures • 1hr 54min

Javascript Html Elemanlarını Seçme6 lectures • 32min

Kontrol yapıları ve döngüler - Örnek Uygulamalar17 lectures • 2hr 7min

Requirements

Description

Who this course is for: