Sıfırdan Projelerle Front-End ve React 18.x Öğren (52+ Saat)
- Buy now
- Learn more
Başlangıç

Yeni Teknoloji Çıktı.. Şimdi Ne Olacak? Hemen En Yeni Olana Geçmeli miyiz?
Frameworkler ve Yazılım Dillerindeki Versiyon Değişiklikleri Hakkında Genel Bilgi
Çözüm Geliştirici Olmak
Diff Checker - Yazdığınız Koddaki Farklılıkları Bulmak
Denemek ve Yeniden Yeni Yollar Denemek
10 Günde Yazılan Yazılım Dili..
Front-End Yol Haritası
Biraz Tarihçe :) HTML, CSS, JavaScript ve Browser Tarihçesi
Bu Eğitimi Alırsam Front-End Developer Olabilir miyim?
Sınıf İçi Eğitim vs Özel Ders vs Video Eğitim
Yapay Zeka ve Biz
Front-End Eğitiminde Kullanılan Kaynak Dosyalara Nasıl Erişebilirim
Bölüm Sonu İleri Bildirim Formu
Kurulum

Windows İşletim Sistemine Gerekli Kurulumların Yapılması
macOS İşletim Sistemine Gerekli Kurulumların Yapılması
GitHub Profilinin Açılması
Eğitime Hazırlık: Notion, Chrome ve MarkDown ile Üretkenliğinizi Arttırın

Notion ile Not Alma Sisteminin Oluşturulması
Chrome'da Sayfaların Bookmark ile Organize Edilmesi
Visual Studio Code - Genel Kullanımı
*Markdown Nedir? Nasıl Kullanılır?
Bölüm Sonu İleri Bildirim Formu
HTML

HTML Nedir?
Arkana Yaslan - CSS Olmadan Web Siteleri Nasıl Gözüküyor?
İlk HTML Dokümanının Oluşturulması
Başlıklar ve Paragraflar ile Çalışmak
HTML Yapısının Emmet ile Oluşturulması
Visual Studio Code içinde Hangi Yapısal Dil ile Çalıştığımızın Belirlenmesi
Açıklama Satırı Eklemek
Listeler ile Çalışmak
Emmet ile Çalışmak - Bölüm 1
Emmet ile Çalışmak - Bölüm 2
Emmet ile Çalışmak - Bölüm 3
Linkler ile Çalışmak
HTML Yapılarına Görsel Eklemek
Link ve Görselin Birlikte Kullanımı
Bold ve İtalik Gibi Metinsel Özelliklerin Eklenmesi
Block ve Inline Etiketler Nelerdir? Nasıl Kullanılır?
Tablo ile Çalışmak
Girintiler(Indentations) ile Çalışmak
HTML Etiketlerine Ekstra Özellikler Eklenebilmesi
Semantic(Anlamlandırılmış) Etiketlerin Kullanımı
Web Sitelerinde Erişilebilirlik
Erişilebilirlik için Tasarım (Ek Bilgi)
Diğer HTML Etiketleri Neler
Sürpriz Yumurta :)
Bölüm Sonu Projesi 1
Bölüm Sonu Projesi 1 - Projeyi Canlıya Almak
Bölüm Sonu Projesi 2
Bölüm Sonu Projesi 2 - Projeyi Canlıya Almak
Classless CSS - İlham
Bölüm Sonu Hikayesi
Bölüm Sonu İleri Bildirim Formu
Visual Studio Code (VS Code) Kulllanımı

Ekran Kullanımının İyileştirilmesi
IDE Nedir? Metin/Kod Editörü Nedir?
VS Code Genel Görünümü ve Görünüm Özellikleri
Proje Klasörü Açmak ve Birden Fazla Proje ile Çalışmak
VS Code içinde Dosya ve Klasör Açma Taktikleri
VS Code Ayarlarının İncelenmesi ve Birden Fazla Profil ile Çalışmak
Font Kullanımı
Görünümün Ayarlanması: Temalar ve İkonlar
VS Code - Birden Fazla Profil ile Çalışmak
Outline ve Breadcrumbs
Multi-Cursor Kullanımı
005-011-Blok-Yapilari-Tasima-ve-Kopyalama.mp4
Klavye Kısayol Tuşları ile Çalışmak
Code Snippets Kullanımı
VS Code içinde Terminal ile Çalışmak
VS Code Playground
Bölüm Sonu İleri Bildirim Formu
Git Versiyon Kontrol Sistemi ve GitHub Platformu

Neden Versiyon Kontrol Sistemi Kullanıyoruz?
Versiyon Kontrol Sistemi Görsel Demo
Projelerde Versiyon Kontrol Sisteminin Oluşturulması (git init)
.gitignore ile Versiyonlanmayacak Dosya ve Klasorlerin Tanımlanması
.gitignore Dosyasının Diğer Projelere Eklenmesi
Terminal'de Versiyon Kontrol Sistemi Komutları
Birden Fazla Branch ile Çalışmak
GitHub Profil Sayfasının Oluşturulması
GitHub'a Projenin Aktarılması
Uzaktaki Repodan(GitHub) Projenin Clone ile Alınması - Projenin Senkron Edilmesi
VS-Code'u Online Açmak ve GitHub Üzerindeki Repoda Değişiklik Yapmak
GitHub.io (GitHub Pages) üzerinde Web Sitemizi Yayınlamak
GitHub Gist'i Keşfet, Code Snippets ve Diğer Bilgilerini GitHub Gist'e Kaydet
GitHub Alternatifleri
Bölüm Sonu İleri Bildirim Formu
CSS

CSS Nedir
CSS Tanımlamaları - Inline, Internal ve External CSS Tanımlamaları
Relative Path, Root-Relative Path ve Absolute Path ile Dosya Yeri Belirlemek
Açıklama Satırı Eklemek, Genel Seçiciler ve CSS Yazma Kuralları
CSS Seçicileri ile Çalışmak
Block, Inline ve Inline-Block Yapılarını Anlamak
Kutu Özellikleri: Margin, Padding, Border, Width ve Height
Görünürlük: Visibility ve Display None Arasındaki Farklar
User Agent CSS Düzenlemeri
Hover ve Display None Özelliklerinin Birlikte Kullanımı
CSS Reset ve Normalize Nedir ve Neden Kullanılmalı
CSS Bloklarının/Yapılarının Organize Edilmesi
Background-Image Kullanımı
Renk Tanımlamaları - HEX, RGBA ve HSL Kullanımı
Metin Özellikleri
Font Size, REM ve EM Kullanımları
Font-Family Kullanımı
Float Kullanımı
Liste Özellikleri
CSS Değişkenleri ile Çalışmak ve Değişkenleri :root ile Tanımlamak
:root ile Dark Theme Oluşturmak
Proje1: Pico Clone - NavBar
Proje1: Pico Clone - Dark Theme
Proje1: Pico Clone - main Block ve aside Düzenlemeleri
Proje1: Pico Clone - Article Yapısının Eklenmesi
Neden Classless CSS Kullandık
CSS Positions ile Objelerin Yerleşiminin Değiştirilmesi
Media Query ile Responsive Yapılar Oluşturmak
CodePen ile Denemeler Yapmak
Flexbox Kullanımı ve İlk Yapının Oluşturulması
Flexbox - Justify Content Kullanımı
Flexbox - Justify Content Özelliklerine Devam ;)
Flexbox ile Ekranın Ortasında Kutu Oluşturulması
Flexbox ile Google Layout(İskelet) Yapısının Oluşturulması
Flexbox - Order Kullanımı ile Responsive Yapıda Sıralamanın Değiştirilmesi
Flexbox - Align Self ile Tek Bir Kutunun Yerleşiminin Değiştirilmesi
Flexbox - Wrap, Grow, Shrink ve Basis Kullamımları
Bölüm Sonu Projesi: Yapının Hazırlanması ve Navbar
Bölüm Sonu Projesi: Main Kısmının Oluşturulması
Bölüm Sonu Projesi: Aside Kısmının Oluşturulması
Bölüm Sonu Projesi: Alt Kısmın Oluşturulması
Bölüm Sonu Projesi: Projenin Yayına/Canlıya Alınması
Bölüm Sonu İleri Bildirim Formu
SASS - SCSS

SASS / SCSS Nedir?
SCSS ve SASS Arasındaki Farklar Nedir?
SCSS'i Online Ortamda ve Proje İçinde Kullanmak/Ayarlamak
VS Code içinde Live Sass Compiler Kullanımı ile Sass Kullanımı
VS Code içerisinde Hazırladığım Repo için Live Sass Compiler Ayarlar Düzenlemesi
README Dosyasındaki Linkler ve .gitignore Düzenlemesi Hakkında
SCSS - Değişken Tanımlamak
SCSS ile import Kullanımı
SCSS Nesting Kullanımı
Parent Selector Kullanımı
Mixin Kullanımı
Extend Kullanımı
Interpolation Kullanımı
List ile Birden Fazla Değişkenin Sistemde Tutulabilmesi
Each Kullanımı (Liste İçindeki Verileri Döngüde Kullanmak)
Map Kullanımı(Key / Value Yapıları Kullanımı)
For Kullanımı
SCSS Renk Fonksiyonlarının Kullanımı
Bölüm Sonu Çalışması:Classless CSS ile Yapılan Blog Çalışmasının SCSS'e Çevirmek
Bölüm Sonu İleri Bildirim Formu
Bootstrap

Bootstrap Nedir? Alternatifleri Nelerdir?
Arkana Yaslan: Online Platform ile Web Sitesi Yapımı ve Bootstrap'ı Özelleştirmek
Bootstrap'ın Standardize Ettiği Renk İsimlendirmelerini Anlamak
UI Nedir? UX Nedir? Bu Kavramlar Neden Önemli?
Container ve Grid(Izgara) Sistemini Anlamak
Grid Sistem ile Çalışmak
Responsive (Cihaz Uyumlu) Grid Sistem Oluşturmak
Responsive Yapılarda Reordering(Cihaz Uyumlu Düzen Değişimi)
Margin ve Padding Kullanımı
Responsive Uyumlu Olarak Yapıları Gizlemek veya Göstermek
Bootstrap Dokümantasyonunda Gezinti.. Özelliklerin İncelenmesi
Bölüm Sonu Projesi 1: Navbar ve Üst Bilgi
Bölüm Sonu Projesi 1: Hero Info
Bölüm Sonu Projesi 1: Card Yapısının Oluşturulması
Bölüm Sonu Projesi 1: Aside ve Makalelerin Oluşturulması
Bölüm Sonu Projesi 1: Aside ve Diğer İçeriklerin Zenginleştirilmesi
Bölüm Sonu Projesi 1: Footer ve Görsellerin Eklenmesi
Bölüm Sonu Projesi 1: Projenin Canlıya Alınması
Bölüm Sonu Projesi 2: Starbucks Layout: Navbar ve İlk Kısımların Düzenlemesi
Bölüm Sonu Projesi 2: Starbucks Layout: Genel Yapının Düzenlenmesi
Bölüm Sonu Projesi 2: Starbucks Layout: İçerik ve Card Yapısının Düzenlenmesi
Bölüm Sonu Projesi 2: Starbucks Layout: Aside Layout Düzenlenmesi
Bölüm Sonu Projesi 2: Starbucks Layout: Footer Düzenlenmesi
Bölüm Sonu Projesi 2: Starbucks Lyt: CSS Düzenleme ve Projenin Canlıya Alınması
Bölüm Sonu İleri Bildirim Formu
JavaScript

JavaScript ile İlk Kodun Oluşturulması ve İlk Çıktının Alınması
console.log Nedir? Nasıl Kullanılır?
Değişken Tanımlama ve İsimlendirme Kuralları
let, const, var ile Değişken Tanımlamak ve Aralarındaki Farklar
Boolean Veri Tipi ile Çalışmak
Number Veri Tipi ile Çalışmak
Number Veri Tipi ile İlgili Ek Bilgiler
String(Metinsel) Veri Tipi ile Çalışmak
Template Literals Kullanımı
Veri Türü Dönüşümü ve Veri Tipi Kontrolü
prompt, alert ve confirm Kullanımı
DOM Öğelerine Erişmek
DOM Etiketleri ile İşlem Yapmak
Açıklama Satırları ve Fazlası..
DOM'da Yeni Etiket/Element Oluşturmak
Karşılaştırma Operatörleri
Koşullar ile Çalışmak
Çoklu Koşul Yapısı Oluşturmak
while Döngüsü ile Çalışmak
ternary operator(Short If) ile Tek Satırlık Koşullar Oluşturmak
Array ile Çalışmak
Array Metodları ile Array İçerisindeki Verilerin Kontrolü ve Daha Fazlası
Fonksiyonlar ile Çalışmak
Arrow Function(Fat Arrow =>) Fonksiyonları ile Çalışmak
Object ile Çalışmak
Object Kullanımı ve Diğer İşlemler
Destructuring: Array ve/veya Object içerisinden Item Çıkartmak
Etiketlere Class Eklemek, Class Çıkartmak veya Toggle ile Ekle/Çıkar İşlemleri
DOM Hareketlerini(DOM Events) Yakalamak
Navbar Menu Dropdown Egzersizi
For Döngüsü ile Çalışmak
forEach Döngüsü ile Çalışmak (Array.prototype.forEach)
Navbar Dropdown ve forEach Kullanımı
Navbar Menu Dışına Tıklanınca Menünün Kapanması ve DOM Hareketlerinin Takibi
JavaScript ile Form Yönetimi
HTML Form Method ve Action Bilgileri
JavaScript ile Form içindeki Bilgilerin Alınması
localStorage Kullanımı: Veri Eklemek, Veriyi Getirmek ve Veriyi Silmek
Bölüm Sonu Çalışması 1: Form Oluşturmak
Bölüm Sonu Çalışması 1: Form Yapısının Dinamik Hale Getirilmesi
Bölüm Sonu Çalışması 1: Form Bilgilerin localStorage'a Yazılması
Bölüm Sonu Çalışması 1: Renk Paletlerinin Sayfada Gösterilmesi
Bölüm Sonu Çalışması 1: Renk Paletine Tıklayınca Kopyalama - Clipboard Kullanımı
Array: .filter Kullanımı
Array: .map Kullanımı
Array: .reduce Kullanımı
JSON Stringify ve Parse Kullanımı
Fetch API ile Çalışmak
Hata Yönetimi
Bölüm Sonu Çalışması 2: Hash Routing Yapısının Oluşturulması
Bölüm Sonu Çalışması 2: Verilerin Fetch API ile Getirilmesi
Bölüm Sonu İleri Bildirim Formu
React Temelleri

