Web Geliştirme Becerilerinizi Geliştirmek için En İyi 20 CSS3 Eğitimi

Basamaklı Stil Sayfaları (CSS), web'i şekillendirmek için bir dilden daha fazlası haline geliyor. Yavaş yavaş dinamik tasarım özelliklerini işleyebilen tam yetenekli bir dile dönüşüyor. Birçok yönden CSS, etkileşim sağlamak ve harici kitaplıklardan ve kod parçacıklarından bağımsız olmak için geleneksel HTML ve JavaScript'in yerini alabilir. Bugün web'de gördüğümüz tüm stiller doğrudan CSS aracılığıyla. Standart büyümeye ve gelişmeye devam ettikçe, her şeyin üstünde kalmak her zamankinden daha önemli. Web tarayıcıları, CSS'yi HTML'ye çok benzer şekilde oluşturdu; bu, bazen eski tarayıcıların yeni özellikleri destekleyemeyeceği anlamına gelebilir.

Ön uç web geliştirme ve web tasarımına başlamak son yıllarda kesinlikle daha kolay hale geldi. Kaydolmak için çok daha fazla öğretici, rehber ve kurs görüyoruz. Ancak nihayetinde, yeni öğrenilen becerilerle çalışma ve bunları gerçek yaşam projelerinde uygulama istekliliği ortaya çıkıyor. CSS, kullanıcının JavaScript ve HTML gibi dillere uygulamak için belirli kalıpları ve düzen seçeneklerini kullanmasını gerektiren komut dosyası dillerinden biridir. HTML ve CSS ile yeni bir web sitesi oluştururken, öğrenilenleri tam olarak uygulamak için adım adım çalışmak en iyisidir.

Bugünkü amacımız, önde gelen ön uç geliştiriciler ve tasarımcılardan en önde gelen ve modern CSS3 eğitimlerini ele almaktır. Buradaki tüm eğitimler, daha iyi bir web tasarımı olmanıza yardımcı olmak için en son standartlara dayanmaktadır. Gönderinin sonunda, daha fazla öğrenme için birkaç CSS3 öğrenme kaynağından da bahsedeceğiz. Herhangi bir programlama dilinde olduğu gibi, bir şeyi daha iyi anlamak için, kendimize dinamik bir çevrimiçi platform veya kendi kişisel kod editörlerimiz aracılığıyla tekrarlayan kodlamalar yapmamıza izin vermemiz en iyisidir.

Resimleri CSS'de Düzenleme

Web tasarımında görsellerin kullanılması tamamen mantıklıdır, ancak hikaye bundan daha teknik hale gelir. Kendi beğendiğiniz fotoğrafları web tasarımlarınızda kullanmak eğlenceli olsa da bazen dikkate almamız gereken şeyler oluyor. Görsel dosya boyutu projemize uygun mu? Photoshop gibi harici uygulamalar yerine CSS aracılığıyla filtreler ekleyebilir miyiz? Fotoğraflarımızın daha iyi görünmesine yardımcı olmak için CSS ile gerçekten ne yapabiliriz? Una Kravets bizi 15 dakikalık bir yolculuğa çıkarıyor. İçinde, CSS görüntü düzenleme ve CSS'yi yalnızca tasarım yönlerini manipüle etmenin bir yolu olmaktan ziyade bağımsız bir görüntü düzenleme yazılımı platformu gibi davranacak şekilde nasıl dönüştürebileceğimiz hakkında bir konuşma yapıyor.

Duyarlı Bir Görüntü Izgarası Oluşturmak için Modern CSS'yi Kullanma

Görüntüler konusuna devam edersek, burada George Martsoukos var. Duyarlı görüntü ızgaraları oluşturmak için modern CSS3 işlevlerinin nasıl kullanılacağına ilişkin basit ve hafif bir eğitim sunuyor. Görüntü ızgaraları (veya bazen galeriler olarak adlandırılır), görsel içeriği bir ızgara bağlamında görüntülemekle ilgilidir. Bu tür ızgaralar, fotoğraflarını paylaşan veya portföy öğelerini genişletmenin bir yolu olarak bir görüntü ızgarası kullananlar için faydalı olur. Bu öğreticide George, oluşturduğumuz ızgaraların masaüstü ve mobil uygulamalara eşit düzeyde yanıt vermesini sağlama sürecinden bahsediyor.

