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

Alhakem · 2 أبريل 2019، 8:48م

مرحباً جميعاً

المهمة المطلوبة:

طريقة مشاركة الأكواد التي قمت بكتابتها:

قم بنسخ الأكواد من بيئة العمل ومن ثم لصقها بين هذه العلامات

```
هنا ضع الأكواد
```

شاهد الفيديو التالي لتعرف طريقة مشاركة الأكواد للمنتدى بشكل منسق

mofi · 20 مارس 2019، 11:27ص

مرحبا ما رأيكم

<!DOCTYPE html5>
<html>
 <head>
     <meta charset="utf-8">
     <link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="style.css">
     <title></title>
     
 <style>
     body{
	margin: 0;
	background-color: #171a29;
	color: #fff;
    font-family: 'Tajawal', sans-serif;

}
header{
	background-color: #212639;
    height:40px;
	text-align: center;
    font-size:10px;
    line-height:40px;
    margin-top:0;
    margin-bottom:30px;
    
}
main {
		text-align: center;

}
main img{
	width: 600px;
	height: 210px ;
}
main a{
    display:block;
    background-color:green;
    text-decoration:none;
    color:#FFF;
    font-size:12px;
    width:100px;
    height:30px;
    line-height:30px;
    margin-left:auto;
   margin-right:auto;
}
main .p-one{
    font-size:15px;
    font-weight:bold;
    
}
main .p-two{
   width:450px; 
   text-align:center;
   font-size:12px;
   line-height:20px;
    font-weight:bold;
   margin-left:auto;
   margin-right:auto;
}
main img{
    margin-top:30px;
    margin-bottom:30px;
}
footer{
	background-color:#0f121b;
	color:#707281; 
    font-size:15px;
	text-align: center;
    margin-top:30px;
    margin-bottom:0;
    height:30px;
    line-height:30px;

}
  </style>   
 </head>
 <body>
    <header><h1> فيتاميــن واو</h1></header>
    <main>
        <p class="p-one">سنجعلك في المقدمة إن تأخرت</p>
        <p class="p-two">إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك
.</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>
````

mofi · 20 مارس 2019، 11:29ص

FireShot Capture 028 - بيئة عمل_ تنسيقات موقع فيتامين واو - أساسيات تطوير واجهات الويب_ - coretabs.net.png689×576 155 KB

Alhakem · 20 مارس 2019، 12:07م

ممتاز ، ملاحظتين فقط

الأولى: تأكدي من هذا الكود فيه حاجة زايدة

<!DOCTYPE html5>

الثانية: هناك margin فوق الـ header بدنا نتخلص منها.

أنتي قمتي بإعطاء الهيدر الخاصية margin من الأعلى بالقيمة 0 بالشكل التالي:

header{
    margin-top: 0;
}

لكن على ما يبدوا بأن هذه القيمة ليس لها تأثير لان المسافة فوق الهيدر مازلت موجودة، ما يوحي بأنه لازم نجرب نعطي الخاصية الي جبتيها للهيدر لعنصر أخر بدأخل الهيدر بدلاً من الهيدر نفسة.

جربي ذلك و وريني الكود.

mofi · 20 مارس 2019، 12:15م

شكرا لك لقد عدلت الكود أضفت margin للعنصر h1 بدلا من header
لقد صححت الخطأ الأول

  <!DOCTYPE html>
<html>
 <head>
     <meta charset="utf-8">
     <link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="style.css">
     <title></title>
     
 <style>
     body{
	margin: 0;
	background-color: #171a29;
	color: #fff;
    font-family: 'Tajawal', sans-serif;

}
header{
	background-color: #212639;
    height:40px;
	text-align: center;
    font-size:10px;
    line-height:40px;
    margin-bottom:30px;
    
}
header h1{
 margin-top: 0; 
}
main {
		text-align: center;

}
main img{
	width: 600px;
	height: 210px ;
}
main a{
    display:block;
    background-color:green;
    text-decoration:none;
    color:#FFF;
    font-size:12px;
    width:100px;
    height:30px;
    line-height:30px;
    margin-left:auto;
   margin-right:auto;
}
main .p-one{
    font-size:15px;
    font-weight:bold;
    
}
main .p-two{
   width:450px; 
   text-align:center;
   font-size:12px;
   line-height:20px;
    font-weight:bold;
   margin-left:auto;
   margin-right:auto;
}
main img{
    margin-top:30px;
    margin-bottom:30px;
}
footer{
	background-color:#0f121b;
	color:#707281; 
    font-size:15px;
	text-align: center;
    margin-top:30px;
    margin-bottom:0;
    height:30px;
    line-height:30px;

}
  </style>   
 </head>
 <body>
    <header><h1> فيتاميــن واو</h1></header>
    <main>
        <p class="p-one">سنجعلك في المقدمة إن تأخرت</p>
        <p class="p-two">إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك
