• Buradasın

    HTML, CSS ve JavaScript ile Ayakkabı Alışveriş Kartı Tasarımı Eğitimi

    youtube.com/watch?v=2eRe4EK4HNk

    Yapay zekadan makale özeti

    • Bu video, bir eğitmen tarafından sunulan web geliştirme eğitim içeriğidir. Eğitmen, yeni aldığı Logitech C310 kamera ile izleyicilere adım adım bir ayakkabı alışveriş kartı tasarımını göstermektedir.
    • Videoda, HTML, CSS ve JavaScript kullanarak bir ayakkabı alışveriş kartı oluşturma süreci detaylı olarak anlatılmaktadır. Eğitim, ürün fotoğrafı, ürün açıklaması, fiyat bilgisi, yıldız puanlaması, beden seçimi, sepete ekle butonu ve tahmini teslimat tarihi gibi bölümlerin HTML yapısının oluşturulması ve CSS ile biçimlendirilmesi ile başlayıp, JavaScript ile interaktif özelliklerin eklenmesiyle devam etmektedir.
    • Eğitim boyunca flexbox, pozisyonlama, border, padding gibi CSS özellikleri ve sayfanın responsive hale getirilmesi gösterilmektedir. Ayrıca, küçük fotoğraflara tıklandığında ana fotoğrafın değişmesi ve ürün detaylarının gösterilmesi gibi JavaScript özelliklerinin nasıl uygulanacağı da anlatılmaktadır. Bu kart sadece görsel amaçlıdır ve gerçek alışveriş fonksiyonları içermemektedir.
    00:01Yeni Kamera Tanıtımı ve Video Konusu
    • Konuşmacı yeni bir Logitech C310 kamera aldığını ve kanalında tanıtım videosu olduğunu belirtiyor.
    • Video konusu ayakkabı alışveriş kartı oluşturma olacak, ancak daha önceki videolardan farklı bir yöntemle.
    • Projede HTML, CSS ve JavaScript kullanılacak ve beyaz arka plan kullanılacak.
    01:46Projenin Genel Yapısı
    • Ana div olarak "shopping and score" adında bir klasör oluşturulacak.
    • Sol tarafta ürün fotoğrafları, sağ tarafta ise ürün açıklamaları, sepete ekle butonu, beden bilgileri ve ürün puanlaması yer alacak.
    • Kart kodu olacak için Firebase kullanılmayacak, bu nedenle daha kısa sürecek.
    02:40Fotoğraf Bölümü
    • "PhotoSection" adında bir bölüm oluşturulacak ve içinde "smallPhotos" adında altı küçük fotoğraf yer alacak.
    • Büyük fotoğraf için ayrı bir "photo" div'i oluşturulacak.
    • Kodlar çalıştırılarak ayakkabı fotoğraflarının yer aldığı bir yapı oluşturuluyor.
    04:56Ürün Açıklama Bölümü
    • "DescriptionSection" adında bir bölüm oluşturulacak ve içinde "product" div'i yer alacak.
    • Ürünün markası ve adı "Wilto Man Running" olarak belirtiliyor.
    • Kargo bedava bilgisi için "kargoInfo" adında bir bölüm oluşturuluyor.
    06:50Ürün Puanlaması ve Fiyat Bilgileri
    • "ProductRate" ve "Price" adında iki bölüm oluşturuluyor.
    • Beş yıldızlı puanlama sistemi için "star" resimleri kullanılıyor ve "7 değerlendirme" yazısı ekleniyor.
    • Ürün fiyatı 270 TL olarak belirtiliyor ve %30 indirimli fiyatı gösteren "discountedPrice" sınıfı oluşturuluyor.
    11:33Beden Seçimi ve Sepete Ekle Butonu
    • "TorrentSize" adında bir bölüm oluşturuluyor ve içinde "34" beden seçili olarak gösteriliyor.
    • "Numbers" adında bir bölüm oluşturuluyor ve içinde 34, 36, 38, 40, 42 ve 44 bedenleri yer alıyor.
    • "Add to basket" adında sepete ekle butonu ve favori ekleme için görsel amaçlı bir kalp simgesi ekleniyor.
    15:49Teslimat Bilgileri
    • "DeliveryDate" adında bir bölüm oluşturuluyor.
    • Tahmini teslimat tarihi "7-10 Ocak 2021" olarak belirtiliyor.
    • "36.335 kişinin favorisi" yazısı ekleniyor.
    17:27HTML Yapısı Düzenleme
    • Description etiketi ve ürün bilgisi için yeni bir klasör oluşturuluyor.
    • Product info klasörü ve header üç etiketi ekleniyor.
    • Ürün bilgileri ve ansordlist bilgisi için kodlar düzenleniyor.
    20:05CSS Temel Ayarları
    • Margin, padding, border box ve box-sizing temel ayarları yapılıyor.
    • Body için yazı karakteri (font) ayarlanıyor.
    • Shopping cart için display flex ve justify content space between özellikleri ekleniyor.
    21:51Kart Pozisyonlandırma
    • Kart için position absolute ve minimum boyut ayarları yapılıyor.
    • Kartın ekranda ortalanması için transform translate-x ve translate-y kullanılıyor.
    • Kartın bilgi kısmının dışa taşması sorunu sonradan çözülecek.
    23:36Fotoğraf Bölümü Biçimlendirme
    • Photo section için display flex ve minimum genişlik ayarları yapılıyor.
    • Small photos için 100 piksel boyutu ve borda ekleniyor.
    • Fotoğrafların üzerine gelindiğinde pointer özelliği veriliyor.
    29:50Büyük Fotoğraf ve Açıklama Bölümü
    • Description section için minimum genişlik 350 piksel ve display flex ayarları yapılıyor.
    • Flex direction column ile öğelerin alt alta gelmesi sağlanıyor.
    • Justify content space between ile öğeler arasında boşluk bırakılıyor.
    32:10Ürün Bilgileri Biçimlendirme
    • Product header için display flex ve justify content space between ayarları yapılıyor.
    • Font size 1.20 rem değerine ayarlanıyor.
    • Cargo info için borda, köşe yuvarlatma ve padding değerleri ekleniyor.
    35:50Fiyat ve İndirim Biçimlendirme
    • Product rate price için display flex ve flex direction row ayarları yapılıyor.
    • Yıldızların yüksekliği 20 piksel olarak belirleniyor.
    • Discount etiketi için before pseudo-element kullanılarak fiyatlar arasında çizgi ekleniyor.
    41:47İkinci Ekran ve CSS Biçimlendirme
    • Konuşmacı kendisini kaydettiğini ve ikinci bir ekran eklediğini belirtiyor, böylece OBS ve Sodyum gibi uygulamaları alt ekran üzerinden kontrol edebileceğini söylüyor.
    • CSS dosyasında "discounted price" ve "font bot" gibi özellikleri tanımlıyor.
    • "satıcı" ve "span" gibi HTML etiketlerini biçimlendiriyor, renk, padding ve border radius gibi özellikler ekliyor.
    45:18CSS Biçimlendirme Devamı
    • "a anchor" etiketini "black" renkli ve font size 0.8 olarak biçimlendiriyor.
    • "product name", "satıcı", "size number" ve "product info" gibi etiketleri ortak bir CSS biçimlendirmesiyle düzenliyor.
    • Bu etiketlere padding 0.3rem, border 1px solid rgba(0,0,0,0.4) ve border radius 2px değerleri veriyor.
    48:03Kalıp ve Buton Biçimlendirmesi
    • Kalıp için "display flex", "justify content center" ve "text align center" değerlerini kullanarak ortalanmış bir görünüm oluşturuyor.
    • Satıcı bilgileri için "display flex", "justify content space between" ve "align items center" değerlerini ekliyor.
    • Sepete ekle butonu için padding, background, color, font size, border radius ve transition gibi özellikler ekliyor.
    57:24İkon ve Diğer Biçimlendirmeler
    • İkon için en yüksekliği 30 piksel, pointer, object fit cover ve object pozisyon center değerlerini belirliyor.
    • "top" ve "product info" gibi diğer etiketler için font size, font weight, justify content ve align items gibi özellikler ekliyor.
    • CSS dosyasını tamamlıyor ve bir sonraki adımda JavaScript yazacağını belirtiyor.
    1:01:45HTML Dosyası Kontrolü
    • HTML dosyasına dönüp eksiklikleri kontrol ediyor.
    • "product", "kargo info", "product trade price" ve "sayı saydır" gibi etiketleri kontrol ediyor.
    • "size header", "product size" ve "satıcı" gibi div etiketlerini ve içerisindeki ank etiketlerini inceleyerek eksiklikleri tespit ediyor.
    1:07:27Ürün Bilgisi Ekleme
    • Ürün bilgisi ekleniyor ve 245x5 boyutunda bir alan oluşturuluyor.
    • Lorem 5, Lorem 3, Lorem 4 ve Lorem 2 gibi bilgiler ekleniyor.
    • İçerik düzenlemeleri yapılıyor ve bir elementin yerleştirilmesi için araştırılıyor.
    1:11:37JavaScript Kodlama
    • JavaScript bölümüne geçiliyor ve kodlama başlıyor.
    • Küçük resimleri ve büyük fotoğrafı seçici olarak alınıyor.
    • Küçük fotoğraflara mouse over olayı ekleniyor ve büyük fotoğraf değişiyor.
    1:15:36Tıklama Olayı ve Projeyi Tamamlama
    • Tıklama olayı ekleniyor ve butona tıklandığında beden bilgisi gösteriliyor.
    • Sepete ekleme özelliği ekleniyor ve sepete tıklandığında renk değişimi yapılıyor.
    • Projeyi test ediyor ve responsive olması ve hızlı çalışması vurgulanıyor.
    1:17:14Video Kapanışı
    • İzleyicilerden videoyu beğenmeleri ve like tuşuna basmaları isteniyor.
    • Kanala abone olmaları öneriliyor ve yakında daha güzel projelerin geleceği belirtiliyor.
    • Bir sonraki derste buluşma dileğiyle video sonlandırılıyor.

    Yanıtı değerlendir

  • Yazeka sinir ağı makaleleri veya videoları özetliyor