Sıfırdan Projelerle Front-End ve React 18.x Öğren (52+Saat)

Name: Sıfırdan Projelerle Front-End ve React 18.x Öğren (52+Saat)
Rating: 4.9 (296 reviews)

Sıfırdan JavaScript ve ReactJS ile Dinamik Web Projeleri Yaparak Kendini Geliştir(HTML,CSS, Sass, Bootstrap, Git&GitHub)

Created byHakan Yalçınkaya

Last updated 11/2025

Turkish

Turkish [Auto],

What you'll learn

Kullanıcı Dostu, Hızlı ve Gelişmiş React Projeleri Oluşturabileceksiniz (2023)
Her Bölümde Projeler Yaparak HTML, CSS, SASS, Bootstrap Gibi Konularda Kendinizi Geliştirebileceksiniz
VS-Code Kod Editörünü Kullanmayı ve Daha Birçok Ek Aracı Kullanmayı Öğreneceksiniz
Her Bölümde Yaptığınız Projeleri Yayına Almayı ve Versiyon Kontrol Sistemi İle Çalışmayı Öğreneceksiniz
ES6+ ve VanillaJS Temellerinizi Sağlamlaştıracaksınız
ReactJS olmadan da Single Page Applications (SPA) Yapmayı Ayrıca Görecek ve Vizyonunuzu Geliştireceksiniz

Course content

18 sections • 344 lectures • 52h 24m total length

Sıfırdan Projelerle JavaScript ve React Eğitimi Tanıtımı3:00
Yeni Teknoloji Çıktı.. Şimdi Ne Olacak? Hemen En Yeni Olana Geçmeli miyiz?6:04
Çözüm Geliştirici Olmak9:07
Yeni Bir Teknoloji Çıktı.. N'apcaz Şimdi? :)5:41
Framework ve Yazılım Dillerindeki Versiyon Değişiklikleri Hakkında Genel Bilgi20:44
Diff Checker - Yazdığınız Koddaki Farklılıkları Bulmak4:21
Denemek ve Yeniden Yeni Yollar Denemek2:52
10 Günde Yazılan Yazılım Dili..3:46
10 Yazılım Dili mi? 10 Proje mi?11:14
Front-End Yol Haritası4:34
Biraz Tarihçe :) HTML, CSS, JavaScript ve Browser Tarihçesi17:17
Bu Eğitimi Alırsam Front-End Developer Olabilir miyim?2:30
Sınıf İçi Eğitim vs Özel Ders vs Video Eğitim12:05
Yapay Zeka ve Biz16:13
Front-End Eğitiminde Kullanılan Kaynak Dosyalara Nasıl Erişebilirim0:04
İleri Bildirim Formunu Doldurmadan Önce Lütfen İzleyin4:00
Bölüm Sonu İleri Bildirim Formu0:09

HTML Bölümüne Hoşgeldiniz1:26
HTML Nedir?8:40
Arkana Yaslan - CSS Olmadan Web Siteleri Nasıl Gözüküyor?5:03
İlk HTML Dokümanının Oluşturulması10:53
Başlıklar ve Paragraflar ile Çalışmak16:07
HTML Yapısının Emmet ile Oluşturulması16:14
Visual Studio Code içinde Hangi Yapısal Dil ile Çalıştığımızın Belirlenmesi4:09
Açıklama Satırı Eklemek7:47
Listeler ile Çalışmak9:01
Emmet ile Çalışmak - Bölüm 18:29
Emmet ile Çalışmak - Bölüm 210:27
Emmet ile Çalışmak - Bölüm 311:34
Linkler ile Çalışmak15:06
HTML Yapılarına Görsel Eklemek13:05
Link ve Görselin Birlikte Kullanımı3:36
Bold ve İtalik Gibi Metinsel Özelliklerin Eklenmesi2:23
Block ve Inline Etiketler Nelerdir? Nasıl Kullanılır?9:11
Tablo ile Çalışmak4:04
Girintiler(Indentations) ile Çalışmak6:44
HTML Etiketlerine Ekstra Özellikler Eklenebilmesi4:33
Semantic(Anlamlandırılmış) Etiketlerin Kullanımı8:15
Web Sitelerinde Erişilebilirlik12:39
Erişilebilirlik için Tasarım (Ek Bilgi)8:10
Diğer HTML Etiketleri Neler6:35
Sürpriz Yumurta :)4:08
Bölüm Sonu Projesi 116:42
Bölüm Sonu Projesi 1 - Projeyi Canlıya Almak9:08
Bölüm Sonu Projesi 216:56
Bölüm Sonu Projesi 2 - Projeyi Canlıya Almak2:09
Classless CSS - İlham2:22
Bölüm Sonu Hikayesi4:27
Bölüm Sonu İleri Bildirim Formu0:09

