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

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

كنت عايزه اعرف بس هو الكود تمام كدا ولا فى حاجه محتاجه تعديل… شكرا

1 Like
#101

عمل مضبوط :star_struck:، لدي بعض الملاحظات:

1- قمت بإستعمال الفقرة النصية لعنوان الموقع

<p> فيتامين واو </p>

من الأفضل إستخدام عنوان من المستوى الأول بدلاً من ذلك ليكون له معنى لدى محركات البحث.

قمت بإستخدام الترميز windows-1256 والذي قد يسبب مشاكل مع بعض اللغات، الأفضل إستخدام الترميز utf-8 فقم بإستبدال ذلك

<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />

أو قم بإستخدام الكود المختصر التالي:

<meta charset="utf-8">

في الفوتر يوجد قمت بكتابة الفقرة النصية بداخل div مباشرة، كالتالي:

<div>
  @ جميع الحقوق محفوظة لفتامين واو 2018
</div>

لا يوجد أي مشكلة في ذلك ولكن من الأفضل أن يتم إستخدام عنصر دلالي يوضح بأن هناك فقرة نصية والذي هو العنصر p بدلاً من عنصر التقسيم div والذي لا يحمل أي معنى.

ماعدا ذلك من تنسيقات وتقسيم فهو ممتاز :+1:

#102

رائع ي إبتسام، كل شئ ممتاز :star_struck::ok_hand:

ملاحظة واحدة فقط:

من الأفضل وضع العنوان الرئيسي بالصفحة او نص شعار الموقع بدأخل عنصر عنوان من المستوى الأول h1 بدلاً من وضعة بدأخل العنصر header مباشرة:

<header>فيتامين واو</header>

لأن ذلك راح يساعد في عمل هيكلة الصفحة والـ Heading Outline كما شرحنا في درس العناوين في أول ورشة عمل.

1 Like
#103

ممتاز ي نجم :+1::star_struck:

خذ في عين الإعتبار تصفير الهوامش margin لكلاً من العنوان الرئيسي h1 وجسم الصفحة body

#104 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>salima</title>

        <link href="https://fonts.googleapis.com/css?family=Tajawal&display=swap" rel="stylesheet">
        <style>
            header{
           
                background-color: #212639;
                text-align: center;
                font-family: Tajawal;
               
            }
           body{
               margin: 0;
                background-color:#171a29;
            }
            h2{
                color:#fff;
                text-align: center;
                font-family: Tajawal;
                margin-top: 30px;
            }
            p{
                color:#fff;
                text-align: center;
                font-family: Tajawal;
            }
            
            h1{
                 margin: 0;
                color:#fff;
            }
            a{
                background-color: darkolivegreen;
                margin-left:auto;
                margin-right: auto;
                width: 150px;
                height: 45px;
                display:block;
                line-height: 45px;
                text-decoration: none;
                text-align: center;
                font-size: 18px;
                 color:#fff;
                font-family: Tajawal;
                
            }
       
            img{
                width: 600px;
                height: 210px;
              margin-left: 350px;
                margin-top: 30px;
                margin-bottom: 30px;
            }
            main{
                margin-top: 90px;
                margin-bottom: 100px;
            }
            footer{
                background-color: #0f121b;
                height: 50px;
                
            }
        </style>
        
        
    </head>
<body>
        <header>
            <h1>فيتامين واو</h1>
        </header>
        <main>
            <h2>سنجعلك في المقدمة إن تأخرت</h2>
            <p>إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك.</p>
            <div>
    <img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg">
    </div>
    <a href="#">اطلب وساطة</a>
        </main>
     <footer>
            <p>&copy; جميع الحقوق محفوظة لفيتامين واوا 2018</p>
        </footer>
        
    </body>
</html>
#105

مرحبا @salimaben

عمل رائع :clap:

عندي ملاحظة واحدة:

قمتي بإعطاء الصورة هامش من اليسار بقيمة 350px في القاعدة التالية:

img{
      width: 600px;
      height: 210px;
      margin-left: 350px;
      margin-top: 30px;
      margin-bottom: 30px;
}

وهذه ستكون النتيجة:

image
image.jpg1229×828 169 KB

كما تلاحظي الصورة ليست في المنتصف حسب ما نريد وإنما يتم إزاحتها بقيمة 350px من جهة اليسار. لذا نريد أن يقوم المتصفح بتوسيطها بشكل تلقائي وتستطيعي تحقيق ذلك بأكثر من طريقة.

أحد هذه الطرق هي من خلال إعطاء الـ div الذي يحتوي على الصورة الخاصية text-align: center

div{
    text-align: center;
}
img{
      width: 600px;
      height: 210px;
      margin-top: 30px;
      margin-bottom: 30px;
}

لاحظي في الكود أعلاة قمت بمسح الخاصية margin-left: 350px; من قاعدة الصورة وأضفت القاعدة التي تستهدف الـ div وقمت بإستخدام خاصية توسيط النصوص.

لماذا ستعمل خاصية توسيط النصوص مع الصورة؟

وذلك لأن الصور من النوع inline لذا سيتم توسيطها بداخل الـ div

النتيجة:

image
image.jpg1229×828 169 KB

بالمناسبة أرجوا وضعك للأكواد بشكل صحيح في المنتدى كما تم شرحة في الموضوع التالي:

#107

ارجو انخ لايوجد اخطاء :sweat_smile:

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

ممتاز :clap: لا يوجد أي خطأ عدا شئ بسيط الخاصية width في قاعدة الـ main انت كاتبها wigth.

1 Like
#109

هذا ما استطعت التوصل اليه بعد شغل 4 ساعات
لا مكان لليأس -_*

<!DOCTYBE html>
<html>
    <head>
        <meta charset="utf=8">
        <title>vitamen oaaao</title>
        <link href="https://fonts.googleapis.com/css?family=Tajawal&display=swap" rel="stylesheet">
        
        <style>
            header{
                background-color: #212639;    
            }
            body{
                margin: 0;
                background-color: #171a29;
                color: #fff;
            
            }
            header  h1{
             margin: 0;
             color: #fff;   
             font-family: 'Tajawal', sans-serif; 
             text-align: center;
             padding:2% 0 2% 0;
            }
            header {
                background-color: #212639;
            }
            main {
                text-align: center;
                font-family: 'Tajawal', sans-serif;     
            }
            main h2{
              margin-top: 50px;
                
                
            }
           
            main div img {
            margin: 40px ;
            width:600px;
             
         } 
          main  a{
             color: #fff;
             width:200px;
             background-color:#3b7c3a;
             text-align:center;
             text-decoration: none;
             padding: 10px 20px 10px 20px;
             margin: 0 auto 80px auto;
             display: block
             
         }  
        footer  {
             background-color:#0f121b;
             margin:0;
             padding:4px;
         }
         footer{
             color:fff;
             font-family: 'Tajawal', sans-serif;
             text-align:center; 
             
             
             
             
         }
         
            }
        </style>
        
    </head>
    <body>
        <header>
       <h1>فيتامين واو </h1>     
        </header>
        <main>
            <h2>
                سنجعلك في المقدمة ان تأخرت
            </h2>
            <p>
                إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك.
            </p>
             <div>
            <img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg">
           </div>
           <a href="#" >اطلب وساطة</a>   
        </main>
        <footer>
           <p>&copy; جميع الحقوق محفوضة لفيتامين واو </p>
        </footer>
    </body>
    
</html>![%D8%B3%D8%B3|471x466](upload://zqW2kfOmqCftD7EvBphIhNnF8OC.jpeg) 
```![%D8%B3%D8%B3|471x466](upload://bVO3Rv0ChMkl4MM3jlcX9hXHpGs.png)
1 Like
#110

%D8%B3%D8%B3

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

styling%20vitamine%20waw
styling vitamine waw.png985×571 117 KB

1 Like
#113

عمل جميل ي بسام كل شئ مضبوط معك بس قوس { زايد في نهاية اكواد الـ CSS.

#114

مية مية عمل ممتاز

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

مية مية :+1:

1 Like
#117

المشروع معا بعض التعديلات :grin:

998Z
Firefox_Screenshot_2019-09-09T18-13-43.998Z.jpg1349×761 133 KB 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> فيتامين واو</title>
        <link href="https://fonts.googleapis.com/css?family=Tajawal&display=swap&subset=arabic" rel="stylesheet">
        <style>
            body{
                color:gold;
                margin:0;
                text-align:center;
                font-family: 'Tajawal', sans-serif;
            }
            h1{margin:0}
            header{
                background-color:#212639;
                height:66px;
            }
            header h1{
                line-height:50px;
            }
            main{
                background-color:#171a29;
                height:635px;
            }
            main h1{
                padding:55px 0 20px;
            }
            main p{
                width: 600px;
                margin:0 auto 53px;
                line-height: 30px;
                font-weight: 700;
            }
            main img{
                border: 2px solid;
                width:600px;
                height:210px;
            }
            main div{
                margin:52px auto 0;
                width:190px;
                line-height:54px;
                border: 2px solid;
                background-color:#11111d;
            }
            main div a{
                text-decoration:none;
                color:gold;
                font-size: 20px;
            }
            footer{
                background-color:#11111d;
            }
            footer p{
                margin:0;
                line-height:60px;
                color:#999;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>فيتامين واو</h1>
        </header>
        <main>
            <h1>سنجعلك في المقدمة إن تأخرت </h1>
            <p>إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك.</p>
            <img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg" alt="فيتامين واو">
            <div>
                <a href="#">اطلب وساطه</a>
            </div>
        </main>
        <footer>
            <p>&copy; 2019 جميع الحقوق محفوظه لفيتامين واو</p>
        </footer>
    </body>
</html>
1 Like
#118

عمل رائع :ok_hand::clap:

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

%D8%B9
ع.png1364×575 92.6 KB

1 Like