Kendi Kişisel Web Siteni Kodla! React & Next.js ile Portföy

Name: Kendi Kişisel Web Siteni Kodla! React & Next.js ile Portföy
Rating: 3.8 (13 reviews)

React ve Next.js 14 ile modern, mobil uyumlu bir portföy sitesi geliştir ve yayına al!

Created byMehmet Toprak

Last updated 5/2025

Turkish

Turkish [Auto],

What you'll learn

React ve Next.js kullanarak modern, mobil uyumlu bir portföy sitesi oluşturmayı öğrenin.
Next.js’in dosya tabanlı routing yapısıyla sayfalar arasında geçiş yapmayı öğrenin.
Tailwind CSS kullanarak şık, duyarlı ve sade arayüzler tasarlamayı öğrenin.
Projeyi baştan sona geliştirip GitHub’a yüklemeyi ve Vercel ile yayına almayı öğrenin.

Course content

3 sections • 11 lectures • 1h 55m total length

Giriş2:53
Merhaba! ? Bu kursun ilk videosuna hoş geldin!
Bu derste, kurs boyunca birlikte geliştireceğimiz projeyi tanıtıyorum. Adım adım ilerleyeceğimiz bu proje sayesinde, React'in temel yapı taşlarını ve modern web geliştirme tekniklerini uygulamalı olarak öğreneceğiz.
? Bu derste neler var?
Geliştireceğimiz projenin genel yapısını ve hedeflerini tanıma,
Kullanacağımız teknolojiler (React, Next.js, Tailwind CSS, vb.) hakkında kısa bir özet,
Projenin kullanıcı arayüzü, sayfa yapıları ve bileşen mantığını anlama,
Derslerde izleyeceğimiz adımlar ve proje yol haritası.
? Bu projeyi tamamladığında:
Modern bir web uygulaması geliştirmiş olacaksın,
Component tabanlı yapı ile arayüz tasarımını öğrenmiş olacaksın,
React'in güçlü özelliklerini gerçek bir projede deneyimleyeceksin.
?‍? Eğer hazırsan, projemizi incelemeye ve ilk satır kodumuzu yazmaya başlayalım!
Bu serüvenin sonunda, öğrendiklerini kendi projelerine de rahatça uygulayabileceksin. ?

Proje Oluşturma3:10
Merhaba! ? İlk dersimizde proje tanıtımını yapmıştık. Şimdi gerçek adımlara geçiyoruz!
Bu derste, React projemizi sıfırdan nasıl oluşturacağımızı ve GitHub ile nasıl entegre edeceğimizi birlikte göreceğiz. Ayrıca sürüm kontrolünü nasıl yöneteceğimiz ve projeyi nasıl yayınlayacağımız üzerine de konuşacağız.
? Bu derste neler öğreneceksin?
React projesi oluşturma (npx create-react-app veya npx create-next-app),
Proje klasör yapısının detaylı incelenmesi,
VS Code üzerinde çalışma ortamının hazırlanması,
Git ile yerel repo oluşturma,
GitHub'da yeni bir repository açma ve projeyi bağlama,
Versiyon kontrol işlemleri (commit, push, pull),
Projeyi GitHub üzerinden paylaşma ve sürüm yönetimi.
Tailwind Config Ayarları3:19
Merhaba! ? Projemizi oluşturduk, GitHub bağlantımızı kurduk. Şimdi sıra, proje yapılandırmasını tamamlamaya geldi.
Bu derste, projemizin temel ayarlarını yapacak ve daha esnek bir geliştirme ortamı sağlayacağız.
? Bu derste neler öğreneceksin?
package.json dosyası üzerinde gerekli ayarları yapma,
config dosyalarının oluşturulması ve yapılandırılması,
Global stil dosyalarının düzenlenmesi.

