• Buradasın

    CSS

    Özetteki ilgi çekici içerikler

    • 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

    • HTML ve CSS ile İletişim Formu 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 bir iletişim formu oluşturma sürecini göstermektedir. Videoda, HTML ve CSS kullanarak iletişim formu oluşturma süreci detaylı olarak anlatılmaktadır. İlk bölümde formun temel yapısı (div, class, label, input, textarea, button) oluşturulur ve CSS ile formun görünümü özelleştirilir. İkinci bölümde ise Google Chrome'da formun genişlik ayarları ve renk seçenekleri nasıl değiştirilebileceği gösterilmektedir. Eğitim, formun zorunlu alanlarının belirlenmesi, placeholder değerlerinin eklenmesi ve formun işlevselliğinin sağlanması gibi konuları içermektedir. Video, bir eğitim serisinin bir parçası olup, bir sonraki eğitimde görüşmek üzere sonlanmaktadır.

      • youtube.com

    • HTML ve CSS ile Açılır Menü Tasarımı Eğitimi

      Bu video, bir eğitim içeriği olup, izleyicilere HTML ve CSS kullanarak açılır menü (dropdown) tasarımı adım adım göstermektedir. Videoda, açılır menü yapısının nasıl oluşturulacağı, select ve option etiketlerinin kullanımı, placeholder özelliği, class atama ve CSS ile menü görünümünün nasıl değiştirileceği anlatılmaktadır. Eğitmen, araba markaları örneği üzerinden select etiketinin nasıl kullanılacağını, option etiketlerine selected ve disabled özelliklerinin nasıl ekleneceğini ve CSS ile menü boyutunun, renginin ve yazı tipinin nasıl ayarlanacağını göstermektedir. Video, bir serinin parçası olup, sonraki videolarda da HTML ve CSS kullanarak tasarımların devam edeceği belirtilmektedir.

      • 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

    • Web Sitesi Nasıl Yapılır Eğitimi

      Bu eğitim videosunda, sunucu ve web programlama konusunda deneyimli olan Mehmet ile Fatih adlı konuk, izleyicilerin merak ettiği "web sitesi nasıl yapılır" konusunu ele alıyor. Video, web sitelerinin çalışma prensibini açıklayarak başlıyor ve web sitesi yapmak için gerekli dilleri (HTML, CSS, PHP, JavaScript, ASP, .NET) anlatıyor. Ardından domain ve hosting alımı, kod yazma programları (Notepad++, Sublime Text, Atom, Dreamweaver) ve hazır yazılımlar (WordPress, Joomla, PHPBB) hakkında bilgi veriliyor. Son olarak, basit bir web sitesi oluşturma süreci adım adım gösteriliyor ve FTP protokolü ile siteye kodların nasıl aktarılacağı anlatılıyor. Videoda ayrıca web programlama sektörünün iş imkanları hakkında bilgiler de paylaşılıyor ve izleyicilerin merak ettikleri soruları yorum olarak atmaları isteniyor.

      • 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 Video Oynatma Uygulaması Eğitimi

      Bu video, bir web geliştirme eğitim içeriğidir. Eğitmen, HTML ve CSS kullanarak video oynatma uygulaması oluşturmayı adım adım göstermektedir. Video, bir HTML belgesi üzerinden başlayıp, Google Fontlar ve CSS stil sayfası kullanarak tasarım sürecini göstermektedir. Eğitmen, video kapsayıcısı, kontrol düğmeleri, oynatma ve duraklatma butonları gibi öğelerin nasıl oluşturulacağını ve CSS ile nasıl stillendirileceğini anlatmaktadır. Ayrıca, video oynatma için JavaScript kütüphanesinin nasıl kullanılacağı ve video kontrolünün mobil cihazlar için nasıl ayarlanacağı da 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

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

    • Web Tasarımı Eğitim Videosu: Portfolyo Bölümü Oluşturma

      Bu video, bir web tasarım eğitim serisinin bir bölümüdür. Eğitmen, bir uygulamanın portfolyo bölümünü nasıl oluşturacağını adım adım göstermektedir. Videoda, uygulamanın alt kısmında portfolyo bölümünün oluşturulması anlatılmaktadır. Eğitmen önce bölümün yapısını tanımlar, ardından CSS ile padding değerleri ayarlar ve arka plan rengi belirler. Daha sonra başlık ve star ikonları için farklı renkler (light ve dark) tanımlar ve bu renkleri CSS sınıflarına bağlar. Video, bir sonraki derste resimlerin ayarlanacağı bilgisiyle sonlanır.

      • 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

    • Chrome'da Sesli Arama Özellikli HTML ve CSS Eğitimi

      Bu video, İbrahim Çevrik tarafından sunulan bir eğitim dersidir. İbrahim, istek üzerine hazırladığı bu derste, Chrome tarayıcısında bulunan sesli arama özelliğini anlatmaktadır. Videoda, Chrome'da bulunan sesli arama özelliğinin nasıl çalıştığı ve nasıl eklenebileceği adım adım gösterilmektedir. İbrahim, bu özelliğin sadece Chrome için çalıştığını, diğer tarayıcılarda çalışmadığını belirtmektedir. Ayrıca, bu özelliğin HTML ve CSS kodlarıyla nasıl eklenebileceği, "x" ve "webkit-speech" özelliklerinin nasıl kullanılacağı örneklerle açıklanmaktadır. Video, İbrahim'in kendi adını ve soyadını sesli arama özelliğiyle test etmesiyle sona ermektedir.

      • 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 ve CSS ile Web Sayfası Tasarımı Eğitimi

      Bu video, bir eğitmen tarafından sunulan HTML ve CSS kullanarak web sayfası tasarımı eğitimidir. Eğitmen, izleyicilere adım adım web sayfası oluşturma sürecini anlatmaktadır. Video, web sayfası tasarımı sürecini üç ana bölümden oluşmaktadır: İlk bölümde Pixabay'dan ücretsiz resimlerin bulunması ve indirilmesi, HTML ve CSS dosyalarının oluşturulması gösterilmektedir. İkinci bölümde div etiketleri kullanılarak sayfanın bölümleri (banner, menü, footer) oluşturulmakta ve CSS ile bu bölümlerin biçimlendirilmesi anlatılmaktadır. Son bölümde ise hover olayları ve transition özellikleri kullanılarak tam ekran yapma teknikleri gösterilmektedir. Eğitimde Google Fonts ve Color Hunt gibi kaynaklar kullanılarak font aileleri ve renk paletleri seçilmekte, display flex, margin, padding, position, text-align, font-size, border-radius, transition ve box-shadow gibi CSS özellikleri detaylı şekilde açıklanmaktadır. Ayrıca, hata alındığında nasıl çözülebileceği konusunda da bilgi verilmektedir.

      • 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

    • 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

    • 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

    • HTML ve CSS ile Web Sitesi Template Geliştirme Eğitimi

      Bu video, bir eğitmen tarafından sunulan HTML ve CSS ile web sitesi template geliştirme eğitimidir. Eğitmen, yeni başlayanlar için temel özellikler üzerine odaklanarak adım adım bir web sitesi template'i oluşturma sürecini göstermektedir. Video, 980 piksel genişliğinde bir web sitesi template'i oluşturma sürecini kapsamaktadır. Eğitmen önce klasör yapısını oluşturup HTML ve CSS dosyalarını oluşturur, ardından kapsayıcı, header, navigasyon ve footer bölümlerini HTML ile tanımlar ve CSS ile stillendirme yapar. İçerik ve linkler bölümlerinin stillendirilmesi, float özellikleri, padding, margin, font size gibi CSS özellikleri kullanılarak sayfanın düzeni oluşturulur. Eğitim boyunca eğitmen, kod yazarken yapılan hataları ve çözümlerini de paylaşarak, CSS'in temel kavramlarını da öğretmektedir. Video, bir web sitesinin yukarıdan aşağı kodlanması sürecinin footer kısmının tamamlanmasıyla sona ermektedir.

      • youtube.com

    • Profesyonel Web Tasarım Eğitimi: HTML ve Bootstrap Kullanımı

      Bu video, bir eğitmen tarafından sunulan profesyonel web tasarım dersidir. Eğitmen, web sayfası tasarımı konusunda adım adım anlatım yapmaktadır. Videoda, web sayfasının ana bölümünün HTML kodlarıyla nasıl yapılandırılacağı ve Bootstrap framework kullanılarak web tasarımı gösterilmektedir. İlk bölümde section etiketleri, id ve class etiketleri, div etiketleri ve CSS ile sayfa düzenlemesi anlatılırken, ikinci bölümde flexbox yapısı kullanılarak container sınıfı, col-3 sütunları ve Unsplash platformundan indirilen görsellerin nasıl kullanılacağı gösterilmektedir. Eğitim, web sayfası yapısının HTML kodlarıyla nasıl oluşturulacağını, CSS sınıflarının nasıl kullanılacağını ve görsellerin üzerine başlık, paragraf ve linklerin nasıl ekleneceğini detaylı şekilde açıklamaktadır. Video, bir sonraki derste futures servis bölümünün CSS kodlarının yazılacağı bilgisiyle sonlanmaktadır.

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