• Buradasın

    Responsive Tasarım

    Özetteki ilgi çekici içerikler

    • Responsive Top Navigation Yapımı Eğitimi

      Bu video, bir eğitmen tarafından sunulan "Nasıl Yapılır" serisinin bir parçası olan web geliştirme eğitimidir. Videoda, telefon ekranlarına uygun şekilde taşmayan ve kötü görünmeyen bir responsive top navigation menüsü oluşturma süreci adım adım gösterilmektedir. Eğitmen önce HTML ve CSS kodlarını yazarak menü yapısını oluşturur, ardından medya sorguları kullanarak menü görünümünü farklı ekran boyutlarında ayarlar ve son olarak JavaScript ile menüyü açıp kapatma fonksiyonunun nasıl yazılacağını anlatır. Eğitimde ayrıca menü tıklandığında açılıp kapanan menü oluşturma, CSS ile transform özelliği kullanarak menü efektleri ekleme, menü simgeleri (home, about vb.) ekleme, click event ekleme, class değiştirme ve font ekleme gibi teknik detaylar da gösterilmektedir. Video, bir serinin bir parçası olup, bir sonraki derste görüşmek üzere sonlanmaktadır.

      • youtube.com

    • HTML ve CSS ile Responsive Web Tasarım Eğitimi

      Bu video, bir eğitmen tarafından sunulan kapsamlı bir web tasarım eğitim içeriğidir. Eğitmen, HTML ve CSS kullanarak responsive web sayfası tasarımı yapmaktadır. Videoda, web sayfasının header, content ve footer bölümlerinin oluşturulması, flexbox kullanarak öğelerin hizalanması, font boyutları, margin ve padding değerlerinin ayarlanması gibi temel konular ele alınmaktadır. Ayrıca, responsive tasarım için medya sorguları (media queries) kullanarak farklı ekran boyutlarında tasarımın nasıl düzenleneceği adım adım gösterilmektedir. Eğitim içeriğinde, kapsayıcıların (container, upslate, info) konumlandırılması, resimlerin yan yana yerleştirilmesi, renklerin ayarlanması ve Colorzilla aracılığıyla renk değerlerinin alınması gibi pratik bilgiler de sunulmaktadır. Video, bir web sayfasının hem tasarımın hem de farklı ekran boyutlarında düzgün görünürlüğünün nasıl sağlanacağını göstermektedir.

      • 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

    • 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

    • 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

    • Bootstrap 5 Grid Sistemi ve Responsive Tasarım Eğitimi

      Bu video, bir eğitmen tarafından sunulan Bootstrap 5 konulu kapsamlı bir eğitim dersidir. Eğitmen, 2021 yılında YouTube içerik üretimiyle geçinen biri olarak kendini tanıtmaktadır. Video, Bootstrap 5'in grid sistemi ve responsive tasarım özellikleri üzerine odaklanmaktadır. İçerikte konteyner, satır ve sütun sınıflarının kullanımı, "col" ve numaralı "col" sınıflarının işlevleri, breakpoint kavramı, sıralama öncelikleri (order), boşluk ayarları (offset) ve katlar (gutters) gibi temel konular detaylı şekilde ele alınmaktadır. Ayrıca, görsel yerleştirme, flexbox kullanımı ve padding ayarları gibi pratik uygulamalar da gösterilmektedir. Eğitim yaklaşık 1 saat sürmekte olup, bir web sayfası tasarımının temel yapılandırmasını göstermektedir. Video, bir proje örneği üzerinden Bootstrap klaslarının nasıl kullanılacağını adım adım göstermekte ve bir sonraki derste breakpointler konusunun devam edeceği belirtilmektedir.

      • 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

    • PSD Dosyasının HTML ve CSS Dönüşümü Eğitimi

      Bu video, bir eğitmen tarafından sunulan web tasarımı eğitim serisinin bir bölümüdür. Eğitmen, izleyicilere adım adım PSD dosyasının HTML ve CSS'e dönüştürülmesi konusunda rehberlik etmektedir. Videoda, temel HTML ve CSS kodlarının nasıl yazılacağı gösterilmektedir. Eğitmen, konteyner ve content klas'larına yıldız işareti kullanarak tüm elementleri seçme, display inline block özelliği verme, metinleri ortala, font boyutu ve rengi ayarlama, harfler arası boşluk ayarlama, paragrafları düzenleme ve ok simgelerini oluşturma gibi CSS özellikleri anlatmaktadır. Ayrıca responsive tasarım için genişlik ayarları, marjin/padding kullanımı, "background attachment fixed" özelliğinin işlevi ve dairenin genişliğini ayarlama gibi konular da ele alınmaktadır. Video, bir sonraki derste future bölümünün işleneceği bilgisiyle sonlanmaktadır.

      • 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 ve CSS ile Web Sayfası Tasarımı Eğitimi

      Bu video, bir eğitmen tarafından sunulan web tasarım eğitimidir. Eğitmen, izleyicilere adım adım HTML ve CSS kullanarak web sayfası oluşturma sürecini göstermektedir. Video, web sayfasının farklı bölümlerinin (navbar, "Bizi Seç" bölüm, hizmetler section, footer) oluşturulmasını kapsamaktadır. Eğitmen önce HTML etiketlerini (div, section, header, h1 vb.) kullanarak sayfanın yapısını oluşturur, ardından CSS ile bu yapıyı biçimlendirir. Hizmet kartları tasarımı, responsive tasarım için media queries kullanımı ve mobil görünüm için gerekli düzenlemeler detaylı şekilde anlatılmaktadır. Eğitimde renk, yazı tipi, konumlandırma, padding, margin, z-indeksi gibi CSS özellikleriyle ilgili kodlar gösterilmekte ve web tasarım, yazılım geliştirme ve markalaşma gibi hizmet kartlarının oluşturulması adım adım açıklanmaktadır.

      • 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

    • Figma'da Constraints Kullanımı Eğitimi

      Bu video, Figma uygulamasında constraints özelliğinin nasıl kullanılacağını gösteren bir eğitim içeriğidir. Eğitmen, Figma'da responsive design yaparken constraints'in önemini vurgulamaktadır. Video, constraints'in menülerde, footerlarda ve content box'larda nasıl kullanılacağını adım adım göstermektedir. Eğitmen önce basit bir menü örneği üzerinden constraints'in temel kullanımını anlatıp, ardından daha karmaşık bir tasarım üzerinde master components üzerinden constraints ayarlarını göstermektedir. Ayrıca, yazıların alt satıra atılmaması gerektiği gibi önemli püf noktalarını da paylaşmaktadır. Video, constraints'in responsive design için çok önemli bir araç olduğunu vurgulayarak sonlanmaktadır.

      • 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

    • Obl Carros Eklentisi ile Slider Oluşturma Eğitimi

      Bu video, bir web tasarım eğitim serisinin bir bölümüdür. Eğitmen, slider oluşturma konusunda adım adım rehberlik etmektedir. Video, Obl Carros eklentisinin nasıl kullanılacağını detaylı şekilde anlatmaktadır. Eğitmen önce HTML sayfasında slider için gerekli yapıyı oluşturur, ardından Obl Carros eklentisinin indirme ve kurulum adımlarını gösterir. Daha sonra eklentinin temel ayarlarını (loop, margin, navigation, autoplay, responsive mod) açıklar ve bu ayarların nasıl yapılandırılacağını örneklerle gösterir. Video, slider'ın responsive olması için farklı ekran boyutlarında nasıl ayarlanabileceğini de içermektedir.

      • 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

    • 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 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
  • Yazeka sinir ağı makaleleri veya videoları özetliyor