• Buradasın

    CSS

    Özetteki ilgi çekici içerikler

    • 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

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

    • 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, CSS ve GitHub Pages ile İnternet Sitesi Kurma Eğitimi

      Bu video, bilgisayar mühendisi ve yazılım geliştiricisi Ali Onur Geve tarafından sunulan bir eğitim içeriğidir. Video, giriş seviyesinde HTML, CSS ve GitHub bilgisi olan kişiler için internet sitesi kurma sürecini adım adım göstermektedir. İçerikte GitHub hesabı oluşturma, repository oluşturma, Visual Studio Code kullanarak index.html dosyası oluşturma, meta tag'ları, viewport ayarları, CSS dosyası oluşturma ve sosyal medya butonları ekleme gibi temel web geliştirme işlemleri anlatılmaktadır. Eğitim ayrıca butonlara arka plan rengi verme, hover efekti ekleme, responsive tasarım yapma ve linklerin yeni tab'da açılmasını sağlama gibi CSS özellikleri de kapsamaktadır. Video, oluşturulan web sitesinin GitHub'a yüklenmesi ve GitHub Pages üzerinden online olarak erişilebilir hale getirilmesi ile sonlanmaktadır.

      • youtube.com

    • CSS ile Kalp Şekli Oluşturma Eğitimi

      Bu video, İbrahim Cemil tarafından sunulan bir CSS eğitim dersidir. Eğitmen, izleyicilere CSS kullanarak kalp şekli oluşturma tekniklerini göstermektedir. Videoda, CSS ile kalp şekli oluşturma süreci adım adım anlatılmaktadır. Eğitmen önce Paint programı ile kalp çizerek fikri açıklar, ardından Notepad++ programında CSS kodlarını yazarak uygulamaya geçer. Kalp şekli, iki yuvarlak ve bir üçgenin birleştirilmesiyle oluşturulur. Eğitmen, border-radius, transform, position gibi CSS özellikleri kullanarak kalbin her bir kısmını şekillendirir ve sonunda tamamlanmış kalp şekli görsel olarak gösterilir.

      • 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

    • 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

    • 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

    • 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

    • WordPress Temalarında CSS ve JS Dosyalarını Birleştirme Eğitimi

      Bu video, Nimet Tuba Öz tarafından sunulan bir eğitim içeriğidir. Teknohaber TC takipçilerine yönelik hazırlanmıştır. Video, WordPress temalarında CSS ve JS dosyalarını birleştirmenin nasıl yapılacağını adım adım göstermektedir. Bu işlem, sorgu sayısını azaltarak sayfa açılış hızını artırmayı amaçlamaktadır. İçerikte, GT Matrix üzerinden hangi dosyaların birleştirilmesi gerektiği belirlenmesi, yeni metin belgesi oluşturma, dosyaları birleştirme ve temada doğru şekilde çağırma adımları detaylı olarak anlatılmaktadır.

      • 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

    • 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

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

    • Başlangıç Seviyesi HTML, CSS ve JavaScript ile Kullanıcı Profil Sayfası Eğitimi

      Bu video, Ozan adlı bir eğitmen tarafından sunulan web geliştirme eğitim içeriğidir. Eğitmen, başlangıç seviyesindeki kullanıcılar için basit bir proje geliştirmektedir. Videoda, Figma'dan alınan bir kullanıcı profil sayfasının HTML, CSS ve JavaScript kullanılarak nasıl oluşturulacağı adım adım gösterilmektedir. Eğitim, HTML iskeleti oluşturma, CSS ile tasarım yapma ve JavaScript ile progress bar ve kullanıcı bilgilerinin döngüsel olarak değişmesi gibi konuları kapsamaktadır. Eğitmen, setInterval fonksiyonu kullanarak belirli aralıklarla (örneğin 10.000 ms) kullanıcı bilgilerinin değişmesini sağlar ve her geçişte id'yi artırır. Ayrıca text align, justify content, border radius, object-fit-cover gibi CSS özellikleri kullanarak kullanıcı profil sayfasının görünümünü ayarlar. Video, kodun yazılması, hata ayıklanması ve son olarak uygulamanın çalıştırılmasıyla ilerler.

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