تقريباً خبرة سابقة لانو قبل حاولت اكثر من مرة ادخل في مجال الفرونت ايند بس الكورسات كانت ماتسوي واهس استمر ههههههه فأتركها وايضاً كنت اتعامل مع مدونات بلوكر كانت في 2014 لدي اكثر من مدونة عكس الان الصراحة دورتكم كلش حلوة وتساعد كلش على انو الواحد يستمر بالتعلم
انت بتذاكر من ورانا ؟
لاتخبر احد خليها بيني وبينك 
جميل 
، وصحيح كما أشرت الكورسات الي على النت تشتت الواحد وهذه مشكلة انا واجهتها لهذا كان هدفنا من الأكاديمية إنتاج محتوى وتوجية يساعد الناس على تجنب التشتت والضياع في هذا المجال.
عكس الان الصراحة دورتكم كلش حلوة وتساعد كلش على انو الواحد يستمر بالتعلم
شكراً لك يسعدني سماع ذلك 
لاتخبر احد خليها بيني وبينك
حاضر ههههههههه
<!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;
font-family: 'Tajawal', sans-serif;
margin: 0;
color: #fff;
}
header {
background-color: #212639;
font-size: 10px;
height: 45px;
line-height: 45px;
text-align: center;
}
header h1 {
margin-top: 0;
}
main {
text-align: center;
margin-top: 60px;
}
main h2 {
font-size: 19px;
}
main p {
margin-bottom: 40px;
font-size: 12px;
width: 600px;
margin-left: auto;
margin-right: auto;
}
main div img {
margin-bottom: 20px;
width: 600px;
height: 210px;
}
main a {
margin-top: 25px;
text-decoration: none;
background-color: #3b7c3a;
display: block;
margin-left: auto;
margin-right: auto;
width: 120px;
height: 30px;
line-height: 30px;
color: #fff;
margin-bottom: 50px;
}
footer {
background-color: #0f121b;
color: #707281;
text-align: center;
height: 30px;
line-height: 30px;
font-size: 14px;
margin: 0;
}
</style>
</head>
<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" width="600">
</div>
<a href="#">اطلب وساطة</a>
</main>
<footer>
<p>&Copy; جميع الحقوق محفوظة لفيتامين واو 2018</p>
</footer>
</html>
ممتاز بن يحيى 
<!DOCTYPE html>
<html>
<head>
<title>عنوان الموقع</title>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
<style>
* {margin:0}
body{
font-family: 'Tajawal', sans-serif;
background-color:#171a29;
color: #fff;
}
header{background-color: #212639;}
header h1{
margin:0;
padding:10px;
text-align:center;
font-size:20px
}
main{text-align:center;padding:60px;}
main h2{margin-bottom:20px;}
main p{margin-bottom:50px;}
main img{
height:210px;
width:600px;
}
main a{
background-color:#3b7c3a;
color:#fff;
display:block;
width:20%;
margin:20px auto;
padding:10px;
text-decoration:none;
}
footer{
background-color:#0f121b;
text-align:center;
color:#707281;
}
</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">
<a href="#">أطلب وساطه</a>
</main>
<footer><p>©جميع الحقوق محفوظه لفيتامين واو</p></footer>
</body>
</html>
عمل ممتاز محمود 
ملاحظتي الوحيدة هي إعطاء الفقرة النصية عرض محدد على سبيل المثال بالقيمة 600px
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>عنوان الموقع</title>
<link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
<style>
body {
margin: 0;
background-color: #171a29;
font-family: 'Tajawal', sans-serif;
color: #fff;
text-align: center;
box-sizing: border-box;
}
header {
background-color: #212639;
height: 50px;
font-weight: 20px;
}
header h1 {
margin: 0;
text-align: center;
line-height: 50px;
font-size: 20px;
}
main {
widht: 900px;
margin-left: auto;
margin-right: auto;
padding: 40px 0 40px 0;
}
main h2 {
font-weight: bold;
font-size: 20px
}
main p {
widht: 600px;
font-weight: 200px;
font-size: 16px;
padding: 0 180px 40px 180px;
}
main img {
margin-left: auto;
margin-right: auto;
width: 600px;
height: 210px;
margin-bottom: 18px;
}
a {
display: inline-block;
border: 1px solid #3b7c3a;
background-color: #3b7c3a;
color: #fff;
margin-top: 15px;
text-decoration-line: none;
padding: 5px 18px 5px 18px;
font-size: 10px;
font-weight: bold;
}
footer {
background-color: #0f121b;
color: #707281;
}
footer p {
padding: 8px 0 8px 0;
margin-bottom: 0;
font-weight: bold;
font-size: 10px;
}
</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" width="400">
<div>
<a href="#">اطلب وساطه</a>
</div>
</main>
<footer>
<p>© 2018 جميع الحقوق محفوظة للفيتامين باء</p>
</footer>
</body>
</html>
عمل ممتاز 
الملاحظة الأولى قمت بكتابة خاصية العرض خطأ widht
قم بتغييرها بالكلمة الصحيحة width
الملاحظة الثانية قمت بإعطاء الخاصية font-weight قيمة بوحدة الـ px
هذه الخاصية لا تحتاج إلى وحدة قياس قم بإستخدام القيم بشكل مباشر هكذا مثلاً
font-weight: 200;
شكرا لك اخي 
انني في بعض الاحيان افتقد للتركيز لكن سوف اعمل على تجاوز ذلك.
مرحباً 
<!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;
font-family: 'Tajawal', sans-serif;
text-align: center;
color: #fff;
}
header h1 {
background-color: #212639;
height: 60px;
margin: 0;
line-height: 60px;
font-size: 24px;
}
main {
width: 600px;
margin: 80px auto;
}
main img{
width: 600px;
height: 210px;
margin-top: 40px;
margin-bottom: 40px;
}
main a{
background-color: #3b7c3a;
display: block;
width: 160px;
height: 40px;
margin-left: auto;
margin-right: auto;
line-height: 40px;
text-decoration: none;
font-size: 16px;
color: #fff;
}
footer{
background-color: #0f121b;
height: 40px;
color: #707281;
line-height: 40px;
}
</style>
</head>
<body>
<header>
<h1>فيتامين واو</h1>
</header>
<main>
<div>
<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>
</main>
<footer>
<p>© 2018 جميع الحقوق محفوظة لفيتامين واو</p>
</footer>
</body>
</html>
ممتاز
CSS file
body{
background-color: #171a29;
color: #fff;
font-family: 'Tajawal', sans-serif;
text-align: center;
margin: 0px;
}
header{
background-color: #212639;
height: 60px;
}
header h1{
text-align: center;
font-size: 20px;
line-height: 60px;
margin: 0px;
}
main p{
width: 600px;
margin-left: auto;
margin-right: auto;
font-size: 14px;
}
footer{
background-color: #0f121b;
height: 60px;
margin-top: 70px;
}
footer p{
color: #707281;
margin: 0px;
line-height: 60px;
}
a{
background-color: #3b7c3a;
text-decoration: none;
color: white;
display: block;
width: 150px;
height: 40px;
line-height: 40px;
margin: 20px auto 20px auto;
}
img {
width: 600px;
height: 210px;
padding: 20px;
}
HTML file
<!DOCTYPE html>
<html>
<head>
<title>فيتامين واو</title>
<link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</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" width="500" height="200">
<div>
<a href="#">اطلب وساطة </a>
</div>
</main>
<footer>
<p>© جميع الحقوق محفوظة لفيتامين واو 2018</p>
</footer>
</body>
</html>
Result
الشكل العام اعجبني جدا ممتاز:smiling_face_with_three_hearts:
<!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;
font-family: 'Tajawal', sans-serif;
}
header{
background-color: #212639;
height: 80px;
text-align: center;
font-size: 13px;
line-height: 80px;
margin-bottom: 30px;
}
header h1 {
text-align: center;
margin: 0;
}
main {
text-align: center;
}
main img{
width: 600px;
height: 210px;
margin:30px 0 30px 0;
}
main h2{
font-size: 25px;
font-weight: normal;
margin-left: auto;
margin-right: auto;
}
main p{
width: 580px;
font-size: 16px;
text-align: center;
margin-left: auto;
margin-right: auto;
line-height:18px;
}
main a{
display:block;
background-color:#3b7c3a;
text-decoration:none;
color:#FFF;
font-size:12px;
width:120px;
height:40px;
line-height:40px;
margin-left:auto;
margin-right:auto;
}
footer{
background-color:#0f121b;
margin-top:300px;
}
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>
<div>
<h2>سنجعلك في المقدمة إن تأخرت</h2>
<p>إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك.
</p>
<img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg" width="300" height="200">
</div>
<a href="#">أطلب واسطة</a>
</main>
<footer>
<p>© جميع الحقوق محفوظة لفيتامين واو 2018</p>
</footer>
</body>
</html>
عمل ممتاز 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>فيتامين واو</title>
<link href="https://fonts.googleapis.com/css?family=Amiri|Artifika|Schoolbell|Tajawal" rel="stylesheet">
<style>
body {
margin: 0;
background-color: #171a29 ;
color: #ffffff;
font-family: 'Amiri', serif;
font-family: 'Artifika', serif;
font-family: 'Schoolbell', cursive;
font-family: 'Tajawal', sans-serif;
}
header {
background-color: #212639;
text-align: center;
height: 40px;
line-height: 40px;
}
header h1 {
margin: 0px;
font-size: 20px;
}
main {
margin-top: 60px;
margin-bottom: 60px;
text-align: center;
}
main h2 {
font-size: 20px
}
main p {
width: 600px;
font-size: 12px;
margin: auto;
margin-bottom: 40px;
}
main img {
width: 600px;
height: 210px;
margin-bottom: 40px;
}
main a {
margin-top: 80px;
background-color: #3b7c3a;
display: block;
color: white;
width: 150px;
height: 40px;
margin: auto;
line-height: 40px;
text-decoration: none;
}
footer {
background-color: #0f121b;
text-align: center;
height: 30px;
color: #707281;
line-height: 30px;
font-size: 12px;
}
footer p {
margin: 0px;
}
</style>
</head>
<body>
<header>
<h1>فيتامين واو</h1>
</header>
<main>
<div>
<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>
</main>
<footer>
<p>© 2018 جميع الحقوق محفوظه لفيتامين واو</p>
</footer>
</body>
</html>
لدي استفسار
لماذا ال footer ليس في نهايه الصفحه بالرغم من ال margin = 0
هل هذا بسبب ان محتوى الصفحة اقل من طول الصفحه ؟
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>فيتامين</title>
<link href="https://fonts.googleapis.com/css?family=Anton|Domine|Open+Sans+Condensed:300|Playfair+Display|Tajawal" rel="stylesheet">
<style>
body{
font-family: 'Playfair Display', serif;
font-family: 'Open Sans Condensed', sans-serif;
font-family: 'Anton', sans-serif;
font-family: 'Domine', serif;
font-family: 'Tajawal', sans-serif;
margin: 0;
background-color: #171a29;
color: #fff;
}
header{
background-color: #212639;
height: 70px;
line-height: 70px;
}
header h1{
margin: 0;
font-size: 25px;
text-align: center;
}
main{
width:600px;
margin-top: 70px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
main img{
width: 600px;
height: 210px;
margin-top: 40px;
margin-bottom: 80px;
}
main a{
background-color: #3b7c3a;
text-decoration: none;
margin-left: auto;
margin-right: auto;
color: #fff;
display: block;
width: 200px;
height: 40px;
line-height: 40px;
font-size: 20px;
}
footer {
background-color: #0f121b;
color: #707281;
text-align: center;
height: 50px;
line-height: 50px;
margin-top: 60px;
}
</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" width="500px">
</div>
<a href="#">اطلب وساطه</a>
</main>
<footer>
<p>© جميع الحقوق محفوظه لفيتامين واو 2018</p>
</footer>
</body>
</html>
ممتاز أسماء
فقط لاحظت تكرارك للخاصية font-family قومي بجعلها خاصية واحدة 