Awesome
Liste, diğer açık kaynaklı listelerden gelen eklemelerle birlikte Front End geliştiricilerinin yıllara dayanan deneyimlerinin bir ürünüdür.
<a target='_blank' rel='nofollow' href='https://app.codesponsor.io/link/HxqChNNHFKFaMpEpEikk4EM4/thedaviddias/Front-End-Checklist'> <img alt='Sponsor' width='888' height='68' src='https://app.codesponsor.io/embed/HxqChNNHFKFaMpEpEikk4EM4/thedaviddias/Front-End-Checklist.svg' /> </a>İçindekiler
Nasıl kullanılır?
Çoğu proje için Front-End Checklist içerisindeki öğelerin tamamının kullanılması gerekir. Ancak bazı öğelerin kullanımı ihmal edilebilir. (Örneğin bir yönetim paneli uygulamasında, RSS beslemesine ihtiyacınız olmayabilir). Öğelerin önemi konusunda 3 seviye belirledik:
etiketi önerilen ancak bazı durumlarda es geçebileceğiniz öğeleri ifade eder.
etiketi kesinlikle önerilen ve sadece nadir durumlarda görmezden gelebileceğiniz öğeleri ifade eder. Bazı elementlerin ihmal edilmesi performans ve SEO konusunda kötü sonuçlara neden olabilir.
etiketi öğe kullanımının zorunlu olduğunu ve hiçbir şartta görmezden gelinemeyeceğini ifade eder. Aksi halde sayfanızda fonksiyonel kayıplar yaşayabilir, ulaşılabilirlik ve SEO konusunda ciddi sorunlarla karşılaşabilirsiniz. Test önceliği daima bu etikete sahip öğelerdedir.
Bazı kaynaklar içeriğin türünü anlayabilmeniz için çeşitli ifadeler içerir.
- 📖: dokümantasyon veya makale
- 🛠: çevrimiçi araç / test aracı
- 📹: medya veya video içeriği
Head
Not: HTML dökümanının
<head>bölümünde bulunması gereken elementlerin tam listesini türkçe açıklamaları ile burada bulabilirsiniz.
Meta etiketler
- Doctype: Doctype, HTML5'dir ve tüm HTML sayfalarınızın en üstünde yer almalıdır.
<!-- Doctype HTML5 -->
<!doctype html>
Sonraki 3 meta tag (Charset, X-UA Compatible ve Viewport) head bölümünün en başında yer almalıdır.
- Charset: Karakter seti (UTF-8) doğru şekilde tanımlanmalıdır.
<!-- Dökuman için karakter kodlaması -->
<meta charset="utf-8">
- X-UA-Compatible: X-UA-Compatible meta tagı yer almalıdır.
<!-- Internet Explorer'a en son oluşturma motorunu kullanmasını söyleyin -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
- Viewport: Viewport doğru şekilde tanımlanmalıdır.
<!-- Responsive bir tasarım için viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1">
- Title: Başlık tüm sayfalarda kullanılmalıdır. (SEO: Google, başlıkta kullanılan karakterlerin piksel genişliğini hesaplar; 472 ve 482 piksel arasında kesilecektir. Buna göre ortalama karakter limiti 55 civarındadır).
<!-- Döküman Başlığı -->
<title>55 karakterden daha kısa bir başlık</title>
- Description: Eşsiz bir meta açıklaması bulunmalı ve açıklama uzunluğu 150 karakteri aşmamalıdır.
<!-- Meta Açıklaması -->
<meta name="description" content="Description of the page less than 150 characters">
- Favicons: Tüm faviconlar ayrı ayrı oluşturulmalı ve doğru şekilde ayarlanmalıdır. Eğer sadece
favicon.icodosyasına sahipseniz, dosyayı sitenizin ana klasörüne koyun. Normal şartlarda dosyayı işaret eden bir element kullanmanıza gerek yok ancak aşağıdaki örnekte olduğu gibi döküman içerisinde belirtmek iyi bir pratik olabilir. Günümüzde.icoformatında (boyut: 32x32px). PNG biçiminin kullanılması önerilmektedir.
<!-- Standart favicon -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- Önerilen favicon biçimi -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">
- Apple Touch Icon: Apple touch favicon (apple-mobile-web-app-capable) kullanılmalıdır (Desteklemek isteyebileceğiniz tüm boyutları karşılayacak, en az 200x200px boyutlarında bir Apple Icon oluşturun).
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/custom-icon.png">
- Windows Tiles: Windows tiles kullanılmalı ve doğru şekilde belirtilmelidir.
<!-- Microsoft Tiles -->
<meta name="msapplication-config" content="browserconfig.xml" />
Browserconfig.xml dosyası için gerekli minimum xml betiği aşağıdaki gibidir:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="small.png"/>
<square150x150logo src="medium.png"/>
<wide310x150logo src="wide.png"/>
<square310x310logo src="large.png"/>
</tile>
</msapplication>
</browserconfig>
- Canonical: Yinelenen içeriği önlemek için
rel="canonical"kullanın.
<!-- Yinelenen içerik sorunlarını önlemeye yardımcı olur -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">
HTML etiketleri
- Language attribute: Web sitenizde
langniteliğini kullanmalı ve geçerli sayfanın dili ile ilişkilendirmelisiniz.
<html lang="en">
- Direction attribute: Sayfa yazıların yönü html etiketinde belirtilmelidir. (Farklı bir html etiketi kullanılabilir).
<html dir="rtl">
- Alternate language: Aktif olan sayfanın dili belirtilmelidir.
<link rel="alternate" href="https://es.example.com/" hreflang="es">
- Conditional comments: Gerekirse IE için koşullu ifadeler kullanılmalıdır.
-
RSS feed:
Eğer projeniz bir blog ise ya da makaleler içeriyor ise; bir RSS link sağlanmalıdır. -
Inline critical CSS:
Sayfanın yüklenmesi sırasında (Tüm içeriklerden önce) mutlaka görünmesi gereken CSS betikleri kritik CSS olarak adlandırılır. Genel CSS içeriklerinden önce <style></ style>arasında tek bir satırda (sıkıştırılmış) verilmelidir.
- 🛠 Critical, Addy Osmani on GitHub bu işlemi otomatik hale getirir.
- CSS order: Tüm CSS dosyaları JavaScript dosyalarından önce
<head>bölümünde tanımlanmalıdır. (JS dosyalarının asenkron olarak sayfanın en üstünde yüklenebildiği durumlar dışında).
Sosyal meta etiketleri
Facebook OG ve Twitter Cards tüm web siteleri için önerilir. Eğer belirli bir sosyal siteyi hedefliyor ve içeriklerinizi tanıtmak istiyorsanız diğer etiketlerde kullanılabilir.
- Facebook Open Graph: Tüm Facebook Open Graph (OG) verileri test edilmeli ve hiçbiri eksik ya da hatalı bilgi içermemelidir. Resimler en az 600 x 315 piksel boyutunda olmalıdır. 1200 x 630 piksel önerilir.
Not:
og:image:widthveog:image:heighttanımlarını kullanarak resim boyutlarını belirtmeniz; örümceğin asenkron olarak resimleri yükleyip işleme sokmadan, direk kullanabilmesine olanak sağlayacaktır.
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<!-- Sonraki etiketler opsiyoneldir ancak kullanılması önerilir -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
- 📖 Web Yöneticileri için Paylaşım Kılavuzu
- 📖 En İyi Teknikler - Paylaşım
- 🛠 Sayfanızı Facebook OG test aracı ile test edin.
- Twitter Card:
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">
- 📖 Twitter card'larına giriş — Twitter Developers
- 🛠 Sayfanızı Twitter card doğrulayıcı ile test edin.
HTML
En iyi teknikler
- HTML5 Semantic Elements: HTML5 Semantik Elementler doğru şekilde kullanılmalı (header, section, footer, main...).
-
Error pages:
404 Hata sayfası ve 5xx sayfası bulunmalıdır. 5xx hata sayfalarındaki CSSlerin sayfa içine entegre edilmesi gerektiği unutulmamalıdır. (Sunucuya herhangi bir çağrı yapılmamalıdır). -
Noopener:
target="_blank"ile harici bağlantılar kullanmanız durumunda, tab nabbing'i önlemek için bağlantınızrel="noopener"niteliğine sahip olmalıdır. Eğer Firefox'un eski versiyonlarına destek vermek istersenizrel="noopener noreferrer"şeklinde kullanabilirsiniz.
- Clean up comments: Yayına çıkmadan önce gereksiz kodlar sayfadan temizlenmelidir.
HTML testleri
- W3C compliant: HTML kodundaki olası sorunları tanımlamak için tüm sayfaların W3C doğrulayıcıyla test edilmesi gerekir.
- HTML Lint: HTML içerisindeki tüm sorunları analiz etmek için aşağıdaki araçları kullanabilirsiniz.
- Link checker: Sayfanızda kırık link bulunmamalıdır. Herhangi bir 404 hatası alınmadığını doğrulayın.
- Adblockers test: Web siteniz reklam engelleme araçları aktifken doğru şekilde görüntülenebilmelidir (Bir mesaj ile ziyaretçileri eklentiyi pasif hale getirmeleri yönünde uyarabilirsiniz).
Webfonts
Not: Webfont kullanımı stillendirilmemiş / görünmez yazılara neden olabilir - may cause Flash Of Unstyled Text/Flash Of Invisible Text - Fallback fontlar kullanmayı ya da webfont yükleyicilerini kullanarak bunu önleyin.
- Webfont format: WOFF, WOFF2 ve TTF tüm modern tarayıcılar tarafından desteklenir.
-
Webfont size:
Webfont boyutları 2 MB'ı aşmamalıdır. (Tüm türevleri ile birlikte). -
Webfont loader:
Webfont yükleyiciler ile yükleme akışını kontrol edin.
CSS
Not: Çoğu Front-End geliştiricinin takip ettiği CSS Kılavuzları ve Sass Kılavuzlarını inceleyin. Eğer CSS özellikleri konusunda çekinceleriniz var ise, CSS Kaynakçasını ziyaret edin. Tutarlılık için bu kısa Kod Kılavuzu da kullanılabilir.
- Responsive Web Design: Web sitesinin tasarımı responsive olmalı.
- CSS Print: Baskı(yazdırma) için tüm sayfalarda geçerli olan bir CSS bulunmalı.
- Preprocessors: Sayfanız bir CSS önişlemcisi kullanmalı (Sass önerilir).
- Unique ID: Eğer ID kullanılmışsa tümü eşsiz olmalı.
- Reset CSS: Güncel bir CSS reset (reset, normalize ya da reboot) kullanılmalı. (Eğer Bootstrap ya da Foundation gibi bir CSS Framework kullanıyorsanız Normalize hali hazırda buna dahil edilmiştir)
- 📖 Reset.css
- 📖 Normalize.css
- 📖 Reboot
- JS prefix: Javascript dosyalarındaki tüm sınıflar (ya da IDler) js- ile başlamalı ve CSS dosyaları içerisinde kullanılmamalıdır.
<div id="js-slider" class="my-slider">
<!-- Ya da -->
<div id="id-used-by-cms" class="js-slider my-slider">
- Embedded or inline CSS:
<style>etiketleri arasında ya da satır içi CSS kullanmaktan kaçının: sadece geçerli bir sebebiniz varsa kullanın (örn. slider için arkaplan resmi, kritik CSS). - Vendor prefixes: Vermek istediğiniz tarayıcı desteğine göre CSS tarayıcı önekleri kullanılmalıdır.
Performans
- Concatenation: CSS dosyaları tek bir dosyada birleştirilmelidir (HTTP/2 hariç).
- Minification: TÜm CSS dosyaları sıkıştırılmalıdır.
- Non-blocking: CSS dosyaları DOM'un yüklenmesini engellememelidir.
- Unused CSS: Kullanılmayan CSS'ler silinmelidir.
CSS testleri
- Stylelint: Hiçbir CSS ya da SCSS dosyası hata içermemelidir.
-
Responsive web design:
Tüm sayfalar 320px, 768px, 1024px (Analitik verilerinize göre daha farklı olabilir) kırılma noktaları için test edilmelidir. -
CSS Validator:
CSS test edilmeli ve bilinen hatalar düzeltilmeli.
- Desktop Browsers: Tüm sayfalar bilinen tüm masaüstü tarayıcılarda test edilmeli (Safari, Firefox, Chrome, Internet Explorer, EDGE...).
- Mobile Browsers: Tüm sayfalar bilinen tüm mobil tarayıcılarda test edilmeli (Native browser, Chrome, Safari...).
- OS: Tüm sayfalar bilinen tüm işletim sistemlerinde test edilmeli (Windows, Android, iOS, Mac...).
- Pixel perfect: Sayfanız hazırlanan tasarımla %100 aynı olmasada buna oldukça yakın olmalı.
- Reading direction: Eğer desteklenecekse tüm sayfalar LTR ve RTL diller için test edilmeli.
Görseller
Not: Resim optimizasyonunu hakkında detaylı bilgi için ücretsiz ekitap'dan faydalanın. Essential Image Optimization from Addy Osmani.
En iyi teknikler
- Optimization: Tüm görseller tarayıcıda kullanılmadan önce optimize edilmelidir. Anasayfa gibi önemli sayfalarda WebP formatını kullanabilirsiniz.
- 🛠 Imagemin
- 🛠 ImageOptim ile resimlerinizi ücretsiz şekilde optimize edebilirsiniz.
- 🛠 Kraken.io da png ve jpg optimizasyonu için başarılı çözümler bulabilirsiniz. 1mb'a kadar olan dosyalar ücretsiz plana dahil.
- Picture/Srcset: Kullanıcının ekran boyutuna göre en uygun resmin görüntülenmesi için srcset özelliği kullanılmalıdır.
- Retina: Retina desteği için görsellerin 2x ve 3x formatları bulunmalıdır.
- Sprite: Küçük resimler bir sprite dosyasında yer almalıdır (ikonlar SVG sprite dosyalarında bulunabilir).
- Width and Height: Eğer render edilecek görselin boyutları biliniyorsa
<img>elementlerininwidthveheightdeğerleri girilmelidir (CSS üzerinden boyutlandırmalarda kullanılmayabilir). - Alternative text: Tüm
<img>elementleri görseli açıklayan bir yazı barındırmalıdır.
- Lazy loading: Resimler lazyload ile yüklenmeli. (Daima bir noscript alternatifi bulunmalı).
JavaScript
En iyi teknikler
- JavaScript Inline: Javascript kodlar döküman içinde kullanılmamalı (HTML kodu ile karışık şekilde).
- Concatenation: Javascript dosyaları birleştirilmeli.
- Minification: JavaScript dosyaları sıkıştırılmalı (
.minsoneki kullanılabilir).
- JavaScript security:
- Non-blocking: JavaScript dosyaları asenkron(
async) ya da defer(defer) ile yüklenmeli.
- Modernizr: Bazı özel nitelikleri hedeflemeniz gerekiyorsa,
<html>etiketinize sınıf eklemek için özel bir Modernizr kullanabilirsiniz.
JavaScript testing
- ESLint: ESLint ile herhangi bir hata almamalısınız (Standart kurallara ya da kendi ayarlarınıza göre).
Güvenlik
Web sitenizi tarayın ve kontrol edin
Best practices
- HTTPS: Tüm sayfalar ve harici içeriklerde HTTPS kullanılmalı (eklentiler, resimler...).
- HTTP Strict Transport Security (HSTS): HTTP header'ı 'Strict-Transport-Security' şeklinde ayarlanmalı.
- Cross Site Request Forgery (CSRF): CSRF saldırılarını önlemek ve sunucuya yapılan isteklerin doğruluğu için gelen isteklerin web sitenizden / uygulamanızdan geldiğine emin olun.
- Cross Site Scripting (XSS): Sayfanız veya web siteniz, olası XSS sorunları içermemeli.
- Content Type Options Google Chrome ve Internet Explorer'ın bir yanıtın içerik türünü sunucu tarafından bildirilenlerden farklı olarak algılamasını(mime-sniff) önler.
- X-Frame-Options (XFO) Ziyaretçilerinizi tıklama saldırılarına karşı koruyun.
- Content Security Policy İçeriğin sitenizde nasıl yüklendiğini ve nerede yüklenmesine izin verdiğini tanımlar. Ayrıca tıklama saldırılarına karşı koruma sağlamak için de kullanılabilir.
Performans
En iyi teknikler
- Page weight: Sayfa boyutları 0 ile 500 KB arasında olmalı.
-
Minified HTML:
HTML'i sıkıştırmalısınız. -
Lazy loading:
Resim, script ve CSS dosyaları sayfa yanıt süresini iyileştirmek için lazyload ile yüklenmeli (Detaylı bilgiye kendi başlıkları altından ulaşılabilir). -
Cookie size:
Eğer çerez kullanıyorsanız, her bir çerezin 4096 bayttan fazla olmadığına ve alan adınızın 20'den fazla çerez içermediğine emin olun.
- Third party components: Harici JS dosyalarına dayanan 3.parti iframe uygulamaları veya eklentiler mümkün oldukça statik eklentiler ile değiştirilmelidir. Böylece harici api çağrıları limitlenerek ziyaretçi aktiviteleri gizli kalabilir.
Yaklaşan istekleri hazırlama
- DNS resolution: Gerekli olabilecek üçüncü parti servislerin DNS'leri, boşta kalma süresi boyunca
dns-prefetchile çözümlenir.
<link rel="dns-prefetch" href="https://example.com">
- Preconnection: DNS lookup, TCP handshake ve servislerin TLS negotiation aşamaları için
preconnectkullanıldı.
<link rel="preconnect" href="https://example.com">
- Prefetching: İhtiyaç duyulacak kaynaklar (örn. lazyload resimler), yükleme esnasında
prefetchile getirildi.
<link rel="prefetch" href="image.png">
- Preloading: Geçerli sayfada gerekli olan kaynaklar (örneğin,
<body>sonuna yerleştirilen scriptler) 'preload' ile işlendi.
<link rel="preload" href="app.js">
Performans Testleri
- Google PageSpeed: TÜm sayfalar test edildi ve her biri en azından 100 üzerinden 90 puan alıyor.
Ulaşılabilirlik
Not: Oynatma Listesi için: A11ycasts with Rob Dodson 📹
En iyi teknikler
- Progressive enhancement: Navigasyon ve arama gibi sayfanın önemli işlevleri Javascript etkin olmadan da kullanılabilmeli.
- Color contrast: Renk kontrastı en azından WCAG AA(Mobil için AAA)'yı geçmelidir
Başlık Etiketleri
- H1: Her sayfa sayfa başlığından farklı bir H1 içermeli.
- Headings: Başlık etiketleri doğru sırada kullanılmalı (H1'den H6'ya).
Landmarks
- Role banner:
<header>,role="banner"içeriyor. - Role navigation:
<nav>,role="navigation"içeriyor. - Role main:
<main>,role="main"içeriyor.
Semantikler
- Specific HTML5 input types are used: Özelleştirilmiş tuş takımları ve farklı türdeki araçlar kullanan mobil cihazlar için önem arz eder.
Form
- Label: Her input öğesi bir label öğesi ilse ilişkilendirildi. Label'in görüntülenemediği durumlar için
aria-labelkullanılmalı.
Erişilebilirlik testleri
- Accessibility standards testing: Sayfanızın erişilebilirlik standartlarına uyup uymadığını test etmek için WAVE aracını kullanın.
- Keyboard navigation: Web sitenizi klavyenizi kullanarak test edin. Tüm etkileşimli öğeler, erişilebilir ve kullanılabilir olmalı.
- Screen-reader: Tüm sayfalar ekran okuyucuda test edildi (VoiceOver, ChromeVox, NVDA ve Lynx).
- Focus style: Odak devre dışıysa, CSS'ile aktif hale getirildi.
SEO
- Google Analytics: Google Analytics kurulmalı ve doğru şekilde yapılandırılmalı.
- Headings logic: Başlık metni daima geçerli sayfadaki içeriğin anlaşılmasına yardımcı olmalı.
- sitemap.xml: Bir sitemap.xml bulunmalı ve Google Search Console'a (eski adıyla Google Webmaster Araçları) gönderilmeli.
- robots.txt: robots.txt sayfaları engellememeli.
- 🛠 Google Robots Test Aracı ile robots.txt'i test edin.
- Structured Data: Yapısal verileri kullanan sayfalar test edilmeli ve hata içermemeli. Yapılandırılmış veriler, örümceklerin geçerli sayfadaki içeriği anlamalarına yardımcı olur.
- 📖 Yapılandırılmış Verilere Giriş - Search - Google Developers
- 📖 RDFa - Linked Data in HTML
- 📖 JSON-LD
- 📖 Microdata
- 🛠 Yapısal Veri Test Aracı ile sayfanızı test edin.
- 🛠 Yapısal veriler olarak kullanılabilecek tüm sözlüklerin listesi. Schema.org Tam Hiyerarşi
- Sitemap HTML: HTML sitemap'iniz bulunmalı ve sitenizin footer'ından bir link aracılığı ile ulaşılır olmalı.
- Pagination link tags: Sayfalanan içeriklerin linkleri
rel="prev"verel="next"içermeli.
<!-- Örnek: Sayfalama listesinde bulunan 2.sayfanın linkleri -->
<link rel="prev" href="https://example.com/?page=1">
<link rel="next" href="https://example.com/?page=3">
Çeviri
Front-End Checklist diğer dillerde de mevcuttur. Tüm çevirmenlerlere teşekkürler!
- 🇯🇵 Japanese: miya0001/Front-End-Checklist
- 🇪🇸 Spanish: eoasakura/Front-End-Checklist-ES
- 🇨🇳 Chinese: JohnsenZhou/Front-End-Checklist
- 🇰🇷 Korean: kesuskim/Front-End-Checklist
- 🇧🇷 Portuguese: jcezarms/Front-End-Checklist
- 🇻🇳 Vietnamese: euclid1990/Front-End-Checklist
- 🇹🇼 Traditional Chinese: EngineLin/Front-End-Checklist
- 🇫🇷 French: ynizon/Front-End-Checklist
Front-End Checklist Rozeti
Front-End Checklist Listesinin kurallarını izlediğinizi göstermek isterseniz bu rozeti Benioku dosyasında kullanabilirsiniz.
➔
[](https://github.com/thedaviddias/Front-End-Checklist/)
Katkıda Bulunma
Değişiklikler veya eklemeler önermek için issue açabilir veya pull sorgusu gönderebilirsiniz.
Guide
Front-End Checklist iki alt daldan oluşur:
1. master
Bu dal otomatik olarak Front-End Checklist 'e yansıtılan' README.md 'dosyasından oluşur.
2. develop
Bu dal, içeriğe gerektiği takdirde önemli değişiklikler yapmak için kullanılacaktır. Küçük hataları düzeltmek veya yeni bir madde eklemek için ana dalın kullanılması tercih edilir.
Destek
Herhangi bir sorunuz veya öneriniz varsa, Gitter veya Twitter'ı kullanmaktan çekinmeyin:
Yazar
Katkıda Bulunanlar
Projeyi bu noktaya getiren tüm katılımcılara teşekkürler.[Katkıda Bulun]. <a href="https://github.com/thedaviddias/Front-End-Checklist/graphs/contributors"><img src="https://opencollective.com/front-end-checklist/contributors.svg?width=890" /></a>
Destekleyenler
Destekleyen herkese teşekkürler! 🙏 [Destekle]
<a href="https://opencollective.com/front-end-checklist#backers" target="_blank"><img src="https://opencollective.com/front-end-checklist/backers.svg?width=890"></a>
Sponsorlar
Destek olmak için projeye sponsor ol. Sitenizin linkini içeren logonuz burada görüntülenecek. [Sponsor Ol]
<a href="https://opencollective.com/front-end-checklist/sponsor/0/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/0/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/1/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/1/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/2/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/2/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/3/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/3/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/4/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/4/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/5/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/5/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/6/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/6/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/7/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/7/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/8/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/8/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/9/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/9/avatar.svg"></a>
Lisans
