Front-end, bir web sitesinin veya uygulamanın arayüzünü kullanıcılarla etkileşime sokmak için oluşturulan kısım olarak tanımlanabilir. Front-end geliştiricileri, HTML, CSS ve JavaScript gibi dilleri kullanarak sitenin kullanıcı arayüzünü oluştururlar. UI (User Interface) frameworkleri de kullanarak, hazır şablonlarla veya bileşenlerle arayüzün tasarımını hızlı bir şekilde oluşturabilirler.
Back-end, bir web sitesinin veya uygulamanın arka tarafındaki işlemleri yönetir. Back-end geliştiricileri, sunucu tarafı programlama dilleri (örn. Node.js, PHP, Python, Ruby, Java, C#, Go) kullanarak, sunucuda veritabanlarına erişim, dosya yükleme ve işleme, kullanıcı kimlik doğrulama ve yetkilendirme gibi işlemleri gerçekleştirirler.
Front-end ve back-end, bir web sitesinin veya uygulamanın temelini oluştururlar ve birbiriyle etkileşim halinde çalışırlar.
Framework, bir yazılım veya uygulama geliştirmede kullanılan temel yapı veya çatıdır. UI (User Interface) frameworkleri, front-end geliştiricilerinin hazır bileşenler veya şablonlar kullanarak hızlıca arayüz tasarlamasını sağlar. Back-end frameworkleri ise sunucu tarafı işlemlerini yönetmek için kullanılır ve belirli işlevleri gerçekleştirmek için gerekli yapıları ve araçları sağlar. Frameworkler, geliştirme sürecini hızlandırmak, tekrar kullanılabilir kod oluşturmak ve proje yönetimini kolaylaştırmak gibi avantajlar sağlar.Web geliştirme, kendi içinde iki alana ayrılır: Front-end (site arayüzü geliştirme) ve Back-end (sunucu tarafı geliştirme).
Front-end geliştirmek için kullanabileceğiniz diller ve stylesheetler aşağıdaki gibidir:
Frameworklerin birden fazla türü vardır ancak burada iki türden bahsedeceğim: UI frameworkleri ve Front-end frameworkleri.
UI frameworkleri şunlardır :
Front-end frameworkleri ise şunlardır :
Back-end tarafında ise istediğiniz programlama dilinde yazabilirsiniz. Bazı popüler back-end frameworkleri şunlardır:
- JS: Express, Fastify, Adonis
- Golang: Gin, Go-fiber
- Java: Spring, Javalin
- C#: .NET
- Rust: Rocket
- Nim: Jester
- Ruby: Ruby on Rails
- Lua: Lapis, OpenResty
- Python : Django, Flask
- PHP
PHP de kullanabileceğiniz bir diğer seçenek olabilir. Mikroservisler, direkt viewport kullanımı ya da Laravel kullanımı gibi farklı PHP kullanım alanları bulunmaktadır.
- SPA (Single Page Application): Tek sayfa uygulamaları anlamına gelir. Kullanıcının sayfa yenilemesine gerek kalmadan arka planda dinamik olarak sayfa içeriği değiştirilebilir.
- CSR (Client Side Rendering): İstemci taraflı renderleme anlamına gelir. Sayfa içeriği istemci tarafında (tarayıcıda) hazırlanır.
- AJAX (Asynchronous JavaScript and XML) : Sayfa yenilemeden veri alışverişi yapmak için kullanılan bir tekniktir.
- Cache : Tarayıcıda kaydedilen verilerin tekrar kullanımını sağlayan bir mekanizmadır.
- Cookie : Kullanıcının tarayıcısına kaydedilen küçük bir veri parçasıdır. Genellikle kullanıcı tercihlerini, giriş bilgilerini veya alışveriş sepetini tutmak için kullanılır.
- LocalStorage : Tarayıcının yerel depolama alanıdır. Kullanıcı tercihlerini, sepet bilgilerini veya diğer verileri tutmak için kullanılabilir.
- SessionStorage : Tarayıcının oturum depolama alanıdır. Kullanıcı oturumu boyunca geçerli olan verileri tutmak için kullanılır.
- Responsive Design : Web sitesinin farklı ekran boyutlarına uyumlu olacak şekilde tasarlanmasıdır.
- Navbar : Web sitesindeki gezinme menüsüdür.
- Footer : Web sitesinin alt kısmındaki alan. Genellikle iletişim bilgileri, sosyal medya bağlantıları ve site haritası gibi bilgiler içerir.
- UI (User Interface): Kullanıcı arayüzü anlamına gelir. Kullanıcının siteye etkileşimli bir şekilde erişimini sağlayan tasarım ve kullanıcı deneyimi unsurlarını kapsar.
- UX (User Experience): Kullanıcı deneyimi anlamına gelir. Kullanıcının siteyle etkileşimini, siteye erişimini ve kullanımını kapsayan tüm deneyimi içerir.
- WYSIWYG (What You See Is What You Get): Kullanıcının içerik oluşturma sürecinde gerçek zamanlı olarak nasıl göründüğünü görebildiği bir arayüz anlamına gelir.
- Debugging : Kodun hatalarını tespit etmek
- Sunucu : İstemci bilgisayarların isteklerini işleyen ve cevap veren bir bilgisayardır.
- API (Uygulama Programlama Arayüzü) : İki farklı yazılım uygulaması arasında veri alışverişine izin veren bir arabirimdir.
- Veritabanı : Verilerin depolandığı ve yönetildiği bir sistemdir.
- Framework : Yazılım geliştirmede kullanılan, genel problemleri çözmek için tasarlanmış bir çerçeve veya temel yapıdır.
- MVC (Model-View-Controller) : Web uygulamalarının kodunun organizasyonunu sağlamak için kullanılan bir mimaridir.
- ORM (Nesne İlişkisel Eşleştirme) : Veritabanı nesnelerinin programlama dili nesnelerine eşleştirilmesine izin veren bir teknolojidir.
- Depolama : Verilerin uzun vadeli saklanması ve yönetilmesi için kullanılan bir sistemdir.
- Güvenlik : Web uygulamalarının güvenliği ile ilgili konuları ele alır, örneğin kimlik doğrulama, yetkilendirme ve saldırı tespiti ve koruması gibi konuları içerir.
- HTML
- CSS
- Sass
- Less
- JS
- React
- Vue
- Svelte
- Solid
- Lit
- Qwik
- Marko
- Angular
- Alpine
- Ember
- Bootstrap
- Tailwind
- UIKit
- w3.css
- Chakra UI
- Sematic UI
- Nadun Indunil - Material UI
- HTML,CSS,JS,BOOTSTRAP,JQUERY Dersleri (172 video)
- Kodluyoruz HTML Dersleri
- React dersleri (35 Video)
- Svelte dersleri (13 Video)
- Vue Bootcamp (23 Video)
- CSS Dersleri (103 Video)
- Kodluyoruz Front-End Dersleri (49 Video)
- Javascript
- Karabük üniversitesi Javascript ders notları
- İmmi bilişim Javascript
- CSS Ders Notları
- Harran ünversitesi CSS Ders notları
- Murat KARA HTML,CSS
- BOOTSTRAP HAZIR CSS-JS KÜTÜPHANESİ İLE HIZLI WEB SAYFASI TASARIMI
- Tailwind
- React
- Svelte
- Vue
- MUI
- alternative-front-ends
- awesome react
- awesome svelte
- awesome sveltekit
- awesome vue
- CSS PROTIPS
- awesome tailwind
- awesome bootstrap
- awesome html5
- awesome js - videolu anlatımlar
- Express, Fastify, Adonis
- Gin, Go-fiber
- Spring, Javalin
- .NET
- Rocket
- Jester
- Ruby on Rails
- Lapis, OpenResty
- Django, Flask
- PHP
- SQL
- MongoDB
- Golang, gin Tutorial (14 video)
- Java Spring dersleri (26 video)
- Express, mongodb dersleri (39 video)
Programlama dilini veya bir paketi öğrenmek için en kolay yol, Github'da "awesome" etiketi ile arama yapmaktır. Bu şekilde, ilgili paket veya programlama dili ile ilgili terimleri, paketleri ve kodları görürsünüz. Ayrıca, pdf okumayı tercih edenler için, Google'da
"-filetype:pdf" şeklinde arama yaparak örnek olarak "Javascript -filetype:pdf" gibi aramalar yapabilirsiniz. Eğer yazılım öğrenmek için videoları tercih ediyorsanız, Youtube veya freecodecamp gibi platformlarda arama yapabilirsiniz. Ancak, freecodecamp gibi kaynaklar daha verimli sonuçlar verebilir.
- Gin-gonic : Hızlı ve basit bir HTTP web çatısıdır.
- net/http : Go'nun standart kitaplığındaki HTTP paketi, web uygulamaları geliştirmek için kullanılır.
- gorilla/mux : Güçlü bir yönlendirici ve URL eşleme paketidir.
- MongoDB sürücüsü : MongoDB veritabanına erişmek için kullanabileceğiniz sürücü paketleri, örneğin go-mongo-driver veya mgo.
- GORM : Veritabanı işlemlerini basitleştiren bir ORM (Object Relational Mapping) paketi.
- go-cache : Önbellek yönetimi için bir paket.
- jwt-go : JSON Web Token (JWT) oluşturmak ve doğrulamak için kullanılan bir paket.
- bcrypt : Parola şifreleme için kullanılan bir paket.
- crypto/rand : Rastgele sayı ve bayt oluşturma için kullanılan paket.
- Express : Web uygulamaları oluşturmak için hafif bir ve esnek bir framework.
- Mongoose : MongoDB veritabanı için modeller oluşturmak ve sorguları yönetmek için kullanılan bir ORM (Object-Relational Mapping) aracı.
- Sequelize : SQL tabanlı veritabanları için ORM aracı.
- Passport : Kimlik doğrulama ve yetkilendirme için kullanılan bir middleware.
- Socket.io : Gerçek zamanlı, iki yönlü iletişim için kullanılan bir kütüphane.
- Morgan : HTTP istekleri için loglama aracı.
- Moment : Tarih ve saat işlemleri için kullanılan bir kütüphane.
- Rocket.rs : Web uygulamaları oluşturmak için hafif bir ve esnek bir framework.
- Diesel : SQL tabanlı veritabanları için ORM (Object-Relational Mapping) aracı.
- Serde : Veri seri hale getirme ve deseri hale getirme işlemleri için kullanılan bir kütüphane.
- Tokio : Asenkron I/O işlemleri için kullanılan bir kütüphane.
- Actix : Hızlı ve paralel çalışan HTTP sunucuları ve istek işleme için kullanılan bir framework.
- Warp : Hızlı ve esnek HTTP framework'ü.
- Log : Loglama için kullanılan bir kütüphane.
- Rustls : Güvenli bağlantılar (TLS) için kullanılan bir kütüphane.
- Spring Framework : Java için en popüler web framework'lerinden biridir ve birçok açık kaynaklı projede kullanılır. MVC (Model-View-Controller) mimarisine dayalıdır ve RESTful API'lerin yanı sıra tam özellikli web uygulamaları oluşturmak için kullanılabilir.
- Javalin : Kullanımı kolay, hafif bir web framework'tür ve Kotlin ve Java'yı destekler. Javalin, web uygulamalarının hızlı bir şekilde geliştirilmesini sağlayan birçok özellik sunar ve basit bir API'ye sahiptir.
- Spark Framework : Java ve Kotlin için minimalist bir web framework'tür. RESTful API'lerin hızlı bir şekilde oluşturulması için tasarlanmıştır ve Java 8+ veya Kotlin 1.4+ gerektirir.
- Play Framework : Reactive web uygulamaları oluşturmak için kullanılan bir web framework'tür. Scala ve Java için kullanılabilir ve asenkron işlemeyi destekler. Play Framework, birçok bileşen ve özelliğe sahiptir, ancak öğrenmesi biraz zor olabilir.
- Jester : Hızlı, esnek ve kolay kullanımlı bir web framework'ü.
- Karax : Web uygulamaları için client-side rendering yapmak için kullanılan bir framework.
- Httpbeast : HTTP sunucusu için minimalist ve hızlı bir seçenek.
- Redis : NoSQL veritabanı, önbellek ve mesaj kuyruğu için kullanılır.
- SQLite : Hafif ve yerel bir SQL veritabanı.
- PostgreSQL : İlişkisel veritabanı yönetim sistemi için açık kaynaklı bir seçenek.
- Flask : Basit ve esnek bir web frameworküdür. Tek bir dosyada bir uygulama yazmanızı sağlar.
- Django : Tam teşekküllü bir web frameworküdür. Veritabanı yönetimi, otomatik form oluşturma, kullanıcı kimlik doğrulama ve yönetimi, admin paneli ve daha pek çok özellik sunar.
- Pyramid : Esnek bir web frameworküdür. Django'nun sunduğu tam özellikli çözümlere benzer birçok özellik sunar ancak daha az kısıtlayıcıdır.
- FastAPI : Hızlı ve modern bir web frameworküdür. Performans açısından diğer frameworklere göre daha iyi bir performans gösterir. Aynı zamanda otomatik belgeleme ve doğrulama özellikleri sunar.
- psycopg2 : PostgreSQL veritabanı için sürücüdür.
- MySQL Connector : MySQL veritabanı için sürücüdür.
- PyMongo: MongoDB veritabanı için sürücüdür.
- SQLAlchemy : SQL tabanlı veritabanları için kullanılabilen bir ORM (Object Relational Mapper) kütüphanesidir.
- Frontend Mentor: Bu site, gerçek dünya tasarım projeleri için HTML, CSS ve JavaScript alıştırmaları sunar.
- CSS Battle: Bu site, CSS alıştırmaları sunar ve sizi farklı zorluklara sokarak uygulamanızı sağlar.
- Codevember: Bu site, her gün size bir zorluk vererek alıştırmalar yapmanızı sağlar ve CSS, JavaScript, HTML gibi farklı teknolojileri kullanarak projeler oluşturabilirsiniz.
- Daily UI: Bu site, farklı kullanıcı arayüzü tasarımları için zorluklar sunar ve sizin bu tasarımları yapmanızı isteyebilir.
- Exercism: Bu site, farklı programlama dilleri için alıştırmalar sunar ve size geri bildirim sağlayarak becerilerinizi geliştirmenize yardımcı olur.
- Replit Bounties : Replitte bu kısımda milletin verdiği görevleri para karşılığı tamamlayarak antreman yapıp para kazanabilirsiniz
- Portfolyo sitesi: Kendi portfolyonuzu oluşturmak için bir web sitesi tasarlayabilirsiniz. Bu proje ile birlikte, bir web frameworkünün temel işlevlerini ve özelliklerini öğrenebilirsiniz.
- Todo app: Basit bir görev listesi uygulaması oluşturarak, bir web frameworkünün veri yönetimi özelliklerini öğrenebilirsiniz. Bu proje ile birlikte, veritabanı modüllerini kullanmayı öğrenerek, CRUD (Create, Read, Update, Delete) işlemlerini gerçekleştirebilirsiniz.
- Blog sitesi: Kendi blog sitenizi oluşturarak, bir web frameworkünün dinamik içerik oluşturma ve yönetme özelliklerini öğrenebilirsiniz. Bu proje ile birlikte, kullanıcı kaydı ve yorum yönetimi gibi özellikleri de ekleyebilirsiniz.
Kariyerinizi İyi Etkiliyebilecek YouTube Kanalları ,Github Hesapları , Github repositoryleri ve Discord Sunucuları
- Patika.dev - YouTube : Web geliştirme, Mobil uygulama geliştirme, Blockchain gibi konulara derinlemesine dalan bir platform.
- Can Değer - Github : Beyaz Takkeli Tornacı
- fabacab - Cybersecurity Blue Team : Siber güvenlik alanında kendini geliştirmek isteyen kişiler için baya mükemmel kaynak
- TheComputerM - Awesome Svelte Kit : Svelte Mükemmel bir Front-end Frameworkdür. Svelte Kit ise React'ın Next.js'i Vue'nin Nuxt'ı gibidir.
- Fireship - Youtube : Youtube'nin En Kaliteli yazılım kanalı. gerekse miimleri ile olsun gerekse anlatımı ile olsun gerekse anlattığı şeyler olsun. Gerçekten aşırı kaliteli ve aşırı uğraşılmış. şiddetle takip etmenizi öneriyorum
- Online Tutorials : Front-End developer'lar için olmassa olmaz bir kanal.
- Jon Gjengset : Rust Developerler için en iyi kanal
- PROTOTURK : Anlatılmaz yaşanır :)
- Web makinesi : PHP, Wordpress ile ilgilenen Developerler için ideal bir kanal
- Kevin Powell : "CSS GOD!"
- TECH SCHOOL : Golang developlerler için en iyi kanallardan birisi olabilir.
- GO TÜRKİYE : Golang için en iyi kaynakları sunan ve benim de şiddetle önerdiğim bir yer. :D
- Kamp.us - Discord : Ortam güzel, düzenli coding ve chill yayınlar, sakin ve terbiyeli bir ortam mükemmel bir yer!
- Kodluyoruz - Discord : Anlatılmax yaşanır (2x)
isterseniz fork atıp ekleme yapabilirsiniz.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent