Frontend Yol Haritası - Evrensel Kod

Bu yazımızda Frontend geliştirici olmak isteyenler için izleyebileceği adımları bir araya ve bir frontend yol haritası oluşturduk.

Öncelikle bilmeyenler için fronend nedir ? sorusunu yanıtlayarak başlayalım.

Frontend Nedir ?

Türkçede önyüz anlamına gelmektedir. Web siteleri geliştirirken kullanıcının gördüğü ve duyduğu kısımlar(client-side) için yapılan tüm işlemlere frontend denir.

Frontend Developer Nedir ?

Türkçe karşılığı önyüz geliştiricidir. Fakat daha çok Frontend geliştirici veya frontend developer olarak kullanılmaktadır. HTML, CSS ve Javascript gibi teknolojileri kullanarak web site kullanıcılarının gördüğü kısımları tasarlayan kişilere frontend developer denir.

Frontend Developer Yol Haritası

Haritada göreceğiniz harf ve renklerin anlamları :

Kırmızı renkte olan yazılara tıklayarak ilgili ders anlatımına ulaşabilirsiniz.
(a) = alternatif
(h) = Herhangi bir zamanda öğrenebilirsin.

İnternet

1. İnternet nasıl çalışır ?
2. HTTP nedir ?
3. Tarayıcılar nasıl çalışır ?
4. DNS nedir ve nasıl çalışır ?
5. Domain nedir ?
6. Hosting Nedir ?

HTML

HMTL

1. Temellerini öğrenin.
2. Semantik elementleri öğrenin.
3. Formlar ve form doğrulama
4. Seo temelleri (h)
5. Bol bol pratik yapın.

Detaylı bilgi için ‘HTML Yol Haritası’ adlı yazımıza bakabilirsiniz.

CSS

1. Temellerini öğrenin.
2. Sayfa düzeni
   2.1 – Float
   2.2 – Konumlandırma
   2.3 – Display
   2.4 – Kutu model (Box model)
   2.5 – Flexbox
3. Responsive (Duyarlı) Tasarım
4. Pratik

Javascript

1. Sözdizimi ve temel yapılar
2. Js temelleri pratik ve alışma
3. Dom nedir ?
4. Fetch API kullanımı
5. JavaScript Modül Sistemi (ES Modules)

Sürüm Kontrol Sistemleri

1. Git’in Temel Kullanımı
2. Repository Barındırma Hizmetleri
   2.1 – GitHub
   2.2 – GitLab (a)
   2.3 – Bitbucket (a)

Web Güvenliği

Web Güvenliği (h)

1. HTTPS
2. CORS
3. İçerik Güvenliği Politikası
4. OWASP Güvenlik Riskleri

Paket Yönetim Sistemi

1. npm
2. yarn
(npm veya yarn’dan herhangi birisini seçebilirsin.)

CSS Mimarisi

1. BEM
2. OOCSS (a)
3. SMACSS (a)

CSS Önderleyicileri (CSS Preprocessors)

1. Sass
2. PostCSS (a)
3. Less (a)

Yapı araçları

1. Görev çalıştırıcı
   1.1 – npm scripts
2. Modül paketleyiciler
   2.1 – Webpack
   2.2 – Esbuild
   2.3 – Rollup (a)
   2.4 – Parcel (a)
   2.5 – Vite (a)
3. Linters ve biçimlendiriciler
   3.1 – Prettier
   3.2 – ESLint (a)
   3.3 – StandartJS (a)

Bir Framework Seç

1. React
   1.1 – Redux
   1.2 – MabX (a)
   1.3 – Recoil (a)
2. Angular (a)
   2.1 – RxJS
   2.2 – NgRx (a)
3. Vue.js (a)
   3.1 – VueX

Modern CSS

1. Styled Components kütüphanesi
2. CSS Modülü
3. Styled JSX kütüphanesi (a)
4. Emotion kütüphanesi (a)

Web Bileşenleri

Web Bileşenleri (h)

1. HTML Şablonları
2. Özel elementler (Custom Elements)
3. Shadow DOM

CSS Frameworkleri

1. CSS Tabanlı
   1.1 – Boostrap
   1.2 – Bulma (a)
2. Javascript Tabanlı
   2.1 – Tailwind CSS
   2.2 – Chakra UI (a)
   2.3 – Material UI (a)
   2.4 – Radix UI (a)

Uygulamalarınızı Test Etme

1. Jest
2. react-testing-library (a)
3. Cypress (a)
4. Enzyme (a)

Tip Denetçileri

Tip Denetçileri (h)

1. TypeScripts
2. Flow (a)

Sunucu Tarafında Oluşturma

Sunucu Tarafında Oluşturma (h)

1. React
   1.1 – Next.js
   1.2 – After.js
2. Angular (a)
   2.1 – Universal
3. Vue.js (a)
   3.1 – Nuxt.js

Graphql

Graphql (h)

1. Apollo (a)
2. Relay Modern

Statik Website Oluşturucuları

Statik Website Oluşturucuları (h)

1. Next.js
2. Hatsby.js
3. Nuxt.js (a)
4. Vuepress (a)
5. Jakll (a)
6. Hugo (a)
7. Gridsome (a)
8. Eleventy (a)

Mobil Uygulama Geliştirme

Mobil Uygulama Geliştirme (h)

1. React Native
2. Flutter (a)
3. NativeScript (a)
4. Ionic (a)

Masaüstü Uygulama Geliştirme

Masaüstü Uygulama Geliştirme (h)

1. Electron

Web Assembly

Web Assembly (a)

Pratik ve Devamlılık

Bol bol pratik yapın ve öğrenmeye devam edin.

Bu yazımızda Frontend geliştirici neler öğrenmeli ? sorusunu frontend yol haritası çıkartarak yanıtladık . Umarım faydalı olmuştur.