.</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>

mofi · 20 مارس 2019، 12:17م

FireShot Capture 029 - بيئة عمل_ تنسيقات موقع فيتامين واو - أساسيات تطوير واجهات الويب_ - coretabs.net.png694×577 155 KB

Alhakem · 20 مارس 2019، 12:36م

الان كل شيء مية مية

mofi · 20 مارس 2019، 12:38م

شكرا اخي محمد سأنتقل ان شاء الله الى المهمة التالية

imadabashaar · 23 مارس 2019، 12:37م

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>فيتامين واو</title>
        <link href="https://fonts.googleapis.com/css?family=Baloo+Bhaijaan|Tajawal" rel="stylesheet">
        <style>
            header{
                margin: 0;
            }
            header h1{
                background-color: #212639;
                text-align: center;
                font-size: 25px;
                margin: 0;
                line-height: 80px;
                height: 80px;
                color: #fff;
                font-family: 'Baloo Bhaijaan', cursive;
                
            }
            body{
                margin: 0;
                background-color: #171a29;
            }
            main{
                width: 960px;
                margin-left: auto;
                margin-right: auto;
                margin-top: 90px;
                text-align: center;
                font-family: 'Tajawal', sans-serif;

            }
            main h2{
                color: #fff;
                
            }
            main p{
                color: #fff;
            }
            main img{
                margin-top: 60px;
                width: 600px;
                height: 210;
            }
            div a{
                background-color: #3b7c3a;
                width: 160px;
                height: 45px;
                display: block;
                color: #fff;
                text-decoration: none;
                font-size: 18px;
                margin: 60px auto 90px auto;
                font-family: 'Tajawal', sans-serif;
                line-height: 45px;
            }
            footer{
                background-color: #0f121b;
                height: 45px;
                text-align: center;
                line-height: 45px;
                color: #707281;
                font-family: 'Tajawal', sans-serif;
                
            }
        </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">
            <div>
            <a href="#">إطلب وساطة</a>
            </div>
        </main>
        <footer>
            <p>&copy;2018 جميع الحقوق محفوظة لفيتامين واو</p>
        </footer>
    </body>
</html>```

Alhakem · 23 مارس 2019، 1:15م

شغل بيررفكت

عندي فقط ملاحظتين:

1- جبت للعنصر header هوامش (margin) بقيمة 0، شوف هل هل هذه الخاصة بتزيد لك شئ ام وجودها مثل عدمة مع العنصر header.

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

بحيث لما تكون الفقرة النصية بعرض كبير ما تكون مريحة للعين وصعب تتبعها، كما تشوف في التصميم الي عملة المصمم أخر كلمة في السطر الأول هي “بالقوة” بينما في تطبيقك أخر كلمة في السطر الأول هي كلمة “حجم”

فضبط هذه الجزئية عشان يكون في تناسق بالقالب وتكون الفقرة أكثر سهولة للقراءة

imadabashaar · 24 مارس 2019، 9:36ص

بعد الأخذ بملاحظاتك

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>فيتامين واو</title>
        <link href="https://fonts.googleapis.com/css?family=Baloo+Bhaijaan|Tajawal" rel="stylesheet">
        <style>
            header h1{
                background-color: #212639;
                text-align: center;
                font-size: 25px;
                margin: 0;
                line-height: 80px;
                height: 80px;
                color: #fff;
                font-family: 'Baloo Bhaijaan', cursive;
                
            }
            body{
                margin: 0;
                background-color: #171a29;
            }
            main{
                width: 960px;
                margin-left: auto;
                margin-right: auto;
                margin-top: 90px;
                text-align: center;
                font-family: 'Tajawal', sans-serif;

            }
            main h2{
                color: #fff;
                
            }
            main p{
                color: #fff;
                width: 600px;
                margin: 0 auto 0 auto;
            }
            main img{
                margin-top: 60px;
                width: 600px;
                height: 210;
            }
            div a{
                background-color: #3b7c3a;
                width: 160px;
                height: 45px;
                display: block;
                color: #fff;
                text-decoration: none;
                font-size: 18px;
                margin: 60px auto 90px auto;
                font-family: 'Tajawal', sans-serif;
                line-height: 45px;
            }
            footer{
                background-color: #0f121b;
                height: 45px;
                text-align: center;
                line-height: 45px;
                color: #707281;
                font-family: 'Tajawal', sans-serif;
                
            }
        </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">
            <div>
            <a href="#">إطلب وساطة</a>
            </div>
        </main>
        <footer>
            <p>&copy;2018 جميع الحقوق محفوظة لفيتامين واو</p>
        </footer>
    </body>
</html>```