React'ı Anlamak
Ek Bilgi: nokta(.) Yani Bu Klasör Kullanımını Anlamak
React'ı Online Ortamda Çalıştırmak ve create-react-app ile Ortam Kurulumu
React'ı Vite ile Kurmak ve Çalıştırmak
Projenin Klasör Yapısının İncelenmesi
ReactJS - JSX Kuralları - 1
ReactJS - JSX Kuralları - 2
ReactJS - JSX Kuralları - 3
ReactJS - JSX Kuralları - 4
Module Import ve Export Kullanımı - 1
Module Import ve Export Kullanımı - 2
Module Import ve Export Kullanımı - 3
React - Props Kullanımı - 1
React - Props Kullanımı - 2
React - Props ile Componentler Arası Bilgi Aktarımı
React - Props children Kullanımı
React - Props Drilling Nedir?
Conditional Rendering - Koşullu Render Kullanımı
Optional Chain Kontrolü
useState: Component içindeki Bilgileri Değiştirebilmek için useState Kullanımı
useState ile Dinamik Yapılar Oluşturmak
useState ve Props ile Componentler Arası İletişim Sağlamak
Bölüm Sonu Çalışması 1: Yapının Oluşturulması ve PicoCSS Eklenmesi
Bölüm Sonu Çalışması 1: Taskların Tamamlanması
Bölüm Sonu Çalışması 2: Genel Yapının Oluşturulması
Bölüm Sonu Çalışması 2: Ürünler Yapısının Oluşturulması
Bölüm Sonu Çalışması 2: ProductCard Yapısının Oluşturulması ve Aktif Ürün Seçimi
Bölüm Sonu Çalışması 2: Props Cehennemi :) Bilgilerin Alt Component'e Gönderimi
Bölüm Sonu Çalışması 2: Filtreleme İşlemleri
Bölüm Sonu İleri Bildirim Formu
React - Form ile Çalışmak

Yeni Projenin Oluşturulması ve Bootstrap'ın Eklenmesi
Form Submit İşleminin Denetimi için preventDefault Eklenmesi
Form İçindeki Bilgilerin Yeni Task Olarak Eklenmesi
Form İçindeki Bilgilerin UUID ile Eklenmesi ve İstenilen Öğenin Silinmesi
Task Görünümü Düzenlemesi ve Düzenle Butonunun Eklenmesi
Task Düzenleme Aksiyonunun Oluşturulması
UI Düzenlemeleri ile Yapının İyileştirilmesi
Task Bilgilerinin Filtrelenmesi ve useEffect Kullanımı
useEffect Nedir? Neden İhtiyaç Duyarız?
Component Yapısının Düzenlenmesi
Tasklar için --Bitti-- Yapısının Oluşturulması
useEffect ve localStorage Kullanımı ile Taskların localStorage İçinde Tutulması
Bölüm Sonu İleri Bildirim Formu
React Router Dom ile Çalışmak

React Router Dom Kullanımı ve Yapının Oluşturulması
Routes Yapısının Oluşturulması ve İstenilen Component'in URLe Göre Getirilmesi
Ana Sayfada Ürünlerin Gösterilmesi
Ürünler Sayfasının Oluşturulması
Kategori Detay Sayfasının Oluşturulması
Ürün Detay Sayfasının Oluşturulması
Login ve Logout Yapısının Oluşturulması
Protected-Private Route ile İstenilen Componentlerin Gösterimi
Site Yüklendiğinde localStorage ve useEffect ile Kullanıcının Getirilmesi
User Bilgisinin Props ile Diğer Componentlere İletilmesi
Favoriler Yapısının Oluşturulması
Bölüm Sonu İleri Bildirim Formu
React - Context API ile Çalışmak

