Adım Adım Web Uygulaması İnşası: Front‑end’den Back‑end’e Kapsamlı Rehber

Tech · 30 Tem 2025

Web Geliştirme 101

Genel Açıklama
Web geliştirme, iki ana katmandan oluşur: Front‑end (istemci tarafı) ve Back‑end (sunucu tarafı). İstemci tarafı, kullanıcıyla direkt etkileşimi sağlar; sunucu tarafı ise veri yönetimi, iş mantığı ve güvenlik işlemlerini yürütür.

Front‑end Nedir?
Front‑end, bir web sitesinin veya uygulamanın kullanıcıya sunulan bölümüdür. Geliştiriciler, HTML, CSS ve JavaScript dilleriyle UI (Kullanıcı Arayüzü) ve UX (Kullanıcı Deneyimi) odaklı tasarımlar hazırlar. UI frameworkleri (ör. Bootstrap, Tailwind CSS) sayesinde tekrarlanabilir bileşenlerle hızlıca profesyonel görünümler oluşturulabilir.

Back‑end Nedir?
Back‑end, web uygulamasının sunucu tarafındaki tüm işlevleri kapsar. Burada veritabanı işlemleri, API geliştirme, kullanıcı kimlik doğrulama ve dosya yönetimi gibi görevler gerçekleştirilir. Node.js, PHP, Python, Ruby, Java, C#, Go ve daha fazlası bu katmanda tercih edilen diller arasındadır.

Framework Nedir?
Framework, yaygın tekrar eden kod kalıplarını soyutlayarak geliştirmeyi hızlandıran ve standartlaştıran bir yazılım iskeletidir.

[]UI Frameworkleri: Front‑end bileşenlerini yönetir ve ön tanımlı stiller sunar.
[]Back‑end Frameworkleri: MVC, ORM gibi mimarilerle sunucu kodunuzu düzenler ve bir dizi hazır işlev sağlar.

Front‑end Geliştirme İçin Temel Diller

