• Buradasın

    CSS

    Özetteki ilgi çekici içerikler

    • 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

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

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

    • 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

    • Dreamweaver ile CSS Kullanarak Web Sayfası Tasarımı Eğitimi

      Bu video, bir eğitmen tarafından sunulan, Dreamweaver programında CSS kullanarak web sayfası tasarımı yapma sürecini adım adım gösteren kapsamlı bir eğitim içeriğidir. Video, web sayfası tasarımının temel aşamalarını kapsamaktadır: yeni HTML sayfası oluşturma, CSS stilleri tanımlama, logo ve menü oluşturma, yatay menü düzenleme, içerik bölümlerini yan yana yerleştirme, footer oluşturma ve linklerin biçimlendirilmesi. Eğitmen, insert paneli, properties paneli ve CSS styles panelini kullanarak, div etiketleri, float özelliği, margin, padding, border ve border-radius gibi CSS özellikleriyle sayfa yapısını adım adım oluşturuyor. Eğitim boyunca, web sayfasının üst kısmından başlayarak alt kısmına kadar tüm bölümler (header, content, footer) detaylı olarak ele alınmakta ve her adımda tarayıcıda test edilerek sayfanın son haline bakılmaktadır. Ayrıca, CSS3 ile gelen "border-radius" özelliğinin kullanımı ve resimlere link verme gibi modern web tasarım teknikleri de gösterilmektedir.

      • youtube.com

    • HTML, CSS ve JavaScript ile Web Sayfası Animasyonu 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 kodlama sürecini göstererek anlatmaktadır. Video, Visual Studio Code'da bir proje oluşturma ile başlayıp, HTML ile temel sayfa yapısını oluşturma, CSS ile tasarım ve animasyon ekleme, son olarak JavaScript ile dinamik animasyonlar eklemeyi kapsamaktadır. Eğitmen, navbar, header, liste öğeleri, başlıklar ve paragraflar gibi web sayfası bileşenlerini oluşturup, bunlara animasyon eklemeyi göstermektedir. Eğitim boyunca flexbox, pozisyonlama, linear gradient, background image gibi CSS özellikleri kullanılarak sayfanın görünümü biçimlendirilmekte ve "movebop", "movetoleft" ve "moveline" gibi keyframe animasyonları oluşturulmaktadır. Eğitmen, kodları detaylı bir şekilde açıklamakta ve izleyicilerin konuyu anlaması için yavaş anlatım yapmaktadı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

    • 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

    • 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

    • 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

    • 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

    • 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

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

      Bu video, bir eğitmen tarafından sunulan web geliştirme eğitim serisidir. Eğitmen, izleyicilere adım adım web sayfası oluşturma sürecini göstermektedir. Videoda, JavaScript ve CSS kullanarak "Doğa Keşif" temasına sahip bir web sayfası tasarımı anlatılmaktadır. Eğitim, HTML body kısmında bir div ile başlayıp, header, logo, fotoğraf, butonlar ve form alanları gibi web sayfasının temel bileşenlerinin oluşturulmasına kadar uzanmaktadır. Eğitmen, Pexels'ten fotoğraf indirme, Google Fonts'tan yazı tipi ekleme ve çeşitli CSS özellikleri (display, flex, justify-content, background-image, linear-gradient, text shadow, position absolute, padding, margin, cursor pointer) kullanarak sayfanın görünümünü şekillendirme tekniklerini göstermektedir. Video, bir serinin parçası olup, bir sonraki bölümde devam edeceği belirtilmektedir. Eğitim boyunca, margin ve padding arasındaki farklar gibi temel CSS kavramları da açıklanmaktadı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 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
  • Yazeka sinir ağı makaleleri veya videoları özetliyor