Visual Studio Code Bölümüne Hoşgeldiniz1:53
Ekran Kullanımının İyileştirilmesi5:40
IDE Nedir? Metin/Kod Editörü Nedir?9:54
VS Code Genel Görünümü ve Görünüm Özellikleri12:58
Proje Klasörü Açmak ve Birden Fazla Proje ile Çalışmak5:24
VS Code içinde Dosya ve Klasör Açma Taktikleri11:47
VS Code Ayarlarının İncelenmesi ve Birden Fazla Profil ile Çalışmak8:46
Font Kullanımı5:19
Görünümün Ayarlanması: Temalar ve İkonlar5:04
VS Code - Birden Fazla Profil ile Çalışmak6:22
Outline ve Breadcrumbs3:31
Multi-Cursor Kullanımı10:26
Blok Yapılarının Taşınması ve Kopyalanması4:36
Klavye Kısayol Tuşları ile Çalışmak7:31
Code Snippets Kullanımı11:51
VS Code içinde Terminal ile Çalışmak7:35
VS Code Playground6:54
Bölüm Sonu İleri Bildirim Formu0:09

Git ve GitHub Bölümüne Hoşgeldiniz1:16
Neden Versiyon Kontrol Sistemi Kullanıyoruz?9:46
Versiyon Kontrol Sistemi Görsel Demo7:46
Projelerde Versiyon Kontrol Sisteminin Oluşturulması (git init)17:40
.gitignore ile Versiyonlanmayacak Dosya ve Klasorlerin Tanımlanması12:23
.gitignore Dosyasının Diğer Projelere Eklenmesi3:07
Terminal'de Versiyon Kontrol Sistemi Komutları6:39
Birden Fazla Branch ile Çalışmak4:51
GitHub Profil Sayfasının Oluşturulması10:18
GitHub'a Projenin Aktarılması12:40
Uzaktaki Repodan(GitHub) Projenin Clone ile Alınması - Projenin Senkron Edilmesi6:05
VS-Code'u Online Açmak ve GitHub Üzerindeki Repoda Değişiklik Yapmak3:21
GitHub.io (GitHub Pages) üzerinde Web Sitemizi Yayınlamak10:38
GitHub Gist'i Keşfet, Code Snippets ve Diğer Bilgilerini GitHub Gist'e Kaydet4:07
GitHub Alternatifleri4:31
Bölüm Sonu İleri Bildirim Formu0:09

CSS Bölümüne Hoşgeldiniz1:12
CSS Nedir4:39
CSS Tanımlamaları - Inline, Internal ve External CSS Tanımlamaları13:36
Relative Path, Root-Relative Path ve Absolute Path ile Dosya Yeri Belirlemek10:03
Açıklama Satırı Eklemek, Genel Seçiciler ve CSS Yazma Kuralları10:51
CSS Seçicileri ile Çalışmak14:26
Block, Inline ve Inline-Block Yapılarını Anlamak9:01
Kutu Özellikleri: Margin, Padding, Border, Width ve Height12:22
Görünürlük: Visibility ve Display None Arasındaki Farklar4:57
User Agent CSS Düzenlemeri10:01
Hover ve Display None Özelliklerinin Birlikte Kullanımı13:39
CSS Reset ve Normalize Nedir ve Neden Kullanılmalı7:49
CSS Bloklarının/Yapılarının Organize Edilmesi9:49
Background-Image Kullanımı11:10
Renk Tanımlamaları - HEX, RGBA ve HSL Kullanımı13:42
Metin Özellikleri13:47
Font Size, REM ve EM Kullanımları11:00
Font-Family Kullanımı5:28
Float Kullanımı8:08
Liste Özellikleri8:37
CSS Değişkenleri ile Çalışmak ve Değişkenleri :root ile Tanımlamak13:00
:root ile Dark Theme Oluşturmak6:28
Proje1: Pico Clone - NavBar14:53
Proje1: Pico Clone - Dark Theme4:53
Proje1: Pico Clone - main Block ve aside Düzenlemeleri10:59
Proje1: Pico Clone - Article Yapısının Eklenmesi11:42
Neden Classless CSS Kullandık6:13
CSS Positions ile Objelerin Yerleşiminin Değiştirilmesi16:55
Media Query ile Responsive Yapılar Oluşturmak14:25
CodePen ile Denemeler Yapmak4:53
Flexbox Kullanımı ve İlk Yapının Oluşturulması10:08
Flexbox - Justify Content Kullanımı4:37
Flexbox - Justify Content Özelliklerine Devam ;)8:02
Flexbox ile Ekranın Ortasında Kutu Oluşturulması7:32
Flexbox ile Google Layout(İskelet) Yapısının Oluşturulması16:51
Flexbox - Order Kullanımı ile Responsive Yapıda Sıralamanın Değiştirilmesi13:15
Flexbox - Align Self ile Tek Bir Kutunun Yerleşiminin Değiştirilmesi9:48
Flexbox - Wrap, Grow, Shrink ve Basis Kullamımları18:12
Bölüm Sonu Projesi: Yapının Hazırlanması ve Navbar14:47
Bölüm Sonu Projesi: Main Kısmının Oluşturulması12:26
Bölüm Sonu Projesi: Aside Kısmının Oluşturulması7:20
Bölüm Sonu Projesi: Alt Kısmın Oluşturulması11:54
Bölüm Sonu Projesi: Projenin Yayına/Canlıya Alınması2:07
Bölüm Sonu İleri Bildirim Formu0:09

