• Buradasın

    CSS

    Özetteki ilgi çekici içerikler

    • HTML ve CSS Eğitim Videosu

      Bu video, bir eğitmen tarafından sunulan kapsamlı bir web geliştirme eğitim içeriğidir. Eğitmen, HTML ve CSS konularını adım adım anlatmaktadır. Video, HTML stil kullanımının temellerinden başlayarak CSS seçiciler, klas kullanımı, web geliştirme araçlarının kullanımı, arka plan ve kenarlık ayarları, kutu modeli ve sınır özellikleri gibi konuları kapsamaktadır. Eğitmen, Visual Studio Code ve Live Server eklentisini kullanarak kod örnekleri göstermekte ve pratik uygulamalar sunmaktadır. Videoda ayrıca yorum satırı bırakma, web developer tools'un kullanımı, renk atama yöntemleri (normal renk, RGB ve hexadecimal), ColorZilla gibi araçların kullanımı ve "öğeyi incele" özelliği gibi web geliştirme sürecinde faydalı bilgiler de paylaşılmaktadır. Eğitmen, bir sonraki derste id ve class kullanımına geçileceğini belirtmektedir.

      • 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

    • 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

    • Bir Saatte HTML Kursu

      Bu video, bir eğitmen tarafından sunulan kapsamlı bir HTML eğitim kurusudur. Eğitmen, web geliştirme temellerini adım adım anlatmaktadır. Video, HTML'in temellerinden başlayarak ileri seviye konulara kadar uzanan bir yapıya sahiptir. İlk bölümde HTML'in ne olduğu, gerekli programların kurulumu ve temel HTML etiketleri (html, head, body, title, h1-h6, p, br, hr) anlatılırken, sonraki bölümlerde bağlantılar, resimler, sesler, video oynatma, metin biçimlendirme, listeler, tablolar, CSS kullanımı, div ve span etiketleri, meta etiketleri, iframe, buton ekleme ve form oluşturma konuları ele alınmaktadır. Eğitim, Visual Studio Code ve Google Chrome kullanarak pratik örneklerle ilerlemekte ve her konu için gerekli etiketler, parametreler ve kullanım şekilleri detaylı olarak gösterilmektedir. Video, web geliştirme öğrenmek isteyenler için temel HTML bilgilerini içermekte ve son bölümde CSS ve JavaScript öğrenme önerisiyle sonlanmaktadır.

      • youtube.com

    • HTML ve CSS ile YouTube Tarzı Web Sayfası Oluşturma Eğitimi

      "Videokod" kanalında yayınlanan bu eğitim videosunda, bir eğitmen HTML ve CSS kullanarak YouTube tarzı bir web sayfası oluşturma sürecini adım adım anlatmaktadır. Video, web sayfasının temel bileşenlerinin (header, arama bölümü, resim-yazı bölümü, YouTube tarzı menü, sol ve sağ bölümler) HTML5 tagleri ile oluşturulması ve CSS ile stil verilmesi üzerine odaklanmaktadır. Eğitmen, position fix, float, padding, border, margin, text-shadow, transition gibi CSS özellikleri kullanarak öğelerin konumlandırılması, boyutlandırılması ve görsel efektlerin nasıl uygulanacağını detaylı şekilde göstermektedir. Eğitim boyunca Google Font kullanarak yazı tipi ekleme, YouTube videosu ekleme, footer alanı oluşturma, nokta çizgileri oluşturma, div'leri yan yana yerleştirme, buton ekleme ve resim üzerine efekt uygulama gibi pratik uygulamalar da gösterilmektedir. Video sonunda eğitmen, unuttuğu yerleri açıklamalar bölümünde tamamladığını belirtmektedir.

      • 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

    • 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

    • Web Sayfalarında Yükleme Efekti Oluşturma Eğitimi

      Bu video, bir eğitmen tarafından sunulan web geliştirme eğitimidir. Eğitmen, izleyicilere adım adım bir web sayfasında yükleme efekti oluşturma sürecini göstermektedir. Video, sayfa yükleme gecikmesi sırasında kullanıcıya görsel bir yükleme efekti sunma yöntemini anlatmaktadır. Eğitmen önce CSS ile tam sayfa bir div oluşturma, ardından JavaScript ile sayfa yükleme anında loading ekranını gösterme ve PHP ile sayfa yükleme süresini geciktirme işlemlerini göstermektedir. Video boyunca kod yazımı ve düzenleme süreçleri detaylı olarak gösterilmekte, son olarak da oluşturulan efektin farklı durumlarda nasıl çalıştığı test edilmektedir.

      • 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

    • HTML ve CSS ile Buton Yapımı ve Link Yönlendirme Eğitimi

      Bu video, bir eğitmen tarafından sunulan HTML ve CSS konulu bir eğitim dersidir. Videoda iki ana konu ele alınmaktadır: İlk bölümde beş farklı butonun HTML ve CSS ile nasıl oluşturulacağı, farklı CSS stilleri (arka plan rengi, yazı rengi, kenarlık, hover efektleri, transition) uygulanması ve butonlara link ekleme işlemleri gösterilmektedir. İkinci bölümde ise HTML'de link yönlendirme özellikleri detaylı olarak anlatılmakta, farklı sayfalara ve aynı sayfa içindeki farklı bölümlere yönlendirme yapma yöntemleri örneklerle açıklanmaktadır. Eğitmen, CSS kodlarının ne işe yaradığını ve nasıl kullanılacağını detaylı şekilde açıklamakta, ayrıca "target" özelliği kullanarak farklı sayfada yönlendirme yapma ve "id" kullanarak aynı sayfa içindeki farklı bölümlere yönlendirme yapma tekniklerini de göstermektedir. Video, izleyicilere araştırma yapma ve merak ettikleri konuları kendi araştırmaları ile keşfetmeleri konusunda tavsiyelerle sonlanmaktadı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

    • Türkiye İş Bankası Web Sitesi Tasarım İncelemesi ve İyileştirme Önerileri

      Bu video, bir konuşmacının Türkiye İş Bankası'nın web sitesini detaylı olarak incelediği ve tasarım iyileştirmeleri önerdiği bir eğitim içeriğidir. Videoda, Türkiye İş Bankası'nın web sitesinin anasayfa, ödeme sayfası ve mobil versiyonu incelenmektedir. Konuşmacı, web sitesinin renk kullanımı, boşluk sistemi, tipografik öğeler, ikonların kullanımı, menü yapısı ve mobil uyumluluk gibi tasarım unsurlarını değerlendirmekte ve CSS, HTML kodları üzerinden pratik çözümler sunmaktadır. İncelemede özellikle padding, margin, box shadow gibi CSS özellikleri, font hiyerarşisi, boşluk kullanımı, ikon seçimleri ve mobil versiyonda hamburger menüsü, tab menü ve basamaklı menü seçenekleri gibi konular ele alınmaktadır. Ayrıca, farklı tarayıcılarda (Google Chrome ve Opera) arayüz farklılıkları da karşılaştırmalı olarak incelenmektedir.

      • 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

    • 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

    • 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

    • Web Kodlama Eğitimi: CSS ile Web Sayfası Tasarımı

      Bu video, bir eğitmen tarafından sunulan web kodlama eğitim serisinin bir bölümüdür. Eğitmen, izleyicilere CSS kullanarak web sayfası tasarımı yapma konusunda adım adım rehberlik etmektedir. Video, CSS ile web sayfası tasarımının temel özelliklerini kapsamlı şekilde ele almaktadır. İçerikte blok alanı yapımı, flexbox ve grid layout teknikleri, post içerikleri, contact section, form elemanları, footer ve sosyal medya bağlantılarının CSS ile nasıl tasarlanacağı detaylı olarak gösterilmektedir. Eğitmen, font boyutu, yazı tipi, renk, padding, margin, border radius, linear gradient ve hover efektleri gibi CSS özellikleri kullanarak web sayfasının tüm bölümlerini biçimlendirmektedir. Video yaklaşık bir saat sürmekte ve bir web projesinin CSS kısmının tamamlanmasıyla sona ermektedir. Eğitmen, bir sonraki derste JavaScript kısmını işleyeceğini ve böylece projenin tamamlandığını belirtmektedir. Bu eğitim, web tasarım başlangıç seviyesinde CSS ve HTML kullanımını öğrenmek isteyenler için faydalı bir kaynak 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

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