CSS Düzeni Öğrenin

Web tasarımları mizanpajlarla ilgili her şeydir. Bir düzen yaratırız ve sonra onu şekillendirmek, üzerine inşa etmek için diğer mevcut öğeleri ve işlevleri kullanırız. Ve web tasarım düzenlerinin çoğunun tamamen CSS'ye bağlı olduğu bilinen bir gerçektir. CSS öğrenmek, web sitesi düzenleri ve nasıl çalıştıkları hakkında daha fazla bilgi edinmemizi sağlar. Ancak henüz bilginiz yoksa, Mikito Takada, CSS3 ile düzgün bir şekilde mizanpajların nasıl oluşturulacağı konusunda 5 farklı bölüme ayrılmış bir çevrimiçi kitap yazmıştır. Konumlandırma ve ızgara öğelerini oluşturmaya başlamak için farklı kutu öğelerini hizalama hakkında konuşuyor, şu anda konumlandırma ve mevcut özellikler hakkında daha derinlemesine gidiyor. Son iki bölümü Flexbox'a (CSS işlevi) ayırıyor. Ayrıca kendi web tasarımcısı olma yolculuğundan en iyi CSS stil ipuçları ve püf noktaları hakkında bir yazı var.

CSS Tazeleme Notları

Notlar ve stil kılavuzları, birçok web tasarımcısı için itici güçtür. Gelecekte daha kolay başvurmak için kendi favori not kaynaklarımızı bir kenara koymayı unutmamamız oldukça önemlidir. Ve CSS3'e gelince, CSS Yenileme Notları GitHub topluluğunun favorileri arasında; yüzlerce yıldız ve bu kaynağın en iyisi olmak için nasıl genişletileceğine dair çok sayıda topluluk girdisi. CSS Yenileme Notları, CSS3 geliştirmenin en önemli yönlerine odaklanır. Ayrıca, tasarımcıların çoğu CSS3 özelliği için referans notlarına hızla erişmelerini sağlar. Konumlandırma veya seçiciler konusunda yardıma ihtiyacınız olup olmadığı, duyarlı tasarım için medya sorguları veya CSS3 tasarım modellerinizde SVG'nin en iyi nasıl kullanılacağı - bu notlar, hemen böyle hissetmeseniz bile kullanışlı olacaktır.

Değişkenler: CSS Mimarisinin Omurgası

Ön işlemciler, son yıllarda tasarımcıların temel CSS3 işlevselliğini karışımlar, işlevler ve değişkenler gibi şeylerle genişletmesine olanak tanıyan basit çerçeveler ve araç setleri ile gerçekten başarılı oldu. JavaScript gibi sabit kodlanmış bir programlama dilinde genellikle görmeyi beklediğiniz özellikler. Muhtemelen, herkesin ön işlemci kullanmadan sorunsuz bir şekilde kod yazabilmesi için CSS3'te yetkin olması gerekir. Yine de, gelişme zamanı gibi şeyler önemli olmaya devam ediyor. Değişkenler, CSS3'ün daha dinamik bir ortamda kullanılmasına yardımcı olur. Bu nedenle Karen Menezes, bu konuda bulabileceğiniz en kapsamlı içeriklerden birini bir araya getirdi.

Flexbox ile Ürün Sayfası Düzeni Tasarlama

