Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, Emin Başbakan tarafından sunulan bir web geliştirme eğitim içeriğidir. Eğitmen, web geliştirme konusunda içerik üreten bir kanal sahibidir.
- Video, giriş seviyesindeki HTML ve CSS bilgisine sahip izleyiciler için hazırlanmış bir web sitesi oluşturma eğitimidir. İçerik, VS Code kullanımı, temel HTML etiketleri (header, nav, div, a), CSS ile stil uygulama, Google Fonts entegrasyonu ve arka plan resmi ekleme gibi konuları kapsamaktadır. Eğitmen, navbar tasarımı, responsive tasarım için media query kullanımı ve içerik kısmına geçiş yaparak web sayfasının tüm aşamalarını adım adım göstermektedir.
- Videoda ayrıca scroll engelleme, padding, margin, font boyutu, renk ayarları ve hover efektleri gibi temel CSS özellikleri de anlatılmaktadır. Bu eğitim serisinin ikinci videosunda bu tasarımın nasıl canlıya alınacağı anlatılacağı belirtilmektedir.
- Video Tanıtımı ve Hedef Kitle
- Videoda bir web sitesinin nasıl yapıldığı anlatılacak.
- Video, HTML ve CSS ile giriş seviyesinde bilgiye sahip olanlar için uygun.
- Hiç bilgiye sahip olmayanlar için sıfırdan anlatılmayacağı, önceden HTML ve CSS hakkında bilgi edinmeleri öneriliyor.
- Yapılacak çalışma responsive bir çalışma olacak.
- 01:53Kullanılacak Araçlar ve Hazırlık
- Web sitesi için "websi" adında bir klasör oluşturuldu.
- Kodlama için Visual Studio Code (VS Code) kullanılması öneriliyor.
- Başlangıç seviyesinde hata olmaması için eğitmenin kullandığı araçların aynısını kullanmak tavsiye ediliyor.
- 02:38HTML İsekeleti ve Live Server
- HTML iskeleti oluşturuldu ve "New Website" başlığı eklendi.
- Live Server eklentisi kullanılarak kod değişikliklerinin anında görüntülenebilmesi sağlanıyor.
- Live Server kullanılmak istenmiyorsa, dosyayı klasörden açıp manuel olarak yenileme yapılabilir.
- 04:25CSS Dosyası Oluşturma
- CSS kodlarını yazmak için "style.css" dosyası oluşturuldu.
- CSS dosyası HTML dosyasına linklenerek entegre edildi.
- CSS dosyasında "body" seçiciye "background-color: red;" eklenerek arka plan rengi değiştirildi.
- 05:30HTML Yapısı ve Google Fonts
- Yorum satırı açılarak "header" ve "nav" etiketleri oluşturuldu.
- "header" içinde "logo" ve "menu" class'lı div'ler oluşturuldu.
- Google Fonts'tan "Ops" yazı tipi farklı kalıtlarıyla (300, 400, 600, 700) eklendi.
- Google Fonts'tan alınan kod, CSS dosyasına "body" seçici içine eklendi.
- 09:25Arka Plan Resmi Ekleme
- Sitede arka plan resmi eklenecek.
- Daha önceden hazırlanmış görsel kullanılacak ve videonun açıklama kısmına eklenecek.
- Arka plan resmi için "background-image" özelliği ve "url()" fonksiyonu kullanılacak.
- 10:07CSS Özelliklerinin Kullanımı
- "Background cover" özelliği kullanılarak görüntü ayarlanmıştır.
- CSS kodları yazılırken tek tek yazılması gerektiği vurgulanmıştır.
- "Background size cover" özelliği nasıl kullanıldığını göstermek için örnek bir kod paylaşılmıştır.
- 10:48HTML Etiketlerinin Düzenlenmesi
- HTML etiketlerinin düzenlemesi için "white" rengi kullanılmıştır.
- "Eba", "kontakt" ve sağ taraftaki "newlink" butonu için etiketler yazılmıştır.
- "Konteyner" sınıfı oluşturulmuş ve CSS ile güzelleştirilmesi planlanmıştır.
- 12:30Konteyner Sınıfı ve CSS Uygulamaları
- İçeriklerin aynı hizada olması için "konteyner" sınıfı kullanılmıştır.
- ".konteyner" sınıfına "width: 80%" değeri verilmiş, ancak etkisi görülmemiş ve "margin: auto" eklenerek ortalanmıştır.
- Header kısmına özel CSS kodları yazmak için yorum satırı kullanılmıştır.
- 14:31Flexbox Yapısı Kullanımı
- "Display: flex" özelliği kullanılarak içerikler yan yana yerleştirilmiştir.
- "Justify-content: space-between" özelliği ile soldaki ve sağdaki içerikler en uzak noktalara yerleştirilmiştir.
- Flexbox yapısının öğrenilmesi gerektiği, bu yapıyı öğrenmekle birlikte düzenlemelerin kolayca yapılacağı belirtilmiştir.
- 15:36Logo ve Menü Düzenlemeleri
- Header'ın içindeki logo için "color: white", "text-decoration: none", "font-weight" ve "font-size" özellikleri kullanılmıştır.
- Nav etiketindeki liste öğeleri için "list-style: none" ve "display: flex" özellikleri uygulanmıştır.
- Liste öğeleri arasında "margin: 30px" değeri ile boşluk bırakılmıştır.
- 18:47Buton ve Menü Düzenlemeleri
- Menü içindeki liste öğeleri ve butonlar için "display: flex" özelliği kullanılmıştır.
- "Align-items: center" özelliği ile içerikler ortalanmıştır.
- Header etiketine "height: 100px" değeri verilmiş ve altına "border-bottom" özelliği eklenmiştir.
- 21:45CSS Stil Uygulamaları
- Renk kodları kullanılarak elementlere color özelliği veriliyor.
- Text elementine background, padding ve border radius özellikleri eklenerek görünümü değiştiriliyor.
- Hover efekti için transition özelliği kullanılarak geçiş süresi ayarlanıyor.
- 25:34Responsive Tasarım
- Ekran boyutu küçüldüğünde konteyner genişliği %100 olacak şekilde media query kullanılıyor.
- Ekran 576 piksel altına indiğinde padding left ve padding right özellikleri eklenerek içeriklerin daha ferah görünmesi sağlanıyor.
- Mobil görünümde menü butonu display none ile gizleniyor.
- 29:38İçerik Bölümü
- Section etiketi kullanılarak içerik bölümü oluşturuluyor.
- İçerik bölümünde h1 başlık, paragraf ve iki adet a etiketi (buton) yer alıyor.
- Konteyner sınıfı kullanılarak içerikler aynı hizada hizalanıyor.
- 32:21CSS Kapsayıcı Özellikleri
- İçerik için bir kapsayıcı oluşturulup, "content" sınıfı veriliyor.
- Kapsayıcıya "height: 100vh" değeri verilerek ekranın tam yüksekliğine sahip olmasını sağlıyoruz.
- Scroll sorunu için "height: 100vh - 100px" değeri kullanılarak üst kısımdaki header yüksekliği çıkarılıyor.
- 35:21İçerik Düzenleme
- Kapsayıcı içine "padding: 150px" değeri verilerek içeriğin kenarlardan uzaklaştırılması sağlanıyor.
- H1 ve p etiketlerine font size ve text-align özellikleri eklenerek yazıların ortalanması ve boyutlandırılması yapılıyor.
- Linklerin yan yana gelmesi için flexbox kullanılarak "justify-content: center" ve "margin-top: 8px" özellikleri ekleniyor.
- 38:17Buton Tasarımı
- Butonlara arka plan rengi, padding, font boyutu ve yazı rengi gibi özellikleri ekleniyor.
- Butonların köşeleri yuvarlanıyor ve geçiş efekti ekleniyor.
- Hover efekti için butonlara üzerine gelindiğinde arka plan rengi değişmesi sağlanıyor.
- 40:35Responsive Tasarım
- Ekran küçüldüğünde padding değeri azaltılarak "padding: 50px" olarak değiştiriliyor.
- Yazı boyutları küçültülerek H1 için "font-size: 36px" ve p için "font-size: 16px" değerleri kullanılıyor.
- Mobil ekranlarda linklerin alt alta gelmesi için "flex-direction: column" özelliği ekleniyor.
- 43:42Video Kapanışı
- Video ikinci bölümünde nasıl canlıya alınacağı anlatılacak.
- Twitter'da "emin basmayan" kullanıcı adıyla aktif olunacağı belirtiliyor.
- İzleyicilerden soruları yorum kısmına yazmaları veya sosyal medya üzerinden sorular sormaları isteniyor.