Alhakem · 24 مارس 2019، 12:36م

ممتاز

ملاحظة واحدة الصورة جبت لها الأرتفاع بقيمة 210 وما حددت الوحدة هل هي % ام px فأرجع لها وصلحها

hamzaabueyada · 2 أبريل 2019، 4:01م

مهمة تنسيق موقع فيتامين واو

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>فيتامين واو</title>
        <link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
        <style>
            body{
                background-color:#171a29;
                margin:0;
                color:#fff;
            
            }
            
            header{
                background-color:#212639;
                
                
            }
            
            header h1{
                text-align:center;
                line-height:40px;
                font-family: 'Tajawal', sans-serif;
                font-size:18px;
                height:40px;
                margin:0;
            }
            main h2{
                text-align:center;
                font-family: 'Tajawal', sans-serif;
                font-size:20px;
            }
            
             main p{
                text-align:center;
                font-family: 'Tajawal', sans-serif;
                font-size:15px;
                line-height:25px;
            }
             main{
                width:600px;
                margin-left:auto;
                margin-right:auto;
            }
            
             main img{
                width:600px;
                height:210px;
                margin:30px 0 30px 0;
            }
            
             main div a{
                text-align:center;
                font-family: 'Tajawal', sans-serif;
                font-size:15px;
                color:#fff;
                text-decoration:none;
                display:block;
                width:120px;
                height:40px;
                line-height:40px;
                margin-left:auto;
                margin-right:auto;
                background-color:#3b7c3a;
            }
            
            footer{
                background-color:#0f121b;
                margin-top:40px;
                
            }
            
            footer p{
                text-align:center;
                font-family: 'Tajawal', sans-serif;
                font-size:15px;
                color:#707281;
                margin:0;
                height:40px;
                line-height:40px;
            }
           
        </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" >
           <div> <a href="#">أطلب وساطة</a></div>
        </main>
       
        <footer>
            <p>&copy; 2019 جميع الحقوق محفوظة لفيتامين واو</p>
        </footer>
    </body>
</html>

Alhakem · 2 أبريل 2019، 7:10م

ممتاز ي حمزة كالعادة عمل رائع!

لا يوجد لديك أي مشكلة ولكن ملاحظة مخصوصة كونك مصمم UI/UX أريد منك أن تركز على تقسيم المساحة الفارغة حول العناصر حتى تشعر بأن التصميم يتنفس.

في الوقت الحالي أنت خانق الهيدر وملزق فيه العنوان كما بالصورة

فجرب تضيف تحته margin او تضيف للعنوان margin من فوقة عشان يكون النتيجة اقرب للصورة التالية:

كما تشوف في الصورة الأخيرة يبدو الموقع والعناصر أكثر إتزاناً

hamzaabueyada · 3 أبريل 2019، 9:58ص

تم التعديل شكراً للملاحظات أستاذ محمد @Alhakem

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>فيتامين واو</title>
        <link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
        <style>
            body{
                background-color:#171a29;
                margin:0;
                color:#fff;
            
            }
            
            header{
                background-color:#212639;
                margin: 0 0 60px 0;
                
                
            }
            
            header h1{
                text-align:center;
                line-height:40px;
                font-family: 'Tajawal', sans-serif;
                font-size:18px;
                height:40px;
                margin:0;
            }
            main h2{
                text-align:center;
                font-family: 'Tajawal', sans-serif;
                font-size:20px;
            }
            
             main p{
                text-align:center;
                font-family: 'Tajawal', sans-serif;
                font-size:15px;
                line-height:25px;
            }
             main{
                width:600px;
                margin-left:auto;
                margin-right:auto;
            }
            
             main img{
                width:600px;
                height:210px;
                margin:30px 0 30px 0;
            }
            
             main div a{
                text-align:center;
                font-family: 'Tajawal', sans-serif;
                font-size:15px;
                color:#fff;
                text-decoration:none;
                display:block;
                width:120px;
                height:40px;
                line-height:40px;
                margin-left:auto;
                margin-right:auto;
                background-color:#3b7c3a;
            }
            
            footer{
                background-color:#0f121b;
                margin-top:40px;
                
            }
            
            footer p{
                text-align:center;
                font-family: 'Tajawal', sans-serif;
                font-size:15px;
                color:#707281;
                margin:0;
                height:40px;
                line-height:40px;
            }
           
        </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" >
           <div> <a href="#">أطلب وساطة</a></div>
        </main>
       
        <footer>
            <p>&copy; 2019 جميع الحقوق محفوظة لفيتامين واو</p>
        </footer>
    </body>