Flexbox, tasarımcıların tasarımlarını çeşitli cihazlar için en iyi şekilde optimize etmelerine yardımcı olmayı amaçlayan yeni bir CSS3 düzen modudur. Yeni işlev hala oldukça yeni ve birçok kişiye yabancı, ancak Flexbox kullanımı e-ticaret gibi alanlarda giderek daha popüler hale geliyor. Bu CSS3 öğreticisi, Flexbox yardımıyla en yeni Shopify Şablonlarından birini nasıl oluşturmayı başardıkları, sürecin nasıl geçtiği ve nihai sonucun nasıl göründüğü hakkında bir rapor hazırladıkları Shopify'daki ekipten gelir. Shopify'ın e-Ticaret pazarındaki itibarını bilmek ve eğitime kendimizi kaptırmak, Flexbox hakkında daha fazla bilgi edinmenize ve onu kendi web tasarımlarınızda nasıl kullanmaya başlayabileceğinize yardımcı olacak en kullanışlı kılavuzlardan biri olabilir.

CSS ile duyarlı web tipografisi hakkında bildiğim her şey

İnsanlar duyarlı web tasarımını düşündüklerinde, çoğu zaman standart bir web sitesini mobil cihazlarla iyi çalışacak bir şeye dönüştürmeyi düşünüyorlar. Bu yanlış bir anlayış değil, ama kesinlikle daha fazlası var. Zell Liew, duyarlı web tipografisi ile nasıl çalışılacağı ve tüm cihaz türlerinde tipografi kalıplarınız için sağlam bir temel oluşturmanın ne anlama geldiği konusunda mükemmel bir yazı yazdı. Öğreticilerin yorum bölümünün de çok büyük yardımı olduğunu söylemeye gerek yok. Bu, diğer topluluk web tasarımcılarının ek girdileri sayesindedir.

En Basit CSS Slayt Gösterisi

CSS3 ile Slayt Gösterisi? Bu imkansız olmalı! Bu tür kavramlar genellikle JavaScript veya jQuery gibi dillere yöneliktir. Bu diller, hareket halindeyken dinamik içerik oluşturmayı kolaylaştırır. Peki ya CSS3? Jonathan Snook bize gerçekten yeni bir şey vaat etmiyor, bunun yerine bize JavaScript gibi herhangi bir harici kaynak kullanmak zorunda kalmadan slayt gösterisi deneyimleri oluşturmak için CSS3 animasyon efektlerini nasıl kullanabileceğimize dair bir örnek veriyor. CSS3 animasyonlarına yönelik küçük tanıtım dersi, yaratıcılığın şüpheyi nasıl alt ettiğinin mükemmel bir örneğidir.

CSS Modülleri — CSS'nin zorluklarını geniş ölçekte çözme

CSS'nin, JavaScript'in yaptığı gibi, mevcut sınırlamalarının ötesine geçmesi kaçınılmazdır. CSS'nin çok eski geçmişine baktığımızda, renkleri ve eleman görünümlerini manipüle edebilmekten çok uzun bir yol kat ettik, bu günlerde CSS, tek bir dilde yaşamak isteyen geliştiriciler için tüm işlerini yapmak için çok daha karmaşık bir araç kutusu sunuyor. geliştirme görevleri. CSS Modülleri, geliştiricilerin, uygulama veya proje kontrolden çıkmaya başladığında ölçeklenebilecek CSS kodlarını daha iyi hizalamalarına yardımcı olmak içindir. Bu muhteşem öğreticide Tom Cornilliac, farklı stil sayfalarını nasıl birleştirebileceğimizi ve bunları React gibi çerçeveler aracılığıyla başlattığımız projelerimiz için modüller olarak nasıl kullanabileceğimizi açıklıyor. Stil sayfalarını içe aktarmanın ve önceden tanımlanmış işlevlerine erişmenin bu kadar kolay olacağını kim bilebilirdi.

İçerik Görüntüleme Modelleri

