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

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

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

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

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

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

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

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

mofi · 20 مارس 2019، 2:35م

سلام لقد اعطيت العنصر ديف عرض بقيمة 600 بيكسل
ثم أعطيت الصورة عرض مئة بالمئة من عرض الديف
وماكس ويذ 600 بيكسل ما رأيك

<!DOCTYPE html>
<html>
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <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 div{
  width:600px; 
  margin-left:auto;
    margin-right:auto;

 
}
main img{
    width:100%;
	max-width: 600px;
	height: 210px ;
    margin:30px auto;
}
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;
    transition-duration: .4s; 

}
main a:hover{
    width:130px;
    background-color:#5990DC;
}
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;
}

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، 2:28م

FireShot Capture 030 - بيئة عمل_ تنسيقات موقع فيتامين واو - أساسيات تطوير واجهات الويب_ - coretabs.net.png414×562 111 KB

Alhakem · 20 مارس 2019، 2:44م

1- إضافة كود الـ meat viewport لصفحة الويب
2- إضافة تأثيرات hover على الزر
3- ألتحدي

ممتاز ، أكملتي المهام المطلوبة بنجاح لكن عندنا مشكلة واحدة بأن العنصر الأب للصورة لدية عرض غير مرن قومي بحل هذه المشكلة .

عند إنتهائك منها ستجدي بأن الصورة ستصبح مرنة وسيتم تصغيرها وتكبيرها بما يتوافق مع حجم عرض الشاشة لكن هناك خاصية لديها قيمة ثابته ستسبب بتدمير ابعاد الصورة وشكلها حاولي حلها بحيث تحافظ الصورة على ابعاد متزنة بالعرض والإرتفاع

mofi · 20 مارس 2019، 2:51م

نعم شكرا على التشجيع المشكلة المتبقية سوف احاول حلها غدا ان شاء الله

mofi · 20 مارس 2019، 2:56م

هل الحل هو تغيير قيمة العرض الى 100%

main div{
width:100%; 
margin-left:auto;
margin-right:auto;

 
}

Alhakem · 20 مارس 2019، 3:09م

صحيح هذا الحل أحد الحلول المناسبة.

ملاحظة: في حالة ما إن قمتي بإعطائه العرض 100% حينها لا تحتاجي لتحديد margin من اليمين واليسار لان وجودها سيكون مثل عدمة.

بإنتظار حلك لمشكلة إرتفاع الصورة غداً

mofi · 21 مارس 2019، 8:18ص

شكرامحمد المعلومة سوف اطبقها لكن ماذا افعل مع ارتفاع الصورة أظن انك تقصد استعمال الخاصية max-height:

mofi · 21 مارس 2019، 8:19ص

لقد وجدتها الحمد لله كالتالي

<!DOCTYPE html>
<html>
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <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 div{
width:100%;  
}
main img{
    width:100%;
	max-width: 600px;
	max-height: 210px ;
    margin:30px auto;
}
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;
    transition-duration: .4s; 

}
main a:hover{
    width:130px;
    background-color:#5990DC;
}
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;
}

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 · 21 مارس 2019، 8:21ص

FireShot Capture 031 - بيئة عمل_ تنسيقات موقع فيتامين واو - أساسيات تطوير واجهات الويب_ - coretabs.net.png220×593 35.4 KB

Alhakem · 21 مارس 2019، 9:51ص

ممتاز ، لو تلاحظي مازال شريط التمرير يظهر، حيث أنه بقي معك عنصر بعرض ثابت قومي بحل هذه المشكلة وتكوني إنتهيتي منها.

mofi · 21 مارس 2019، 11:00ص

من فضلك تلميح

mofi · 21 مارس 2019، 11:06ص

FireShot Capture 032 - بيئة عمل_ تنسيقات موقع فيتامين واو - أساسيات تطوير واجهات الويب_ - coretabs.net.png136×582 21 KB

Alhakem · 21 مارس 2019، 5:07م

