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

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

Wonderful @Sarahady @asmaa_salih :rose::rose::rose:

4 Likes
#22

@asmaa_salih
@Sarahhady

:clap: عمل رائع

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

    </body>
</html>
3 Likes
#27

جميل جداً يحيى :clap:، لدي بعض ملاحظات:

في منطقة الـ head قمت بكتابة الكود التالي:

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

منطقة الـ head لا تستخدم لإضافة عناصر وأقسام الصفحة في هذه المرحلة تعرفنا على عنصرين من العناصر التي بالإمكان إضافتها لهذه المنطقة وهما عنصر الترميز meta وعنصر عنوان الصفحة title كالتالي:

    <head>
        <meta charset="utf-8">
        <title>فيتامين واو</title>
    </head>

قم بمراجعة الكود و وضع العنصر header والعنصر h1 الذي بدأخلة بالمكان المناسب بين أكواد الصفحة ومشاركته معنا :blush:

في الإنتظار

3 Likes
#28

ممتاز :clap:

1 Like
#29

تم التعديل

2 Likes
#30

ممتاز :grin:

2 Likes
#31 
<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>الصفحة الرئيسية</title>
</head>

<body dir="rtl">
    <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="a smiling man enjoying his coffee"
             width="450"
        >
      </div>
      <a href="#">اطلب وساطة</a>
    </main>
    <footer>
        جميع الحقوق محفوظة لفتامين واو 2018 &copy;
    </footer>
</body>
</html>
3 Likes
#32

شايف كود يفوق التوقعات لهذه المهمة :clap:

2 Likes
#33

اني متأخرة جدا مرحبا: :disappointed_relieved::blush::blush:

 <head>
     <meta charset="utf-8">
     <title></title>
 </head>
 <body>
    <header><h1> فيتاميــن واو</h1></header>
    <main>
        <p>سنجعلك في المقدمة إن تأخرت</p>
        <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>
5 Likes
#34

أحسنت @mofi :clap:
مرحبا بك في كل وقت :rose::blush:

4 Likes
#35

image
image.png1343×428 21.7 KB

@Alhakem

3 Likes
#36

أحسنتي عمل جميل :clap: :blush:، بإمكانك نسخ الكود هنا بشكل مباشر بإستخدام الطريقة الموضحة في الفيديو التالي:

3 Likes
#37

استاذ مانجحت معي :sweat_smile:
@Alhakem
وايضا عندي سؤال شو هي خدمة Drift

2 Likes
#38

استاذ مانجحت معي

ربما عندك الكايبورد مختلف، ماهي لغة الكايبورد؟

وايضا عندي سؤال شو هي خدمة Drift

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

1 Like
#39

سلام استاذ @Alhakem عندي بالغة الفرنسية

2 Likes
#40

وعليكم السلام

اها واجهت احدهم نفس المشكلة مع الكايبورد الفرنسي وقام @malek.salem بشرح طريقة حلها قومي بتجربة التالي:

جربي تغير اللغة الى الفرنسية ثم قومي بالضغط علىalt gr و على الرقم 7 اعلى لوحة المفاتيح

image
6292310213b0ccdc9518a8994ba4475b65e56286.jpeg1280×585 217 KB

عوضي الرقم 3 بالرقم 7

3 Likes
#41

تحدي فيتامين واو

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

لقد نجحت استاذ شكرا لك @Alhakem

3 Likes
#42

جميل جداً :smiley::clap:

2 Likes