İçerik her şeydir. Uygun web sitesi sunum becerilerine sahip olmayan ve yine de yüksek içerik kalitesini koruyabilen siteler bile, genellikle insanların en çok başvuracağı sitelerdir. Bunun için iyi örnekler Reddit ve Hacker News gibi sitelerdir - web sitelerinin tasarımında gerçek bir yaptırımı olmayan yüksek içerikli siteler. İçerik görüntüleme kalıpları, görüntüleme kalıplarıyla ilgili değil, içerik görüntüleme ve gerçek içerik arasında tam olarak bütünleşen bir tarama deneyimi sağlamak için genel içerik öğesi tasarımının birlikte nasıl çalıştığıyla ilgilidir. Dan Mall'dan alınan bu eğitim, içerik görüntüleme modelleriyle ilgili en özlü kılavuzlardan biridir ve TechCrunch gibi siteler için yeniden tasarım projeleriyle çalışmış olan deneyim raporu kendisi için konuşur ve hatta yeni TechCrunch tasarımının oldukça şık olduğunu kabul etmeliyiz!

SVG'de Kırpılmış Öğeleri Canlandırma

SVG ve CSS3 animasyonları, şu anda web geliştirmede en trend olan konular arasındadır. Bunun nedeni, içeriğimizi görüntülemek için ağır görüntü ve animasyon dosyaları kullanma ihtiyacından uzaklaşmaya başladığımız ve bunun yerine tasarımcıların yerel dilleri kullanarak bu tam animasyonları tarayıcıya nasıl taklit edeceklerini öğreniyor olmamızdır. Dennis Gaebel Jr, çarpıcı vektör görselleri kullanmanın yanı sıra çarpıcı animasyon efektleri elde etmek için CSS kırpmayı kullanmanın bir özetini veriyor.

Etkileyici CSS

Dışavurumcu, geliştirici topluluğunda bir süredir icat edilmiş bir terim olmuştur. Programlama dillerinde ifade kavramından gevşek bir şekilde ödünç alınan bir terimdir. Bir programlama dili, düşüncelerinizi anlaşılması kolay bir kodda doğal olarak ifade etmenize izin veriyorsa, genellikle ifade edici olarak kabul edilir. Genel olarak, 'anlamlı' yeni bir şey değildir ve geliştiriciler bunun hakkında yıllar önce konuşmuştur, ancak vahşi doğada her yeni özellik yayınlandığında, geliştiricilerin ve özellikle tasarımcıların etkileyici iş akışlarına uyum sağlamaları biraz zaman alır, bu nedenle bazen projeler tamamen dağınık hale gelebilir ve aynı anda çalışmaya çalışan çok fazla işleve kapılabilir. Etkileyici, iyi çalışan, iyi görünen ve bakımı kolay kod yazmaya yönelik hafif bir yaklaşımdır. Bunu bir stil rehberi olarak kullanın ve yazara minnettarlığınızı ifade etmeyi unutmayın; John Polacek.

Duyarlı Tasarımda Animasyon

Makale boyunca daha önce öğrenildiği gibi, animasyonlar ve yanıt verenler, tasarımcılar için çok sıcak konulardır ve ikisini bir araya getirmek, modern web geliştirme yeteneklerinin sınırlarını gerçekten test etmek isteyenler için giderek daha ilginç hale geliyor. Val Head, duyarlı web tasarımlarında CSS3 animasyonlarının kullanımı ve bu animasyonların değerlerini kaybetmeden en iyi şekilde nasıl sunulacağı hakkında çok bilgilendirici bir makale yayınladı. Animasyonlarını hem masaüstü hem de mobil cihazlarda kurmuş olan diğer başarılı web sitelerinden birkaç vitrin demosu ile makaleyi işgal ediyor.

Yerel CSS Değişkenleri Hakkında Neden Heyecanlıyım?

Değişkenler olarak da bilinen CSS Özel Özellikleri, dinamik işlevsellik sağlayarak CSS3 geliştiricilerinin CSS3 geliştirme sürecini hızlandırmasına yardımcı olur. Önişlemciler bunu bir süredir yapıyor ve birçoğu zaten bir önişlemciyi kalıcı olarak kullanma fikrine adapte oldu, ancak kaçınılmaz olarak tüm bu özellikler (standartta mevcuttur) modern tarayıcılarda yolunu bulacaktır, çünkü hiçbir şey tarayıcıda geliştirmekten daha iyi değildir. yerel ortam, harici yazılımın bakımı ve güvenilirliği konusunda endişelenmenize gerek yok. Bir Google Mühendisi olan Philip Walton, değerli zamanını, yeni CSS özelliği ve topluluğun neden sözdizimi görünümü gibi aptalca şeyler hakkında endişelenmemesi ve bu tür bir değişikliği benimsemesi gerektiği hakkında çok anlayışlı bir çalışma oluşturmak için harcadı.

