• Buradasın

    CSS

    Özetteki ilgi çekici içerikler

    • HTML Temel Etiketleri ve Form Tasarımı Eğitimi

      Bu video, bir eğitmen tarafından sunulan HTML programlama eğitimidir. Eğitmen, temel HTML etiketlerini ve form tasarımı konularını adım adım anlatmaktadır. Video, `<p>` ve `<hr>` gibi temel HTML etiketlerinin kullanımından başlayıp, Dreamweaver programı kullanarak form tasarımı sürecine geçmektedir. Eğitim içeriği, metin kutusu, radyo düğmesi, liste menüsü ve onay kutusu gibi form elemanlarının nasıl oluşturulacağını, tablo yapısının nasıl kullanılacağını ve CSS parametrelerinin form düzenlemesinde nasıl etkilendiğini kapsamaktadır. Eğitim, HTML'in sadece görüntüleme dilinin olduğunu ve form verilerinin bir yere gönderilmesi için ASP.NET veya PHP gibi dillerin kullanılması gerektiğini belirterek sona ermektedir. Ayrıca bir sonraki derste CSS ile tanıştırılacağı da belirtilmektedir.

      • youtube.com

    • Visual Studio Code ile Basit Mimarlık Sitesi Oluşturma Eğitimi

      Bu video, bir eğitmen tarafından sunulan web geliştirme eğitimidir. Eğitmen, Visual Studio Code kullanarak basit bir mimarlık sitesi oluşturma sürecini adım adım anlatmaktadır. Video, basit bir mimarlık sitesi oluşturma sürecini kapsamlı şekilde ele almaktadır. İlk olarak Visual Studio Code'da yeni bir klasör oluşturma ve HTML/CSS dosyaları ekleme adımları gösterilmekte, ardından banner, navbar ve content alanlarının HTML ile tanımlanması anlatılmaktadır. Daha sonra CSS ile bu alanların görsel özellikleri, hover efektleri, animasyonlar ve hizalama işlemleri detaylı şekilde açıklanmaktadır. Eğitim boyunca linear gradient, flexbox, position absolute, transition, transform, border radius, font weight gibi CSS özellikleri kullanılarak web sayfası tasarımı yapılmaktadır. Video sonunda eğitmen, izleyicilere "hakkımızda" ve "çalışmalarımız" gibi farklı sayfalar oluşturmaları için ödev vermektedir.

      • 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 Giriş Seviyesi Eğitim Videosu

      Bu video, bir eğitmen tarafından sunulan HTML giriş seviyesi bir eğitim içeriğidir. Eğitmen, daha önce öğretilen HTML kodlarını tekrar ederek ve yeni bir giriş sayfası tasarlayarak konuyu pekiştirmektedir. Video, HTML'in temel etiketlerini (html, head, body, h1-h6, p, b, i, br, sup, sub, a, ol, ol, li, tr, td, input) tek seferde tekrar ederek başlıyor. Ardından sıfırdan bir Instagram giriş sayfası tasarımı yapılıyor. Son bölümde ise CSS kullanılarak bu sayfanın tasarım özellikleri (font, renk, boşluk) nasıl değiştirilebileceği gösteriliyor. Video, HTML'in sitenin iskeleti olduğunu ve daha ileri tasarım için CSS'in gerekli olduğunu vurgulayarak sonlanıyor.

      • youtube.com

    • CSS Nedir? Eğitim Videosu

      Bu video, Kodlama Vaki ekibi tarafından sunulan bir programlama dersidir. Eğitmen, CSS (Cascading Style Sheets) konusunu anlatmaktadır. Video, CSS'in ne olduğunu açıklayarak başlıyor ve web programlamada HTML ile oluşturulan sayfaların stil ve düzenini nasıl sağladığını anlatıyor. CSS'in temel özellikleri, stil tanımlama, mobil ve masaüstü görünümleri ayarlama gibi konular ele alınıyor. Eğitmen, CSS'in HTML ile birlikte kullanılmadığında anlam ifade etmediğini vurgulayarak, basit örneklerle CSS kodlarının nasıl yazılacağını gösteriyor. Video, CSS'in temel kavramlarına giriş yaparak, bir sonraki derste devam edeceğini belirterek sona eriyor.

      • 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 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'de Overflow Özelliği Eğitimi

      Bu video, bir eğitim içeriği olup, bir eğitmen tarafından CSS'de overflow özelliğinin nasıl kullanılacağı anlatılmaktadır. Video, overflow özelliğinin ne olduğunu açıklayarak başlıyor ve ardından canlı örneklerle gösteriyor. Eğitmen, bir div etiketi oluşturarak içerik sığmadığında nasıl davranacağını, overflow'un visible, hidden, scroll ve auto değerlerini ve overflow-x, overflow-y gibi eksen bazlı kullanımını pratik örneklerle açıklıyor. Video, overflow özelliğinin basit ama doğru yerde kullanıldığında etkili olduğunu vurgulayarak sona eriyor.

      • 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

    • CSS Kursu: Marjin Kullanımı

      Bu video, CSS kursunun beşinci dersi olup, bir eğitmen tarafından marjin özelliğinin kullanımını anlatan bir eğitim içeriğidir. Videoda marjin özelliğinin ne olduğu ve nasıl kullanıldığı adım adım gösterilmektedir. Eğitmen, bir div ve p etiketi kullanarak marjin left, margin right, margin top ve margin bottom özelliklerini örneklerle açıklamaktadır. Ayrıca, margin left ve margin right'ı auto olarak ayarlayarak div'i sayfa içerisinde nasıl ortalayabileceğimiz de gösterilmektedir. Video, marjin özelliğinin kenar boşluklarını verme ve div'leri sayfa içinde düzenlemek için nasıl kullanılabileceğini pratik örneklerle anlatmaktadı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

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

    • CSS'de Margin, Border, Padding ve Content Kavramları

      Bu video, Emre Sayın tarafından sunulan bir eğitim içeriğidir. PC Dünyam kanalında yayınlanan bu derste, CSS'de temel kavramlar olan margin, border, padding ve content açıklanmaktadır. Videoda öncelikle content (içerik) kavramı tanıtılarak, ardından padding (iç boşluk), border (kenarlık) ve margin (dış boşluk) kavramları detaylı şekilde anlatılmaktadır. Her bir kavram için örnekler verilerek, CSS kodları ile nasıl uygulanacağı gösterilmektedir. Ayrıca border'ın genişliği ve stili (solid, dotted, dashed, double, groove gibi) nasıl ayarlanacağı da açıklanmaktadır. Video, geçen derste dört div oluşturulduğu bilgisiyle başlayıp, bu derste sadece bir kutu üzerinden kavramların daha kolay anlaşılması için anlatım yapılmaktadır.

      • youtube.com

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

      Bu video, bir eğitmen tarafından sunulan web tasarım eğitimidir. Eğitmen, izleyicilere adım adım HTML ve CSS kullanarak web sayfası oluşturma sürecini göstermektedir. Video, web sayfasının farklı bölümlerinin (navbar, "Bizi Seç" bölüm, hizmetler section, footer) oluşturulmasını kapsamaktadır. Eğitmen önce HTML etiketlerini (div, section, header, h1 vb.) kullanarak sayfanın yapısını oluşturur, ardından CSS ile bu yapıyı biçimlendirir. Hizmet kartları tasarımı, responsive tasarım için media queries kullanımı ve mobil görünüm için gerekli düzenlemeler detaylı şekilde anlatılmaktadır. Eğitimde renk, yazı tipi, konumlandırma, padding, margin, z-indeksi gibi CSS özellikleriyle ilgili kodlar gösterilmekte ve web tasarım, yazılım geliştirme ve markalaşma gibi hizmet kartlarının oluşturulması adım adım açıklanmaktadır.

      • 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

    • Web Geliştirme Eğitimine Giriş

      Bu video, bir eğitmen tarafından sunulan web geliştirme eğitiminin ilk bölümüdür. Eğitmen, Java programlama dilinde uzmanlaştığını ve bu eğitimde JavaScript bilgisini orta seviyede olduğunu belirtiyor. Eğitim, HTML, CSS, Bootstrap, JavaScript ve jQuery konularını kapsamaktadır. Eğitmen, bu konuları sırasıyla anlatarak, web sitelerinin yapısını ve bu teknolojilerin işlevlerini açıklamaktadır. HTML'i "iskelet" olarak, CSS'i "ete kemiğe bürünmüş haline" benzeterek anlatmakta, Bootstrap'in hazır temalar ve kütüphaneler sunduğunu, JavaScript'in programlama dili olduğunu ve jQuery'nin JavaScript ile yazılmış bir kütüphane olduğunu açıklamaktadır. Eğitimin sonunda, öğrendiklerin birleştirilerek bir web sitesi yapılacağı belirtilmektedir.

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