[]https://www.w3schools.com/html/]HTML[/B[/URL]]
[]https://www.w3schools.com/css/]CSS[/B[/URL]], sass[/URL%5D%5B/B']https://sass-lang.com]Sass[/B[/URL]], less[/URL%5D%5B/B']https://lesscss.org]Less[/B[/URL]]
[*]javascript[/URL%5D%5B/B']https://www.javascript.com]JavaScript[/B[/URL]]

UI Frameworkleri

[]bootstrap[/URL%5D%5B/B']https://getbootstrap.com]Bootstrap[/B[/URL]]
[]tailwind/']https://tailwindcss.com]Tailwind CSS[/URL]
[]uikit[/URL%5D%5B/B']https://getuikit.com]UIKit[/B[/URL]]
[]https://www.w3schools.com/w3css/]w3.css[/B[/URL]]
[]chakra/']https://chakra-ui.com]Chakra UI[/URL]
[]semantic/']https://semantic-ui.com]Semantic UI[/URL]

Front‑end Frameworkleri

[]react[/URL%5D%5B/B']https://react.dev]React[/B[/URL]]
[]vue[/URL%5D%5B/B']https://vuejs.org]Vue[/B[/URL]]
[]svelte[/URL%5D%5B/B']https://svelte.dev]Svelte[/B[/URL]]
[]solid[/URL%5D%5B/B']https://www.solidjs.com]Solid[/B[/URL]]
[]lit[/URL%5D%5B/B']https://lit.dev]Lit[/B[/URL]]
[]qwik[/URL%5D%5B/B']https://qwik.builder.io]Qwik[/B[/URL]]
[]marko[/URL%5D%5B/B']https://markojs.com]Marko[/B[/URL]]
[]angular[/URL%5D%5B/B']https://angular.io]Angular[/B[/URL]]
[]alpine.js[/URL%5D%5B/B']https://alpinejs.dev]Alpine.js[/B[/URL]]
[]ember.js[/URL%5D%5B/B']https://guides.emberjs.com]Ember.js[/B[/URL]]

Popüler Back‑end Frameworkleri

[]JS: express, fastify, adonisjs
[]Golang: gin, gofiber[-pf3f/URL']https://docs.gofiber.io]Go‑fiber[/URL]
[]Java: spring, javalin
[]C#: .NET (ASP.NET Core)
[]Rust: rocket
[]Nim: https://github.com/dom96/jester]Jester[/URL]
[]Ruby: ruby/']https://guides.rubyonrails.org]Ruby on Rails[/URL]
[]Lua: https://leafo.net/lapis]Lapis[/URL], openresty
[]Python: django, flask
[]PHP: laravel veya vanilla PHP

Temel Terimler

Front‑end Terimleri

[]SPA (Single Page Application): Tek sayfa üzerinde dinamik uygulamalar.
[]CSR (Client‑Side Rendering): İçerik tarayıcıda işlenir.
[]AJAX: Sayfa yenilemeden veri aktarımı.
[]Cache: Tarayıcı önbelleği.
[]Cookie: Tarayıcıda saklanan küçük veri.
[]LocalStorage / SessionStorage: Tarayıcı temelli veri depolama.
[]Responsive Design: Farklı cihazlara uyumlu tasarım.
[]Navbar / Footer: Menü ve altbilgi bölümleri.

Back‑end Terimleri

[]API: Uygulamalar arası programlama arabirimi.
[]Veritabanı: Verilerin organize şekilde saklandığı sistem.
[]MVC: Model‑View‑Controller mimarisi.
[]ORM: Nesne ilişkisel eşleme.
[]Sunucu: İstemci isteklerini karşılayan makine.
[]Güvenlik: Kimlik doğrulama, yetkilendirme ve saldırı koruması.

Roadmap’ler

[]https://roadmap.sh/frontend]Front‑end Development Roadmap[/URL]
[]https://roadmap.sh/backend]Back‑end Development Roadmap[/URL]
[]https://roadmap.sh/fullstack]Full‑stack Development Roadmap[/URL]
[]https://roadmap.sh/javascript]JavaScript Roadmap[/URL]
[]https://roadmap.sh/golang]Golang Roadmap[/URL]
[]https://roadmap.sh/sql]SQL Roadmap[/URL]

https://roadmap.sh/mongodb]MongoDB Roadmap[/URL]

Kaynaklar

Front‑end Yazılı Kaynaklar

[]https://www.w3schools.com/html/]HTML[/URL]
[]https://www.w3schools.com/css/]CSS[/URL]
[]sass
[]less
[]javascript
[]react
[]vue
[]svelte
[]solid
[]lit
[]qwik
[]marko
[]angular
[]alpine.js
[]ember.js
[]bootstrap
[]tailwind/']https://tailwindcss.com]Tailwind CSS[/URL]
[]uikit
[]https://www.w3schools.com/w3css/]w3.css[/URL]
[]chakra/']https://chakra-ui.com]Chakra UI[/URL]

semantic/']https://semantic-ui.com]Semantic UI[/URL]

Videolu Kaynaklar

[]golang/']https://www.youtube.com]Golang, Gin Tutorial (14 video)[/URL]
[]java/']https://www.youtube.com]Java Spring Dersleri (26 video)[/URL]

express/']https://www.youtube.com]Express & MongoDB Dersleri (39 video)[/URL]

PDF’ler

[]gingonic-m09f/']https://objectcomputing.com]Gin‑Gonic, SQL, PostgreSQL[/URL]
[]gofiber[-l09f/URL']https://www.nylas.com]Go‑fiber[/URL]
[]java/']https://www.tutorialspoint.com]Java Spring[/URL]
[]java/']https://edeleastar-portfolio.github.io]Java Javalin[/URL]
[]express
[]asp.net

php

Awesome Serileri

[]Awesome SQL
[]Awesome GO
[]Awesome JavaScript
[]Awesome PHP
[]Awesome Express.js
[]Awesome Ruby on Rails
[]Awesome Nim
[]Awesome Python - Django

Awesome MongoDB

Hepsi Bir Arada

[]w3schools
[]patika.dev
[]tutorialspoint
[]prototrk[-5ob/URL']https://prototurk.com]ProtoTürk[/URL]

Kolay Öğrenme Yolları
GitHub’da “awesome” etiketiyle arama yaparak ilgili paketleri, dökümantasyonları ve örnek projeleri keşfedebilirsiniz. PDF tercih edenler, Google’da -filetypedf operatörü ile “JavaScript -filetypedf” aramasıyla kaliteli notlara ulaşabilir. Video odaklı öğrenim için FreeCodeCamp, YouTube veya Udemy gibi platformları tercih edebilirsiniz.

Alıştırma Yapabileceğiniz Web Siteleri
Front‑end

[]frontend/']https://www.frontendmentor.io]Frontend Mentor[/URL]
[]css/']https://cssbattle.dev]CSS Battle[/URL]
[]codevember
[]daily/']https://www.dailyui.co]Daily UI[/URL]
[]exercism

Back‑end

[

]replit/']https://replit.com]Replit Bounties[/URL]

Genel

hackerrank

Örnek Projeler

[]Portfolyo Sitesi: Kişisel tanıtım ve projelerinizi sergilemek için ideal.
[]Todo Uygulaması: CRUD işlemleri ve veri yönetimi pratiği.

Blog Sitesi: Dinamik içerik yönetimi, kullanıcı yorumları ve entegrasyonlar.

Kariyerinizi Destekleyecek Kaynaklar

[]YouTube: Patika.dev, Fireship, Kevin Powell, Jon Gjengset, PROTOTURK, Web Makinesi, TECH SCHOOL, GO TÜRKİYE
[]GitHub: Can Değer, fabacab, TheComputerM

Discord: Kamp.us, Kodluyoruz

Kendi Dökümantasyonlarımız
Fork ederek katkı sağlayabileceğiniz rehberler: Golang Dersleri, HTML Dökümantasyonu, React Dökümantasyonu, Svelte Dökümantasyonu.

About
Bu GitHub deposu, web geliştirmeye ilk adımı atmak isteyenler için kapsamlı bir rehberdir. Front‑end ve Back‑end konularını adım adım ele alır. Detaylar için:
[URL='https://hasan-kilici.github.io/web-gelistirme-101/%5B/URL']https://hasan-kilici.github.io/web-gelistirme-101/[/URL]

Adım Adım Web Uygulaması İnşası: Front‑end’den Back‑end’e Kapsamlı Rehber

Tech