Context API ile Oluşturulacak Projenin Genel Yapısının Hazırlanması
React Router Dom'un Projeye Eklenmesi
Dark Theme Yapısının Oluşturulması ve Temanın Değiştirilebilmesi
Context API Yapısının Oluşturulması ve Tema Bilgisinin Site Genelinde Kullanımı
Context API, useEffect ve localStorage'in Birlikte Kullanılması
Bölüm Sonu Çalışması: React Router Dom ile Yapının Kurulması
Bölüm Sonu Çalışması: Context API Yapısının Eklenmesi
Bölüm Sonu Çalışması: Tüm Componentlerin Context API İçerisinden Veri Alınması
Bölüm Sonu İleri Bildirim Formu
Styled-Components ile Çalışmak

React: Styled Components Nedir ve Nasıl Kurulur?
React: Styled-Components ile İlk Styled Button Yapısının Oluşturulması
React: Styled-Components - Props Kullanımı
React: Styled-Components - Extend Kullanımı
React: Styled-Components Attributes(Ek Özellik) Eklemek
React: Styled-Components Animasyon Oluşturmak
React: Styled-Components - Tema Kullanımı
React: Styled-Components - Global Style Kullanımı
React: Styled Components - Bölüm Sonu Çalışması - Kurulum
React:Styled Components - Bölüm Sonu Çalışmsı - GlobalCSS Yapısının Kurgulanması
React: Styled Components - Bölüm Sonu Çalışması - Tema Oluşturulması
React: Styled Components - Bölüm Sonu Çalışması - Tema Yapısının Düzenlenmesi
React: Styled Components - Bölüm Sonu - Header Yapısının Tema ile Çalışması
React: Styled Components - Bölüm Sonu - Context API Yapısının Oluştuşturulması
React: Styled Components - Bölüm Sonu Çalışması - Tema ve Context API Kullanımı
React: Styled Components - Bölüm Sonu Çalışması - Aside Yapısının Oluşturulması
Styled Components - Bölüm Sonu - Diğer Component Yapılarının Düzenlenmesi - 1
Styled Components - Bölüm Sonu - Diğer Component Yapılarının Düzenlenmesi - 2
Bölüm Sonu İleri Bildirim Formu
React: useReducer ile Çalışmak

React: useReducer ile İlk Örnek Yapının Oluşturulması
React: useReducer Yapısının useContext ile Kullanılması
React: useReducer - Add Todo Yapısının Oluşturulması
React: useReducer - Todo Payload Bilgisinin Kullanılması
React: useReducer - Todo Payload Bilgisinin Context API ile Kullanılması
Bölüm Sonu İleri Bildirim Formu
React - Redux ile Çalışmak

React - Redux Toolkit Kurulumu
React - Redux Toolkit - Counter Yapısının Oluşturulması
Counter Slice ve Action Yapısının Oluşturulması
React - Redux Store Bilgisinin Farklı Componentlerde Kullanılabilmesi
Redux Store'a İkinci Yapının Oluşturulması ve Kullanımı: Todo List
React - Redux Store İçindeki Todo Bilgisinin Silinmesi
Bölüm Sonu İleri Bildirim Formu
Redux Toolkit Query, Fetch ve Axios ile API Kullanımı(3 Yöntem) + ReactRouterDom

React - Redux Toolkit Query(RTK) - Ortam Kurulumu
Projede Yapılacaklar Listesinin Oluşturulması ve Navbar Eklenmesi
Ana Sayfa, Container ve Row Yapılarının Oluşturulması
React Router Dom ve Diğer Sayfaların Eklenmesi
.env (Environment) Yapısının Eklenmesi ve ENV Kullanımı
Cat API Key Bilgisinin Eklenmesi
1. Yöntem: Fetch API ile Kategori Verilerinin Çekilmesi
1. Yöntem: Fetch API ile Kategori Sayfasının Düzenlenmesi
1. Yöntem: customHook ile Fetch API Yapısının Oluşturulması
1. Yöntem: Detay Sayfasındaki Bilgilerin Fetch API ile Getirilmesi
1. Yöntem: Kategori Düzenlemeleri ve Fetch API ile Görsellerin Getirilmesi
2. Yöntem: Axios ile Kategorilerin Getirilmesi
2. Yöntem: Axios ile Kategori Detay Sayfasının Getirilmesi
3: Yöntem: Redux Toolkit Query ile Tüm Yapının Oluşturulması
Bölüm Sonu İleri Bildirim Formu

Ürün Detay Sayfasının Oluşturulması