• Buradasın

    Mobil Uyumlu Tasarım

    Özetteki ilgi çekici içerikler

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

      Bu video, bir eğitmen tarafından sunulan web tasarım eğitimidir. Eğitmen, Bootstrap ve CSS kullanarak mobil uyumlu bir web sayfası tasarımı yapmayı adım adım göstermektedir.. Video, iki ana bölümden oluşmaktadır. İlk bölümde kaybolan navbar toggler ikonunun bulunması ve yeniden eklenmesi, menü öğelerinin mobil cihazlarda nasıl görüneceği için media screen özellikleri kullanılarak ayarlanması anlatılmaktadır. İkinci bölümde ise navbar'ın işi bittikten sonra alt kısmın tasarımı gösterilmekte, konteyner ve row class'ları kullanılarak düzen oluşturulmakta, logo ve yazılar yerleştirilmekte ve flexbox özellikleri kullanılarak responsive tasarım yapılmaktadır.. Eğitim boyunca Bootstrap'in temel özellikleri, CSS ile mobil uyumluluk sağlama teknikleri, menü öğelerinin üzerine gelindiğinde arka plan rengi değiştirme, boşlukları temizleme ve menü öğelerinin sağa kayması gibi özelliklerin nasıl uygulanacağı detaylı olarak gösterilmektedir.

      • youtube.com
    • Web Sitesini Mobil Uyumlu Yapma Eğitimi

      Bu video, bir eğitim içeriği olup, izleyicilere web sitesini mobil uyumlu (responsive) yapma sürecini adım adım göstermektedir.. Video, web sitesinin meta etiketlerine meta name viewport, content with device width etiketini eklemeyi ve ayrı bir CSS dosyası oluşturarak responsive CSS ayarlarını yapmayı anlatmaktadır. Eğitmen, body, clear, şablon, logo, header menü ve slider gibi farklı bölümlerdeki CSS ayarlarını ekran çözünürlüğüne göre nasıl düzenleyeceğini göstermekte ve son olarak mobil uyumlu web sitesinin nasıl çalıştığını test etmektedir.

      • youtube.com
    • Web Sayfasının Arka Planında Değişen Resimleri Yapma Eğitimi

      Bu video, bir eğitim içeriği olup, izleyicilere web sayfasının arka planında değişen resimleri nasıl yapabileceklerini adım adım göstermektedir.. Videoda, web sayfasının arka planında sabah, akşamüstü ve gece için farklı fotoğrafların geçiş efekti ile nasıl kullanılacağı anlatılmaktadır. Eğitmen, "background-image" yerine farklı bir yöntem kullanarak, CSS animasyonları ve keyframe'ler ile bu geçiş efektini nasıl oluşturacağını göstermektedir. Ayrıca, mobil uyumluluğu sağlamak için "cover" özelliği ve "position: absolute" ile arka planın sabitlenmesi gibi teknik detaylar da paylaşılmaktadır.

      • youtube.com
    • NatroSite Web Sitesi Özellikleri ve Kurulum

      11 modül desteği ve 250 fotoğraf yükleme imkanı. 25.000 ziyaret ve 10 e-posta hesabı desteği. Ücretsiz alan adı ve hosting hizmeti

      • natro.com
    • Photoshop'ta Bootstrap İlgili Web Tasarımı Eğitimi

      Bu video, bir eğitmen tarafından sunulan Photoshop programında Bootstrap izgara yapısını kullanarak web tasarımı yapma konulu kapsamlı bir eğitim içeriğidir.. Eğitim, Bootstrap izgara yapısının Photoshop'a nasıl ekleneceği ve düzenleneceği ile başlayıp, mobil uyumluluğu sağlamak için Chrome Developer Tools ve CSS Peeper eklentisi kullanımı ile devam etmektedir. Daha sonra Starbucks web sitesi örneği üzerinden başlık (header) oluşturma, menü öğelerini yerleştirme, lokasyon simgesi ekleme ve metin düzenleme gibi adım adım Photoshop teknikleri gösterilmektedir.. Eğitim boyunca Bootstrap'in col-lg, col-md gibi sınıflarının kullanımı, farklı ekran boyutlarında (1200px, 960px, 768px, 576px) tasarım değişiklikleri, piksel hesaplamaları, renk kodları ve Lato yazı karakteri kullanımı gibi teknik detaylar da paylaşılmaktadır.

      • youtube.com
    • İlham Veren 9 Blog Örneği

      Bloglar, kişisel deneyimleri ve fikirleri paylaşmak için kullanılan popüler bir yöntemdir. Bloglar bağımsız site veya mevcut sitelerde eklenti olarak kurulabilir

      • tr.wix.com
    • Bingeli Dersler: 8. Bölüm - Features Kullanımı

      Bu video, Bingeli derslerinin sekizinci bölümü olup, bir eğitmen tarafından sunulan bir web tasarım eğitim dersidir.. Videoda "Features" özelliğinin nasıl kullanılacağı detaylı olarak anlatılmaktadır. Features, web sitesinin orta kısmına görseller eklemeyi, bu görselleri değiştirmeyi ve mobil uyumlu tasarım yapmayı sağlar. Eğitmen, özellikler arasında grid sistemi, stil seçenekleri (cover, gradient, filter, color, fade) ve ikon paketleri gibi özelliklerin nasıl kullanılacağını göstermektedir. Video yaklaşık 10 dakika sürmekte ve bir sonraki derste "Galeriler" konusunun işleneceği belirtilmektedir.

      • youtube.com
    • Common Website Screen Resolutions 2023

      Mobile devices account for 55.67% of global web traffic. Desktop usage is 42.4%, tablet usage is 1.93%. StatCounter data shows July 2023 mobile usage trends

      • designrush.com
    • Bootstrap 5 Eğitim Seti: Container ve Container Fluid

      Bu video, Gürkan Engin'e saygılarını sunan bir eğitmen tarafından sunulan Bootstrap 5 eğitim setinin üçüncü dersidir.. Videoda Bootstrap'teki container ve container fluid kavramları detaylı olarak anlatılmaktadır. Eğitmen, container'ın sayfayı otomatik olarak ortaladığını, farklı ekran boyutlarında (small, medium, large, extra large, extra extra large) nasıl genişlediğini ve iç boşluk (padding) ile dış boşluk (margin) değerlerini nasıl ayarlayabileceğimizi göstermektedir. Ayrıca, container fluid özelliğinin tüm ekran boyutlarında ekranı yüzde yüz kaplaması ve bu nedenle small, medium, large, x-large gibi kısımlarının olmaması bilgisi de paylaşılmaktadır.. Eğitmen, ileriki derslerde bir site teması oluşturarak container kullanımını daha detaylı göstereceğini belirtmektedir. Video, Bootstrap'in mobil, tablet, dizüstü ve masaüstü cihazlarda uyumlu tasarım sağlama özelliğine de değinmektedir.

      • youtube.com
    • Common Screen Resolutions and Testing Guide

      Screen resolution defines sharpness and detail of screen. Higher resolutions provide sharper images and better readability. Lower resolutions can result in blurred or pixelated visuals

      • browserstack.com
    • WordPress Website Examples Guide

      WordPress powers 43.2% of the internet with over 810 million websites. Platform allows building various sites using plugins and templates. WordPress.org offers all features out of the box

      • wpbeginner.com
    • CSS Hamburger Menu Guide

      A hamburger menu is a three-line symbol button with hidden menu and collapse icon. Typically placed at top corner of website or interface. Used for secondary navigation and minimizing header navigation clutter

      • alvarotrigo.com
    • Web Sitesini Mobil Uyumlu Hale Getirme Eğitimi

      Bu video, bir eğitim içeriği olup, izleyicilere HTML ve CSS kullanarak web sitelerini mobil uyumlu hale getirme yöntemlerini göstermektedir.. Video, günümüzde web sitelerinin çoğunlukla akıllı telefonlardan ziyaret edildiğini vurgulayarak başlıyor ve mobil uyumluluğun önemi anlatılıyor. İçerikte, web sitesinin farklı ekran boyutlarında düzgün çalışması için index sayfasında meta tag ekleme, CSS'de piksel değerlerini yüzdeye çevirme, resimlerin genişliğini ayarlama ve media query kullanarak farklı aygıtlar için özel stiller oluşturma adımları gösteriliyor. Ayrıca, Google Chrome'da Google Device Toolbar kullanarak web sitesinin farklı cihazlarda nasıl göründüğünü test etme yöntemi de paylaşılıyor.

      • youtube.com
    • HTML ve CSS Eğitim Seti: 35. Ders - Yatay Menü Oluşturma ve Mobil Uyumlu Tasarım

      Bu video, HTML ve CSS eğitim setinin 35. dersi olup, bir eğitmen tarafından sunulmaktadır. Eğitmen, geçen derste oluşturulan dikey menüyü kullanarak yatay bir menü oluşturma sürecini adım adım göstermektedir.. Videoda, yatay menü oluşturma için CSS kodlarının nasıl yazılacağı detaylı olarak anlatılmaktadır. Eğitmen önce temel menü yapısını oluşturmak için listeleri düzenleyip, float left özelliği kullanarak yan yana sıralamaktadır. Ardından menüye renk, padding, border gibi stil özellikleri ekleyerek görünümünü geliştirmektedir. Ayrıca CSS3 özelliklerinden faydalanarak hover efektleri, active class kullanımı ve mobil uyumluluğu sağlama teknikleri gösterilmektedir. Video, menünün sabit pozisyonlandırma ve ekran boyutuna göre adaptif davranışını ayarlama konularıyla devam etmektedir.

      • youtube.com
    • Slider Revolution Eklentisi Kullanım Eğitimi

      Bu video, Ali adlı bir kişinin Slider Revolution web sitesi eklentisini tanıttığı ve kullanımını adım adım gösterdiği bir eğitim içeriğidir. Ali, kendi web sitesi pod.com.tr'de bu eklentiyi kullanmaktadır.. Video, Slider Revolution eklentisinin tanıtımını ve kullanımını kapsamlı şekilde ele almaktadır. İlk olarak eklentinin fiyat bilgileri ve temel özellikleri anlatılmakta, ardından sıfırdan bir tasarım oluşturma süreci gösterilmektedir. İçerikte shape, text, image, buton gibi farklı katmanların ekleme ve düzenleme işlemleri, animasyon ayarları, video ve müzik ekleme gibi özellikler detaylı olarak açıklanmaktadır.. Eğitim, mobil ve notebook için farklı tasarım ayarları yapma, oluşturulan sliderin web sitesine nasıl ekleneceği ve short kod kullanımı gibi pratik bilgiler de içermektedir. Video, basit bir slider oluşturma örneği üzerinden başlayıp, izleyicilere kendi hayal gücünü kullanarak daha fazla özelleştirme imkanı sunmaktadır.

      • youtube.com
    • HTML5 ile Layout Yapımı Eğitimi

      Bu video, bir eğitmen tarafından sunulan HTML5 programlama dili eğitimidir. Eğitmen, HTML5 ile gelen yeni tagleri kullanarak web sayfası layout'larını nasıl oluşturabileceğimizi göstermektedir.. Video, HTML5'in mobil ve tablet cihazlarla uyumlu web sayfaları için yeni bir standart sunduğunu açıklayarak başlıyor. Eğitmen, HTML5 ile gelen header, nav, article ve footer gibi yeni tagleri kullanarak bir web sayfası layout'u oluşturuyor. Her bir tag'in işlevi detaylı olarak anlatılıyor: header sayfanın başlığı, nav menü, article ana içerik ve footer alt kısım olarak tanımlanıyor. Eğitmen, bu taglerin özellikle mobil cihazlarla uyumlu sistemler geliştirirken önemini vurguluyor ve daha sonra Bootstrap gibi CSS frameworkleriyle bu taglerin nasıl kullanılacağını göstereceğini belirtiyor.

      • youtube.com
    • WordPress ve Elementor ile Responsive Web Tasarımı Eğitimi

      Bu video, bir eğitmen tarafından sunulan WordPress ve Elementor kullanarak web sitesi tasarımını anlatan bir eğitim içeriğidir.. Eğitim, ana sayfa butonlarının ortalanması ve marjin ayarlarıyla başlayıp, tablet ve mobil görünümlerde responsive tasarımın nasıl yapılacağını adım adım göstermektedir. Videoda ana sayfa, ebat sayfası, works sayfası, blog sayfası ve kontakt sayfası gibi farklı sayfaların responsive görünümü kontrol edilmekte ve gerekli düzenlemeler yapılmaktadır.. Eğitim serisinin sonunda, home, ebat, work ve blog sayfalarının başarılı bir şekilde tasarlandığı gösterilmektedir. Blog sayfası için sadece WordPress'in kendi turu kullanılmış, Elementor kullanılmamıştır. Ayrıca, mobil görünümde yazıların düzeltilmesi, padding ve margin değerlerinin ayarlanması gibi konular da ele alınmaktadır.

      • youtube.com
    • E-Ticaret Siteleri İçin SEO ve Kullanıcı Deneyimi Stratejileri

      Bu video, Strateji Markasının kurucusu Mert Bey'in sunduğu bir SEO konferansı veya semineri formatındadır. Mert Bey, gemi inşaat mühendisi olarak kariyerine başlamış, daha sonra profesyonel blog yazarı ve SEO danışmanı olmuştur.. Sunumda, e-ticaret siteleri için başarılı olmak için gerekli SEO stratejileri detaylı olarak ele alınmaktadır. Video, SEO dünyasının zaman içindeki değişimlerinden başlayarak, Google'un yapay zeka ve makine öğrenmesi ile Rank Brain algoritmasının SEO'yu nasıl etkilediğini anlatmaktadır. Ayrıca, kullanıcı deneyimi (UX), kullanıcı niyeti, yükleme hızı, yapısal veri, mikro alanlar, satın alma öncesi bilgilendirme, açıklama metinleri, link inşası, marka adı takibi ve Google My Business kullanımı gibi konular da incelenmektedir.. Sunumda ayrıca Trello ile entegre SEO proje yönetimi, dizin detoksü, karamelize sorunları ve mobil odaklı olma gibi pratik stratejiler de paylaşılmaktadır. Konuşmacı, Google'ın algoritmalarının kullanıcı deneyimine daha fazla önem verdiğini ve bu nedenle e-ticaret sitelerinin bu yönlerde iyileştirilmesinin önemini vurgulamaktadır.

      • youtube.com
    • Mağaza Oluşturma Tanıtımı

      Bu video, bir mağaza oluşturma platformunun özelliklerini tanıtan bir tanıtım içeriğidir.. Video, mağaza sahibi olmanın avantajlarını anlatmaktadır. Kullanıcılar kendi alan adlarını, markalarını ve logolarını oluşturabilir, hazır tasarımları kullanabilir veya kendi tasarımlarını yapabilirler. Mağazalar mobil uyumlu olup PC, tablet ve telefon gibi farklı cihazlarda görüntülenebilir. Kullanıcılar kendi menülerini, kampanyalarını oluşturabilir ve tüm ürünleri veya sadece seçtikleri ürünleri satabilirler.

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