مشاركة حلول: مهمة تنسيق تطبيق فيتامين واو

ورشات الواجهات الأمامية Frontend أساسيات تطوير واجهات الويب
#62

هـذا بـفـضـلـكـ وشـرحـكـ الـسـلـس شـكـررررآ لـكـ :blush: …

1 Like
#63

ما الخطأ فى هذا الكود ؟

<!DOCTYPE html>
<html lang="ar">
    <head>
        <meta charset="UTF-8">
        <title>فيتامين واو</title>
        <link href="https://fonts.googleapis.com/css?family=Tajawal&display=swap" rel="stylesheet">
    </head>
    <style>
        body {
            margin: 0;
            background-color: #171a29;
            font-family: 'Tajawal', sans-serif;
        }
        header h1{
            text-align: center;
            background-color: #212639;
            margin: 0;
            color: #fff;
            padding: 15px;
            font-size: 20px;
        }
        main {
            max-width: 600px;
            margin: 60px auto 60px auto;
            color: #fff;
            background-color: #171a29;
        }
        main h2 {
            text-align: center;
            margin-right: auto;
            margin-left: auto;
        }
        main p {
            
            text-align: center;
            margin-right: auto;
            margin-left: auto;
            
        }
        main img {
            display: block;
            margin: 50px auto;
            width: 600px;
            height: 210px;
        }
        main a {
            display: block;
            text-decoration: none;
            text-align: center;
            margin: 60px auto 0 auto;
            color: #fff;
            background-color: #3b7c3a;
            width: 110px;
            padding: 8px;
            font-size: 12px;
        }
        footer {
            text-align: center;
            background-color: #0f121b;
            color: #707281;
            height: 40px;
            line-height: 40px;
        }
    </style>
    <body>
        <header>
            <h1>فيتامين واو</h1>
        </header>
        <main>
            <h2>سنجعلك في المقدمة إن تأخرت</h2>
            <p>إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك.</p>
            <img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg" alt="صورة-فيتامين واو">
            <a href="#">اطلب وساطه</a>
        </main>
        <footer>
            <p>&copy; 2018 جميع الحقوق محفوظه لفيتامين واو </p>
        </footer>
    </body>
</html>
1 Like
#64

لا يوجد أي خطأ كل شئ ممتاز

1 Like
#66 
<!DOCTYPE html>
<html lang="ar">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/style.css">
        <link href="https://fonts.googleapis.com/css?family=Tajawal&display=swap" rel="stylesheet">
        <title>فيتامين واو</title>
        <style>
            body{
                background-color: #171a29;
                color: #fff;
                font-family: 'Tajawal', sans-serif;
                margin: 0 auto;   
            }
            
            header{
                background-color: #212639;
                text-align: center;
                height: 60px;
                line-height: 60px;
            }
            header h1{
                margin-top: 0px;
            }
            main{
                text-align: center;
                margin-bottom: 80px;
                margin-top: 80px;
            }
            main h2{
                margin-bottom: 40px;
            }
            main img{
                width: 600px;
                height: 210px;
                margin: 40px auto;
            }
            main a{
                background-color: #3b7c3a;
                color: #fff;
                height:40px;
                width:120px;
                line-height: 40px;
                display: block;
                text-decoration: none;
                text-align: center;
                margin: 0 auto; 
            }
            footer{
                background-color: #0f121b;
                color: #707281;
                text-align: center;
                margin-bottom: 0;
                height: 60px;
                line-height: 60px;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>فيتامين واو</h1>
        </header>
        <main>
            <h2>سنجعلك في المقدمة إن تأخرت</h2>
            <p id="pargraph1">إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب </p>
            <p id="pargragh2">ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك</p>
            <img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg" alt="واسطة">
            <br>
            <a href="#">اطلب وساطة</a>
        </main>
        <footer>
            <p>&copy;2018 جميع الحقوق محفوظة لفيتامين واو</p>
        </footer>
    </body>
</html>
#67

image
image.png1366×728 221 KB

image
image.jpg1366×728 219 KB

يبدو خلفية العنوان غير كاملة

1 Like
#68

النتيجة رائعة والمشكلة بسيطة، بالمناسبة لنقم بحل المشكلة الي بتواجهيها بوضع الاكواد هنا علشان تطرحيها لي ونشوف المشكلة سوا.

ما هي المشكلة الي تواجهك بعد ما شرحت لك طريقة كتابة الأكواد بإستخدام الكايبورد الفرنسي؟

أيضاً بإمكانك إستخدام المحرر الذي تكتبي فيها التعليقات لكتابة الأكواد بالشكل التالي:

1- الصقي الأكواد هنا

2- قومي بالتظليل عليها

3- إضغطي على الاداة التالية من المحرر

image
image.png1168×531 148 KB

#71

image
image.png1366×728 211 KB

عالجت الامر في اطلب الوساطة margin
وخلفية العنوان width
الان يبدو متناسق

image
image.jpg1366×728 209 KB

1 Like
#72

ممتاز :+1:

قومي بتجربة ارفاق الأكواد لي بالطريقة التي شرحتها لك اعلاة من خلال محرر التعليقات، عشان أراجع لك الأكواد

#73

لم يكتب كل الاكواد
راح اجرب اوكي

1 Like
#74 
<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="utf-8">
    <title>فيتامين واو</title>
    <link href="https://fonts.googleapis.com/css?family=Tajawal&display=swap" rel="stylesheet">
  <style>
 header{   
     height: 80px;
     width:960px;
}
      
 header h1{
     width:960;
     background-color:#171a29;
     text-align: center;
     font-family: 'Tajawal', sans-serif;
     font-size: 24px;
     line-height: 80px;
     margin: 0;
     color:#fff;
     
}
body{
    background-color: #212639;

}
  main {
      width: 960px;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      margin-top: 90px;
      font-family: 'Questrial', sans-serif;
}
  main h2{
      font-size: 30px;
      font-weight: normal;
      margin: 0;
      color:#fff;
  }
  main p{
      color: #fff;
      font-size: 18px;
  }
  main div{
      margin-top: 60px;
      margin-bottom: 60px;
 }
  main img{
      margin: 10px;
      width: 600px;
      height: 210px;
 }
  main a{
      width: 160px;
      height: 45px;
      display: block;
      margin-left: auto;
      margin-right: auto;
      line-height: 45px;
      text-decoration: none;
      font-size: 18px;
      border: 2px solid #3b7c3a;
      color: #fff;
      background-color:#3b7c3a;
      margin-top: 40px;
      margin-bottom: 60px;
      
  }
 
  footer{
      background-color:#0f121b;
      color:#707281;
      width: 960px;  
      text-align: center;
      height: 35px;
      display: block;
      margin-left: auto;
      margin-right: auto;
      line-height: 35px;
      margin-top: 90px;
   
      
  }        
</style>

</head>
<body>
    <header>
        <h1>فيتامين واو</h1>
    </header>
    <main>
        <h2>سنجعلك في المقدمة إن تأخرت</h2>
        <p>إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك.</p>
        <img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg">
        <br>
        <a href="#">اطلب وساطة</a>
    </main>
    <footer>
        <p>&copy;2018 جميع الحقوق محفوظة لفيتامين واو</p>
    </footer>
</body>
</html>
1 Like
#75

ممتاز، في المرة القادمة لتظليل كل الأكواد إضفطي على ctrl+a من لوحة المفاتيح وسيتم تظليل كل شئ في المحرر وبعد ذلك تقدري تضغطي على الاداة الي بتحولة لكود

#76

دقايق وراح أراجع اكوادك واجيب لك الملاحظات وخذيها في عين الإعتبار قبل الإنتقال للخطوة التالية.

#77

اوكي قمت بذلك
ولكن عند اللصق ما اعرف ليش ما كلها فقط بعضها راح احاول الان

<!DOCTYPE html>
فيتامين واو header{ height: 80px; width:960px; } 
 header h1{
     width:960;
     background-color:#171a29;
     text-align: center;
     font-family: 'Tajawal', sans-serif;
     font-size: 24px;
     line-height: 80px;
     margin: 0;
     color:#fff;
     
}
body{
    background-color: #212639;

}
  main {
      width: 960px;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      margin-top: 90px;
      font-family: 'Questrial', sans-serif;
}
  main h2{
      font-size: 30px;
      font-weight: normal;
      margin: 0;
      color:#fff;
  }
  main p{
      color: #fff;
      font-size: 18px;
  }
  main div{
      margin-top: 60px;
      margin-bottom: 60px;
 }
  main img{
      margin: 10px;
      width: 600px;
      height: 210px;
 }
  main a{
      width: 160px;
      height: 45px;
      display: block;
      margin-left: auto;
      margin-right: auto;
      line-height: 45px;
      text-decoration: none;
      font-size: 18px;
      border: 2px solid #3b7c3a;
      color: #fff;
      background-color:#3b7c3a;
      margin-top: 40px;
      margin-bottom: 60px;
      
  }
 
  footer{
      background-color:#0f121b;
      color:#707281;
      width: 960px;  
      text-align: center;
      height: 35px;
      display: block;
      margin-left: auto;
      margin-right: auto;
      line-height: 35px;
      margin-top: 90px;
   
      
  }        
</style>

</head>
<body>
    <header>
        <h1>فيتامين واو</h1>
    </header>
    <main>
        <h2>سنجعلك في المقدمة إن تأخرت</h2>
        <p>إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك.</p>
        <img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg">
        <br>
        <a href="#">اطلب وساطة</a>
    </main>
    <footer>
        <p>&copy;2018 جميع الحقوق محفوظة لفيتامين واو</p>
    </footer>
</body>
1 Like
#78

نفس الشيء عملت مثل ماقلت لي
ولكن لم يلصق كليا

image
image.png1366×728 158 KB

1 Like
#79

مية مية نبيلة قمتي بعمل رائع! :smiley:

فقط هذه ملاحظاتي:

1- هذه صورة للموقع من على شاشتي

image
image.jpg1670×905 178 KB

كما تلاحظي أن الـ header و الـ footer مش أخذين عرض الشاشة كاملة فأنتي جبتي لكل واحد منهما الخاصية width بالقيمة 960px لذا قومي بتغيير هذه القيمة إلى قيمة نسبية تأخذ عرض الشاشة كاملة.

2- قمتي بإعطاء العنصر h1 الي بداخل الـ header الخاصية width بالقيمة 960 بدون تحديد وحدة القياس px قومي بإصلاح ذلك.

#80

اوك مش مشكلة راح تلاقي طريقة تتجاوزيها :wink:

#81
header{ height: 80px; width:960; } 
 header h1{
     width:960px;
     background-color:#171a29;
     text-align: center;
     font-family: 'Tajawal', sans-serif;
     font-size: 24px;
     line-height: 80px;
     margin: 0;
     color:#fff;
     
}

ممكن تلاحظ فقط الـ header و الـ footer ان هي صحيحة
وماهو الحل ؟
حاولت اعمل قيمة نسبية % قي flotter في ولكن اختفت الكتابة

1 Like
#82

كم القيمة التي عملتيها ؟

#83

نفس القيمة 960%

1 Like
#84

أقصى قيمة بإمكانك إستخدامها هي مئة من مئة 100%