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.
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.
Pre-designed website layouts coded in HTML and styled with CSS. Pre-made templates for cost-effective online presence
Bootstrap grid uses containers, rows, and columns for responsive layout. System supports six responsive breakpoints based on min-width media queries. Containers center and horizontally pad content. Rows wrap columns with negative margins for left alignment
Bu video, bir eğitmen tarafından sunulan web geliştirme eğitim içeriğidir.. Video, Makromedia Dreamweaver programı kullanarak COVID-19 web sayfası geliştirme sürecini adım adım göstermektedir. İçerikte HTML ve CSS kullanarak web sayfası oluşturma, klasör oluşturma, HTML dosyası oluşturma, link ekleme, CSS ile stil uygulama ve tablo düzenleme gibi temel web geliştirme teknikleri anlatılmaktadır.. Eğitimde "COVID-19 Nedir?", "COVID-19 Tedavi", "COVID-19 Rehberi", "Sunumlar", "Algoritmalar", "Vaka Sorgulama Kılavuzu", "Formlar" ve "Laboratuvar Listesi" gibi farklı sayfaların nasıl oluşturulacağı ve link verileceği detaylı olarak gösterilmektedir. Ayrıca responsive tasarım için gerekli ayarlar, sayfa boyutlarını ayarlama ve dosya yolları bozulduğunda görsellerin çarpı şeklinde görünmemesi için gerekli ayarlar da anlatılmaktadır. Video, bir serinin parçası olup, bir sonraki videoda devam edileceği belirtilmektedir.
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.
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.
Navbars require .navbar and .navbar-expand classes for responsive behavior. Navbars are fluid by default, container can limit horizontal width. Accessibility requires role="navigation" and aria-current attributes
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.
Bu video, bir eğitim içeriği olup, konuşmacı responsive web design için CSS media queries konusunu anlatmaktadır.. Video, responsive web design'de önemli olan media queries'in temel özelliklerini açıklamaktadır. İçerikte meta viewport tanımı, inline styling sorunları, media queries'in doğru yerleştirilmesi ve ekran yönüne göre (portrait/landscape) farklı stiller uygulama gibi konular ele alınmaktadır. Konuşmacı, örneklerle media queries'in nasıl kullanılacağını göstermekte ve mobil cihazlarda web sayfalarının doğru görüntülenmesi için gerekli ayarları açıklamaktadır.
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.
Images can be resized using height and width attributes on img tag. Browser automatically scales images when dimensions don't match. Aspect ratio can be preserved by setting only width and height to auto
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.
HTML5 templates are pre-built web page setups for free use. HTML5 is the newest version of HTML for multimedia and faster websites. Templates include basic design elements and easy customization options
Setting min-height to 100% on both HTML and body elements creates unexpected behavior. Body element has zero height despite having default 8px margin. Background-color settings can make body appear taller than viewport
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.
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.
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.
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.
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.