• Buradasın

    CSS

    Özetteki ilgi çekici içerikler

    • 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

    • 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

    • 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, 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

    • 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'de Resim Ekleme Eğitimi

      Bu video, bir eğitmen tarafından sunulan HTML dersinin bir bölümüdür. Eğitmen, izleyicilere HTML'de resim ekleme konusunu adım adım anlatmaktadır. Videoda, Sublime Text editörü kullanılarak HTML dosyasına resim ekleme işlemi gösterilmektedir. Eğitmen önce temel resim ekleme kodunu (img src="resim.png") açıklar, ardından resim dosyalarının doğru şekilde nasıl çağrılacağını ve klasör yapısının önemini örneklerle anlatır. Ayrıca, resim boyutlarını CSS ile nasıl düzenleyeceğini de kısaca belirtir. Video, bir sonraki derste video ekleme, müzik dosyası ekleme ve CSS konularına geçileceğini duyurarak sona erer.

      • 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

    • 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

    • 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

    • HTML ve CSS ile Web Sayfası Tasarım Eğitimi

      Bu video, bir eğitmen tarafından sunulan kapsamlı bir web geliştirme eğitim içeriğidir. Eğitmen, HTML ve CSS kullanarak kahve temalı bir web sitesi tasarımı adım adım göstermektedir. Video, web sitesi tasarımının temel aşamalarını kapsamaktadır: başlangıçta Scroll Reveal kütüphanesi kullanılarak animasyonlar eklenecek bir web sitesi oluşturulmakta, ardından CSS ile menü, logo, butonlar ve başlıklar tasarlanmaktadır. Daha sonra "About" bölümü, portfolyo bölümü, discover bölümü ve son olarak iletişim (contact) bölümü adım adım kodlanmaktadır. Eğitim boyunca flexbox, hover animasyonları, font ayarları, ikon ekleme ve sayfa düzenlemesi gibi CSS teknikleri detaylı olarak gösterilmektedir. Eğitmen, kodların düzenli olması için yorum satırları kullanarak bölümleri işaretlemekte ve benzer bölümlerde kod tekrarını önlemek için kopyala-yapıştır tekniğini kullanmaktadı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

    • 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

    • 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'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

    • 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

    • 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

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