مشاركة حلول: التدرب على لغة التنسيقات CSS

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

ممتاز الأن مية مية :blush::+1:

1 Like
#22

شكراااااااااااااااااااا :hugs::hugs::hugs::hugs::hugs::hugs:

1 Like
#23

كود مهمة: التدرب على تنسيق الصفحات
:grinning::grinning:

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

		body {
			background-color: #171a29;
			color: #ffffff;
		}

		header {
			background-color: #212639;
			width: 100%;
			height: 60px;
		}

		main img {
			width: 600px;
			height: 210px;
		}

		main a {
			background-color: #3b7c3a;
			color: #ffffff;
		}

		footer {
			background-color: #0f121b;
			color: #707281;
			width: 100%;
			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>&copy; 2018 جميع الحقوق محفوظة لفيتامين واو</p>
	</footer>
</body>
</html>

شكرا لكم :+1:

3 Likes
#24

تننسيقات العنصر body :ballot_box_with_check:

تنسيقات العنصر header :ballot_box_with_check:

تنسيقات العنصر img :ballot_box_with_check:

تنسيقات العنصر a :ballot_box_with_check:

تنسيقات العنصر footer :ballot_box_with_check:

ممتاز :grinning::muscle:

1 Like
#25 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>فيتامين واو</title>
        <style>
            body{
                background-color: #171a29;
                color: #ffffff;
            }
            header{
                background-color: #212639;
                width: 100%;
                hight: 60px;
            }
            main img{
                width: 600px;
                hight: 210px;
            }
            main a{
                background-color: #3b7c3a;
                color: #ffffff;
            }
            footer{
                background-color: #0f121b;
                color: #707281;
                width: 100%;
                hight: 40px;
            }
            
        </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="500" height="200">
            </div>
            <a href="#">أطلب وساطة</a>
        </main>
        <footer>
            <p>&copy; جميع الحقوق محفوظة لفيتامين واو 2018</p>
        </footer>
    </body>
</html>
3 Likes
#26

تننسيقات العنصر body :ballot_box_with_check:

تنسيقات العنصر header :ballot_box_with_check:

تنسيقات العنصر img :ballot_box_with_check:

تنسيقات العنصر a :ballot_box_with_check:

تنسيقات العنصر footer :ballot_box_with_check:

مية مية يحيى :+1::smiley:

2 Likes
#28 
<!DOCTYPE html>
<html>
<head>
<title>فيتامين واو</title>
<style>
body {
    background-color: #171a29;
    text-align: center;
    }
p    {color: #ffffff;}
h2 {color:#ffffff;}
header{
 background-color: #212639;
 color:#ffffff;
wight:100%;
hight:60px;
}
main a {
 background-color:#3b7c3a;
 color:#ffffff }
 main img {
     wight:600px;
     hight:210px;
 }
 footer{
     background-color:#0f121b;
    wight:100% ;
    hight:40px;
 }
 footer p{
     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="url">اطلب وساطة</a>
</main>
<footer>
<p>&copy;جميع الحقوق محفوظة لفيتامين واو  2018 </p>
</footer>
</body>
</html>
2 Likes
#29

Assalam!

<!DOCTYPE html>
<html>
	<head>
		<title>فيتامين واو</title>
		<style >
			body {
				background-color: #171a29;
				color: #ffffff;
			}
			header {
				background-color: #212639;
				width: 100%;
				height: 60px;
			}
			main img {
				width: 600px;
				height: 210px;
			}
			main a {
				background-color: #0f121b;
				color: #707281;
				width: 100%;
				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" width="500" height="200">
			<div>
				<a href="#">اطلب وساطة </a>
			</div>
		</main>
		<footer>
			<p>&copy; 2018 All Rights Reserved</p>
		</footer>
	</body>
</html>
2 Likes
#30

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

هذه ملاحظاتي على عملك الرائع

تننسيقات العنصر body :ballot_box_with_check:

ممتاز لكن الملاحظ انك قمت بإعطاء كل عنصر p وعنصر h2 لون أبيض بشكل منفصل اي بالشكل التالي:

p {color: #ffffff;}
h2 {color:#ffffff;}

لا مشكلة في ذلك فالذي قمت به صحيح ولكن دائماً كمطورين نحاول أن نقوم بكتابة الأكواد الخاصة بنا بأقل عدد ممكن من السطور لان كل سطر اضافي يعني تكلفة إضافية وأيضاً حتى نحرص على عدم تكرار نفس الأكواد، لذا علينا ان نسأل انفسنا هل بإمكاننا القيام بتطبيق تلك التنسيقات بطريقة اقل تكاليف واقل تكراراً؟

ماذا لو قمنا بإعطاء العنصر body خاصية لون للخطوط باللون المشترك بين العناصر والذي هو #ffffff هل سنصل إلى نفس النتيجة؟

اي انه لدينا خيارين كالتالي:

الأول:

body {
  background-color: #171a29;
  text-align: center;
  color: #ffffff;
}

الثاني:

p  {color: #ffffff;}
h2 {color:#ffffff;}
header{ color:#ffffff; }

لاحظ انه في الخيار الأول كل ماعلينا إضافته هو خاصية color للعنصر body بينما في الخيار الثاني قمنا بعمل قاعدتين (CSS roles) لإستهداف عنصرين وإعطائهما نفس الخاصية. بالإضافة إلى انك إضطريت لوضع نفس الخاصية بنفس القيمة للعنصر header كذلك

كلاً من الخيارين يعطينا نفس النتيجة فأيهما ستختار :wink:؟

وضع خاصية لون الخط للعنصر body بحيث يتم تطبيقها على كل العناصر التي بداخل الصفحة, ام إستهداف كل عنصر على حدة وتكرار نفس الخاصية لها.

تنسيقات العنصر header :ballot_box_with_check:

ممتاز فقط ملاحظتي هنا مرتبطة بالملاحظة السابقة وتكرار خاصية color

تنسيقات العنصر a :ballot_box_with_check:

تنسيقات العنصر img :ballot_box_with_check:

تنسيقات العنصر footer :ballot_box_with_check:

أكرر ان ما قمت به أنت صحيح :blush: وان هناك أكثر من طريقة للوصول إلى نفس النتيجة ولكن ملاحظتي من باب الحرص على ان نصل إلى النتيجة بأقل عدد ممكن من الأسطر وبدون أن نقوم بتكرار أنفسنا.

1 Like
#31

Well done Hassan :clap:

Styling body element :ballot_box_with_check:
Styling header element :ballot_box_with_check:
Styling img element :ballot_box_with_check:

Styling a element :heavy_check_mark:

As I noticed you have assigned a specific width and height to this element, but do you see an effect of these two properties on the element dimensions?

If not, then this means that those properties are useless in our case and you just add two extra lines in your code which do nothing :grin:

The way a element is not responding to width and height properties has something to do with the type of the element, do a search about it and let me know if you figured out what is going on :wink:

Styling footer element :no_entry_sign:

It seems that you missed this element :sweat_smile:

1 Like
#32

Thank you for this outstanding reply
I will try do a research once I am done some study work

#33

أوّل إنجاز لي بكل من ال html و ال css :smiley: ، جزاك الله كلّ خير أستاذنا الفاضل @Alhakem على هذه الدّورة و تبسيطك للمعلومة ، لقد إستمتعت جدا بذه الرحلة و لا أريد أن تنتهي ، ننتظر جديدك فيما يخص ال java script :grinning:

هذه تنسيقاتي:

<html>
    <head>
        <meta charset="utf-8">
        <title>فيتامين واو</title>
        <style>
            body{
                background-color: #171a29;
                color: #ffffff;   
            }
            header{
                background-color: #212639;
                hight: 60px;
                width: 100%;
            }
            main img{
                hight: 600px;
                widht: 210px;
            }
            main a{
                background-color: #3b7c3a;
                color: #ffffff;    
            }
            footer{
                background-color: #0f121b;
                color: #707281;
                hight: 100%;
                widht: 40px;
            }
        </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="500" height="200">
            </div>
            <a href="www.vitamino.com">اطلب وساطة</a>
        </main> 
        <footer>
            <p>&copy; 2018جميع الحقوق محفوظة لفيتامين واو</p>
        </footer>  
    </body>
</html>

%D8%AA%D9%85%D8%B1%D9%8A%D9%86%20css
تمرين css.PNG817×514 155 KB

1 Like
#34

تننسيقات العنصر body :ballot_box_with_check:

تنسيقات العنصر header :ballot_box_with_check:

تنسيقات العنصر img :ballot_box_with_check:

تنسيقات العنصر a :ballot_box_with_check:

تنسيقات العنصر footer :ballot_box_with_check:

عمل ممتاز سمية :smiley:، راح نواصل المحتوى خلال الأيام القادمة وتعملي إنجازات أكبر وأكبر إن شاء الله

1 Like
#35 
<html>
    <head>
        <meta charset="utf-8">
        <title>فيتامين واو</title>
    </head>
    <style>
        body{
            background:#171a29;
            color:#ffffff;
        }
        header{
            background:#212639;
            width:100%;
            hight:60px;
        }
        main img{
            width:600px;
            hight:210px;
        }
        main a{
            bacjground:#3b7c3a;
            color:#ffffff;
        }
        footer{
            background:#0f121b;
            color:#707281;
            width:100%;
            hight:40px;
        }
    </style>
    <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>
1 Like
#36

تننسيقات العنصر body :ballot_box_with_check:

تنسيقات العنصر header :ballot_box_with_check:

تنسيقات العنصر img :ballot_box_with_check:

تنسيقات العنصر a :ballot_box_with_check:

تنسيقات العنصر footer :ballot_box_with_check:

كلو مية مية سارة :+1:

#37