• Buradasın

    CSS

    Özetteki ilgi çekici içerikler

    • CSS'de Genişlik ve Yükseklik Özellikleri

      Bu video, bir eğitim serisinin sekizinci dersi olup, CSS'de genişlik ve yükseklik özelliklerini anlatan bir öğretici içeriktir. Videoda CSS'de bir HTML öğesinin genişliğini ayarlamak için "width" ve yüksekliğini ayarlamak için "height" özelliklerinin nasıl kullanılacağı gösterilmektedir. Eğitmen, bu özelliklere verilebilecek değerleri (auto, piksel, yüzde, cm, em) açıklamakta ve çeşitli örneklerle (yüzde yüz, piksel değerleri, max-width özelliği) bu özelliklerin nasıl çalıştığını göstermektedir. Ayrıca, tarayıcı boyutunun değişmesiyle birlikte bu özelliklerin nasıl davranacağı da örneklerle anlatılmaktadır.

      • youtube.com

    • Ayakkabı Alışveriş Sitesi Ürün Kartı Oluşturma Eğitimi

      Bu video, bir eğitmen tarafından sunulan web geliştirme eğitim içeriğidir. Eğitmen, HTML, CSS ve JavaScript kullanarak bir ayakkabı alışveriş sitesi ürün kartı oluşturma sürecini adım adım göstermektedir. Video, ürün kartı tasarımının tüm aşamalarını kapsamaktadır: Google Fonts'tan yazı tipi ekleme, HTML yapısı oluşturma, CSS ile stil ve düzenlemeler yapma ve JavaScript ile interaktif özellikler ekleme. Eğitmen, renk butonları, beden seçimi, sepete ekle butonu gibi ürün kartı bileşenlerinin nasıl oluşturulacağını ve nasıl işlevsel hale getirileceğini detaylı şekilde anlatmaktadır. Videoda flexbox, grid, border-radius, margin, padding gibi CSS özellikleri ve hover efektleri gibi interaktif özelliklerin kullanımı gösterilmektedir. Ayrıca, Türkiye'nin milyon yazılımcı hedefine ulaşabilmesi için yeni başlayanlara yardımcı olmak amacıyla hazırlanmıştı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 ve CSS ile Responsive Web Tasarı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, HTML ve CSS kullanarak responsive web tasarım tekniklerini adım adım göstermektedir. Videoda, flexbox özellikleri ve media query'ler kullanılarak 960 piksel, 720 piksel ve 540 piksel ekran genişliklerinde bir web sayfasının nasıl responsive hale getirileceği anlatılmaktadır. Eğitmen, Kars, Proje, Ebat, İletişim, Home, Inspect Cars, About ve Team gibi farklı sayfaların responsive görünümünü detaylı olarak göstermektedir. Eğitim, header, caption, footer gibi farklı bölümlerdeki media query kodlarını yazma, flex direction özelliği kullanarak içeriklerin sütun şeklinde düzenlenmesi, font boyutlarını ayarlama ve padding değerlerini düzenleme gibi teknikleri içermektedir. Video, HTML ve CSS bilgisinin web tasarımında her türlü framework veya programlama dilinde kullanılabileceğini vurgulayarak sona ermektedir.

      • 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

    • 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

    • 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

    • CSS Kursu: Float Kullanımı

      Bu video, CSS kursunun on ikinci dersi olup, bir eğitmen tarafından float özelliğinin nasıl kullanılacağını gösteren bir eğitim içeriğidir. Videoda, float özelliğinin konumlandırma ve hizalama işlemleri için nasıl kullanıldığı adım adım anlatılmaktadır. Eğitmen önce bir div ve üç farklı dil içeren bir sayfa oluşturur, ardından bu dillerin yan yana görüntülenmesi için float left özelliğini kullanır. Ayrıca, float özelliğinin blog sayfalarında resimlerin metin içinde nasıl konumlandırılabileceği de örneklerle açıklanır.

      • 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 Kodları Eğitim Videosu

      Bu video, Fikret tarafından sunulan "A'dan Z'ye Front-End Geliştirici Dersleri" serisinin bir parçasıdır. Videoda HTML kodlarının en başında yer alan "doctype html" kodu anlatılmaktadır. Fikret, bu kodun HTML 5 ile gelen ve daha önceki HTML 4'te bulunan koddan daha kısa olduğunu belirtmektedir. Ayrıca, bu kodun CSS kod yapısını tanımlaması ve tarayıcının hangi HTML yapısında önizleme yapacağını belirlemesindeki önemini vurgulamaktadı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

    • 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

    • 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 Transform Özellikleri: Scale

      Bu video, bir eğitim dersi formatında olup, bir eğitmen tarafından CSS transform özellikleri hakkında bilgi verilmektedir. Video, transform özelliklerinin detaylıca ele alınmasıyla başlıyor ve özellikle scale özelliğine odaklanıyor. Eğitmen önce Photoshop'ta grid sistemleri çizerek scale efektinin nasıl çalıştığını gösteriyor, ardından CSS kodlaması yaparak bu efektin nasıl uygulanacağını adım adım anlatıyor. Scale özelliği, elementin X ve Y ekseninde orantılı bir şekilde ölçeklenmesini sağlıyor ve bu ölçeklendirme için farklı parametreler (2, 5, 3 gibi) kullanılarak büyütme veya küçültme işlemleri gerçekleştirilebiliyor.

      • youtube.com

    • CSS'de E, M ve RAM Büyüklükleri Eğitimi

      Bu video, bir eğitim içeriği olup, konuşmacı CSS'de kullanılan farklı büyüklük kavramlarını anlatmaktadır. Videoda öncelikle E, M ve RAM büyüklükleri arasındaki farklar gösterilmektedir. E büyüklüğü font size'a bağlı olarak değişirken, M ve RAM büyüklükleri font size'a bağlı değildir. Ayrıca, width ve height değerlerini ayarlamak için view-width ve view-height gibi göreceli ölçü birimleri de tanıtılmaktadır. Video, bir sonraki derste sudo classlara giriş yapılacağını belirterek sona ermektedir.

      • youtube.com

    • HTML ve CSS ile Navbar Tasarımı Eğitimi

      Bu video, bir eğitim içeriği olup, izleyicilere adım adım HTML ve CSS kullanarak navbar tasarımı yapma sürecini göstermektedir. Videoda, navbar tasarımı için gerekli klasör oluşturma, yazı tipi ekleme, CSS dosyası ile HTML sayfasını ilişkilendirme ve navbar'ın temel yapılandırılması anlatılmaktadır. Daha sonra navbar'ın görünümü, renk ayarları, flexbox kullanarak düzenleme, hover efektleri ve transition özellikleri gibi detaylar gösterilmektedir. Video, bir sonraki bölümde HTML ve CSS kullanarak tasarımların devam edeceği bilgisiyle sonlanmaktadır.

      • youtube.com

    • HTML ve CSS ile Fixed Background Attachment Kullanımı

      Bu video, HTML ve CSS örnekler serisinin bir parçası olup, bir eğitmen tarafından sunulan bir eğitim içeriğidir. Videoda, fixed background attachment özelliğini kullanarak parallax efekti oluşturma süreci adım adım gösterilmektedir. Eğitmen önce HTML ve CSS dosyalarını oluşturup, section elementleri ekleyerek dört farklı arka plan resmi ekler. Ardından bu resimlere fixed background attachment özelliği uygulayarak parallax efekti oluşturur. Ayrıca, bu efektin daha iyi çalışması için birbirine yakın ve eşit boyutlardaki resimlerin kullanılmasının önemini vurgular. Video sonunda, Freepik sitesinden indirilen ve Illustrator programında düzenlenmiş resimlerin nasıl oluşturulduğu da gösterilmektedir.

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