Tam CSS'de Twitter'ın Kalp Animasyonu

Twitter, TÜM haberlerde ve birçok iyi nedenden dolayı olmuştur. Bu nedenlerden biri, Twitter'ın 'Favori' düğmesini bir 'Aşk' simgesiyle değiştirmeye karar vermesiyle sona erdi. Site çevresinde daha topluluk odaklı bir his oluşturmak için cesur ama gerekli bir hareket. Duyuru, hareketli bir GIF görüntüsü aracılığıyla Twitter'ın resmi hesaplarından birinde yapıldı. Metin eşliğinde harika bir 'kalp sıçrama' animasyonu sergiledi. Bir tasarımcı olan Nicolas Escoffier, yalnızca saf CSS3 kullanarak benzer bir animasyonu bir araya getirip getiremeyeceğini görmekle ilgilendi ve tahmin edin ne oldu - başardı ve topluluk bundan daha mutlu olamazdı!

Cidden, simge yazı tiplerini kullanın

SVG, web'i daha iyi bir yer haline getiriyor. Bu güne kadar geliştiriciler, birçoğunun hala mobil işletim sistemlerinin eski sürümlerinden web'de gezindiği gerçeğini hesaba katmak zorunda olsalar da ve bu tür bir anlayış, geliştiricinin işleri yürütmek için ekstra sıkı çalışmasını gerektiriyor. Simge yazı tipleri hala başkaları tarafından öğrenilmektedir. Ancak bu özellik, geliştiricilerin sorunsuz ve birlikte çalışması keyifli deneyimler oluşturmak istediği modern geliştirici pazarlarında çok popüler hale geliyor.

CSS Ürün Büyütme — JavaScript olmadan

E-Ticaret'te bu, yakınlaştırmadır, ancak aynı zamanda müşterilerin ürüne daha fazla yakınlaştırmasına ve ürünün gözle daha az görünür yönlerini keşfetmesine olanak tanıyan bir büyütmedir. Kesinlikle harika bir etki, ancak birçokları için işlerinin başarısı için gereklidir. Michael Weaver, herhangi bir JavaScript kodu kullanmadan bir büyütme widget'ı oluşturma fikrini bulan bir CSS3 korsanıdır, bunu başarıyla gerçekleştirdi ve artık herkes onun koduna göz atabilir ve sitelerinde benzer widget'lar yapabilir.

CSS3 Flexbox kullanarak Gerçekten Duyarlı Tablolar

Tablolar, bilgilerimizi daha dostça bir şekilde hizalamamıza yardımcı olur. Bazen, iyi tasarlanmış bir tablo öğesi tek olarak bile görünmez. Ancak jQuery, HTML5 ve JavaScript'in genişletilebilirliği ile tablolarımızın her şeyden çok Excel belgeleri gibi çalışmasını sağlayabiliriz. Vasan Subramanian, bir sonraki web siteniz veya uygulama projeniz için çarpıcı ve duyarlı tablolar oluşturmak üzere CSS3'ün Flexbox özelliğinin nasıl kullanılacağına dair kapsamlı bir eğitim yayınladı.

CSS Teslimini Optimize Edin

Son CSS3 öğreticisi, hız ve en azından olağanın ötesinde bir hız artışını garanti etmek için stil sayfalarımızı nasıl daha iyi kodlayacağımızla ilgili olacak. Optimize CSS Teslimatı, herhangi bir kaynaktan ödün vermeden yerel CSS kodunun nasıl yazılacağını gösteren teknik bir stil kılavuzudur. CSS yazmak eğlenceli olmalı, bu eğitimin konusu da bu.

