• Buradasın

    HTML CSS

    Özetteki ilgi çekici içerikler

    • JavaScript ile Hesap Makinesi Yapımı

      Bu video, bir eğitim içeriği olup, konuşmacı JavaScript kullanarak basit bir hesap makinesi yapımını adım adım göstermektedir. Video, hesap makinesinin temel işlevlerinin gösterilmesiyle başlayıp, HTML, CSS ve JavaScript dosyalarının oluşturulmasıyla devam ediyor. Önce HTML'de hesap makinesi tasarımı yapılıyor, ardından CSS ile tasarım özellikleri ekleniyor ve son olarak JavaScript ile butonların işlevselliği ve hesap makinesi işlemleri kodlanıyor. Video, hesap makinesinin temel fonksiyonlarını (toplama, çıkarma, çarpma, bölme, mod alma, yüzde alma) JavaScript ile nasıl uygulayacağınızı gösteriyor. Videoda ayrıca butonların tıklama olaylarını nasıl ele alacağı, tuşların (0-9, AC, DEL, +, -) işlevlerini nasıl programlayacağı ve kodların başarıyla çalıştığı test edilmesi de gösterilmektedir.

      • youtube.com

    • Şarkı Sözleri Paylaşım Sitesi Tasarımı Eğitimi

      Bu video, bir eğitim içeriği olup, konuşmacı Codelater.com için şarkı sözleri paylaşım teması oluşturma sürecini adım adım göstermektedir. Videoda, temel HTML ve CSS bilgileri kullanılarak bir şarkı sözleri paylaşım sitesi tasarımı anlatılmaktadır. İçerik, klasör oluşturma, yazı tipi ve ikon ekleme, CSS reset yapma, banner tasarımı ve üst menü tasarımı gibi aşamaları kapsamaktadır. Ayrıca Wix platformunda banner tasarımı, a etiketlerine müdahale ederek renk ve yazı boyutu ayarları, menü konumunu düzenleme, hashtag alanı, arama formu, önerilen aramalar ve reklam alanı gibi banner içeriğini oluşturma konuları ele alınmaktadır. Video yaklaşık 28 dakika sürmekte ve bir sonraki videoda şarkıların listeleneceği alt kısmın tasarlanacağı belirtilmektedir. Konuşmacı, Bootstrap yerine standart HTML bilgisiyle bu temayı oluşturabileceğini belirterek, izleyicilerin daha kolay takip edebilmesini sağlamaktadır.

      • youtube.com

    • jQuery ile Basit Arama Formu Uygulaması

      Bu video, bir eğitim dersi formatında olup, bir eğitmen tarafından jQuery kullanarak basit bir arama formu uygulamasının nasıl yapılacağını göstermektedir. Videoda, web sitelerinde görülen arama formu uygulamasının jQuery ile nasıl oluşturulacağı adım adım anlatılmaktadır. Eğitmen önce form oluşturma, ardından jQuery ile sayfa hazır olduğunda fonksiyon çalıştırma, input seçimi, focus ve blur olaylarını kullanarak formun üzerine odaklanıldığında ve bırakıldığında formun davranışını değiştirme işlemlerini göstermektedir. Uygulama, formun üzerine odaklanıldığında "lütfen aranacak kelimeyi giriniz" yazısının kaybolması ve formun bırakıldığında tekrar görünmesi şeklinde çalışmaktadır.

      • 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

    • 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

    • jQuery ile Anlık Toplama İşlemi Eğitimi

      Bu video, bir eğitmen tarafından sunulan jQuery programlama dili ile anlık toplama işlemi yapma konulu bir eğitim içeriğidir. Videoda, jQuery kullanarak kullanıcıdan alınan sayıların otomatik olarak toplanmasını gösteren bir uygulama adım adım anlatılmaktadır. Önce HTML sayfasında giderlerin toplanacağı inputlar oluşturulur, ardından jQuery kodları yazarak "change" fonksiyonu tanımlanır ve her input için toplam değer hesaplanır. Son olarak, toplam değer giderlerin toplanacağı inputa yazdırılır. Video boyunca eğitmen, kodlama sürecini ve karşılaşılan hataları göstererek izleyicilere pratik bilgi sunmaktadır.

      • youtube.com

    • Bootstrap Modal Kullanımı Eğitimi

      Bu video, bir eğitmen tarafından sunulan web geliştirme eğitim serisinin bir bölümüdür. Eğitmen, Bootstrap kütüphanesinin modal bileşeninin nasıl kullanılacağını adım adım göstermektedir. Videoda, Bootstrap'in modal özelliğinin temel kullanımından başlayarak, header, body ve footer bölümlerinin nasıl oluşturulacağı detaylı olarak anlatılmaktadır. Eğitmen, "What We Do" adlı bir section oluşturarak HTML kodlarını göstermekte, butonlara modal ekleme, fade efekti kullanımı ve farklı boyut seçenekleri (model-lg, model-sm) gibi özelliklerin nasıl eklenebileceğini açıklamaktadır. Video, bir web projesinin tamamlanmış halini göstererek başlamakta ve bir sonraki derste tasarımın YouTube videosu çalıştırma özelliğine sahip hale getirileceği bilgisiyle sonlanmaktadır.

      • youtube.com

    • Form Opacity (Saydamlık) Özellikleri Eğitim Videosu

      Bu video, bir eğitim içeriği olup, bir eğitmen tarafından form opacity (saydamlık) özelliğinin nasıl kullanılacağı anlatılmaktadır. Video, form opacity özelliğinin ne olduğunu ve nasıl çalıştığını açıklayarak başlıyor. Eğitmen önce formun opacity değerini değiştirerek saydamlık seviyesini gösteriyor, ardından kod tarafında bu özelliği nasıl kullanabileceğimizi adım adım anlatıyor. Özellikle "Saydam Yap" ve "Görünür Yap" butonları üzerinden timer kullanarak formun saydamlık değerini nasıl değiştirebileceğimizi kod örnekleriyle gösteriyor. Video, form opacity özelliğini öğrenmek ve uygulamak isteyenler için temel bir rehber niteliğindedir.

      • 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

    • Kendi Bilgisayarımızdaki Fontları Web Sayfasında Kullanma Rehberi

      Bu video, Tayfun Erbilen tarafından Prototurk.com için hazırlanan bir eğitim içeriğidir. Videoda, kendi bilgisayarımızdaki fontları web sayfasında kullanmak için Typeface adlı bir eklenti kurulumu adım adım gösterilmektedir. İçerik, fontların Typeface sitesine yüklenmesi, dönüştürülmesi, JavaScript dosyasının indirilmesi ve HTML sayfasına entegrasyonu ile ilerlemektedir. Ayrıca, Türkçe karakterlerin doğru görüntülenmesi için UTF-8 kodlama dilinin kullanılması gerektiği vurgulanmaktadır.

      • youtube.com

    • Fiverrs ve Footer Tasarımı Eğitim Videosu

      Bu video, bir eğitim serisinin altıncı dersi olup, bir eğitmen tarafından sunulmaktadır. Eğitmen, önceki beş dersin ardından tasarım sürecinin son aşamasını anlatmaktadır. Videoda Fiverrs ve footer bölümünün nasıl yapılacağı adım adım gösterilmektedir. Eğitmen, gri fontta dikdörtgen şeklinde bir footer tasarımı yaparak, 16 piksellik yazı ekleme, renk değiştirme ve roundness özelliği uygulama gibi işlemleri göstermektedir. Ayrıca, footer'ın kodlama aşamasında link verici bir menü olarak çalışacağı belirtilmektedir. Video, tasarımın ilk yapılan tasarımdan çok farklı olmadığını vurgulayarak sonlanmaktadır.

      • youtube.com

    • Visual Studio Code Kurulum ve Kullanım Rehberi

      Bu video, bir konuşmacının Visual Studio Code'nin kurulumundan başlayarak temel kullanımını adım adım gösterdiği kapsamlı bir eğitim içeriğidir. Video, Visual Studio Code'nin doğru platformdan indirilmesi ve kurulumu ile başlayıp, tema seçimi, ekran boyutu ayarlama ve arayüzün Türkçe diline çevrilmesi gibi temel ayarları göstermektedir. Ardından web geliştirme aracının arayüzü, sol panel, araç çubukları ve otomatik kaydetme özelliği tanıtılmaktadır. Son olarak, "Visual Studio Caymap", "Live Server" ve "Code Snap" gibi çeşitli uzantıların yükleme ve kullanım örnekleri detaylı olarak anlatılmaktadır. Video özellikle HTML ve CSS dersleri kapsamında Visual Studio Code kullanmak isteyenler için faydalı bilgiler içermektedir. Code Snap ve Live Server uzantılarının kullanımı, tema değiştirme, açık-koyu mod seçimi ve metin düzenleyici ayarları gibi pratik bilgiler de paylaşılmaktadır.

      • youtube.com

    • JavaScript Eğitim Seti Giriş Dersi

      Bu video, Dumlupınar Üniversitesi Bilgisayar Mühendisliği mezunu Fehmi Uyar tarafından sunulan JavaScript eğitim setinin ilk dersidir. Fehmi Uyar, YouTube kanalında "JavaScript, HTML ve CSS Durağanlıktan Çıkarıyor" adlı bir eğitim serisi hazırlamıştır. Video, JavaScript'in ne olduğu, tarihçesi ve önemi hakkında bilgiler sunarak başlıyor, ardından Dreamweaver CS2018 programında basit bir HTML sayfası oluşturma ve JavaScript kodlarının nasıl yazılacağı konusunda pratik örnekler veriyor. Eğitmen, script taglerinin kullanımı, harici JavaScript dosyalarının oluşturulması ve çağrılması ile "document.write" fonksiyonunun ekrana yazdırma işlemi için nasıl kullanılacağı konularını ele alıyor. Video, web geliştirme için temel bir dil olan JavaScript'in HTML ve CSS ile birlikte nasıl kullanıldığını vurgulayarak, yazılım öğrenirken kodları ezberlemek yerine anlamak gerektiğini belirterek sona eriyor.

      • youtube.com

    • Bootstrap ile E-Ticaret Sitesi Tasarımı Eğitim Videosu

      Bu video, bir eğitim serisinin ilk bölümü olup, eğitmen tarafından Bootstrap kütüphanesi kullanılarak statik bir e-ticaret sitesi tasarımının nasıl yapılacağını anlatan bir ders formatındadır. Videoda Bootstrap kütüphanesinin özellikleri ve avantajları (mobil uyumluluk ve grid mantığı) detaylı olarak açıklanmaktadır. Eğitmen, Visual Studio 2015 kullanarak bir e-ticaret sitesi tasarımının nasıl yapılacağını adım adım anlatacağını belirtmektedir. Video, e-ticaret sitesinin ana sayfası, giriş/üye olma, profil, siparişlerim, admin paneli, ürün listesi, sepet ve sipariş verme gibi sayfalarının tasarım detaylarını içermektedir. Eğitmen, bir sonraki derste bu tasarımın nasıl yapılacağını göstereceğini belirterek videoyu sonlandırmaktadı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

    • Bootstrap ile Sayfa Tasarımı Eğitimi

      Bu video, bir eğitmen tarafından sunulan Bootstrap derslerinin bir parçasıdır. Eğitmen, yaklaşık dört gündür ders çekmediğini belirterek, bu derste Bootstrap kullanarak sayfa tasarımı yapmayı öğretmektedir. Videoda, Bootstrap'ın text left, margin, lead, footer gibi class'larının nasıl kullanılacağı adım adım gösterilmektedir. Eğitmen, bir resim üzerine yazı ekleme, metin hizalama, renklendirme ve başlık oluşturma gibi temel Bootstrap özellikleri uygulamalı olarak anlatmaktadır. Video, bir sonraki derste yazarlar ve yöneticilerin listeleneceği bilgisiyle sonlanmaktadır.

      • youtube.com

    • Web Tasarımı Eğitim Videosu: Form Tasarımı ve Logo Düzenleme

      Bu video, bir web tasarım eğitim serisinin bir bölümüdür. Eğitmen, izleyicilere web sayfası tasarımı konusunda adım adım rehberlik etmektedir. Videoda, web sayfasının üst kısmındaki arama formunun konumlandırılması, logo düzenleme ve form tasarımı konuları ele alınmaktadır. Eğitmen önce mevcut kodları test ederek hataları düzeltmekte, ardından logo boyutlarını ayarlayarak form tasarımı için gerekli düzenlemeleri yapmaktadır. Video, bir sonraki derste formun kodlanması ve logo düzenleme işleminin devam edeceği bilgisiyle sonlanmaktadır.

      • youtube.com

    • Bootstrap 4 ile E-Ticaret Sitesi Tasarımı Eğitimi

      Bu video, bir eğitmen tarafından sunulan e-ticaret sitesi tasarımı eğitim serisinin bir bölümüdür. Eğitmen, Bootstrap 4 kullanarak "MyShop" adlı bir e-ticaret sitesi tasarımı göstermektedir. Videoda öncelikle e-ticaret sitesinin genel görünümü ve yapısı tanıtılmaktadır. Ana sayfa, ürün detayları, kayıt ol/giriş, profil, sepetim, mesajlar ve çıkış gibi temel sayfalar ve bunların özellikleri detaylı olarak anlatılmaktadır. Eğitmen, tasarımın Bootstrap 4 ile yapıldığını belirterek, ilerleyen bölümlerde bu tasarımın adım adım nasıl oluşturulacağını göstereceğini ve son bölümde Bootstrap 3 versiyonuna çevirmeyi deneyeceğini söylemektedir.

      • youtube.com

    • Web Sitenizi Daha Çekici Hale Getirmek İçin Yapay Zeka Sitesi Tanıtımı

      Bu video, bir web tasarımcısının web sitelerini daha benzersiz ve çekici hale getirmek için önerdiği bir yapay zeka sitesini tanıttığı bir eğitim içeriğidir. Videoda, "io" adlı bir yapay zeka sitesi gösterilmektedir. Bu site, HTML ve CSS ile yapılmış özel öğeler oluşturmanıza, paylaşmanıza ve kullanmanıza olanak sağlar. Sunucu, butonlar, hamburger menüleri, yükleme simgeleri, check boxlar, toggle switches ve input gibi çeşitli web öğelerinin CSS kodlarını nasıl bulabileceğinizi adım adım göstermektedir. Ayrıca, bu siteyi kullanarak web sitenizi daha ilgi çekici hale getirebileceğinizi ve ziyaret edenleri sitenize daha uzun süre tutabileceğinizi belirtmektedir.

      • youtube.com

    • Som.com'dan Ücretsiz Hosting Alımı ve Site Yayınlama Rehberi

      Bu video, Kuzey Fırtınası adlı bir YouTube içerik üreticisinin Som.com platformundan ücretsiz hosting alımı ve site yayınlama sürecini adım adım gösterdiği bir eğitim içeriğidir. Video, Som.com'a üyelik oluşturma, site ismi belirleme ve site özelliklerini ayarlama aşamalarıyla başlıyor. Ardından dosya yükleme süreci detaylı olarak anlatılıyor: File Manager üzerinden mevcut sayfanın silinmesi, HTML ve CSS dosyalarının ZIP formatında yüklenmesi ve sitenin düzenlenmesi gösteriliyor. Video, domain alamayan veya sorun yaşayan izleyicilerin yorum yapabileceği bir sonla tamamlanıyor.

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