• Buradasın

    CSS

    Özetteki ilgi çekici içerikler

    • CSS ile Açılır Menü Yapımı Eğitimi

      Bu video, Tayfun Erbilen tarafından sunulan bir CSS eğitim videosudur. Tayfun, uzun süre ders çekmedikten sonra alışkanlıklarını kaybetmiş olduğunu belirterek, CSS ile açılır menü yapımını adım adım göstermektedir. Videoda, HTML ve CSS kullanarak basit bir açılır menü tasarımı yapılmaktadır. Önce temel HTML yapısı oluşturulup, ardından Open Sans fontu kullanılarak menü elemanları şekillendirilmektedir. Daha sonra CSS ile menü arka planı, yazı rengi, padding, margin gibi temel ayarlar yapılmakta, ardından hover efektleri ve animasyonlar eklenerek menü daha estetik hale getirilmektedir. Son olarak, multi dropdown menü yapısı oluşturulmakta ve alt menülerin doğru konumlandırılması için gerekli CSS kodları gösterilmektedir.

      • 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 Seçiciler Eğitim Videosu

      Bu video, bir eğitmen tarafından sunulan GSS dersleri eğitim serisinin bir parçası olan CSS seçiciler konulu bir eğitim içeriğidir. Videoda CSS'de kullanılan üç temel seçici (class, id ve tag) tanıtılmakta ve bunların kullanım şekilleri adım adım gösterilmektedir. Eğitmen, Visual Studio Code kullanarak pratik örnekler sunarak class ve id seçicilerinin nasıl oluşturulup kullanılacağını, etiket seçicilerinin nasıl çalıştığını ve "Merhaba Türkiye" etiketi ile renk değiştirme işlemi yaparak etiket seçicilerinin kullanımını açıklamaktadır. Video sonunda izleyicilere kodları yazıp çalıştırmaları tavsiye edilmekte ve sorularını yorumlarda sormaları önerilmektedir.

      • 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 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 ve CSS Eğitim Videosu: İlk Web Sayfası Oluşturma

      Bu video, bir eğitmen tarafından sunulan web geliştirme eğitimi serisinin ikinci bölümüdür. Eğitmen, izleyicilere HTML ve CSS konusunda temel bilgiler vermektedir. Videoda, HTML yazma süreci adım adım gösterilmektedir. Önce kod editörü (Atom veya Brackets gibi) kurulumu ve yeni bir HTML dosyası oluşturma adımları anlatılmakta, ardından `<html>`, `<head>`, `<body>` etiketleri ve `<title>`, `<meta>` gibi temel bileşenler açıklanmaktadır. Ayrıca UTF-8 kodlama sistemi, indentation (tablama) kullanımı ve temel HTML yapısı da ele alınmaktadır. Eğitmen, bir sonraki bölümde paragraflar ve başlıklar gibi daha fazla içerik ekleneceğini belirtmekte ve temel HTML yapısını bir şablon olarak kullanmanın faydalarını vurgulamaktadır. İzleyicilere kendi hızlarında ilerlemeleri ve anlamadıkları noktaları yorumlarda sormaları tavsiye edilmektedir.

      • 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

    • CSS Sınıf Seçicileri ve Border Özellikleri Eğitimi

      Bu video, bir eğitmen tarafından sunulan CSS programlama dili eğitim içeriğidir. Video, CSS sınıf seçicilerinin nasıl kullanılacağını adım adım anlatarak başlıyor ve ardından border özelliğinin kullanımını detaylı şekilde gösteriyor. İlk bölümde CSS uygulamasının ikinci yöntemi, sınıf seçicilerinin tanımı ve kullanımı, nokta işaretinin önemi ve farklı CSS özelliklerinin (yazı rengi, yazı kalınlığı, yazı büyüklüğü, arka plan rengi) nasıl uygulanacağı açıklanıyor. İkinci bölümde ise border özelliğinin üç parametresi (kenarlık kalınlığı, kenarlık türü ve kenarlık rengi) ve bunların doğru sıralaması gösteriliyor. Videoda ayrıca aynı etikete birden fazla CSS özelliği uygulanabileceği ve arka plan renginin HTML etiketi ile CSS ile üç farklı yöntemle verilebileceği de açıklanıyor. Class parametrelerinin ve sınıfların CSS'de sağladığı kolaylıklar da vurgulanıyor.

      • 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

    • CSS Selektörleri Eğitim Videosu

      Bu video, bir eğitim içeriği olup, konuşmacı CSS selektörleri konusunu anlatmaktadır. Video, CSS'de elementleri seçmek için kullanılan farklı selektör türlerini detaylı şekilde ele almaktadır. Öncelikle element ismi (element) selektörü, ardından class selektörü ve son olarak id selektörü gösterilmektedir. Her bir selektör türü için örnekler verilerek, bu selektörlerin nasıl kullanılacağı, birbirleriyle nasıl etkileşime girdiği ve önemli özelliğinin nasıl kullanılacağı açıklanmaktadır. Ayrıca, inline CSS kodlarının okunabilirliği açısından dezavantajları ve stil tekrarının önemi de vurgulanmaktadı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 ve CSS Eğitim Seti: 35. Ders - Yatay Menü Oluşturma ve Mobil Uyumlu Tasarım

      Bu video, HTML ve CSS eğitim setinin 35. dersi olup, bir eğitmen tarafından sunulmaktadır. Eğitmen, geçen derste oluşturulan dikey menüyü kullanarak yatay bir menü oluşturma sürecini adım adım göstermektedir. Videoda, yatay menü oluşturma için CSS kodlarının nasıl yazılacağı detaylı olarak anlatılmaktadır. Eğitmen önce temel menü yapısını oluşturmak için listeleri düzenleyip, float left özelliği kullanarak yan yana sıralamaktadır. Ardından menüye renk, padding, border gibi stil özellikleri ekleyerek görünümünü geliştirmektedir. Ayrıca CSS3 özelliklerinden faydalanarak hover efektleri, active class kullanımı ve mobil uyumluluğu sağlama teknikleri gösterilmektedir. Video, menünün sabit pozisyonlandırma ve ekran boyutuna göre adaptif davranışını ayarlama konularıyla devam etmektedir.

      • 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

    • CSS Before, After ve Opacity Özellikleri Eğitimi

      Bu video, bir eğitmen tarafından sunulan CSS özellikleri hakkında bir eğitim içeriğidir. Eğitmen, CSS'de before, after ve opacity özelliklerini pratik örneklerle anlatmaktadır. Videoda öncelikle bir makale örneği oluşturulup, bu makalenin başına ve sonuna nasıl before ve after özellikleri eklenebileceği gösterilmektedir. Ardından opacity özelliği tanıtılarak, bir öğenin opaklığının nasıl ayarlanabileceği (0-1 arası değerlerle) açıklanmaktadır. Eğitmen, bu özelliklerin tasarım için nasıl kullanılabileceğini ve DSS örnekleri kısmında daha fazla örnek yapılacağını belirtmektedir.

      • youtube.com

    • HTML ve CSS Dersleri: İlk Ders

      Bu video, bir eğitmen tarafından sunulan HTML ve CSS derslerinin ilk bölümüdür. Eğitmen, izleyicilere temel bilgileri adım adım anlatmaktadır. Video, HTML ve CSS öğrenmek isteyenler için gerekli programların (Notepad++) kurulumu ve klasör düzeni oluşturma ile başlıyor. Ardından temel HTML sayfası yapısı (html, head, title, body) görsel hatırlatıcılarla açıklanıyor. Eğitmen, kodların doğru sıralamasının önemini vurgulayarak, bir sonraki derste daha detaylı meta kodlarını anlatacağını belirtiyor. Video, sıfırdan başlayanlar için temel bir HTML sayfası oluşturma sürecini kapsamlı şekilde ele alıyor.

      • youtube.com

    • CSS ile Yatay Açılır Menü Oluşturma Eğitimi

      Bu video, bir eğitmen tarafından sunulan web geliştirme eğitim serisinin bir bölümüdür. Eğitmen, izleyicilere adım adım yatay açılır menü oluşturma sürecini göstermektedir. Video, yatay açılır menü oluşturma sürecini üç ana bölümden oluşmaktadır: İlk bölümde HTML ile ana menü ve alt menülerin oluşturulması, ikinci bölümde CSS ile menülerin yatay hale getirilmesi ve biçimlendirilmesi, üçüncü bölümde ise hover efektleri, konumlandırma ve tıklandığında renk değiştirme gibi ileri düzey özelliklerin uygulanması anlatılmaktadır. Eğitim, div, ul, li ve a etiketlerinin kullanımı, class seçici oluşturma, float left özelliği, arka plan ve yazı rengi ayarlama, padding ve text-align özellikleriyle menüleri ortala, kenarlık ekleme ve hover efektleri uygulama gibi teknik detayları içermektedir. Video, yaklaşık 3-4 aylık bir ara verilerek JavaScript derslerine başlanacağı bilgisiyle sonlanmaktadır.

      • youtube.com

    • CSS Class Kullanımı Eğitim Videosu

      Bu video, bir eğitmen tarafından sunulan CSS dersinin bir bölümüdür. Eğitmen, CSS'de class (sınıf) kavramını ve kullanımını anlatmaktadır. Video, CSS'de class tanımlaması ve kullanımı üzerine odaklanmaktadır. Eğitmen önce "mavi" adında bir class tanımlayarak font family, font size, font style, line height, font weight, font variant, text transform ve text decoration gibi özelliklerin nasıl ayarlanacağını göstermektedir. Ardından class seçicilerinin nasıl kullanılacağını, birden fazla class'ın nasıl birlikte kullanılacağını ve web fontlar hakkında bilgi vermektedir. Video, CSS'de temel class kullanımını öğrenmek isteyenler için faydalı bir kaynaktır.

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