• Buradasın

    Responsive Tasarım

    Özetteki ilgi çekici içerikler

    • Responsive Web Tasarımı Eğitimi

      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.

      • youtube.com

    • Frame Aracı ile Kod Yazmadan Web Tasarımı Eğitimi

      Bu video, bir eğitmen tarafından sunulan Frame adlı no-code web tasarım aracının kullanımını gösteren kapsamlı bir eğitim içeriğidir.. Eğitim, Frame'in temel özelliklerinden başlayarak, proje oluşturma, komponent oluşturma, responsive tasarım yapma, animasyon ekleme, form oluşturma ve CMS entegrasyonu gibi konuları adım adım göstermektedir. Video boyunca ana sayfa, blog sayfası, detay sayfası ve overlay ekranı gibi farklı web sayfa bileşenlerinin nasıl tasarlanacağı detaylı olarak anlatılmaktadır.. Eğitimde ayrıca Figma benzeri bir tasarım arayüzüne sahip olan Frame'in, kod yazmadan gerçek web sayfaları oluşturabilme kapasitesi, komponent tabanlı tasarım yapma, varyant oluşturma, renk ayarları, padding/margin düzenlemeleri, buton animasyonları ve koyu mod desteği gibi önemli özelliklerine de değinilmektedir. Video sonunda eğitmen, bir sonraki videoda QR menü örneği yapmayı düşündüğünü belirtmektedir.

      • youtube.com

    • Bootstrap 4 Tipografi Eğitimi

      Bu video, Femi Uyar tarafından sunulan Bootstrap 4 eğitim setinin 16. dersidir. Femi Uyar, nokta net'in editörüdür.. Videoda Bootstrap 4'ün tipografi özellikleri detaylı olarak anlatılmaktadır. İçerik, pre komutu ve class'ı (scroll), HTML'de değişken tanımlama için var etiketi ve örnek çıktı görüntüsü için samp etiketi ile başlayıp, font kalınlıkları, metin boyutları, metin hizalama ve metin düzenlemesi gibi temel tipografi özelliklerini kod örnekleriyle göstermektedir.. Ayrıca videoda "rap" (yazı uzunluğuna uygun olmayan metinleri alt satıra geçirme), "text-monospace" (bilgisayar çıktısı gibi yazı tipi), metin harflerini büyük/küçük/ilk harfi büyük yapma (uppercase, lowercase, capitalize) ve metin hizalama (left, right, center, justify) gibi özellikler de açıklanmaktadır. Bootstrap'ta responsive tasarım için farklı ekran boyutlarına göre (extra small, small, medium, large, x-large) stil değişikliklerinin nasıl yapılacağı da anlatılmaktadır.

      • youtube.com

    • Front-End Developer Olmak İçin Yol Haritası

      Bu video, bir yazılımcının kendi deneyimlerinden yola çıkarak front-end geliştirme yolculuğunu anlattığı eğitim içeriğidir. Konuşmacı, izleyicilerden gelen "front-end developer olmak için hangi dilleri öğrenmem gerekiyor?" sorusuna yanıt veriyor.. Video, front-end geliştirme yolculuğunu adım adım anlatan bir roadmap sunuyor. İçerik, internet çalışma prensiplerinden başlayarak HTML, CSS ve JavaScript gibi temel dilleri, responsive design, version control sistemleri, commandline kullanımı, package managers ve pre-processors gibi konuları kapsamaktadır. Konuşmacı, kendi öğrenme sürecini paylaşarak, temel teknolojileri öğrendikten sonra kendi projeleriyle pratik yapmanın önemini vurguluyor.. Videoda ayrıca profesyonel yazılım geliştirme ve hobi olarak öğrenme arasındaki farklar, "tutorial tuzağı" kavramı ve Google, Stack Overflow gibi kaynakların kullanımı gibi konular da ele alınıyor. Konuşmacı, şu anda JavaScript, HTML, CSS gibi temel teknolojileri öğrendiğini ve gelecekte framework'leri ve veritabanı kullanımını öğrenmek istediğini belirtiyor.

      • youtube.com

    • Bootstrap Web Tasarımı Eğitimi

      Bu video, bir eğitmen tarafından sunulan kapsamlı bir Bootstrap eğitim içeriğidir. Eğitmen, Bootstrap kütüphanesinin temel özelliklerini ve kullanımını adım adım anlatmaktadır.. Video, Bootstrap'in grid sistemi, tipografi özellikleri ve responsive tasarım konularını kapsamaktadır. İlk bölümde grid sisteminin 12 sütunlu yapısı ve XS, SM, MD, L gibi farklı ekran boyutlarına göre nasıl davranacağı gösterilirken, ikinci bölümde Bootstrap'in font boyutları, başlık etiketleri ve renk sınıfları anlatılmaktadır. Son bölümde ise tablo, resim ve video etiketlerinin responsive hale getirilmesi için gerekli özellikler açıklanmaktadır.. Eğitim boyunca eğitmen, kod örnekleri üzerinden Bootstrap'in temel sınıflarını ve özelliklerini pratik uygulamalarla göstermekte, özellikle mobil, tablet ve masaüstü cihazlarda içeriklerin nasıl düzenlenebileceğini detaylı olarak anlatmaktadır.

      • youtube.com

    • Bootstrap 4 ile Web Sayfası Oluşturma Eğitimi

      Bu video, Videokod kanalında bir eğitmen tarafından sunulan Bootstrap 4 kullanarak web sayfası oluşturma eğitimidir.. Eğitim, Bootstrap'in ne olduğu ve neden kullanıldığı bilgisiyle başlayıp, Getbootstrap sitesinden başlangıç şablonu kopyalayıp HTML ve CSS dosyalarını entegre ederek bir web sayfası oluşturma sürecini adım adım göstermektedir. Video boyunca navbar, grid yapısı, kart, alert, carousel, list group, modal ve buton gibi Bootstrap'in temel bileşenlerinin nasıl kullanılacağı detaylı olarak anlatılmaktadır.. Eğitimde ayrıca padding, margin, renk ve boyut gibi özelliklerin nasıl ayarlanacağı gösterilmekte ve responsive tasarım özellikleri açıklanmaktadır. Video sonunda izleyicilerin yorumlarda daha fazla Bootstrap dersi isteyip istemediklerini belirtmeleri istenmektedir.

      • youtube.com

    • Tailwind ve Alpine.js ile Espresso Lab Landing Page Eğitimi

      Bu video, bir eğitmen tarafından sunulan web geliştirme eğitimidir. Eğitmen, Tailwind CSS ve Alpine.js kütüphanelerini kullanarak Espresso Lab'in web sitesini landing page olarak nasıl dökeceğini anlatmaktadır.. Eğitim, Tailwind CSS'in temel çalışma mantığını ve HTML'den ayrılmadan modern web sitelerini kodlamayı hedeflediğini açıklayarak başlıyor. Ardından Alpine.js'in Tailwind ekosistemine nasıl entegre olduğu ve JavaScript ile HTML arasında sağladığı kolaylıklar anlatılıyor. Video, kodlama sürecine geçmeden önce bu kütüphanelerin temel kullanımını öğrenmek isteyenler için faydalı bir kaynak niteliğindedir.. Eğitim yaklaşık üç saat sürecek ve responsive tasarımla tamamlanacaktır. Tailwind'in flex, padding, position gibi CSS özelliklerini nasıl sınıflarla temsil ettiği ve Alpine.js'in döngü oluşturma, değişkenler, veri sağlama, event tanımlamaları ve kısayollar gibi temel özellikleri örneklerle gösterilmektedir.

      • youtube.com

    • Bootstrap'te Figür Kullanımı Eğitimi

      Bu video, bir eğitim içeriği olup, konuşmacı Bootstrap'te figür kullanımını anlatmaktadır.. Video, Bootstrap'te figür konusunun nasıl kullanılacağını adım adım göstermektedir. Konuşmacı, figür ve fig caption HTML5 elementlerinin Bootstrap ile nasıl oluşturulacağını, responsive tasarım için img fluid ve thumbnail sınıflarının kullanılmasını, fig caption'ın sağ tarafta görünmesini sağlayan text-end class'ını ve resmin köşelerini yuvarlayan rounded class'ını örneklerle açıklamaktadır. Video, content konusunun son bölümü olup, bir sonraki videoda formlar ve komponentler konusuna geçileceği belirtilmektedir.

      • youtube.com

    • Tek Sayfa Responsive Web Sitesi Yapımı Eğitimi

      Bu video, bir eğitmen tarafından sunulan web geliştirme eğitimidir. Eğitmen, izleyicilere tek sayfa responsive web sitesi yapımını adım adım anlatmaktadır.. Video, CSS ile başlayıp, margin ve padding değerlerinin sıfırlanması, sayfa id'lerinin belirlenmesi ve arka plan resimlerinin sabitlenmesi gibi temel konuları kapsamaktadır. Eğitmen, fotoğraf kaydırma efektini nasıl uygulayacağınızı ve opacity değerini nasıl ayarlayacağınızı göstermektedir. Video boyunca kod örnekleri ve uygulama sonuçları gösterilmektedir.

      • youtube.com

    • Bootstrap RFS (Responsive Font Size) Eğitimi

      Bu video, bir eğitim içeriği olup, konuşmacı Bootstrap'in RFS (Responsive Font Size) özelliğini anlatmaktadır.. Video, RFS'in ne olduğunu ve nasıl kullanıldığını açıklamaktadır. RFS, Bootstrap'in 5. versiyonuyla entegre edilmiş bir eklenti olarak, farklı tarayıcı boyutlarında yazı boyutlarını otomatik olarak ayarlayarak daha düzgün bir içerik sunmayı sağlar. Konuşmacı, RFS'in nasıl çalıştığını göstermek için bir örnek sunarak, yazı boyutlarının ekran boyutuna göre nasıl değiştiğini göstermektedir. Ayrıca, RFS'in özelleştirilebilir olduğunu ve SAS dosyasında customize bölümünde bu özelleştirmelerin yapılabileceğini belirtmektedir.

      • youtube.com

    • WordPress Elementor ile Web Sitesi Tasarımı Eğitimi

      Bu video, bir eğitim içeriği olup, konuşmacı WordPress Elementor plug-in kullanarak web sitesi tasarımı konusunda adım adım rehberlik etmektedir.. Video, web sitesi tasarımının temel bileşenlerini göstermektedir. İçerikte anasayfa oluşturma, Elementor ile sayfa düzenleme, arka plan rengi ayarlama, header, body ve footer bölümlerinin oluşturulması, logo ekleme, copyright yazısı oluşturma ve düzenleme işlemleri anlatılmaktadır. Ayrıca sosyal medya bağlantıları ekleme, menü linkleri oluşturma ve responsive tasarım ayarları (masaüstü, tablet ve mobil görünüm) detaylı olarak açıklanmaktadır.. Eğitim, ücretsiz olarak gerçekleştirilebilen tüm bu işlemleri içermekte olup, web sitesi tasarımı yapmak isteyenler için temel bir rehber niteliğindedir.

      • youtube.com

    • Bootstrap Sup Dersleri: Responsive Tasarım

      Bu video, bir eğitmen tarafından sunulan Bootstrap Sup derslerinin bir parçası olup, web tasarımında responsive tasarım konusunu ele alan bir eğitim içeriğidir.. Videoda, Bootstrap'ın hazır responsive özellikleri gösterilmekte ve Windows Resize Chrome uzantısı kullanılarak farklı ekran boyutlarında sayfanın nasıl göründüğünü test edilmektedir. Eğitmen, özellikle 992 piksel genişliğindeki ekranlarda footer bölümünde yaşanan sorunları çözmek için CSS kodları eklemekte ve footer kısmındaki ikonların boyutlarını, font boyutlarını ve padding değerlerini değiştirerek responsive tasarım yapmaktadır.. Video, Bootstrap dökümantasyonundan media query'ler hakkında bilgi vererek, ekstra küçük, küçük, orta ve büyük ekran boyutlarına karşılık gelen media query değerlerini açıklamaktadır. Bir sonraki derste küçük ve orta boyutlu cihazlar için media queryler üzerine devam edileceği belirtilmektedir.

      • youtube.com

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

      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.

      • youtube.com

    • Web İçin Görsel Tasarım Elementleri Dersi

      Bu video, görsel web tasarımı dersinin üçüncü ünitesi olan "Web İçin Görsel Tasarım Elementleri" konusunu anlatan bir eğitim içeriğidir.. Video, grafik tasarımın tanımıyla başlayıp, web sitesi tasarımlarında görsel dış tasarım elementleri (şablon, arka plan, logo), görsel iç tasarım elementleri (logo, başlık, gezinti bileşenleri, gövde tasarımı, footer) ve duyarlı web arayüzleri için görsel tasarım konularını kapsamaktadır. Web sitesi tasarımlarının ilk izlenimin önemini vurgulayan video, farklı ekran çözünürlüklerinde ve boyutlarında sorunsuz çalışan responsive web arayüzlerinin önemi hakkında bilgi vermektedir.

      • youtube.com

    • Bootstrap ile Web Sayfası Tasarımı Eğitimi

      Bu video, bir eğitmen tarafından sunulan kapsamlı bir web geliştirme eğitim içeriğidir. Eğitmen, Bootstrap kütüphanesi kullanarak web sayfası tasarımı konusunda adım adım rehberlik etmektedir.. Video, Bootstrap ile slider oluşturma ile başlayıp, div boyutlandırma, modal pencere oluşturma, kart (card) yapısı ve form tasarımı konularını kapsamaktadır. Eğitmen, her bir konuyu HTML kodları üzerinden pratik örneklerle anlatmakta ve Bootstrap'in temel bileşenlerini detaylı şekilde açıklamaktadır.. Eğitim boyunca, Bootstrap'ın karosel (carousel) özelliği, modal penceresi kullanımı, kart yapısı ve form elemanları (label, form grupları, açılır liste, onay kutusu) gibi temel bileşenlerin nasıl kullanılacağı gösterilmektedir. Ayrıca, formun ekran boyutuna göre responsive olması için col-md gibi sınıfların kullanımı da anlatılmaktadır.

      • youtube.com

    • Bootstrap ile Responsive Web Tasarımı Eğitimi

      Bu video, bir eğitmen tarafından sunulan web geliştirme eğitim içeriğidir. Eğitmen, Bootstrap framework'ünü kullanarak web sayfasının responsive tasarımını adım adım göstermektedir.. Videoda, önceki derste yapılan ana bölümün responsive tasarımının devamı olarak services, portfolyo ve section bölümlerinin tasarımı ele alınmaktadır. Eğitmen, farklı ekran genişliklerinde (MD, SM) sütunların düzenlenmesi, CSS kodları ile font boyutu ve renk değişiklikleri, görsellerin çözünürlük sorunlarının çözümü gibi konuları detaylı olarak anlatmaktadır.. Ayrıca padding ve margin kavramları arasındaki farklar örneklerle açıklanmakta ve bir sonraki derste ebatas bölümü ile ilgili tasarım sorunlarının çözüleceği belirtilmektedir. Video, web sayfası tasarımında responsive özellikler eklemek isteyenler için faydalı bilgiler içermektedir.

      • youtube.com

    • HTML ve CSS ile Responsive Web Sitesi Oluşturma Eğitimi

      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.

      • youtube.com

    • Responsive Web Sayfası Oluşturma Eğitimi

      Bu video, Orhan Can tarafından sunulan bir web geliştirme eğitimidir. Eğitmen, doğaçlama bir ders formatında responsive web sayfası oluşturma sürecini adım adım göstermektedir.. Videoda, anasayfa, hakkımızda ve iletişim olmak üzere üç sayfalı bir web sayfası oluşturulmaktadır. Eğitmen önce klasör yapısını oluşturup, ardından HTML ve CSS kodlarını yazarak sayfaları ve menüleri oluşturur. CSS ile menülerin görsel düzenlemeleri, padding değerleri, font özellikleri ve hover efektleri gibi konular ele alınmaktadır.. Ayrıca videoda, responsive özellikler (650 piksel ve öncesinde konteyner genişliği, fotoğraf ekranı kaplaması), resim ekleme, sayfalar arası bağlantı kurma ve konteyner div'i oluşturma gibi konular da işlenmektedir. Video, web sayfası tasarımı ve responsive web geliştirme konusunda temel bilgiler sunmaktadır.

      • youtube.com

    • PSD Dosyasını CSS-HTML Dönüştürme: Responsive Tasarım

      Bu video, bir eğitim dersi formatında olup, bir eğitmen tarafından PSD dosyasını CSS-HTML dönüştürme serisinin bir parçası olarak sunulmaktadır.. Videoda, önceki derste 768 piksel genişliğinde responsive tasarım yapılmış bir sayfanın, bu derste 640 piksel ve 480 piksel genişliklerinde nasıl düzenleneceği gösterilmektedir. Eğitmen, media query kullanarak farklı ekran genişliklerinde sütunların düzenini, başlık boyutlarını ve boşlukları nasıl ayarlayacağını adım adım anlatmaktadır. Video, bir sonraki derste navigation menüsü üzerine konuşulacağı bilgisiyle sonlanmaktadır.

      • youtube.com
  • Yazeka sinir ağı makaleleri veya videoları özetliyor