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

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

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

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

بإمكانك الإطلاع عليها من هنا

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

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

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

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

8 Likes
#2 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>فيتامين واو</title>
    </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>
6 Likes
#3

ممتاز @amani :clap: :smiley:

4 Likes
#4

ماشاء الله @amani
فيتامين واو ممتاز عندك :blush::sparkling_heart:

3 Likes
#5 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>فيتامين واو</title>
    </head>
    <body>
        <header>
            <h1>
                فيتامين واو
            </h1>
        </header>
        <main>
            <h2>
                سنجعلك في المقدمة إن تأخرت
            </h2>
            <p>
                إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك.بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك
            </p>
            <div>
            <img src="http://www8.0zz0.com/2018/09/25/20/466897654.jpg" width=75%>
            </div>
                        <a href="#">إطلب وساطة</a>

        </main>
        <footer>
            <p>&copy;2018 جميع الحقوق محفوظة لفيتامين واو</p>
        </footer>

    </body>

</html>
3 Likes
#6

عمل رائع يا مازن :clap: :grinning:

ملاحظة واحد قمت بإعطاء الصورة عرض بمقدار 75%

اريد الإشارة إلى ان ما قمت به هو صحيح ولكن وفقاً لإصدار HTML4 بينما في HTML5 يجب أن تقوم بتحديد قيمة العرض او الإرتفاع بالـ pixels أي بالشكل التالي:

<img src="http://www8.0zz0.com/2018/09/25/20/466897654.jpg" width="600">

قمت بإعطاء الصورة عرض 600 بيكسل بدون إضافة px او كذلك بدون %.

4 Likes
#7

شكراً استاذ

3 Likes
#8

الحمد لله
شكراً إلك @Nabila كلك ذوق :smiley:

3 Likes
#9 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>فيتامين واو</title>
    </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="">
            </div>
            <a href="#">اطلب وساطة</a>
        </main>
        <footer>
            <p>&copy;2018 جميع الحقوق محفوظة لفيتامين واو</p>
        </footer>
    </body>
</html>
2 Likes
#10 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>فيتامين واو</title>
	</head>
	<body>
		
		<header>
			<h1>STORE</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>
2 Likes
#11

رائع :clap:

أحسنتي وضع الـ alt :grinning: وطالما قمتي بذلك إحرصي على إعطائة قيمة تصف الصورة بدلاً من جعلة فارغ

3 Likes
#12

عمل ممتاز :clap:

1 Like
#13 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>فيتامين واو</title>
    </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" alt="فيتامين واو" width="600px">
            <a href="#">أطلب وساطة</a>
        </main>
        <footer>
            <p>&copy; جميع الحقوق محفوظة لفيتامين واو 2018</p>
        </footer>
    </body>
</html>
3 Likes
#14

ممتاز نزار عمل مضبوط :smiley:، عندي ملاحظة بسيطة

قمت بكتابة كود علامة الحقوق بالشكل التالي &copy

بالرغم من ان بعض المتصفحات راح تعرض العلامة بشكل سليم الا ان البعض لن يقوم بذلك كذلك سيعتبر الكود غير صالح لهذا تأكد من وضع فاضلة منقوطة بنهايتها كالتالي &copy;

5 Likes
#15

ASSALAM!

<!DOCTYPE html>
<html>
	<head>
		<title>Vitamine Waw</title>
	</head>
	<body>
		<header>
			<h1>Vitamine Waw</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>&copy; 2018 All Rights Reserved</p>
		</footer>
	</body>
</html>
3 Likes
#16

Well done :+1:

3 Likes
#17 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>STORE</title>
    </head>
    <body>
        <header>
            <h1>فيتامين واو</h1>
        </header>
        <main>
            <div>
                <h2>فيتامين واو</h2>
                <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>&copy; جميع الحقوق محفوظة لفيتامين واو 2018</p>
        </footer>

    </body>
</html>
2 Likes
#18

عمل ممتاز :smiley:

ملاحظة واحدة فقط:
بداخل منطقة main لا نحتاج لإضافة العنصر التالي:

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

لانه مش موجود بالتصميم سبق وقمتي بإضافته في منطقة header :blush:

2 Likes
#19 
<!DOCTYPE html>
<html>
	<head>
		<title>فيتامين واو</title>
	</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>&copy; 2018 جميع الحقوق محفوظه لفيتامين واو</p>
		</footer>	

		
	</body>
</html>
3 Likes
#20 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>فيتامين واو</title>
    </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>
3 Likes