Custom Button Bileşeni9:49
Merhaba! ? Bir önceki derste proje yapılandırmasını tamamladık. Şimdi, projemizi daha dinamik ve kullanışlı hale getirecek bileşenler geliştirmeye başlıyoruz.
Bu derste, sıkça kullanacağımız Custom Button bileşenini sıfırdan inşa edeceğiz. Bu bileşen, projedeki buton tasarımlarını merkezi bir noktadan kontrol etmemizi sağlayacak.
? Bu derste neler öğreneceksin?
React'te bileşen yapısı oluşturma,
Custom Props kullanarak esnek yapı sağlama,
Buton stillerini ve işlevlerini özelleştirme,
Tıklanma olaylarını (onClick) yönetme,
Reusable (Yeniden Kullanılabilir) bileşen mantığını anlama.
Footer Bileşeni -114:53
Merhaba! ? Custom Button bileşenimizi tamamladık. Şimdi sırada, projemizin alt yapısını güçlendirecek olan Footer bileşeni var.
Bu derste, Footer bileşenimizi yapılandıracağız ve daha düzenli bir görünüm sağlamak amacıyla iki ana bölüme ayıracağız.
? Bu derste neler öğreneceksin?
Footer bileşeninin temel yapısını oluşturma,
Footer'ı iki ana bölüme ayırma (Örnek: Bilgilendirme & Sosyal Medya Linkleri),
Bölümlendirme mantığını planlama,
İlerleyen derslerde JSX ile entegrasyon için gerekli yapıyı hazırlama.
Footer Bileşeni -27:19
Merhaba! ? Bir önceki derste Footer bileşenimizi iki ana bölüme ayırarak yapılandırdık. Şimdi sıra, bu yapıyı JSX ile kodlamaya geldi!
Bu derste, Footer'ın her iki bölümünü de JSX kullanarak ekrana nasıl yansıtacağımızı birlikte göreceğiz.
? Bu derste neler öğreneceksin?
Footer bileşeninin JSX yapısını oluşturma,
İki ana bölümün (Bilgilendirme & Sosyal Medya Linkleri) ekrana yansıtılması,
React'te listeleme işlemleri (map) ile linklerin dinamik şekilde gösterilmesi,
JSX ile HTML elementlerinin modern bileşen yapısında kullanımı,
Temel stil uygulamaları ile görsel düzenlemeler.
Layout Ayarları6:09
Merhaba! ? Bir önceki derste Footer bileşenimizi tamamladık. Şimdi sıra, projemizin temel yapısını yönetecek olan Layout.tsx dosyasında.
Bu derste, uygulamamızın genel tasarımını ve SEO optimizasyonlarını Layout bileşeni üzerinden yapılandıracağız.
? Bu derste neler öğreneceksin?
layout.tsx dosyası nedir ve proje yapısında nasıl kullanılır?
Uygulama genel tasarımını (Header, Footer, Main Content) merkezi bir noktadan yönetme,
SEO optimizasyonu için Meta Tag ayarları (<title>, <meta name="description">, <meta name="keywords">),
Global stil ve script dosyalarının eklenmesi,
Head bileşeni ile dinamik sayfa başlıkları oluşturma,
React Helmet veya Next.js Head bileşeni ile SEO uyumlu yapı kurma.
Navbar Bileşeni21:23
Merhaba! ? Layout yapılandırmasını tamamladık. Şimdi, projemizin en önemli parçalarından biri olan Navbar (Navigasyon Çubuğu) bileşenini inşa ediyoruz.
Bu derste, Navbar bileşenini sıfırdan oluşturacak, sayfa geçişlerini sağlayacak linkleri ekleyecek ve duyarlı (responsive) bir tasarım hazırlayacağız.
? Bu derste neler öğreneceksin?
Navbar bileşeninin temel yapısını oluşturma,
Sayfa geçişleri için Link kullanımı,
Navbar menüsünde aktif link gösterimi,
Mobil uyumlu (responsive) tasarım prensipleri,
Hamburger menü ekleme ve açılır menü tasarımı,
Global state ile açık/kapalı kontrolü sağlama.
Welcome Bileşeni25:56
Merhaba! ? Navbar bileşenimizi tamamladık. Şimdi, projemizin ana sayfasını daha etkileyici hale getirmek için Welcome bileşenini inşa ediyoruz.
Bu derste, ana sayfaya hoş geldin mesajı ekleyecek, kullanıcıya sıcak bir karşılama sunacağız. Modern tasarım prensipleriyle sade ama şık bir görünüm oluşturacağız.
? Bu derste neler öğreneceksin?
Welcome bileşeninin yapısını oluşturma,
Dinamik mesaj gösterimi,
Basit animasyonlar ve geçiş efektleri ekleme,
CSS ile stillendirme,
Responsive tasarım ile her ekranda uyumlu görünüm sağlama.
Status Bileşeni8:30
Merhaba! ? Ana sayfamıza sıcak bir karşılama ekledik. Şimdi, Status bileşenini inşa ediyoruz.
Bu bileşen, projenin genel durumunu, kullanıcı bilgilerinin özetini veya ana sayfada gösterilmesi gereken önemli bilgileri sergileyecek.
? Bu derste neler öğreneceksin?
Status bileşeninin temel yapısını oluşturma,
Dinamik veri gösterimi (API'den alınan veriler veya local state üzerinden),
Durum bilgilerini listeleme ve güncel tutma,
Stillerle görünümü güçlendirme,
Responsive tasarım ile her ekranda uyumlu gösterim sağlama.
BackEndStacks Bileşeni11:55
Merhaba! ? Ana sayfa bileşenlerimizi oluşturduk, artık yeteneklerimizi sergileyebileceğimiz BackendStacks bileşenini inşa etmeye başlıyoruz.
Bu bileşen, "My Skills" bölümünde seçilen BackEnd kategorisine tıklandığında, ilgili teknolojilerin simgelerini ve açıklamalarını gösterecek.
? Bu derste neler öğreneceksin?
BackendStacks bileşeninin yapısını oluşturma,
Kategoriye göre dinamik veri gösterimi,
Seçilen kategoriye özel içeriklerin filtrelenmesi,
CSS ile şık ve düzenli bir kart tasarımı,
Simge (icon) kullanımı ve stillendirilmesi.

Requirements

Mini düzeyde programlama bilgisi gerekmektedir. Geri kalan her şeyi birlikte öğreneceğiz.

Description

Bu kurs, modern web geliştirme dünyasında güçlü ve profesyonel bir portföy sitesi oluşturmak isteyen herkes için tasarlandı. React ve Next.js 14 kullanarak sıfırdan yayına hazır bir kişisel web sitesi geliştiriyoruz. Özellikle yazılımcılar, tasarımcılar ve yaratıcı profesyoneller için dijital kimliklerini etkili bir şekilde yansıtacakları, mobil uyumlu ve performans odaklı bir site kurmayı adım adım öğrenilecek. Gerçek dünya projeleriyle desteklenen içerikler sayesinde teorik bilgiyi pratiğe dökme şansı bulacaksınız.

Kurs boyunca bileşen tabanlı düşünme yapısını kavrayacak, dosya tabanlı routing sistemi ile çok sayfalı bir yapı oluşturacak ve Tailwind CSS ile şık bir arayüz tasarımı gerçekleştireceksiniz. SEO uyumluluğundan statik sayfa üretimine, responsive tasarımdan sayfa geçişlerine kadar birçok temel ve ileri seviye konuyu uygulamalı olarak işleyeceğiz.

Ayrıca, projenizi GitHub’a yüklemeyi, versiyon kontrolü sağlamayı ve Vercel gibi platformlar aracılığıyla sitenizi internette yayına almayı öğreneceksiniz. Bu süreç, sadece teknik bilgi kazandırmakla kalmayacak, aynı zamanda kendi kişisel markanızı oluşturma konusunda size güçlü bir adım attıracak.

Kurs, başlangıç seviyesinden orta seviyeye kadar herkes için uygundur. Teknik bilgisi sınırlı olan kişiler bile anlatımın akıcı ve örneklerle dolu yapısı sayesinde projeyi tamamlayabilecek düzeye ulaşacaktır. Eğer siz de CV’nize ekleyebileceğiniz somut bir proje ile fark yaratmak istiyorsanız, doğru yerdesiniz. Hemen başlayın ve kendi profesyonel portföy sitenizi birlikte inşa edelim!
- Mehmet Toprak

Who this course is for:

React ve Next JS öğrenmek isteyenler
Kendi kişisel portföyünü yapmak isteyenler

Kendi Kişisel Web Siteni Kodla! React & Next.js ile Portföy

What you'll learn

Explore related topics

Course content

Giriş1 lecture • 3min

Başlangıç2 lectures • 6min

Bileşenler8 lectures • 1hr 46min

Requirements

Description

Who this course is for: