• 22-10-2025, 13:09:23
    #1
    Selamlar Dostlar.
    Yaklaşık bir süredir yazılım öğrenmeye başladım.
    Öncelikle HTML ve CSS yapılarını öğrendim, derslerim bitti sayılır ve çoğu konuya hâkimim diyebilirim.
    Ufak ufak kendi projelerimi oluşturmaya başladım, şu anda HTML ve CSS konusunda kendime güveniyorum.
    Etiketleme düzenine, dosya yapısına ve sade tasarımlara dikkat etmeye çalışıyorum.
    Bundan sonraki hedefim JavaScript, Bootstrap ve jQuery konularına geçmek olacak.
    Ancak öncesinde sizden birkaç tavsiye almak istiyorum:
    - HTML & CSS alanında kendimi daha fazla nasıl geliştirebilirim?
    -Gerçek dünya projelerine hazırlanmak için nasıl bir yol izlemeliyim?
    - Tavsiye edebileceğiniz kaynak, proje fikri veya pratik yöntemi var mı?
    Aşağıda örnek olarak hazırladığım ufak bir HTML & CSS çalışmamı paylaşıyorum.
    Ufak ufak başlıyorum. Hatalarım olabilir, yorum ve önerilerinizi bekliyorum 😊



    <!DOCTYPE html>
    <html lang="tr">
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Padding ve Margin Görsel Örnek</title>
    <style>
    body {
    font-family: Arial, sans-serif;
    background-color: #0f172a;
    color: #e2e8f0;
    text-align: center;
    padding: 40px;
    }

    h1 {
    color: #38bdf8;
    }

    .kapsayici {
    background-color: #1e293b;
    padding: 30px;
    border-radius: 10px;
    display: inline-block;
    }

    .kutu {
    background-color: #38bdf8;
    color: #0f172a;
    border: 4px solid #0ea5e9;
    padding: 30px;
    margin: 40px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    }

    .etiket {
    margin-top: 20px;
    background: #1e293b;
    padding: 10px 15px;
    border-radius: 8px;
    display: inline-block;
    font-size: 15px;
    }

    .aciklama {
    max-width: 600px;
    margin: 30px auto;
    color: #94a3b8;
    line-height: 1.6;
    }
    </style>
    </head>
    <body>
    <h1>CSS Box Model: Padding ve Margin</h1>

    <div class="kapsayici" style="border:2px dashed #64748b;">
    <div class="kutu">
    <strong>Ben bir kutuyum </strong><br>
    (padding = 30px, margin = 40px)
    </div>
    </div>

    <p class="etiket">Gri alan: margin (dış boşluk)</p><br>
    <p class="etiket" style="background:#38bdf8; color:#0f172a;">Mavi alan: padding (iç boşluk)</p>
    </body>
    </html>

    Görüşlerinizi, önerilerinizi ve tavsiyelerinizi paylaşırsanız çok mutlu olurum.
    Şimdiden teşekkür ederim
  • 22-10-2025, 13:26:15
    #2
    Selamlar hocam Allah yolunuzu açık başarılarınızı daim etsin.
    En güzel ve kalıcı öğrenme şekli öğretmedir. Tavsiyem bir site açın. Hangi proje yaparsanız yapın küçük büyük demeden sitenizde öğretin. Takipçiniz, ziyaretçiniz olsun ya da olmasın sanki milyonlara hitap ediyormuş gibi yazılarınızı yazın. Her detayına kadar verin. Bir hesap makinesi yaptığınızı varsayalım. Sitenizde:

    HTML CSS JS ile Hesap Makinesi Yapımı
    Selamlar [siteadi] takipçileri, bu yazımızda birlikte HTML CSS JS kullanarak hesap makinesi yapacağız.

    HTML Nedir ?
    xxxxxxxxxxxxx
    CSS Nedir ?
    xxxxxxxxxxxxxxxx
    JS Nedir?
    xxxxxxxxxxxxx

    Bu şekilde girişinizi yapın. Bu sayede seo uyumlu olur. Ardından kodun tamamını tek kalemde vermeyin. Parçalaya parçalaya anlatın. uzunca bir yapı oluşturun. en sonunda Tam kod bloğu şeklinde projenizin kodlarını verin.

    Kendi öğreniminiz için tek bir yere veya birkaç yere bağlı kalmayın. Size önereceğim site html.com fakat sadece burayla ilgilenmeyin. Google'da html projeleri yazın her projeyi kontrol edin. Bende bunu yapabilirim dediklerinizi not alın liste şeklinde. Ardından kodları inceleyin. Bu kişi böyle yapmış fakat ben olsam böyle yapardım diyip fikirlerinizi dökün. İnstagram ve redditte html css js konularının başlıklarının videolarının takipçisi olun. Pinterestte arama yapın (çok sayıda araç görselleri bulunuyor onları inceleyin, paylaşılan siteleri kontrol edin). YouTube derslerini izleyin ama kendinizi ne çok sıkın ne de çok gevşetin. Karışık ilerlemeyin ama tek yönlü bir yol da tercih etmeyin.

    İyi çalışmalar dilerim.
  • 22-10-2025, 13:35:01
    #3
    CSS de ilerleyince tailwinde bakmanızı öneririm
  • 22-10-2025, 16:18:27
    #4
    SerdR adlı üyeden alıntı: mesajı görüntüle
    Selamlar hocam Allah yolunuzu açık başarılarınızı daim etsin.
    En güzel ve kalıcı öğrenme şekli öğretmedir. Tavsiyem bir site açın. Hangi proje yaparsanız yapın küçük büyük demeden sitenizde öğretin. Takipçiniz, ziyaretçiniz olsun ya da olmasın sanki milyonlara hitap ediyormuş gibi yazılarınızı yazın. Her detayına kadar verin. Bir hesap makinesi yaptığınızı varsayalım. Sitenizde:

    HTML CSS JS ile Hesap Makinesi Yapımı
    Selamlar [siteadi] takipçileri, bu yazımızda birlikte HTML CSS JS kullanarak hesap makinesi yapacağız.

    HTML Nedir ?
    xxxxxxxxxxxxx
    CSS Nedir ?
    xxxxxxxxxxxxxxxx
    JS Nedir?
    xxxxxxxxxxxxx

    Bu şekilde girişinizi yapın. Bu sayede seo uyumlu olur. Ardından kodun tamamını tek kalemde vermeyin. Parçalaya parçalaya anlatın. uzunca bir yapı oluşturun. en sonunda Tam kod bloğu şeklinde projenizin kodlarını verin.

    Kendi öğreniminiz için tek bir yere veya birkaç yere bağlı kalmayın. Size önereceğim site html.com fakat sadece burayla ilgilenmeyin. Google'da html projeleri yazın her projeyi kontrol edin. Bende bunu yapabilirim dediklerinizi not alın liste şeklinde. Ardından kodları inceleyin. Bu kişi böyle yapmış fakat ben olsam böyle yapardım diyip fikirlerinizi dökün. İnstagram ve redditte html css js konularının başlıklarının videolarının takipçisi olun. Pinterestte arama yapın (çok sayıda araç görselleri bulunuyor onları inceleyin, paylaşılan siteleri kontrol edin). YouTube derslerini izleyin ama kendinizi ne çok sıkın ne de çok gevşetin. Karışık ilerlemeyin ama tek yönlü bir yol da tercih etmeyin.

    İyi çalışmalar dilerim.
    Güzel açıklamanız ve tavsiyeleriniz için çok teşekkür ederim hocam