Modern CSS3 için Öğrenme Kaynakları

Uygun bir temel olmadan, öğreticilerden öğrenmek bazen oldukça ürkütücü gelebilir. Bir öğreticinin belirli bir konu için ancak bu kadar çok şey kapsayabileceği mantıklıdır, öğreticiler daha önce bir şeyler inşa etmiş olanlar içindir ve bu projeleri yeni özellikler, ilginç kavramlar ve ilham alan diğer olanaklarla genişletmek isteyenler içindir. topluluk tarafından. Ve gönderide bahsettiğimiz CSS3 eğitimlerini daha iyi anlamanıza yardımcı olmak için, CSS3'ü (modern de) çevrimiçi öğrenmek için gerçekten harika ve ücretsiz bazı kaynakları listeleyeceğiz.

Eksiksiz CSS3 öğreticisi

Yine, CSS hakkında her şeyi öğrenmenize yardımcı olacak öğretici kaynakları sergileme ihtiyacını vurguluyoruz. Bu kaynak, CSS3 özellikleri ve gerçek dünyadaki kullanımlarından bahseden eksiksiz bir CSS3 öğreticisidir. Bu eğitimde, seçiciler, gelişmiş seçiciler, kutu modelleri, metinler ve yazı tipleri ve diğer özellikler, oynamaya başlamanız için bir ton örnekle tam olarak tartışıldı. CSS geliştirmeye başlayan herkes, ilerlemelerini sadece birkaç basit projeden hızla gerçekleştirebilecektir.

CSS Eğitimi

W3Schools, başlangıç ​​seviyesindeki ön uç geliştirmenin evidir. Bu kaynak, milyonlarca geliştiricinin HTML ve CSS'nin belirli bölümlerini daha iyi anlamasına yardımcı oldu. Ayrıca başka hiçbir yerde bulamayacağınız ücretsiz öğrenme içeriği sunar. W3Schools, web konusunda gerçekten tecrübesiz olanlar ve oldukça hızlı bir şekilde hızlanmak isteyenler için mükemmel bir CSS öğrenme yeridir.

HTML ve CSS

CSS3 veya HTML5'i sıfırdan öğrenip Codecademy'yi denemeden gidemezsiniz. Referanslar bölümü bile, insanların Codecademy ile öğrenimlerini bitirdikten sonra nasıl harika ve iyi ücretli işler bulabildiklerine dair incelemelerle dolu. Eğitim sitelerinin çoğu, kod örnekleri aracılığıyla doğrudan söz dizimini öğretir. Öte yandan, Codecademy sizi kodlarla oynamaya 'zorlar'. Bu, her öğrenme kursunun arkasındaki kişiler tarafından atanan doğrudan ve etkileşimli görevler aracılığıyla yapılır. Bu tür platformlar çok popüler hale geldi ve artık neredeyse her programlama dili için mevcut. Sorgulamadan öğrenmenin çok etkili bir yolu.

CSS Düzeni Öğrenin

Bu gönderide daha önce yerleşim düzeninin CSS3'ün temeli olduğunu öğrenmiştik. Ama şimdi, bu konsepti gerçekten bir gezintiye çıkarmanın zamanı geldi. CSS3 düzen özelliklerinin nasıl çalıştığına ve bunlarla neler yapabileceğimize dair fütüristik bir örneğe dokunalım. Bu öğreticiyi tamamlamak için kendinize birkaç gün ayırın. Bundan sonra, yerleşim özelliklerini ve kullanımlarını anlama konusunda sağlam bir orta düzeyde olacaksınız.

CSS – Web'i Öğrenmek

Mozilla Developer Network, HTML5, CSS3 ve JavaScript ile ilgili her şey için önde gelen kaynaklardan biri olmaya devam ediyor. Tamamen topluluk odaklı olan MDN, öğrenme hızınıza ve ilk etapta CSS3'ün genel olarak anlaşılmasına en uygun şekilde bahsedilen tüm diller için stil kılavuzları sunar.