SASS Bölümüne Hoşgeldiniz1:13
SASS / SCSS Nedir?8:04
SCSS ve SASS Arasındaki Farklar Nedir?3:47
SCSS'i Online Ortamda ve Proje İçinde Kullanmak/Ayarlamak13:26
VS Code içinde Live Sass Compiler Kullanımı ile Sass Kullanımı8:18
VS Code içerisinde Hazırladığım Repo için Live Sass Compiler Ayarlar Düzenlemesi5:11
README Dosyasındaki Linkler ve .gitignore Düzenlemesi Hakkında1:50
SCSS - Değişken Tanımlamak5:02
SCSS ile import Kullanımı3:15
SCSS Nesting Kullanımı10:45
Parent Selector Kullanımı3:56
Mixin Kullanımı6:49
Extend Kullanımı4:04
Interpolation Kullanımı4:28
List ile Birden Fazla Değişkenin Sistemde Tutulabilmesi4:08
Each Kullanımı (Liste İçindeki Verileri Döngüde Kullanmak)2:08
Map Kullanımı(Key / Value Yapıları Kullanımı)7:19
For Kullanımı3:07
SCSS Renk Fonksiyonlarının Kullanımı5:44
Bölüm Sonu Çalışması:Classless CSS ile Yapılan Blog Çalışmasının SCSS'e Çevirmek17:31
Bölüm Sonu İleri Bildirim Formu0:09

Bootstrap Bölümüne Hoşgeldiniz1:43
Bootstrap Nedir? Alternatifleri Nelerdir?15:32
Arkana Yaslan:Online Platform ile Web Sitesi Yapımı ve Bootstrap'ı Özelleştirmek9:49
Bootstrap'ın Standardize Ettiği Renk İsimlendirmelerini Anlamak8:09
UI Nedir? UX Nedir? Bu Kavramlar Neden Önemli?11:46
Container ve Grid(Izgara) Sistemini Anlamak10:13
Grid Sistem ile Çalışmak14:46
Responsive (Cihaz Uyumlu) Grid Sistem Oluşturmak11:36
Responsive Yapılarda Reordering(Cihaz Uyumlu Düzen Değişimi)7:46
Margin ve Padding Kullanımı4:56
Responsive Uyumlu Olarak Yapıları Gizlemek veya Göstermek10:39
Bootstrap Dokümantasyonunda Gezinti.. Özelliklerin İncelenmesi9:22
Bölüm Sonu Projesi 1: Navbar ve Üst Bilgi12:11
Bölüm Sonu Projesi 1: Hero Info6:37
Bölüm Sonu Projesi 1: Card Yapısının Oluşturulması6:52
Bölüm Sonu Projesi 1: Aside ve Makalelerin Oluşturulması9:18
Bölüm Sonu Projesi 1: Aside ve Diğer İçeriklerin Zenginleştirilmesi5:12
Bölüm Sonu Projesi 1: Footer ve Görsellerin Eklenmesi11:10
Bölüm Sonu Projesi 1: Projenin Canlıya Alınması3:34
Bölüm Sonu Projesi 2: Starbucks Layout: Navbar ve İlk Kısımların Düzenlemesi7:03
Bölüm Sonu Projesi 2: Starbucks Layout: Genel Yapının Düzenlenmesi6:18
Bölüm Sonu Projesi 2: Starbucks Layout: İçerik ve Card Yapısının Düzenlenmesi16:28
Bölüm Sonu Projesi 2: Starbucks Layout: Aside Layout Düzenlenmesi5:25
Bölüm Sonu Projesi 2: Starbucks Layout: Footer Düzenlenmesi15:42
Bölüm Sonu Projesi 2: Starbucks Lyt: CSS Düzenleme ve Projenin Canlıya Alınması6:28
Bölüm Sonu İleri Bildirim Formu0:09

