• Buradasın

    CSS

    Özetteki ilgi çekici içerikler

    • Live Preview Kullanarak Web Sayfasını Canlı Olarak Görüntüleme

      Bu video, bir eğitim içeriği olup, izleyicilere web geliştirme sürecinde Live Preview özelliğinin nasıl kullanılacağını göstermektedir.. Video, index.html adlı bir HTML sayfasının JavaScript, CSS ve normal HTML içeriğini göstererek başlıyor. Ardından, kod değişikliklerinin canlı olarak görüntülenmesi için Live Preview eklentisinin nasıl kurulacağı adım adım anlatılıyor. Kurulum sonrası, komut paleti üzerinden Live Preview'ı başlatma ve kod değişikliklerinin anında web sayfasında yansımasını gösterme işlemi gösteriliyor. Bu özellik, geliştirme sürecini hızlandırmak için faydalı bir araç olarak sunuluyor.

      • youtube.com

    • React'te Bootstrap Kullanımı Eğitimi

      Bu video, bir eğitmen tarafından sunulan React'te Bootstrap kütüphanesinin nasıl kullanılacağına dair kapsamlı bir eğitim içeriğidir. Video, React projelerinde Bootstrap entegrasyonunu adım adım göstermektedir. İçerikte önce Bootstrap'ın npm ile projeye nasıl ekleneceği anlatılmakta, ardından ReactBootstrap paketinin avantajları ve React'te Bootstrap komponentlerinin kullanımı detaylandırılmaktadır. Ayrıca varyant kullanımı, layout bölümü, SASS dosyalarını kullanma, renk skalalarını entegre etme ve farklı CSS ekleme yöntemleri de gösterilmektedir. Eğitim, özellikle Bootstrap'i React projesine etkili bir şekilde entegre etmek isteyenler için dört farklı CSS ekleme yolunu da içermektedir. Önceki derslerde SASS konusunun işlendiği hatırlatılmakta ve bu derste ReactBootstrap paketinin neden tercih edilmesi gerektiği açıklanmaktadır.

      • youtube.com

    • HTML, CSS ve JavaScript ile Basit Hesap Makinesi Oluşturma Eğitimi

      Bu video, bir eğitmen tarafından sunulan web geliştirme eğitim içeriğidir. Eğitmen, izleyicilere adım adım basit bir hesap makinesi uygulamasının nasıl oluşturulacağını göstermektedir. Video, HTML, CSS ve JavaScript kullanarak basit bir hesap makinesi oluşturma sürecini kapsamaktadır. İlk olarak index.html, style.css ve app.js dosyaları oluşturulur, ardından CSS ile tasarım yapılır ve son olarak JavaScript ile fonksiyonellik eklenir. Eğitmen, buton oluşturma, tıklama olayları ekleme ve hesaplama işlemlerinin nasıl gerçekleştirileceğini detaylı şekilde anlatmaktadır. Oluşturulan hesap makinesi, numerik tuşlar ve işlem tuşları (artı, eksi, çarpma, bölme ve eşit) içeren basit bir arayüze sahiptir. Video sonunda eğitmen, oluşturulan hesap makinesinin çalıştığını test etmektedir.

      • youtube.com

    • Sıfırdan Web Sitesi Yapımı Eğitimi

      Bu video, bir eğitmen tarafından sunulan kapsamlı bir web geliştirme eğitim içeriğidir. Eğitmen, izleyicilere adım adım HTML ve CSS kullanarak basit bir web sitesi oluşturma sürecini göstermektedir. Video, web sitesi yapımının temellerinden başlayarak tüm süreci kapsamaktadır. İlk olarak dosya hiyerarşisi oluşturma ve temel HTML yapısı, ardından header, content ve footer bölümlerinin oluşturulması, CSS ile stillendirme, menü oluşturma, banner ekleme, fotoğraf galerisi ve iletişim sayfası oluşturma konuları ele alınmaktadır. Eğitim içeriğinde ayrıca meta etiketleri, favicon ekleme, CSS özellikleri (margin, padding, border, font size, hover efekti), menü linklerini stilize etme, "seçili" sınıfı oluşturma ve iletişim formu oluşturma gibi pratik uygulamalar da gösterilmektedir. Video, web sitesi yapımı konusunda temel bilgi edinmek isteyenler için adım adım bir rehber niteliğindedir.

      • youtube.com

    • Yazılım Bilgisi Olmadan Web Sitesi Yapma Rehberi

      Bu video, yazılım bilgisi olmadan basit bir web sitesi oluşturma sürecini adım adım gösteren bir eğitim içeriğidir.. Video, yapay zekanın gelişmesiyle yazılım bilgisi olmadan web sitesi yapmanın mümkün olduğunu anlatarak başlıyor. İçerikte Chatcbt, Depsec ve AGC gibi yapay zeka seçeneklerinden Depsec'in açık kaynaklı olması nedeniyle tercih edildiği belirtiliyor. Ardından Visual Studio Code kullanarak yapay zekadan alınan HTML ve CSS kodlarını yerleştirme, siteyi açma ve temel bir web sitesi oluşturma süreci gösteriliyor. Video, siteyi internete yayınlamak için domain ve hosting almanın gerekliliğini vurgulayarak sonlanıyor.

      • youtube.com

    • Yazılım Öğrenme Hikayesi

      Bu videoda İstanbul'da Beykent Üniversitesi Yönetim Bilişim Sistemleri bölümünde ikinci sınıf öğrencisi olan bir içerik üreticisi, yazılım öğrenme yolculuğunu anlatıyor. Video, içerik üreticisinin yazılım öğrenme sürecini ve bu konudaki deneyimlerini paylaşıyor. Selman Kahya'nın videolarını izleyerek HTML, CSS ve JavaScript öğrenmeye başladığını, yaklaşık iki hafta içinde HTML'i tamamladığını ve JavaScript'in yarısına geldiğini belirtiyor. Video serisi, hiç yazılım bilgisi olmayan birinin tek başına neler yapabileceğini göstermek amacıyla hazırlanmış olup, ilerleyen bölümlerde staj kovalama çalışmaları ve profesyonel yazılımcılarla röportajlar da yer alacak.

      • youtube.com

    • CSS Speedrun: Hover Bubble Navigasyon Tasarımı

      Bu video, bir web geliştiricisinin CSS kullanarak Raul Droneka'nın Twitter'da paylaştığı özel bir navigasyon tasarımını yeniden oluşturma sürecini gösteren bir eğitim içeriğidir.. Videoda, konuşmacı 26 dakika ve 32 saniye içinde, hover edildiğinde takip eden bubble efektleri ve aktif link için özel bubble efektleri olan bir navigasyon tasarımı oluşturmayı hedeflemektedir. Süreç boyunca anchor etiketleri, anchor name özellikleri, gradientler, box shadow, transform ve Z index gibi CSS özellikleri kullanılarak tasarımın adım adım oluşturulması gösterilmektedir.. Konuşmacı ayrıca hover bubble'ın görünümünü, hover durumunda değişen renkleri ve hover bubble'ın anchor özelliğini nasıl uygulayacağını detaylı şekilde anlatmaktadır. Özellikle hover bubble'ın anchor özelliğini uygulamak için pseudo elementler (before) kullanarak çözüm bulma süreci de gösterilmektedir.

      • youtube.com

    • CSS Dersi: A Story Bölümü Tasarımı

      Bu video, Busra tarafından sunulan bir CSS dersidir. Eğitmen, bir web sayfasının "A Story" bölümünün CSS kodlarını yazarak tasarımını tamamlamaktadır. Videoda, "History" section'ın CSS kodlarının nasıl yazılacağı adım adım gösterilmektedir. Eğitmen önce sol taraftaki mavi çizgiyi (border left) ve boşluğu (padding left) oluşturur, ardından butonun pozisyonunu (position absolute) ayarlar ve paragrafların tasarımını düzenler. Ayrıca, genel başlıkların (h2) mavi renge dönüştürülmesi ve font özellikleri (font size, font weight, text transform) de gösterilmektedir. Video, CSS sınıflarının nasıl kullanılacağını ve sayfa düzenlemesinde dikkat edilmesi gereken noktaları içermektedir.

      • youtube.com

    • CSS Media Queries Eğitim Videosu

      Bu video, bir CSS eğitim içeriğidir ve konuşmacı CSS media queries konusunu anlatmaktadır.. Video, CSS media queries'in temel kullanımını göstermektedir. Öncelikle media query'in nasıl tanımlanacağı ve min/max değerlerinin ne anlama geldiği açıklanmaktadır. Ardından, medya sorgularının nasıl birleştirilebileceği, ekran, print ve speech gibi farklı medya türleri için nasıl kullanılacağı gösterilmektedir. Video, özellikle min width ve min height gibi yaygın olarak kullanılan medya sorgularının önemini vurgulayarak, bu özelliklerin web sayfasının farklı ekran boyutlarında nasıl düzenlenebileceğini örneklerle açıklamaktadır.

      • youtube.com

    • Windows 10'da HTML ve CSS Kodlama Eğitimi

      Bu video, bir programlama kanalında yayınlanan eğitim içeriğidir. Sunucu, Windows 10 işletim sisteminde HTML ve CSS kodlamayı nasıl yapabileceğinizi adım adım göstermektedir. Video, Visual Studio Code'un Windows 10'a kurulumundan başlayarak, gerekli uzantıların (Live Server ve Prettier) kurulumunu, kod düzenleyicisinin ayarlarını (metin boyutu ve tema) ve temel HTML/CSS kodlamayı kapsamaktadır. Sunucu, Emmet kısaltması kullanarak otomatik kod oluşturma, Live Server ile otomatik yenileme özelliği ve CSS ile HTML öğelerine stil uygulama gibi pratik bilgiler de paylaşmaktadır.

      • youtube.com

    • HTML, CSS ve PHP ile Dinamik İletişim Formu Oluşturma Eğitimi

      Bu video, bir eğitmen tarafından sunulan web geliştirme eğitimidir. Eğitmen, HTML, CSS ve PHP dillerini kullanarak dinamik bir iletişim formu oluşturma sürecini adım adım göstermektedir. Video, sanal sunucu üzerinde index.php dosyası oluşturma ile başlayıp, HTML, CSS ve PHP kodlarının yazılması, formun CSS ile stilize edilmesi, PHP ile form verilerinin alınması ve doğrulanması, mail gönderme işlemleri ve formun başarılı olup olmadığını kontrol etme yöntemlerini kapsamaktadır. Eğitim boyunca formun temel yapısı (head etiketleri, meta etiketleri, div ve form etiketleri) oluşturulduktan sonra, ad-soyad, telefon, konu ve mesaj alanları gibi form elemanları eklenmektedir. Ayrıca, formun başarılı olup olmadığını kontrol etmek için "if" ve "else" komutlarının kullanımı, formun başarısız olması durumunda ekrana yazdırılacak mesaj için "span" etiketi ve renk kodları (kırmızı için #FF0000, yeşil için #00FF00) gösterilmektedir.

      • youtube.com

    • CSS 3 Eğitim Videosu: Arka Plan Resmi ve Gradient Özellikleri

      Bu video, Emre Sabuncu tarafından sunulan bir CSS eğitim dersidir. Eğitmen, CSS 3 derslerinin bir parçası olarak arka plan resmi ekleme ve gradient özellikleri konularını anlatmaktadır. Videoda öncelikle "background-image" özelliği kullanılarak temel resim ekleme, birden fazla resim ekleme ve gradient ekleme işlemleri adım adım gösterilmektedir. Daha sonra linear gradient ve konik gradient özellikleri detaylı olarak anlatılmakta, dalgalı renkler, resimler ve farklı renk kombinasyonları kullanılarak örnekler sunulmaktadır. Ayrıca videoda "background-repeat" özelliğinin kullanımı, RGB renklerinin nasıl ekleneceği ve gradient'lerin PNG, GIF ve JPEG resim türleriyle kullanılabildiği, tüm tarayıcılarda desteklendiği bilgileri de paylaşılmaktadır.

      • youtube.com

    • HTML ve CSS ile Div Arka Planı Ekleme Eğitimi

      Bu video, bir eğitim içeriği olup, izleyicilere HTML ve CSS kullanarak div'lerin arka planını nasıl ekleyebileceklerini adım adım göstermektedir. Videoda, bir div'e arka plan görseli ekleme süreci detaylı olarak anlatılmaktadır. Önce HTML dosyası oluşturulup, div'e "background-image" özelliği eklenerek bir görsel (forest.jpg) eklenmektedir. Ardından CSS dosyası kullanılarak görselin konumlandırılması, padding ve margin değerlerinin ayarlanması, yazı renginin değiştirilmesi, opacity değerinin ayarlanması ve background-repeat, background-size gibi CSS özellikleri kullanılarak görselin ekran üzerinde nasıl davranacağı gösterilmektedir. Video, hem masaüstü hem de mobil cihazlarda görselin nasıl görüneceğini göstererek sonlanmaktadır.

      • youtube.com

    • Aktif Pasif Butonu Kullanımı Eğitimi

      Bu video, bir eğitim içeriği olup, konuşmacı daha önce blogda paylaştığı aktif pasif butonunun (switch butonu) nasıl kullanılacağını adım adım göstermektedir. Video, JavaScript ve PHP kullanarak aktif pasif butonunun nasıl oluşturulacağını anlatmaktadır. Öncelikle JavaScript kodunun referanslara eklenmesi, ardından PHP dosyasının oluşturulması ve veritabanı bağlantısının yapılması gösterilmektedir. Daha sonra CSS dosyasının eklenmesi ve jQuery sürümünün değiştirilmesi anlatılmaktadır. Son olarak, bu butonun referanslar ve kullanıcılar sayfalarında nasıl uygulanacağı pratik olarak gösterilmektedir.

      • youtube.com

    • Google Sites'e HTML Kodu Ekleme Rehberi

      Bu video, bir eğitim içeriği olup, izleyicilere Google Sites'e özel HTML kodu eklemenin nasıl yapılacağını adım adım göstermektedir.. Video, Google Sites'e HTML kodu eklemenin temel yöntemlerini anlatmaktadır. İçerikte, "Embed Code" özelliğinin nasıl kullanılacağı, ChatGPT gibi araçların HTML kodu oluşturma için nasıl yardımcı olabileceği gösterilmektedir. Ayrıca, HTML kodunun CSS ile birlikte kullanılabileceği, renk değiştirme gibi temel tasarım özellikleri ve menü oluşturma gibi uygulamalar da gösterilmektedir. Video, Google Sites'in sunduğu diğer özellikler (formlar, grafikler, Google uzantıları) hakkında da bilgi vermektedir.

      • youtube.com

    • HTML'de Arka Plan Resmi Ekleme Eğitimi

      Bu video, bir eğitim içeriği olup, izleyicilere HTML sayfasına arka plan resmi ekleme yöntemlerini adım adım göstermektedir.. Video, temel HTML dosyası ve Chrome tarayıcısında açılan sayfayı göstererek başlıyor. İçerikte CSS kullanarak arka plan resmi ekleme, CSS seçicileri (özellikle #id) kullanımı, CSS değerlerini doğrudan style attribute ile uygulama, arka plan resmi ekleme, tekrarlanma özelliğini devre dışı bırakma, boyutlandırma (100% 100%, cover, contain) ve konumlandırma (background-position) gibi CSS özellikleri detaylı olarak anlatılıyor. Video, arka plan resmi ve renk kombinasyonunun en iyi sonuçları verdiğini vurgulayarak sonlanıyor.

      • youtube.com

    • HTML Temel Kursu

      Bu video, bir eğitmen tarafından sunulan kapsamlı bir HTML eğitim içeriğidir. Eğitmen, HTML'in temel yapı taşlarını ve kullanımını adım adım göstermektedir. Video, HTML belgesinin oluşturulması ile başlayıp, temel HTML etiketleri (html, head, body, title, image, input), inline ve blocking elementler, hyperlink oluşturma, listeler, tablolar, form elemanları ve HTML entitesi kullanımını detaylı şekilde anlatmaktadır. Daha sonra HTML'deki renk kodları ve JavaScript ile DOM (Document Object Model) üzerinde manipülasyon yapma teknikleri gösterilmektedir. Son bölümde ise HTML5 ile gelen semantic HTML kavramına değinilmektedir. Eğitim içeriğinde ayrıca CSS ile temel layout oluşturma teknikleri, DOM Content Loaded olayı kullanımı ve elementleri seçme yöntemleri de örneklerle açıklanmaktadır. Video, web geliştirme temellerini öğrenmek isteyenler için temel bir kaynak niteliğindedir.

      • youtube.com

    • CSS'de 100vw Viewport Birimi ve Scroll Bar Gutter Stable Değişiklikleri

      Bu podcast, Kevin adlı bir front-end geliştiricisinin sunduğu "General Musings" adlı bir podcasttir. Kevin, front-end geliştirme konularında haftalık içerikler paylaşmaktadır.. Podcast, Chrome'un CSS'de 100vw viewport birimini scroll bar farkında hale getirmesi ve scroll bar gutter stable özelliğinin kullanımını ele almaktadır. İlk bölümde 2023'te CSS çalışma grubu tarafından kararlaştırılan ve Chrome 145'te uygulanacak 100vw viewport biriminin scroll bar farkında hale getirilmesi anlatılırken, ikinci bölümde scroll bar gutter stable özelliğinin 12 milyon web sitesi üzerinde yapılan analizle incelenmesi ve sadece 38 sitede kullanıldığı belirtilmektedir.. Video ayrıca, bu değişikliklerin Chromium tabanlı tarayıcılarda (özellikle Chrome) çalıştığını, diğer tarayıcılarda henüz desteklenmediğini ve Mac kullanıcıları için scroll barları nasıl aktif edebilecekleri konusunda bilgi vermektedir. Kevin, viewport birimlerinin gereksiz yerlerde kullanılmaması gerektiğini ve CSS'in doğru kullanımını öğrenmenin önemini de vurgulamaktadır.

      • youtube.com

    • HTML ve CSS Tasarım Programı Kullanım Rehberi

      Bu video, bir eğitim içeriği olup, izleyicilere HTML ve CSS tasarım programının temel kullanımını göstermektedir. Video, HTML dosyası oluşturma ve düzenleme sürecini adım adım anlatmaktadır. İçerikte programın pencere ayarlarının nasıl yapılacağı, kod ve tasarım bölümlerinin nasıl düzenleneceği, tarayıcı ayarlarının nasıl yapılandırılacağı detaylı olarak gösterilmektedir. Özellikle CC 2015 ve CC 2017 sürümleri arasındaki farklar vurgulanarak, programın farklı sürümlerinde nasıl ayarlanacağı açıklanmaktadır.

      • youtube.com

    • CSS'de Gradient Kullanımı Eğitimi

      Bu video, bir eğitmen tarafından sunulan CSS'de gradient kullanımını anlatan kapsamlı bir eğitim içeriğidir. Eğitmen, önceki derste arka plan özellikleri hakkında bilgi verdiğini ve bu derste gradientleri detaylı şekilde ele aldığını belirtiyor. Video, CSS'de kullanılan farklı gradient türlerini (linear gradient, radial gradient ve konik gradient) ve bunların kullanımını örneklerle göstermektedir. Eğitmen, linear gradient'in yönünü belirleme yöntemleri, açı değerleriyle kontrol etme, renk duraklarını belirleme ve farklı eksenlerde pozisyonlandırma gibi konuları detaylı şekilde anlatmaktadır. Eğitim içeriğinde ayrıca Fransız bayrağı oluşturma, görsel ile birlikte gradient kullanımı ve tekrar eden gradientlerin nasıl oluşturulacağı gibi pratik örnekler de yer almaktadır. Ayrıca, gradient oluşturmak için kullanılabilecek online araçlar ve Colorzilla gibi araçlar hakkında da bilgi verilmektedir.

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