جميل، الأن إختفى شريط التمرير بالشكل المطلوب.

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>فيتامين واو</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <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{
                max-width: 960px;
                margin: 90px auto 0 auto;
                text-align: center;
                font-family: 'Tajawal', sans-serif;

            }
            main h2{
                color: #fff;
            }
            main p{
                color: #fff;
                width: 90%;
                margin: 0 auto 0 auto;
            }
            main img{
                margin-top: 60px;
                width: 85%;
                max-width: 600px;
                height: 210;
                transition-duration: 0.4s;
            }
            main img:hover{
                padding: 25px;
                background-color: #212639;

            }
            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;
                transition-duration: 0.4s;
            }
            div a:hover{
                border: 2px solid #fff; 
                background-color: #171a29;
                width: 170px;
                font-size: 21px;
            }
            footer{
                background-color: #0f121b;
                height: 45px;
                text-align: center;
                line-height: 45px;
                color: #707281;
                font-family: 'Tajawal', sans-serif;
                
            }
            header h1 a{
                text-decoration: none;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>
                    <a href="wow.html">
                            فيتامين واو
                    </a>
            </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="order.html">إطلب وساطة</a>
            </div>
        </main>
        <footer>
            <p>&copy;2018 جميع الحقوق محفوظة لفيتامين واو</p>
        </footer>
    </body>
</html>```

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

1- إضافة كود الـ meat viewport لصفحة الويب
2- إضافة تأثيرات hover على الزر
3- ألتحدي

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

1- ملاحظة عرض الفقرة النصية
2- ملاحظة إعطاء إرتفاع الصورة وحدة قياس

بعد ما تخلص دمج الإصلاحات الي قمت بها في المهام السابقة، تأكد أن الجميع العناصر تتجاوب مع مرونة عرض النافذة بحيث تعمل التعديلات اللازمة للخواص كإضافة max- وما خلافة بالشكل الذي تراه مناسب.

ملاحظة أخرى: الخاصية التالية:

font-family: 'Tajawal', sans-serif;

قمت بتكرارها لثلاثة عناصر، قم بإستخدامها مرة واحدة مع العنصر الذي بيشمل كل هذه العناصر كما ناقشنا ذلك في درس تنظيف الكود وتوافقية الموبايل.

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

مهمة اللمسات الأخيرة

<html>
    <head>
        <meta charset="UTF-8">
        <title>فيتامين واو</title>
        <link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <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{
                max-width:600px;
                margin-left:auto;
                margin-right:auto;
            }
            
             main img{
                width:100%; 
                max-width:600px;
                height:100%;
                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;
                transition-duration: .4s;
            }
            
            main div a:hover{
                background-color:#247bff;
                width:140px;
                
            }
            
            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>© 2019 جميع الحقوق محفوظة لفيتامين واو</p>
        </footer>
    </body>
</html>

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

1- إضافة كود الـ meat viewport لصفحة الويب
2- إضافة تأثيرات hover على الزر
3- ألتحدي

moimad · 8 أبريل 2019، 12:41م

    <!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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</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>

    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: auto;
    margin-bottom: 41px;
    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: 100%;
    max-width: 600px;
    height: 210px;
    
}
div a {
    color: #fff;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    transition-duration: 0.5s;
    background-color: #3b7c3a;
}
div a:hover {
    background-color: #fff;
    color: #3b7c3a;
    font-weight: bold;
}
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، 1:05م

1- إضافة كود الـ meat viewport لصفحة الويب
2- إضافة تأثيرات hover على الزر
3- ألتحدي

ممتاز محمد .

أريد منك أخذ إرتفاع الصورة عند تصغير الشاشة في عين الإعتبار. لاحظ الصورة التالية:

الملاحظ انه الصورة يتم ضغطها مما يسبب لها التشوة لأن الإرتفاع ثابت بقيمة 210px لذا قم بإصلاحة حتى يكون متجاوب بنفس طريقة قيامك بذلك مع عرض الصورة.

بحيث عند تصغير الشاشة تكون النتيجة بهذا الشكل:

لاحظ مازالت الصورة محافظة على ابعادها.

ملاحظة ثانية الا تظن بأننا بحاجة لعمل هامش margin بين الصورة وبين الزر"اطلب وساطة" لأنه على وشك ان يلتصق بالصورة.