JavaScript Bölümüne Hoşgeldiniz1:01
JavaScript ile İlk Kodun Oluşturulması ve İlk Çıktının Alınması10:35
console.log Nedir? Nasıl Kullanılır?9:03
Değişken Tanımlama ve İsimlendirme Kuralları14:59
let, const, var ile Değişken Tanımlamak ve Aralarındaki Farklar16:23
Boolean Veri Tipi ile Çalışmak9:14
Number Veri Tipi ile Çalışmak11:08
Number Veri Tipi ile İlgili Ek Bilgiler8:16
String(Metinsel) Veri Tipi ile Çalışmak23:16
Template Literals Kullanımı7:47
Veri Türü Dönüşümü ve Veri Tipi Kontrolü10:52
prompt, alert ve confirm Kullanımı9:39
DOM Öğelerine Erişmek18:09
DOM Etiketleri ile İşlem Yapmak11:35
Açıklama Satırları ve Fazlası..13:26
DOM'da Yeni Etiket/Element Oluşturmak17:29
Karşılaştırma Operatörleri24:09
Koşullar ile Çalışmak11:29
Çoklu Koşul Yapısı Oluşturmak19:29
while Döngüsü ile Çalışmak10:06
ternary operator(Short If) ile Tek Satırlık Koşullar Oluşturmak7:48
Array ile Çalışmak13:09
Array Metodları ile Array İçerisindeki Verilerin Kontrolü ve Daha Fazlası17:05
Fonksiyonlar ile Çalışmak20:52
Arrow Function(Fat Arrow =>) Fonksiyonları ile Çalışmak14:13
Object ile Çalışmak14:57
Object Kullanımı ve Diğer İşlemler9:55
Destructuring: Array ve/veya Object içerisinden Item Çıkartmak13:38
Etiketlere Class Eklemek, Class Çıkartmak veya Toggle ile Ekle/Çıkar İşlemleri6:38
DOM Hareketlerini(DOM Events) Yakalamak11:30
Navbar Menu Dropdown Egzersizi14:11
For Döngüsü ile Çalışmak8:04
forEach Döngüsü ile Çalışmak (Array.prototype.forEach)7:02
Navbar Dropdown ve forEach Kullanımı6:20
Navbar Menu Dışına Tıklanınca Menünün Kapanması ve DOM Hareketlerinin Takibi5:40
JavaScript ile Form Yönetimi14:34
HTML Form Method ve Action Bilgileri8:14
JavaScript ile Form içindeki Bilgilerin Alınması20:19
localStorage Kullanımı: Veri Eklemek, Veriyi Getirmek ve Veriyi Silmek10:52
Bölüm Sonu Çalışması 1: Form Oluşturmak8:12
Bölüm Sonu Çalışması 1: Form Yapısının Dinamik Hale Getirilmesi8:53
Bölüm Sonu Çalışması 1: Form Bilgilerin localStorage'a Yazılması17:14
Bölüm Sonu Çalışması 1: Renk Paletlerinin Sayfada Gösterilmesi9:36
Bölüm Sonu Çalışması 1: Renk Paletine Tıklayınca Kopyalama - Clipboard Kullanımı11:40
Array: .filter Kullanımı11:23
Array: .map Kullanımı22:38
Array: .reduce Kullanımı11:19
JSON Stringify ve Parse Kullanımı6:45
Fetch API ile Çalışmak14:42
Hata Yönetimi3:21
Bölüm Sonu Çalışması 2: Hash Routing Yapısının Oluşturulması12:56
Bölüm Sonu Çalışması 2: Verilerin Fetch API ile Getirilmesi18:06
Bölüm Sonu İleri Bildirim Formu0:09

Requirements

Programlama Deneyimi Gerektirmez. Eğitim En Temelden Başlayarak HTML, CSS, SASS, Bootstrap, JavaScript ve React ile Projelerinizi Baştan Sona Geliştirmenizi Sağlayacak Şekilde Tasarlanmıştır
Kod Editörü ve Versiyon Kontrol Sistemi Bilmeniz Gerekmez. Tüm Eğitim Boyunca Kod Editörü ve Versiyon Kontrol Sistemi Kullanımı Uygulanacaktır
Kursu İndirimli Satın Almak İçin Ins/hakanyalcinkayadev Profilini Ziyaret Edebilirsiniz. Profildeki Lnke Tıklayarak Eğitimi İndirimli Olarak Satın Alabilirsiniz

Description

Sıfırdan Projelerle JavaScript ve React Eğitimi React18 ile birlikte tasarlanmıştır. Hazırlanan React eğitim setinin hedefi ilerde çıkacak olan güncellemelere de sizleri hazırlayacak şekilde dokümantasyon paylaşımı ile güçlendirilmiştir. Hazırlanan eğitim özellikle yazılıma yeni başlayanlar için tasarlanmıştır. Her bölümde bölüm sonu projeleri yaparak kendinizi geliştirmeye devam edeceğiniz ve bilginizi pekiştirebileceğiniz bir sistemle eğitim hazırlanmıştır.

Eğitimde işlenen temel konular:

HTML: Web'in Yapıtaşı olan HTML, Etiketler, Browser Davranışları ve CSS Olmadan Nasıl Basit Web Projeleri Yapabileceğimiz
CSS: Box Model ve FlexBox ile Responsive (Cihaz Uyumlu) Web Sitelerinin Nasıl Yapılabileceği ve Yeni Gelen CSS Özelliklerini Nasıl Kullanabileceğimiz
SASS/SCSS: SASS ile Daha Az CSS Yazma Teknikleri ve CSS ile Yapılan Projelerin SASS'a Dönüştürülmesi
Visual Studio Code ile Performanslı Çalışmak
Git Versiyon Kontrol Sistemi ve GitHub Kullanımı
Not Alma Teknikleri
JavaScript Temelleri ve Sadece JavaScript Bilgimizle Nasıl Single Page Application(SPA) yapabileceğimiz
ReactJS Temelleri
ReactJS ve Context API ile Çalışmak
React ve Redux ile Çalışmak
React ile API Bazlı Uygulamalar Geliştirmek
React ve Firebase ile Backend İhtiyaçlarını Ortadan Kaldırarak Projeler Geliştirmek

Eğitim Bitiminde Hangi Konularda Kendinizi Geliştirmiş Olacaksınız;

Çok hızlı Bootstrap projeleri geliştirebileceksiniz
Kendi Projelerinizi Hayata Geçirebileceksiniz
Adım Adım Proje Geliştirmeyi Öğreneceksiniz
Web Projelerinde En Çok Bilinmesi Gereken Konuları Öğrenmiş Olacaksınız
İşe Girmek için Elinizde Referans Projeler Olacak
Uluslararası Firmalarda Çalışabilecek Bilgi Birikimine Sahip Olacaksınız
Front-End Developer Olacaksınız

Who this course is for:

Kursu İndirimli Satın Almak İçin Ins/hakanyalcinkayadev Profilini Ziyaret Edebilirsiniz. Profildeki Lnke Tıklayarak Eğitimi İndirimli Olarak Satın Alabilirsiniz
Sıfırdan Kendini Web Uygulamaları Geliştirmek İsteyenler
Front-End Developer Olmak İsteyenler
React ile Güçlü Projeler Geliştirmek İsteyenler
Birçok Proje ile Kendini Geliştirmek İsteyenler

Sıfırdan Projelerle Front-End ve React 18.x Öğren (52+Saat)

What you'll learn

Explore related topics

Course content

Başlangıç17 lectures • 2hr 4min

Kurulum3 lectures • 20min

Eğitime Hazırlık: Notion, Chrome ve MarkDown ile Üretkenliğinizi Arttırın6 lectures • 38min

HTML32 lectures • 4hr 20min

Visual Studio Code (VS Code) Kulllanımı18 lectures • 2hr 6min

Git Versiyon Kontrol Sistemi ve GitHub Platformu16 lectures • 1hr 55min

CSS44 lectures • 7hr 16min

SASS - SCSS21 lectures • 2hr

Bootstrap26 lectures • 3hr 49min

JavaScript53 lectures • 10hr 40min

Requirements

Description

Who this course is for: