Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, Emir adlı bir eğitmen tarafından sunulan web geliştirme eğitim içeriğidir. Eğitmen, izleyicilerin isteği üzerine responsive web tasarımı konusunu ele almaktadır.
- Videoda, daha önce oluşturulan scroll animasyonlu bir web sitesinin mobil görünümüne dönüştürülmesi adım adım gösterilmektedir. Eğitmen, Visual Studio Code kullanarak CSS kodlarını düzenleyerek web sitesinin mobil cihazlarda daha iyi görünmesini sağlar. İlk olarak web sitesini parçalara ayırarak her bir bölüme ayrı ayrı responsive CSS ayarları yapar, ardından JavaScript ile animasyonların mobil cihazlarda düzgün çalışmasını sağlar.
- Eğitimde flexbox kullanarak içeriklerin mobil cihazlarda nasıl düzenleneceği, font boyutlarının, margin değerlerinin ve ekran genişliğine göre düzenlemeleri gösterilmektedir. Ayrıca, sayfa genişliğine göre farklı CSS ayarları yaparak mobil görünümü iyileştirir ve tıklandığında mavi kutu oluşturma gibi görsel özellikler ekler.
- 00:01Responsive Design Video Giriş
- Emir, izleyicilerin isteği üzerine responsive design konusunda bir video çekmek istiyor.
- Önceki videolarda scroll animasyonlu bir web sitesi yapılmıştı.
- Mobil görünümde web sitesi CSS ayarları yapılmadan iğrenç görünüyordu.
- 01:22Responsive Tasarım İçin Hazırlık
- İlk olarak web sitesi bölümlere ayrılmakta ve mobil görünüm için CSS ayarları yapılacak.
- Mobil görünüm için "media screen and max-width: 700px" kullanılarak genişliği 700 pikselin altındaki cihazlar için özel ayarlar yapılacak.
- Mobil görünümde taşan içerikler düzeltilecek ve içerikler ekrana daha iyi sığacak şekilde ayarlanacak.
- 03:56Mobil Görünüm İçin CSS Düzenlemeleri
- Konteyner genişliği 80 pikselden 90 piksele genişletiliyor.
- Navbar kısmında display flex ayarı değiştiriliyor ve padding değerleri düzeltiliyor.
- Banner kısmında yükseklik ayarı değiştiriliyor ve flex direction column ile içerikler üst üste diziliyor.
- 07:53Diğer Bölümler İçin Mobil Düzenlemeler
- About kısmında yükseklik tamamını alacak şekilde ayarlanıyor ve flex direction row kullanılıyor.
- Fotoğrafların boyutu ayarlanıyor ve yukarıdan boşluk veriliyor.
- Video kısmında başlık ortalanıyor ve video elementi mobil görünümde kaldırılıyor (display: none).
- 11:52Responsive Tasarım ve CSS Düzenlemeleri
- Display flex kullanılarak kartlar için flex direction ayarlanıyor ve margin top değeri veriliyor.
- Kartlara boks shadow kaldırılıyor ve cursor özellikleri ayarlanıyor.
- Kart textleri ve ikonların marjini düzenlenerek responsive design için gerekli düzenlemeler yapılıyor.
- 12:54Animasyon ve Mobil Görüntüleme Sorunları
- Sayfada animasyon bulunuyor ancak mobil görüntülemede aşağı kaydırma sırasında sayfanın aşağı atılması sorunu var.
- Mobil tasarımda görüntüyü bozan ayarlar nedeniyle JavaScript'ten de responsiveness için değişiklikler yapılması gerekiyor.
- Animasyon, sadece genişlik 700 pikselden büyük olduğunda uygulanacak şekilde sınırlanıyor.
- 14:01Görsel Detaylar ve Kapanış
- Kartlara tıkladığında oluşan mavi kutu, webkit tap highlight color özelliğini kullanarak opacity sıfırlanarak gizleniyor.
- Mobile görünümünde, 700 pikselin altına indiğinde CSS değişiyor ve yeni düzenlemeler uygulanıyor.
- Farklı ekran boyutları için (örneğin 750, 900 piksel) farklı CSS ayarları yapılarak görüntü daha güzelleştirilebilir.