Preview unavailable

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ı4

• 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?2

• 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)2

• Diğer HTML Etiketleri Neler1

• 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 Breadcrumbs2

• 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 Formu2

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ı2

• 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 Anlamak4

• 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ı2

• 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ışmak2

• 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ı1

• Array: .filter Kullanımı1

• 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ı - 13

• 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 Formu1

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