Proje Detayları
Bu projede, responsive tasarım prensiplerini kullanarak bir portfolio web sitesi oluşturacaksınız. Bu alıştırma, öğrendiğiniz responsive tasarım ve medya sorgusu özelliklerini gerçek bir web sitesi projesinde uygulamanıza yardımcı olacaktır.
Proje Adımları:
- Bir HTML dosyası oluşturun ve portfolio için temel yapıyı hazırlayın (header, nav, hero, about, portfolio, contact, footer).
- Mobile First yaklaşımı kullanarak CSS dosyasını oluşturun ve temel mobil stilleri tanımlayın.
- En az 4 farklı breakpoint tanımlayın (mobil, tablet, laptop, desktop) ve her biri için uygun medya sorguları yazın.
- Navigation menüsünü responsive yapın (mobilde hamburger menü, büyük ekranlarda horizontal menü).
- Portfolio galerisi için responsive grid sistemi oluşturun (mobilde 1 sütun, tablette 2 sütun, desktopte 3-4 sütun).
- Tüm görselleri responsive yapın ve farklı ekran boyutları için optimize edin.
- Typography sistemini responsive yapın (farklı ekran boyutlarında farklı yazı boyutları).
- Touch-friendly butonlar ve interaktif elementler ekleyin.
- Tüm cihazlarda test edin ve gerekli iyileştirmeleri yapın.
Başlangıç HTML Kodu:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Portfolio</title>
<link rel="stylesheet" href="portfolio.css">
</head>
<body>
<header class="header">
<div class="container">
<div class="logo">
<h1>Adınız Soyadınız</h1>
</div>
<nav class="nav">
<button class="nav-toggle">☰</button>
<ul class="nav-menu">
<li><a href="#home">Ana Sayfa</a></li>
<li><a href="#about">Hakkımda</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">İletişim</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section id="home" class="hero">
<div class="container">
<h2>Web Developer</h2>
<p>Modern ve responsive web siteleri oluşturuyorum.</p>
<button class="cta-button">Projelerimi Gör</button>
</div>
</section>
<section id="about" class="about">
<div class="container">
<h2>Hakkımda</h2>
<div class="about-content">
<div class="about-text">
<p>5 yıllık deneyime sahip web developer...</p>
</div>
<div class="about-image">
<img src="profile.jpg" alt="Profil Fotoğrafı">
</div>
</div>
</div>
</section>
<section id="portfolio" class="portfolio">
<div class="container">
<h2>Portfolio</h2>
<div class="portfolio-grid">
<div class="portfolio-item">
<img src="project1.jpg" alt="Proje 1">
<h3>E-ticaret Sitesi</h3>
</div>
<div class="portfolio-item">
<img src="project2.jpg" alt="Proje 2">
<h3>Kurumsal Website</h3>
</div>
<div class="portfolio-item">
<img src="project3.jpg" alt="Proje 3">
<h3>Blog Platformu</h3>
</div>
<div class="portfolio-item">
<img src="project4.jpg" alt="Proje 4">
<h3>Mobil Uygulama</h3>
</div>
</div>
</div>
</section>
<section id="contact" class="contact">
<div class="container">
<h2>İletişim</h2>
<div class="contact-content">
<div class="contact-info">
<p>Email: ornek@email.com</p>
<p>Telefon: +90 555 123 45 67</p>
</div>
<form class="contact-form">
<input type="text" placeholder="Adınız">
<input type="email" placeholder="Email">
<textarea placeholder="Mesajınız"></textarea>
<button type="submit">Gönder</button>
</form>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<p>© 2025 Adınız Soyadınız. Tüm hakları saklıdır.</p>
</div>
</footer>
<script src="portfolio.js"></script>
</body>
</html>Bu HTML dosyasını ve boş portfolio.css ve portfolio.js dosyalarını oluşturun, ardından dosyaları yukarıdaki adımlara göre doldurun.