Web dünyasında etkileyici ve kullanıcı dostu tasarımlar oluşturmak, her geliştiricinin beceri setinde bulunması gereken önemli bir yetenektir. Bu makalede, HTML ve CSS kullanarak basit ama modern bir web tasarımı nasıl oluşturacağınızı adım adım ele alacağız.
1. HTML ile Sayfa Yapısını Oluşturma
HTML, bir web sayfasının iskeletini oluşturur. Tasarımımız için aşağıdaki gibi bir yapı kullanacağız:
HTML Kodları:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Yazılım Kodlama</title> <link rel="stylesheet" href="style.css"> </head> <body> <header class="header"> <div class="container"> <h1 class="logo">Yazılım Kodlama</h1> <nav class="nav"> <ul> <li><a href="#">Anasayfa</a></li> <li><a href="#">Hakkımızda</a></li> <li><a href="#">Projeler</a></li> <li><a href="#">İletişim</a></li> </ul> </nav> </div> </header> <section class="capt"> <div class="capt-text"> <h2>Web Tasarım ve Programlama Dersleri</h2> <p>Basit ve etkili eğitimlerle programlamayı öğrenin.</p> </div> </section> <section class="features"> <div class="container"> <div class="feature-card"> <img src="images/html.png" alt="HTML"> <h3>HTML Temelleri</h3> <p>Başlangıç seviyesindeki HTML eğitimlerimizle web sayfalarının yapısını anlayın.</p> </div> <div class="feature-card"> <img src="images/css.png" alt="CSS"> <h3>CSS Stiller</h3> <p>Web sayfalarınızı CSS teknikleriyle güzel bir şekilde nasıl şekillendireceğinizi öğrenin.</p> </div> <div class="feature-card"> <img src="images/js.png" alt="JavaScript"> <h3>JavaScript Temelleri</h3> <p>JavaScript ile web uygulamalarınız için etkileşim konusunda uzmanlaşın.</p> </div> </div> </section> <footer class="footer"> <p>© 2024 yazilimkodlama.com. All rights reserved.</p> </footer> </body> </html> |
2. CSS ile Stil Verme
CSS, web sitenize renk, tipografi ve düzen katmanı ekler. Tasarımımız için CSS kodumuz şu şekilde:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | /* CSS */ body { margin: 0; font-family: Arial, sans-serif; color: #333; } .header { background-color: #005f73; color: white; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.5em; } .nav ul { list-style: none; margin: 0; padding: 0; display: flex; } .nav li { margin: 0 10px; } .nav a { color: white; text-decoration: none; font-weight: bold; } .nav a:hover { text-decoration: underline; } .capt { background-color: #0a9396; color: white; text-align: center; padding: 50px 20px; } .features { padding: 40px 20px; background-color: #94d2bd; } .container { display: flex; flex-wrap: wrap; justify-content: center; } .feature-card { background: white; border-radius: 10px; margin: 20px; padding: 20px; width: 300px; text-align: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .feature-card img { max-width: 100px; margin-bottom: 10px; } .feature-card h3 { margin: 10px 0; color: #005f73; } .feature-card p { color: #333; } .footer { background-color: #005f73; color: white; text-align: center; padding: 10px 0; margin-top: 20px; } |
Bu kodlar:
- Renk uyumu için pastel tonlar kullanır.
- Mobil uyumlu tasarım için Flexbox düzeninden faydalanır.
- Kutu gölgeleri ile modern bir görünüm sağlar.
3. Kullanıcı Deneyimini İyileştirme
- Basitlik: Ziyaretçiler için sade ve anlaşılır bir tasarım.
- Hız: Hafif HTML ve CSS kodlarıyla hızlı yükleme süreleri.
- Responsive Tasarım: Flexbox ve duyarlı bir yapı sayesinde farklı cihazlarda uyumlu görünüm.
Sonuç
Bu örnekle, basit bir HTML ve CSS tasarımıyla modern ve estetik bir web sitesi oluşturabilirsiniz. Adımları uygulayarak kendi projelerinize de ilham verecek harika bir başlangıç yapabilirsiniz.