</html>

Alhakem · 3 أبريل 2019، 8:11م

ممتاز

mohamedkhalil · 4 أبريل 2019، 11:37م

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>فيتامين واو</title>
        <link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
        <style>
            body{
                background-color:#171a29;
                margin:0;
                color:#fff;
            }
            
            header{
                background-color:#212639;
                margin: 0 0 80px 0;
            }
            
            header h1{
                text-align:center;
                line-height:50px;
                font-family: 'Tajawal', sans-serif;
                font-size:22px;
                height:60px;
                margin:0;
            }
            main h2{
                text-align:center;
                font-family: 'Tajawal', sans-serif;
                font-size:20px;
            }
            
             main p{
                text-align:center;
                font-family: 'Tajawal', sans-serif;
                font-size:15px;
                line-height:25px;
            }
             main{
                width:600px;
                margin: auto;
            }
            
             main img{
                width:600px;
                height:210px;
                margin:30px 0 30px 0;
            }
            
             main div a{
                text-align:center;
                font-family: 'Tajawal', sans-serif;
                font-size:15px;
                color:#fff;
                text-decoration:none;
                display:block;
                width:120px;
                height:40px;
                line-height:40px;
                margin:auto;
                background-color:#3b7c3a;
            }
            
            footer{
                background-color:#0f121b;
                margin-top:45px;
                
            }
            
            footer p{
                text-align:center;
                font-family: 'Tajawal', sans-serif;
                font-size:15px;
                color:#707281;
                margin:0;
                height:40px;
                line-height:40px;
            }
           
        </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" >
           <div> <a href="#">اطلب وساطه</a></div>
        </main>
       
        <footer>
            <p>&copy; 2019 جميع الحقوق محفوظة لفيتامين واو</p>
        </footer>
    </body>
</html>

Alhakem · 5 أبريل 2019، 10:19ص

ممتاز محمد

moimad · 8 أبريل 2019، 7:41ص

كم ملاحظة:

اول شيء قمت باستخدام النسبة المئوية في بعض العناصر حتى المتصفح من يكون مفتوح في نصف الشاشة فقط يكون مرتب حاولت اسوي نوع من الريسبونسف ههههههه
كود الcss قمت باستدعائة من ملف خاص فيه حتى يكون الكود نظيف وسهل
استخدمت brackets بدل بيئة العمل

كود html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>فيتامين واو</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">

</head>

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

</html>

الـCSS

    header {
    background-color: #212639;
}
header h1 {
    color: #fff;
    text-align: center;
    margin: 0;
    padding: 1% 0 1% 0;
    font-family: 'Tajawal', sans-serif;

}
body {
    background-color: #171a29;
    margin: 0;
}
main {
    margin-top: 1%;
    margin-bottom: 3%;
    text-align: center;
    font-family: 'Tajawal', sans-serif;
}
main h2 {
    color: #fff;
}
main p {
    color: #fff;
}
main img {
    margin-top: 3%;
    margin-bottom: 4%;
    width: 44%;
    
}
div a {
    background-color: #3b7c3a;
    color: #fff;
    padding: 10px 20px 10px 20px;
    text-align: center;
    text-decoration: none;
    
    
}
footer {
    background-color: #0f121b;
    margin: 0;
    text-align: center;
    font-family: 'Tajawal', sans-serif;
    padding: 6px;

}
footer p {
    color: #fff;
    margin: 0;
    padding: 1% 0 1% 0;

}

Alhakem · 8 أبريل 2019، 8:46ص

رائع ي محمد، أخبرني عندك خبرة سابقة ومن أين تعلمت القيام بهذه الأشياء

انت بتذاكر من ورانا ؟