Ders 88 - Grid ile Modern Web Sitesi Yapma | CSS | SIFIRDAN WEB SİTESİ YAPIMI | FrontEnd Eğitimi скачать в хорошем качестве

Ders 88 - Grid ile Modern Web Sitesi Yapma | CSS | SIFIRDAN WEB SİTESİ YAPIMI | FrontEnd Eğitimi

Ücretsiz UDEMY Kursu için videoyu beğenip, yorumlarda mail adresinizi yazın. 5 dakika sonra link mailinize gelsin --------------------------------------------------------------------------- Merhaba sevgili izleyiciler, ben Haydar Canıbek. Bu videoda, HTML ve CSS Grid sistemi kullanarak nasıl modern ve responsive bir alışveriş sitesi tasarlayabileceğinizi adım adım göstereceğiz! Web geliştirmede hızla popülerleşen grid sistemi, esnek ve düzenli bir sayfa yapısı oluşturmanızı sağlıyor. Bu sayede, sayfanız mobil cihazlardan geniş ekranlara kadar her türlü platformda mükemmel bir kullanıcı deneyimi sunuyor. HTML ve CSS Grid Sistemi ile Alışveriş Sitesi Tasarımı Alışveriş sitesi yaparken grid sistemi sayesinde, ürünlerin yerleşimi, kategori bölümleri ve kullanıcı arayüzü kolayca düzenlenebilir. Bu projede ana başlıklar şu şekilde olacak: Başlık ve Menü: Kolay gezinti sağlayan bir başlık ve kullanıcı dostu bir menü. Ürün Kartları: Ürünlerin resimleri, açıklamaları ve fiyatlarını gösterecek şık kart tasarımları. Duyarlı Tasarım: Sayfanın tüm cihazlarda şık görünmesini sağlamak için responsive yapı. Grid Sistemi ile Tasarımın Avantajları CSS Grid, ızgara mantığıyla çalıştığından, sayfanın tüm bölümlerini düzenli bir yapıda konumlandırabilirsiniz. Örneğin, her bir ürün kartını grid hücreleri olarak düşünebiliriz. Bu hücreleri tanımladığımız boyutlara göre otomatik olarak hizalayarak, siteye temiz ve profesyonel bir görünüm kazandırırız. Ayrıca grid-template-columns özelliği sayesinde, ekran boyutlarına göre kolon sayısını kolayca ayarlayabilirsiniz. Responsive (Duyarlı) Tasarım Responsive tasarım, kullanıcıların sayfanızı her ekran boyutunda rahatlıkla kullanmasını sağlar. Bu projede Media Query kullanarak, ekran genişliklerine göre farklı grid yapıları tanımlayacağız. Örneğin: Mobil cihazlar için: Ürünler tek sütun halinde listelenir. Tabletler için: Ürünler iki sütun olarak düzenlenir. Geniş ekranlar için: Üç veya daha fazla sütun kullanılarak ürünlerin tamamı tek bir görünümde gösterilir. Projede Kullanılan Grid Özellikleri grid-template-columns: Kolonları belirlemek için kullanılır. Örneğin, büyük ekranlarda grid-template-columns: repeat(3, 1fr); ifadesiyle üç sütun oluşturabiliriz. grid-gap: Hücreler arasındaki boşlukları ayarlamak için idealdir ve şık bir görünüm sağlar. grid-template-areas: Sayfa düzenini daha okunabilir hale getirir, menü, başlık ve içerik gibi bölümleri kolayca konumlandırabilirsiniz. Proje Özeti Bu eğitimde, bir alışveriş sitesinin temel yapısını HTML ve CSS Grid ile nasıl oluşturabileceğinizi öğreneceksiniz. HTML ile sayfanın iskeletini kurarken, CSS Grid ile ürün yerleşimlerini, menüleri ve tüm kullanıcı arayüzünü responsive bir yapıda tasarlayacağız. Grid yapısı sayesinde, modern bir alışveriş sitesinin estetik ve kullanıcı dostu olmasını sağlayacağız. Kanalıma abone olarak bu ve benzeri eğitim içeriklerine ulaşabilir, modern web geliştirme dünyasında kendinizi geliştirebilirsiniz! Unutmayın, daha fazla bilgi ve güncel ipuçları için bildirim zilini açarak yeni videolardan haberdar olabilirsiniz.