Add languages Russian, Arabic, Chinese, Portuguese (#18305)
This commit is contained in:
Beau Carnes
committed by
mrugesh mohapatra
mrugesh mohapatra
parent
09d3eca712
commit
2ca3a2093f
@ -0,0 +1,50 @@
|
|||||||
|
---
|
||||||
|
id: 587d774c367417b2b2512a9c
|
||||||
|
title: Add a Text Alternative to Images for Visually Impaired Accessibility
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
guideUrl: 'https://arabic.freecodecamp.org/guide/certificates/add-alt-text-to-an-image-for-accessibility'
|
||||||
|
localeTitle: إضافة بديل نص إلى الصور لإعاقة الوصول بصريًا
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> من المحتمل أنك رأيت سمة <code>alt</code> على علامة <code>img</code> في تحديات أخرى. يصف النص <code>Alt</code> محتوى الصورة ويوفر بديلًا نصيًا. يساعد ذلك في حالة فشل تحميل أو عدم تمكن المستخدم من رؤية الصورة. ويستخدم أيضًا من قِبل محركات البحث لفهم ما تحتويه الصورة لتضمينها في نتائج البحث. في ما يلي مثال: <code><img src="importantLogo.jpeg" alt="Company logo"></code> يعتمد الأشخاص الذين يعانون من إعاقات بصرية على قارئي الشاشة لتحويل محتوى الويب إلى واجهة صوتية. لن يحصلوا على المعلومات إذا تم تقديمها فقط بصريًا. بالنسبة للصور ، يمكن لقارئي الشاشة الوصول إلى سمة <code>alt</code> وقراءة محتوياتها لتقديم المعلومات الأساسية. النص <code>alt</code> الجيد قصير ولكن وصفي ، ويقصد به أن ينقل بإيجاز معنى الصورة. يجب عليك دائمًا تضمين سمة <code>alt</code> على صورتك. وفقًا لمواصفات HTML5 ، يعتبر هذا الآن إلزاميًا. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> كامبر كات هو عبارة عن نينجا مشفر ونينجا فعليين ، ويقوم ببناء موقع ويب لتبادل معرفته. تظهر صورة الملف الشخصي التي يريد استخدامها مهاراته ، ويجب أن تحظى بتقدير جميع زائري الموقع. إضافة سمة <code>alt</code> في علامة <code>img</code> ، التي تشرح كامبر كات تقوم بالكاراتيه. (لا ترتبط الصورة <code>src</code> بملف فعلي ، لذلك يجب أن ترى النص <code>alt</code> في الشاشة.) </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تحتوي علامة <code>img</code> سمة <code>alt</code> ، ويجب ألا تكون فارغة.
|
||||||
|
testString: 'assert($("img").attr("alt"), "Your <code>img</code> tag should have an <code>alt</code> attribute, and it should not be empty.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<img src="doingKarateWow.jpeg">
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,77 @@
|
|||||||
|
---
|
||||||
|
id: 587d778b367417b2b2512aa8
|
||||||
|
title: Add an Accessible Date Picker
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: إضافة منتقي تاريخ يسهل الوصول إليه
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> غالبًا ما تتضمن النماذج حقل <code>input</code> ، والذي يمكن استخدامه لإنشاء عدة عناصر تحكم مختلفة في النموذج. تشير السمة <code>type</code> على هذا العنصر إلى نوع الإدخال الذي سيتم إنشاؤه. كنت قد لاحظت في <code>text</code> و <code>submit</code> أنواع المدخلات في التحديات السابقة، وعرض HTML5 خيار لتحديد <code>date</code> المجال. اعتمادًا على دعم المتصفح ، يظهر منتقي التاريخ في حقل <code>input</code> عندما يكون في التركيز ، مما يجعل ملء النموذج أكثر سهولة لجميع المستخدمين. بالنسبة إلى المتصفحات الأقدم ، سيكون <code>text</code> افتراضيًا <code>text</code> ، لذلك يساعد على إظهار تنسيق التاريخ المتوقع للمستخدمين في التصنيف أو كنص موضع مؤقت في حالة الأحرف فقط. إليك مثال على ذلك: <blockquote style=";text-align:right;direction:rtl"> <label for = "input1"> أدخل تاريخًا: </ label> <br> <input type = "date" id = "input1" name = "input1"> <br></blockquote></section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> يقوم كامبر كات بإعداد بطولة مورتال كومبات ويريد أن يطلب من منافسيه معرفة التاريخ الأفضل. إضافة علامة <code>input</code> تحتوي على سمة <code>type</code> من "date" ، وسمة <code>id</code> من "pickdate" ، وسمة <code>name</code> من "date". </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تضيف الكود الخاص بك علامة <code>input</code> واحدة لحقل محدد التاريخ.
|
||||||
|
testString: 'assert($("input").length == 2, "Your code should add one <code>input</code> tag for the date selector field.");'
|
||||||
|
- text: يجب أن تحتوي علامة <code>input</code> سمة <code>type</code> بقيمة تاريخ.
|
||||||
|
testString: 'assert($("input").attr("type") == "date", "Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.");'
|
||||||
|
- text: يجب أن تحتوي علامة <code>input</code> الخاصة بك على سمة <code>id</code> بقيمة اختيار.
|
||||||
|
testString: 'assert($("input").attr("id") == "pickdate", "Your <code>input</code> tag should have an <code>id</code> attribute with a value of pickdate.");'
|
||||||
|
- text: يجب أن تحتوي علامة <code>input</code> سمة <code>name</code> لها قيمة التاريخ.
|
||||||
|
testString: 'assert($("input").attr("name") == "date", "Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Tournaments</h1>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section>
|
||||||
|
<h2>Mortal Kombat Tournament Survey</h2>
|
||||||
|
<form>
|
||||||
|
<p>Tell us the best date for the competition</p>
|
||||||
|
<label for="pickdate">Preferred Date:</label>
|
||||||
|
|
||||||
|
<!-- Add your code below this line -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Add your code above this line -->
|
||||||
|
|
||||||
|
<input type="submit" name="submit" value="Submit">
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,64 @@
|
|||||||
|
---
|
||||||
|
id: 587d778f367417b2b2512aad
|
||||||
|
title: Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: تجنب مشاكل Colorblindness عن طريق اختيار الألوان التي نقل المعلومات بعناية
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> هناك أشكال مختلفة من عمى الألوان. يمكن أن تتراوح هذه من حساسية منخفضة إلى طول موجة معين من الضوء إلى عدم القدرة على رؤية اللون على الإطلاق. الشكل الأكثر شيوعًا هو الحساسية المنخفضة للكشف عن الخضر. على سبيل المثال ، إذا كان لونان أخضران مشابهان هما لون المقدمة والخلفية للمحتوى الخاص بك ، فقد لا يتمكن مستخدم colorblind من تمييزها. يمكن اعتبار الألوان القريبة كجيران على عجلة الألوان ، ويجب تجنب هذه المجموعات عند نقل معلومات مهمة. <strong>ملحوظة</strong> <br> تشتمل بعض أدوات اختيار الألوان عبر الإنترنت على محاكاة بصرية لكيفية ظهور الألوان لأنواع مختلفة من عمى الألوان. هذه موارد رائعة بالإضافة إلى الآلات الحاسبة لفحص التباين عبر الإنترنت. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> العربة القط هو اختبار الأساليب المختلفة لزر مهم، ولكن الأصفر ( <code>#FFFF33</code> ) <code>background-color</code> والأخضر ( <code>#33FF33</code> ) النص <code>color</code> والأشكال على عجلة الألوان ويمكن تمييزها تقريبا لبعض المستخدمين colorblind المجاورة. (الخفوت مماثلة أيضا فشل في فحص نسبة التباين). غيّر <code>color</code> النص إلى اللون الأزرق الداكن ( <code>#003366</code> ) لحل كلا المشكلتين. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب تغيير التعليمات البرمجية الخاصة بك <code>color</code> النص <code>button</code> إلى الأزرق الداكن.
|
||||||
|
testString: 'assert($("button").css("color") == "rgb(0, 51, 102)", "Your code should change the text <code>color</code> for the <code>button</code> to the dark blue.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
button {
|
||||||
|
color: #33FF33;
|
||||||
|
background-color: #FFFF33;
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Danger!</h1>
|
||||||
|
</header>
|
||||||
|
<button>Delete Internet</button>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
---
|
||||||
|
id: 587d778f367417b2b2512aac
|
||||||
|
title: Avoid Colorblindness Issues by Using Sufficient Contrast
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: تجنب مشكلات Colorblindness عن طريق استخدام التباين الكافي
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> يمثل اللون جزءًا كبيرًا من التصميم المرئي ، ولكن استخدامه يقدم مشكلتي إمكانية الوصول. أولاً ، لا ينبغي استخدام اللون وحده باعتباره الطريقة الوحيدة لنقل المعلومات المهمة لأن مستخدمي قارئ الشاشة لن يراها. ثانيًا ، تحتاج ألوان المقدمة والخلفية إلى تباين كافٍ بحيث يمكن لمستخدمي colorblind التمييز بينها. غطت التحديات السابقة وجود بدائل نصية لمعالجة القضية الأولى. أظهر التحدي الأخير أدوات فحص التباين للمساعدة في الثانية. تنطبق نسبة التباين الموصى بها لـ WCAG والتي تبلغ 4.5: 1 على استخدام الألوان بالإضافة إلى مجموعات المقاييس الرمادية. يواجه مستخدمو Colorblind صعوبة في تمييز بعض الألوان عن الآخرين - عادةً ما تكون في اللون ، ولكن في بعض الأحيان خفيفة. يمكنك تذكر أن نسبة التباين يتم حسابها باستخدام قيم النصوع النسبي (أو الإضاءة) لألوان المقدمة والخلفية. من الناحية العملية ، يمكن الوصول إلى نسبة 4.5: 1 عن طريق جعل اللون الداكن أكثر قتامة وإضاءة اللون الأخف بمساعدة أداة فحص الألوان. تعتبر الألوان الداكنة على عجلة الألوان من الألوان الزرقاء والبنفسجية والمغناطيسية والأحمر ، في حين أن الألوان الفاتحة هي البرتقال والأصفر والأخضر والأزرق. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> يجرّب Camper Cat استخدام اللون لنص المدونة وخلفيته ، لكن مجموعته الحالية من <code>background-color</code> الأخضر مع <code>color</code> النص الماروني له نسبة تباين تبلغ 2.5: 1. يمكنك بسهولة ضبط خفة الألوان منذ أن أعلنها باستخدام خاصية CSS <code>hsl()</code> (والتي تعني التوهج والتشبع والخفة) عن طريق تغيير الوسيطة الثالثة. قم بزيادة قيمة خفة <code>background-color</code> في <code>background-color</code> من 35٪ إلى 55٪ ، وخفض قيمة خفة <code>color</code> من 20٪ إلى 15٪. هذا يحسن التباين إلى 5.9: 1. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تقوم التعليمات البرمجية بتغيير قيمة الإضاءة فقط لخاصية <code>color</code> النص إلى قيمة 15٪.
|
||||||
|
testString: 'assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi), "Your code should only change the lightness value for the text <code>color</code> property to a value of 15%.");'
|
||||||
|
- text: يجب أن تقوم التعليمات البرمجية بتغيير قيمة الإضاءة فقط لخاصية <code>background-color</code> إلى قيمة 55٪.
|
||||||
|
testString: 'assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi), "Your code should only change the lightness value for the <code>background-color</code> property to a value of 55%.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
color: hsl(0, 55%, 20%);
|
||||||
|
background-color: hsl(120, 25%, 35%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<h2>A Word on the Recent Catnip Doping Scandal</h2>
|
||||||
|
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
|
||||||
|
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
|
||||||
|
</article>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
---
|
||||||
|
id: 587d778f367417b2b2512aae
|
||||||
|
title: Give Links Meaning by Using Descriptive Link Text
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: إعطاء الارتباطات المعنوية باستخدام نص الوصلة الوصفية
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> يتوفر لدى مستخدمي قارئ الشاشة خيارات مختلفة لنوع المحتوى الذي يقرأه جهازهم. ويشمل ذلك تخطي (أو) عناصر المعالم ، أو القفز إلى المحتوى الرئيسي ، أو الحصول على ملخص للصفحة من العناوين. خيار آخر هو فقط سماع الروابط المتاحة على الصفحة. تقوم قارئات الشاشة بذلك عن طريق قراءة نص الرابط ، أو ما بين علامات الربط ( <code>a</code> ). إن وجود قائمة من الروابط "انقر هنا" أو "اقرأ المزيد" ليس مفيدًا. بدلا من ذلك، يجب عليك استخدام النص وجيزة ولكن وصفي داخل <code>a</code> العلامات إلى توفير المزيد من معنى لهؤلاء المستخدمين. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> نص الارتباط الذي يستخدمه Camper Cat ليس وصفيًا للغاية بدون السياق المحيط. قم بتحريك علامة الربط ( <code>a</code> ) بحيث يتم التفاف حول النص "معلومات حول البطاريات" بدلاً من "انقر هنا". </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تتحرك الشفرة مرساة <code>a</code> العلامات من حول عبارة "اضغط هنا" للالتفاف حول عبارة "معلومات حول بطاريات".
|
||||||
|
testString: 'assert($("a").text().match(/^(information about batteries)$/g), "Your code should move the anchor <code>a</code> tags from around the words "Click here" to wrap around the words "information about batteries".");'
|
||||||
|
- text: تأكد من <code>a</code> عنصر يحتوي على علامة إغلاق.
|
||||||
|
testString: 'assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a href=(""|"")>/g).length, "Make sure your <code>a</code> element has a closing tag.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||||
|
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near. <a href="">Click here</a> for information about batteries</p>
|
||||||
|
</article>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,71 @@
|
|||||||
|
---
|
||||||
|
id: 587d7789367417b2b2512aa4
|
||||||
|
title: Improve Accessibility of Audio Content with the audio Element
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: تحسين إمكانية الوصول إلى المحتوى الصوتي باستخدام عنصر الصوت
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> يمنح عنصر HTML5 <code>audio</code> معنىً دلاليًا عندما يلف محتوى دفق الصوت أو الصوت في الترميز. يحتاج المحتوى الصوتي أيضًا إلى بديل نصي ليكون متاحًا للأشخاص الصم أو ضعاف السمع. يمكن إجراء ذلك باستخدام نص مجاور على الصفحة أو رابط إلى نص. تدعم علامة <code>audio</code> سمة <code>controls</code> . يعرض هذا التشغيل الافتراضي للمتصفح والإيقاف المؤقت وعناصر التحكم الأخرى ، ويدعم وظيفة لوحة المفاتيح. هذه سمة منطقية ، بمعنى أنها لا تحتاج إلى قيمة ، حيث يؤدي وجودها على العلامة إلى تشغيل الإعداد. إليك مثال على ذلك: <blockquote style=";text-align:right;direction:rtl"> <audio id = "meowClip" controls> <br> <source src = "audio / meow.mp3" type = "audio / mpeg" /> <br> <source src = "audio / meow.ogg" type = "audio / ogg" /> <br> </ الصوت> <br></blockquote> <strong>ملحوظة</strong> <br> عادةً ما يحتوي محتوى الوسائط المتعددة على مكونات مرئية وسمعية. يحتاج إلى تسميات توضيحية متزامنة وملف نصي حتى يتمكن المستخدمون الذين يعانون من إعاقات بصرية و / أو سمعية من الوصول إليه. بشكل عام ، لا يتحمل مطور الويب مسؤولية إنشاء التسميات التوضيحية أو النص ، ولكن يجب أن يعرف كيفية تضمينها. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> حان الوقت للاستراحة من Camper Cat ومقابلة زميل Zperiax (zersiax) ، وهو بطل إمكانية الوصول ومستخدم قارئ الشاشة. للاستماع إلى مقطع قارئ الشاشة الخاص به أثناء العمل ، أضف عنصرًا <code>audio</code> بعد <code>p</code> . قم بتضمين سمة <code>controls</code> . ثم ضع علامة <code>source</code> داخل علامات <code>audio</code> مع تعيين سمة <code>src</code> إلى "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" <code>type</code> تعيين السمة على "audio / mpeg". <strong>ملحوظة</strong> <br> قد يبدو المقطع الصوتي سريعًا ويصعب فهمه ، ولكن هذه سرعة عادية لمستخدمي قارئ الشاشة. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تحتوي شفرتك على علامة <code>audio</code> واحدة.
|
||||||
|
testString: 'assert($("audio").length === 1, "Your code should have one <code>audio</code> tag.");'
|
||||||
|
- text: تأكد من أن عنصر <code>audio</code> الخاص بك يحتوي على علامة إغلاق.
|
||||||
|
testString: 'assert(code.match(/<\/audio>/g).length === 1 && code.match(/<audio.*>[\s\S]*<\/audio>/g), "Make sure your <code>audio</code> element has a closing tag.");'
|
||||||
|
- text: يجب أن تحتوي علامة <code>audio</code> سمة <code>controls</code> .
|
||||||
|
testString: 'assert($("audio").attr("controls"), "The <code>audio</code> tag should have the <code>controls</code> attribute.");'
|
||||||
|
- text: يجب أن تحتوي الشفرة على علامة <code>source</code> واحدة.
|
||||||
|
testString: 'assert($("source").length === 1, "Your code should have one <code>source</code> tag.");'
|
||||||
|
- text: يجب أن تكون علامة <code>source</code> الخاصة بك داخل علامات <code>audio</code> .
|
||||||
|
testString: 'assert($("audio").children("source").length === 1, "Your <code>source</code> tag should be inside the <code>audio</code> tags.");'
|
||||||
|
- text: يجب أن تتطابق قيمة السمة <code>src</code> على العلامة <code>source</code> مع الارتباط الموجود في الإرشادات بالضبط.
|
||||||
|
testString: 'assert($("source").attr("src") === "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3", "The value for the <code>src</code> attribute on the <code>source</code> tag should match the link in the instructions exactly.");'
|
||||||
|
- text: يجب أن تحتوي شفرتك على سمة <code>type</code> على العلامة <code>source</code> بقيمة صوت / mpeg.
|
||||||
|
testString: 'assert($("source").attr("type") === "audio/mpeg", "Your code should include a <code>type</code> attribute on the <code>source</code> tag with a value of audio/mpeg.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Real Coding Ninjas</h1>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<p>A sound clip of Zersiax's screen reader in action.</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,99 @@
|
|||||||
|
---
|
||||||
|
id: 587d778a367417b2b2512aa5
|
||||||
|
title: Improve Chart Accessibility with the figure Element
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: تحسين إمكانية الوصول المخطط مع عنصر الشكل
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> قدم HTML5 عنصر <code>figure</code> ، جنبا إلى جنب مع <code>figcaption</code> ذات الصلة. تستخدم هذه العناصر معًا لتمثيل عرض مرئي (مثل صورة أو مخطط أو مخطط) مع التسمية التوضيحية. ويعطي هذا دفعة من إمكانية الوصول ذات شقين عن طريق كل من المحتوى ذي الصلة من حيث تجميع المحتوى ، وتقديم بديل نصي يشرح <code>figure</code> . بالنسبة إلى عمليات التمثيل البصري للبيانات مثل المخططات ، يمكن استخدام التسمية التوضيحية للإحاطة علما بالاتجاهات أو الاستنتاجات للمستخدمين الذين يعانون من إعاقات بصرية. ويغطي تحد آخر كيفية نقل إصدار جدول من البيانات خارج الشاشة (باستخدام CSS) لمستخدمي قارئ الشاشة. في ما يلي مثال - لاحظ أن <code>figcaption</code> داخل علامات <code>figure</code> ويمكن دمجه مع عناصر أخرى: <blockquote style=";text-align:right;direction:rtl"> <الرقم> <br> <img src = "roundhouseDestruction.jpeg" alt = "Photo of Camper Cat executing a roundhouse kick"> <br> <BR> <br> <figcaption> <br> يوضح سيد كامبر القط شكل مناسب للركلة المستديرة. <br> </ figcaption> <br> </ الرقم> <br></blockquote></section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> تعمل لعبة Camper Cat بجد لإنشاء مخطط شريطي مكدّس يعرض مقدار الوقت في الأسبوع لإنفاق التدريب على التسلل والمكافحة والأسلحة. ساعده في تنظيم صفحته بشكل أفضل عن طريق تغيير علامة <code>div</code> التي استخدمها في علامة <code>figure</code> ، والعلامة <code>p</code> التي تحيط <code>figcaption</code> التوضيحية إلى علامة <code>figcaption</code> . </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن يحتوي <code>figure</code> علامة <code>figure</code> واحدة.
|
||||||
|
testString: 'assert($("figure").length == 1, "Your code should have one <code>figure</code> tag.");'
|
||||||
|
- text: يجب أن تحتوي <code>figcaption</code> علامة <code>figcaption</code> واحدة.
|
||||||
|
testString: 'assert($("figcaption").length == 1, "Your code should have one <code>figcaption</code> tag.");'
|
||||||
|
- text: يجب ألا تحتوي شفرتك على أي علامات <code>div</code> .
|
||||||
|
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
|
||||||
|
- text: يجب ألا تحتوي شفرتك على أي علامات <code>p</code> .
|
||||||
|
testString: 'assert($("p").length == 0, "Your code should not have any <code>p</code> tags.");'
|
||||||
|
- text: يجب أن يكون <code>figcaption</code> طفل علامة <code>figure</code> .
|
||||||
|
testString: 'assert($("figure").children("figcaption").length == 1, "The <code>figcaption</code> should be a child of the <code>figure</code> tag.");'
|
||||||
|
- text: تأكد من أن عنصر <code>figure</code> الخاص بك به علامة إغلاق.
|
||||||
|
testString: 'assert(code.match(/<\/figure>/g) && code.match(/<\/figure>/g).length === code.match(/<figure>/g).length, "Make sure your <code>figure</code> element has a closing tag.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Training</h1>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||||
|
<li><a href="#combat">Combat</a></li>
|
||||||
|
<li><a href="#weapons">Weapons</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section>
|
||||||
|
|
||||||
|
<!-- Add your code below this line -->
|
||||||
|
<div>
|
||||||
|
<!-- Stacked bar chart will go here -->
|
||||||
|
<br>
|
||||||
|
<p>Breakdown per week of time to spend training in stealth, combat, and weapons.</p>
|
||||||
|
</div>
|
||||||
|
<!-- Add your code above this line -->
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<section id="stealth">
|
||||||
|
<h2>Stealth & Agility Training</h2>
|
||||||
|
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||||
|
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="combat">
|
||||||
|
<h2>Combat Training</h2>
|
||||||
|
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||||
|
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="weapons">
|
||||||
|
<h2>Weapons Training</h2>
|
||||||
|
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||||
|
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,82 @@
|
|||||||
|
---
|
||||||
|
id: 587d778a367417b2b2512aa6
|
||||||
|
title: Improve Form Field Accessibility with the label Element
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: تحسين إمكانية الوصول إلى حقل النموذج باستخدام عنصر التسمية
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> ينطبق تحسين إمكانية الوصول باستخدام ترميز HTML الدلالية على استخدام كلٍّ من أسماء العلامات المناسبة وكذلك السمات. تغطي التحديات العديدة التالية بعض السيناريوهات المهمة التي تستخدم سمات في النماذج. تقوم علامة <code>label</code> بلف النص لعنصر تحكم محدد في النموذج ، وعادة ما يكون الاسم أو الملصق الخاص باختيار ما. هذا يربط معنى لهذا البند ويجعل الشكل أكثر قابلية للقراءة. و <code>for</code> السمة على <code>label</code> العلامة الزميلة صراحة على أن <code>label</code> مع عنصر تحكم النموذج ويستخدم من قبل قارئات الشاشة. لقد تعلمت عن أزرار الاختيار وتصنيفاتها في درس في قسم HTML الأساسي. في هذا الدرس ، قمنا بلف عنصر إدخال زر الراديو داخل عنصر <code>label</code> إلى جانب نص التسمية لجعل النص قابلاً للنقر. وهناك طريقة أخرى لتحقيق ذلك هي عن طريق استخدام <code>for</code> السمة كما هو موضح في هذا الدرس. يجب أن تكون قيمة السمة هي نفس قيمة السمة <code>id</code> <code>for</code> تحكم النموذج. إليك مثال على ذلك: <blockquote style=";text-align:right;direction:rtl"> <form> <br> <label for = "name"> الاسم: </ label> <br> <input type = "text" id = "name" name = "name"> <br> </ form> <br></blockquote></section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> يتوقع كامبر كات اهتمامًا كبيرًا بمشاركاته المدروسة ، ويريد تضمين نموذج اشتراك بالبريد الإلكتروني. إضافة <code>for</code> السمة على البريد الإلكتروني <code>label</code> يطابق <code>id</code> عن دورتها <code>input</code> المجال. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن يكون التعليمات البرمجية ل <code>for</code> السمة على <code>label</code> العلامة التي ليس فارغا.
|
||||||
|
testString: 'assert($("label").attr("for"), "Your code should have a <code>for</code> attribute on the <code>label</code> tag that is not empty.");'
|
||||||
|
- text: يجب أن تتوافق قيمة السمة <code>for</code> بك <code>for</code> قيمة <code>id</code> في <code>input</code> البريد الإلكتروني.
|
||||||
|
testString: 'assert($("label").attr("for") == "email", "Your <code>for</code> attribute value should match the <code>id</code> value on the email <code>input</code>.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<form>
|
||||||
|
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||||
|
|
||||||
|
|
||||||
|
<label>Email:</label>
|
||||||
|
<input type="text" id="email" name="email">
|
||||||
|
|
||||||
|
|
||||||
|
<input type="submit" name="submit" value="Submit">
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
<article>
|
||||||
|
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||||
|
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||||
|
</article>
|
||||||
|
<img src="samuraiSwords.jpeg" alt="">
|
||||||
|
<article>
|
||||||
|
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||||
|
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||||
|
</article>
|
||||||
|
<img src="samuraiSwords.jpeg" alt="">
|
||||||
|
<article>
|
||||||
|
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||||
|
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||||
|
</article>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
---
|
||||||
|
id: 587d778e367417b2b2512aab
|
||||||
|
title: Improve Readability with High Contrast Text
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: تحسين إمكانية القراءة مع نص عالي التباين
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> قد يؤدي التباين المنخفض بين ألوان المقدمة والخلفية إلى صعوبة قراءة النص. يحسن التباين الكافي من سهولة قراءة المحتوى الخاص بك ، ولكن ماذا يعني "كاف" بالضبط؟ توصي إرشادات الوصول إلى محتوى الويب (WCAG) بنسبة تباين تبلغ 4.5 إلى 1 على الأقل للنص العادي. يتم حساب النسبة بمقارنة قيم النصوع النسبي للونين. يتراوح هذا من 1: 1 لنفس اللون ، أو بدون تباين ، إلى 21: 1 للون الأبيض في مقابل أسود ، وهو أقوى تباين. هناك العديد من أدوات التحقق من التباين المتاحة عبر الإنترنت والتي تحسب هذه النسبة لك. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> يتميز اختيار Camper Cat للنص باللون الرمادي الفاتح على خلفية بيضاء لمشاركته الأخيرة في المدونة بنسبة تباين تبلغ 1.5: 1 ، مما يجعل من الصعب قراءتها. قم بتغيير <code>color</code> النص من الرمادي الحالي ( <code>#D3D3D3</code> ) إلى اللون الرمادي الداكن ( <code>#636363</code> ) لتحسين نسبة التباين إلى 6: 1. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب تغيير التعليمات البرمجية الخاصة بك <code>color</code> النص الخاص <code>body</code> إلى الرمادي الداكن.
|
||||||
|
testString: 'assert($("body").css("color") == "rgb(99, 99, 99)", "Your code should change the text <code>color</code> for the <code>body</code> to the darker gray.");'
|
||||||
|
- text: التعليمات البرمجية لا ينبغي تغيير <code>background-color</code> لل <code>body</code> .
|
||||||
|
testString: 'assert($("body").css("background-color") == "rgb(255, 255, 255)", "Your code should not change the <code>background-color</code> for the <code>body</code>.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
color: #D3D3D3;
|
||||||
|
background-color: #FFF;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<h2>A Word on the Recent Catnip Doping Scandal</h2>
|
||||||
|
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
|
||||||
|
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
|
||||||
|
</article>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,57 @@
|
|||||||
|
---
|
||||||
|
id: 587d774e367417b2b2512a9f
|
||||||
|
title: Jump Straight to the Content Using the main Element
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: الانتقال مباشرةً إلى المحتوى باستخدام العنصر الرئيسي
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> قدم HTML5 عددًا من العناصر الجديدة التي توفر للمطورين مزيدًا من الخيارات مع تضمين ميزات إمكانية الوصول أيضًا. تتضمن هذه العلامات <code>main</code> ، <code>header</code> <code>footer</code> ، <code>footer</code> ، <code>nav</code> ، <code>article</code> ، <code>section</code> ، وغيرها. بشكل افتراضي ، يعرض المتصفح هذه العناصر بشكل مشابه <code>div</code> المتواضع. ومع ذلك ، فإن استخدامها عند الاقتضاء يعطي معنًى إضافيًا في ترميزك. يمكن أن يشير اسم العلامة وحده إلى نوع المعلومات التي يحتوي عليها ، مما يضيف معنىً دلاليًا إلى ذلك المحتوى. يمكن للتكنولوجيات المساعدة الوصول إلى هذه المعلومات لتوفير ملخص صفحة أفضل أو خيارات التنقل لمستخدميها. يتم استخدام العنصر <code>main</code> لتغليف المحتوى (الأساسي) ، ويجب أن يكون هناك واحد فقط لكل صفحة. من المفترض أن تحيط المعلومات المتعلقة بالموضوع المركزي لصفحتك. لا يُقصد به تضمين عناصر تكرر عبر الصفحات ، مثل روابط التنقل أو إعلانات البانر. تحتوي العلامة <code>main</code> أيضًا على ميزة <code>main</code> مضمّنة يمكن للتكنولوجيا المساعدة استخدامها للانتقال سريعًا إلى المحتوى الرئيسي. إذا رأيت في أي وقت مضى رابط "الانتقال إلى المحتوى الرئيسي" في أعلى الصفحة ، فإن استخدام علامة رئيسية تلقائيًا يعطي الأجهزة المساعدة تلك الوظائف. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> كامبر كات لديه بعض الأفكار الكبيرة لصفحة أسلحة النينجا. ساعده في إعداد ترميزه عن طريق إضافة علامات فتح وإغلاق <code>main</code> بين <code>header</code> <code>footer</code> (مغطاة في تحديات أخرى). احتفظ بالعلامات <code>main</code> فارغة في الوقت الحالي. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن يكون <code>main</code> علامة <code>main</code> واحدة.
|
||||||
|
testString: 'assert($("main").length == 1, "Your code should have one <code>main</code> tag.");'
|
||||||
|
- text: و <code>main</code> يجب أن تكون العلامات بين إغلاق <code>header</code> العلامة وافتتاح <code>footer</code> العلامة.
|
||||||
|
testString: 'assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi), "The <code>main</code> tags should be between the closing <code>header</code> tag and the opening <code>footer</code> tag.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<header>
|
||||||
|
<h1>Weapons of the Ninja</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<footer></footer>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
---
|
||||||
|
id: 587d774c367417b2b2512a9d
|
||||||
|
title: Know When Alt Text Should be Left Blank
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: معرفة متى يجب ترك النص البديل فارغًا
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> في آخر تحد ، علمت أن تضمين سمة <code>alt</code> على علامات img إلزامي. ومع ذلك ، في بعض الأحيان يتم تجميع الصور مع تسمية توضيحية تشرحها بالفعل ، أو يتم استخدامها للزينة فقط. في هذه الحالات قد يبدو النص <code>alt</code> زائدا أو غير ضروري. في الحالات التي تكون فيها الصورة مفسّرة بالفعل بمحتوى نصي ، أو لا تضيف معنى إلى صفحة ما ، فإن <code>img</code> لا تزال بحاجة إلى سمة <code>alt</code> ، ولكن يمكن ضبطها على سلسلة فارغة. إليك مثال على ذلك: <code><img src="visualDecoration.jpeg" alt=""></code> عادةً ما تقع صور الخلفية تحت التصنيف "الزخرفي" أيضًا. ومع ذلك ، يتم تطبيقها عادةً مع قواعد CSS ، وبالتالي فهي ليست جزءًا من عملية قراءة برامج الترميز. <strong>ملحوظة</strong> <br> بالنسبة للصور التي تحتوي على تسمية توضيحية ، قد تحتاج إلى تضمين نص <code>alt</code> ، لأنه يساعد محركات البحث على فهرسة محتوى الصورة. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> قام الكاراف كات بترميز صفحة الهيكل العظمي لجزء المدونة الخاص بموقعه على الويب. انه يخطط لإضافة استراحة بصرية بين مادتيه مع صورة زخرفية لسيف الساموراي. أضف سمة <code>alt</code> لعلامة <code>img</code> واضبطها على سلسلة فارغة. (لاحظ أن الصورة <code>src</code> لا ترتبط بملف فعلي - لا تقلق أنه لا توجد سيوف تظهر في الشاشة.) </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تحتوي علامة <code>img</code> سمة <code>alt</code> .
|
||||||
|
testString: 'assert(!($("img").attr("alt") == undefined), "Your <code>img</code> tag should have an <code>alt</code> attribute.");'
|
||||||
|
- text: يجب تعيين سمة <code>alt</code> لسلسلة فارغة.
|
||||||
|
testString: 'assert($("img").attr("alt") == "", "The <code>alt</code> attribute should be set to an empty string.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
<article>
|
||||||
|
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||||
|
<p>To Come...</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<img src="samuraiSwords.jpeg">
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||||
|
<p>To Come...</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,138 @@
|
|||||||
|
---
|
||||||
|
id: 587d778d367417b2b2512aaa
|
||||||
|
title: Make Elements Only Visible to a Screen Reader by Using Custom CSS
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: جعل العناصر مرئية فقط إلى قارئ الشاشة عن طريق استخدام CSS مخصص
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> هل لاحظت أن جميع تحديات إمكانية الوصول المطبقة حتى الآن لم تستخدم أي CSS؟ هذا هو إظهار أهمية مخطط المستند المنطقي ، واستخدام علامات ذات معنى دلالي حول المحتوى الخاص بك قبل إدخال جانب التصميم المرئي. ومع ذلك ، يمكن لسحر CSS أيضًا تحسين إمكانية الوصول على صفحتك عندما تريد إخفاء المحتوى المقصود فقط لقارئي الشاشة. يحدث هذا عندما تكون المعلومات في تنسيق مرئي (مثل التخطيط) ، ولكن يحتاج مستخدمو قارئ الشاشة إلى عرض تقديمي بديل (مثل جدول) للوصول إلى البيانات. يتم استخدام CSS لوضع عناصر قارئ الشاشة فقط خارج المنطقة المرئية من نافذة المتصفح. في ما يلي مثال لقواعد CSS التي تحقق ذلك: <blockquote style=";text-align:right;direction:rtl"> .sr-only { <br> الموقع: مطلقة <br> left: -10000px؛ <br> العرض: 1 بكسل ؛ <br> الارتفاع: 1 بكسل ؛ <br> top: auto؛ <br> إخفاء الفائض؛ <br> } </blockquote> <strong>ملحوظة</strong> <br> أساليب CSS التالية لن تفعل نفس الشيء: <ul style=";text-align:right;direction:rtl"><li style=";text-align:right;direction:rtl"> <code>display: none;</code> أو <code>visibility: hidden;</code> لإخفاء المحتوى للجميع ، بما في ذلك مستخدمي قارئ الشاشة </li><li style=";text-align:right;direction:rtl"> قيم الصفر للأحجام بكسل ، مثل <code>width: 0px; height: 0px;</code> يزيل هذا العنصر من تدفق المستند ، مما يعني أن قارئي الشاشة سيتجاهله </li></ul></section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> أنشأ كامبر كات مخططًا شريطيًا رائعًا جدًا لصفحته التدريبية ، ووضع البيانات في جدول لمستخدمي المعاقين بصريا. يحتوي الجدول بالفعل على فئة <code>sr-only</code> ، ولكن لا يتم ملء قواعد CSS حتى الآن. امنح <code>position</code> قيمة مطلقة ، والقيمة <code>left</code> من -10000px ، <code>width</code> <code>height</code> لكل من قيم 1px. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تقوم التعليمات البرمجية الخاصة بك بتعيين خاصية <code>position</code> للفئة <code>sr-only</code> إلى قيمة مطلقة.
|
||||||
|
testString: 'assert($(".sr-only").css("position") == "absolute", "Your code should set the <code>position</code> property of the <code>sr-only</code> class to a value of absolute.");'
|
||||||
|
- text: يجب أن تقوم كودك بتعيين الخاصية <code>left</code> للفئة <code>sr-only</code> إلى قيمة -10000px.
|
||||||
|
testString: 'assert($(".sr-only").css("left") == "-10000px", "Your code should set the <code>left</code> property of the <code>sr-only</code> class to a value of -10000px.");'
|
||||||
|
- text: يجب أن يقوم <code>width</code> بتعيين خاصية <code>width</code> للفئة <code>sr-only</code> إلى قيمة 1 بكسل.
|
||||||
|
testString: 'assert(code.match(/width:\s*?1px/gi), "Your code should set the <code>width</code> property of the <code>sr-only</code> class to a value of 1 pixel.");'
|
||||||
|
- text: يجب أن تقوم التعليمات البرمجية الخاصة بك بتعيين خاصية <code>height</code> للفئة <code>sr-only</code> إلى قيمة 1 بكسل.
|
||||||
|
testString: 'assert(code.match(/height:\s*?1px/gi), "Your code should set the <code>height</code> property of the <code>sr-only</code> class to a value of 1 pixel.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
.sr-only {
|
||||||
|
position: ;
|
||||||
|
left: ;
|
||||||
|
width: ;
|
||||||
|
height: ;
|
||||||
|
top: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Training</h1>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||||
|
<li><a href="#combat">Combat</a></li>
|
||||||
|
<li><a href="#weapons">Weapons</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<h2>Master Camper Cat's Beginner Three Week Training Program</h2>
|
||||||
|
<figure>
|
||||||
|
<!-- Stacked bar chart of weekly training-->
|
||||||
|
<p>[Stacked bar chart]</p>
|
||||||
|
<br />
|
||||||
|
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
|
||||||
|
</figure>
|
||||||
|
<table class="sr-only">
|
||||||
|
<caption>Hours of Weekly Training in Stealth, Combat, and Weapons</caption>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th></th>
|
||||||
|
<th scope="col">Stealth & Agility</th>
|
||||||
|
<th scope="col">Combat</th>
|
||||||
|
<th scope="col">Weapons</th>
|
||||||
|
<th scope="col">Total</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">Week One</th>
|
||||||
|
<td>3</td>
|
||||||
|
<td>5</td>
|
||||||
|
<td>2</td>
|
||||||
|
<td>10</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">Week Two</th>
|
||||||
|
<td>4</td>
|
||||||
|
<td>5</td>
|
||||||
|
<td>3</td>
|
||||||
|
<td>12</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">Week Three</th>
|
||||||
|
<td>4</td>
|
||||||
|
<td>6</td>
|
||||||
|
<td>3</td>
|
||||||
|
<td>13</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
<section id="stealth">
|
||||||
|
<h2>Stealth & Agility Training</h2>
|
||||||
|
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||||
|
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="combat">
|
||||||
|
<h2>Combat Training</h2>
|
||||||
|
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||||
|
<article><h3>Goodbye, world: 5 proven ways to knock out an opponent</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="weapons">
|
||||||
|
<h2>Weapons Training</h2>
|
||||||
|
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||||
|
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||||
|
</section>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,76 @@
|
|||||||
|
---
|
||||||
|
id: 587d7790367417b2b2512aaf
|
||||||
|
title: Make Links Navigatable with HTML Access Keys
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: جعل الروابط نافيجيتابل مع مفاتيح الوصول إلى HTML
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> تقدم HTML و <code>accesskey</code> السمة لتحديد مفتاح الاختصار لتنشيط أو إحضار التركيز إلى عنصر. هذا يمكن أن يجعل التنقل أكثر كفاءة لمستخدمي لوحة المفاتيح فقط. تسمح HTML5 باستخدام هذه السمة على أي عنصر ، ولكنها مفيدة بشكل خاص عند استخدامها مع تلك التفاعلية. ويشمل ذلك الروابط والأزرار وعناصر التحكم في النموذج. إليك مثالاً: <code><button accesskey="b">Important Button</button></code> </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> يريد Camper Cat أن تحتوي الروابط الموجودة حول عنوان مقالتي المدونة على اختصارات لوحة المفاتيح حتى يتمكن مستخدمو موقعه من الانتقال سريعًا إلى القصة الكاملة. إضافة سمة <code>accesskey</code> إلى كلا الارتباطين وتعيين أول واحد إلى "g" (لـ Garfield) والثاني إلى "c" (لـ Chuck Norris). </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: التعليمات البرمجية يجب إضافة و <code>accesskey</code> السمة إلى <code>a</code> العلامة مع <code>id</code> من "لأول مرة".
|
||||||
|
testString: 'assert($("#first").attr("accesskey"), "Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "first".");'
|
||||||
|
- text: التعليمات البرمجية يجب إضافة و <code>accesskey</code> السمة إلى <code>a</code> العلامة مع <code>id</code> من "الثاني".
|
||||||
|
testString: 'assert($("#second").attr("accesskey"), "Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "second".");'
|
||||||
|
- text: التعليمات البرمجية يجب تعيين <code>accesskey</code> السمة على <code>a</code> العلامة مع <code>id</code> من "الأولى" إلى "ز". لاحظ أن القضية مهمة.
|
||||||
|
testString: 'assert($("#first").attr("accesskey") == "g", "Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "first" to "g". Note that case matters.");'
|
||||||
|
- text: التعليمات البرمجية يجب تعيين <code>accesskey</code> السمة على <code>a</code> العلامة مع <code>id</code> من ل"ج" "ثانية". لاحظ أن القضية مهمة.
|
||||||
|
testString: 'assert($("#second").attr("accesskey") == "c", "Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "second" to "c". Note that case matters.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
|
||||||
|
|
||||||
|
<h2><a id="first" href="">The Garfield Files: Lasagna as Training Fuel?</a></h2>
|
||||||
|
|
||||||
|
|
||||||
|
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
|
||||||
|
|
||||||
|
<h2><a id="second" href="">Is Chuck Norris a Cat Person?</a></h2>
|
||||||
|
|
||||||
|
|
||||||
|
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||||
|
</article>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,86 @@
|
|||||||
|
---
|
||||||
|
id: 587d7788367417b2b2512aa3
|
||||||
|
title: Make Screen Reader Navigation Easier with the footer Landmark
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: جعل قارئ شاشة الملاحة أسهل مع تذييل لاندمارك
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> يشبه عنصر <code>footer</code> المشابه <code>header</code> <code>nav</code> ميزة المعالم المضمنة التي تسمح للأجهزة المساعدة بالانتقال إليها بسرعة. يتم استخدامه بشكل أساسي لاحتواء معلومات حقوق الطبع والنشر أو الروابط إلى المستندات ذات الصلة التي عادة ما تكون في أسفل الصفحة. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> تحقق صفحة تدريب Camper Cat تقدمًا جيدًا. غيّر <code>div</code> الذي استخدمه في التفاف معلومات حقوق النشر الخاصة به في أسفل الصفحة إلى عنصر <code>footer</code> . </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن يكون <code>footer</code> علامة <code>footer</code> واحد.
|
||||||
|
testString: 'assert($("footer").length == 1, "Your code should have one <code>footer</code> tag.");'
|
||||||
|
- text: يجب ألا تحتوي شفرتك على أي علامات <code>div</code> .
|
||||||
|
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
|
||||||
|
- text: يجب أن تحتوي الشفرة على علامة <code>footer</code> للفتح <code>footer</code> .
|
||||||
|
testString: 'assert(code.match(/<footer>\s*© 2018 Camper Cat\s*<\/footer>/g), "Your code should have an opening and closing <code>footer</code> tag.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Training</h1>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||||
|
<li><a href="#combat">Combat</a></li>
|
||||||
|
<li><a href="#weapons">Weapons</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section id="stealth">
|
||||||
|
<h2>Stealth & Agility Training</h2>
|
||||||
|
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||||
|
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="combat">
|
||||||
|
<h2>Combat Training</h2>
|
||||||
|
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||||
|
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="weapons">
|
||||||
|
<h2>Weapons Training</h2>
|
||||||
|
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||||
|
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
|
||||||
|
<div>© 2018 Camper Cat</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,79 @@
|
|||||||
|
---
|
||||||
|
id: 587d7787367417b2b2512aa1
|
||||||
|
title: Make Screen Reader Navigation Easier with the header Landmark
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: جعل قارئ شاشة الملاحة أسهل مع رأس معلم
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> عنصر HTML5 التالي الذي يضيف المعنى الدلالي ويحسّن إمكانية الوصول هو علامة <code>header</code> . يتم استخدامه لالتفاف المعلومات التمهيدية أو ارتباطات التنقل لعلامته الرئيسية ، ويعمل بشكل جيد حول المحتوى الذي يتكرر في الأعلى على صفحات متعددة. يشترك <code>header</code> في ميزة المعالم البارزة التي شاهدتها بشكل <code>main</code> ، مما يسمح باستخدام التقنيات المساعدة للتنقل بسرعة إلى هذا المحتوى. <strong>ملحوظة</strong> <br> <code>header</code> المقصود للاستخدام في <code>body</code> بطاقة من وثيقة HTML الخاص بك. هذا يختلف عن عنصر <code>head</code> ، والذي يحتوي على عنوان الصفحة ، معلومات التعريف ، إلخ. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> كامبر كات يكتب بعض المقالات الرائعة حول تدريب النينجا ، ويريد إضافة صفحة لهم إلى موقعه. غيّر <code>div</code> الأعلى الذي يحتوي حاليًا على <code>h1</code> إلى علامة <code>header</code> بدلاً من ذلك. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تحتوي الشفرة على علامة <code>header</code> واحدة.
|
||||||
|
testString: 'assert($("header").length == 1, "Your code should have one <code>header</code> tag.");'
|
||||||
|
- text: يجب أن تلتف علامات <code>header</code> حول <code>h1</code> .
|
||||||
|
testString: 'assert($("header").children("h1").length == 1, "Your <code>header</code> tags should wrap around the <code>h1</code>.");'
|
||||||
|
- text: يجب ألا تحتوي شفرتك على أي علامات <code>div</code> .
|
||||||
|
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
|
||||||
|
- text: تأكد من أن عنصر <code>header</code> الخاص بك يحتوي على علامة إغلاق.
|
||||||
|
testString: 'assert(code.match(/<\/header>/g) && code.match(/<\/header>/g).length === code.match(/<header>/g).length, "Make sure your <code>header</code> element has a closing tag.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h1>Training with Camper Cat</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section id="stealth">
|
||||||
|
<h2>Stealth & Agility Training</h2>
|
||||||
|
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||||
|
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="combat">
|
||||||
|
<h2>Combat Training</h2>
|
||||||
|
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||||
|
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="weapons">
|
||||||
|
<h2>Weapons Training</h2>
|
||||||
|
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||||
|
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,85 @@
|
|||||||
|
---
|
||||||
|
id: 587d7788367417b2b2512aa2
|
||||||
|
title: Make Screen Reader Navigation Easier with the nav Landmark
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: جعل قارئ شاشة الملاحة أسهل مع الملاحة
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> عنصر <code>nav</code> هو عنصر HTML5 آخر مع ميزة المعالم المضمنة لسهولة التنقل في قارئ الشاشة. تهدف هذه العلامة إلى الالتفاف حول روابط التنقل الرئيسية في صفحتك. إذا كانت هناك روابط موقع متكررة في أسفل الصفحة ، فليس من الضروري ترميز تلك التي تحتوي على علامة <code>nav</code> أيضًا. يكفي استخدام <code>footer</code> (المغطى في التحدي التالي). </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> أدرج Camper Cat ارتباطات التنقل في الجزء العلوي من صفحة التدريب الخاصة به ، ولكن ملفوفة في <code>div</code> . غيّر <code>div</code> إلى علامة <code>nav</code> لتحسين إمكانية الوصول على صفحته. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن يحتوي <code>nav</code> علامة <code>nav</code> واحدة.
|
||||||
|
testString: 'assert($("nav").length == 1, "Your code should have one <code>nav</code> tag.");'
|
||||||
|
- text: يجب أن تقوم علامات <code>nav</code> الخاصة بك بالالتفاف حول <code>ul</code> وعناصر القائمة الخاصة بها.
|
||||||
|
testString: 'assert($("nav").children("ul").length == 1, "Your <code>nav</code> tags should wrap around the <code>ul</code> and its list items.");'
|
||||||
|
- text: يجب ألا تحتوي شفرتك على أي علامات <code>div</code> .
|
||||||
|
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
|
||||||
|
- text: تأكد من أن عنصر <code>nav</code> يحتوي على علامة إغلاق.
|
||||||
|
testString: 'assert(code.match(/<\/nav>/g) && code.match(/<\/nav>/g).length === code.match(/<nav>/g).length, "Make sure your <code>nav</code> element has a closing tag.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Training with Camper Cat</h1>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||||
|
<li><a href="#combat">Combat</a></li>
|
||||||
|
<li><a href="#weapons">Weapons</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section id="stealth">
|
||||||
|
<h2>Stealth & Agility Training</h2>
|
||||||
|
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||||
|
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="combat">
|
||||||
|
<h2>Combat Training</h2>
|
||||||
|
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||||
|
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="weapons">
|
||||||
|
<h2>Weapons Training</h2>
|
||||||
|
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||||
|
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,85 @@
|
|||||||
|
---
|
||||||
|
id: 587d778c367417b2b2512aa9
|
||||||
|
title: Standardize Times with the HTML5 datetime Attribute
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: توحيد الأوقات باستخدام سمة datetime HTML5
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> استمرارًا بموضوع التاريخ ، قدم HTML5 أيضًا عنصر <code>time</code> مع سمة <code>datetime</code> لتوحيد الأوقات. هذا عنصر مضمّن يمكن أن يلف تاريخًا أو وقتًا على الصفحة. يتم الاحتفاظ بتنسيق صالح لذلك التاريخ بواسطة السمة <code>datetime</code> . هذه هي القيمة التي يتم الوصول إليها بواسطة الأجهزة المساعدة. يساعد على تجنب الارتباك عن طريق ذكر نسخة موحدة من الوقت ، حتى لو كان مكتوبا بطريقة غير رسمية أو عامية في النص. في ما يلي مثال على ذلك: <code><p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p></code> </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> نتائج الاستطلاع "مورتال كومبات" كامبر كات في! لف علامة <code>time</code> حول النص "الخميس 15 سبتمبر <sup> th </ sup>" وأضف سمة <code>datetime</code> لتعيينها على "2016-09-15". </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تلتف علامات <code>time</code> حول النص "الخميس 15 سبتمبر <sup> th </ sup>".
|
||||||
|
testString: 'assert($("time").text().match(/Thursday, September 15th/g), "Your <code>time</code> tags should wrap around the text "Thursday, September 15<sup>th</sup>".");'
|
||||||
|
- text: يجب أن تحتوي علامة <code>time</code> الخاصة بك على سمة <code>datetime</code> غير فارغة.
|
||||||
|
testString: 'assert($("time").attr("datetime"), "Your <code>time</code> tag should have a <code>datetime</code> attribute that is not empty.");'
|
||||||
|
- text: يجب تعيين السمة <code>datetime</code> الخاصة بك إلى قيمة 2016-09-15.
|
||||||
|
testString: 'assert($("time").attr("datetime") === "2016-09-15", "Your <code>datetime</code> attribute should be set to a value of 2016-09-15.");'
|
||||||
|
- text: تأكد من أن عنصر <code>time</code> يحتوي على علامة إغلاق.
|
||||||
|
testString: 'assert(code.match(/<\/time>/g) && code.match(/<\/time>/g).length === 4, "Make sure your <code>time</code> element has a closing tag.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Tournaments</h1>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<h2>Mortal Kombat Tournament Survey Results</h2>
|
||||||
|
|
||||||
|
<!-- Add your code below this line -->
|
||||||
|
|
||||||
|
<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is Thursday, September 15<sup>th</sup>. May the best ninja win!</p>
|
||||||
|
|
||||||
|
<!-- Add your code above this line -->
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h3>Comments:</h3>
|
||||||
|
<article>
|
||||||
|
<p>Posted by: Sub-Zero on <time datetime="2016-08-13T20:01Z">August 13<sup>th</sup></time></p>
|
||||||
|
<p>Johnny Cage better be there, I'll finish him!</p>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<p>Posted by: Doge on <time datetime="2016-08-15T08:12Z">August 15<sup>th</sup></time></p>
|
||||||
|
<p>Wow, much combat, so mortal.</p>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<p>Posted by: The Grim Reaper on <time datetime="2016-08-16T00:00Z">August 16<sup>th</sup></time></p>
|
||||||
|
<p>Looks like I'll be busy that day.</p>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,64 @@
|
|||||||
|
---
|
||||||
|
id: 587d774d367417b2b2512a9e
|
||||||
|
title: Use Headings to Show Hierarchical Relationships of Content
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: استخدم العناوين لإظهار العلاقات الهرمية للمحتوى
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> تعد العناوين (عناصر <code>h1</code> حتى <code>h6</code> ) علامات عامل تساعد في توفير البنية ووضع العلامات على المحتوى الخاص بك. يمكن تعيين قارئات الشاشة لقراءة العناوين فقط في الصفحة بحيث يحصل المستخدم على ملخص. هذا يعني أنه من المهم بالنسبة لعلامات العنوان في الترميز أن يكون لها معنى دلالي وتتصل ببعضها البعض ، ولا يتم انتقاؤها فقط لقيم حجمها. يعني <em>المعنى الدلالي</em> أن العلامة التي تستخدمها حول المحتوى تشير إلى نوع المعلومات التي تحتوي عليها. إذا كنت تكتب ورقة تحتوي على مقدمة وجسم وخاتمة ، فلن يكون من المنطقي وضع الخاتمة كقسم فرعي للجسم في مخططك. يجب أن يكون القسم الخاص بها. وبالمثل ، يجب أن تدخل علامات العنوان في صفحة ويب وترمز إلى العلاقات الهرمية للمحتوى الخاص بك. تبدأ العناوين ذات الترتيب المتساوي (أو الأعلى) بأقسام جديدة ضمنية ، مع عناوين فرعية منخفضة بداية من المرحلة السابقة. وكمثال على ذلك ، فإن الصفحة التي تحتوي على عنصر <code>h2</code> متبوعًا بالعديد من الأقسام الفرعية المصنفة <code>h4</code> قد تؤدي إلى إرباك مستخدم قارئ الشاشة. من خلال ستة اختيارات ، من المغري استخدام علامة لأنها تبدو أفضل في المتصفح ، ولكن يمكنك استخدام CSS لتحرير الحجم النسبي. نقطة واحدة أخيرة ، يجب أن تحتوي كل صفحة دائمًا على عنصر <code>h1</code> (واحد فقط) ، وهو الموضوع الرئيسي للمحتوى الخاص بك. يتم استخدام هذا والعناوين الأخرى جزئيًا بواسطة محركات البحث لفهم موضوع الصفحة. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
undefined
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تحتوي شفرتك على ست علامات <code>h3</code> .
|
||||||
|
testString: 'assert($("h3").length === 6, "Your code should have six <code>h3</code> tags.");'
|
||||||
|
- text: يجب ألا تحتوي شفرتك على أي علامات <code>h5</code> .
|
||||||
|
testString: 'assert($("h5").length === 0, "Your code should not have any <code>h5</code> tags.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h1>How to Become a Ninja</h1>
|
||||||
|
<main>
|
||||||
|
<h2>Learn the Art of Moving Stealthily</h2>
|
||||||
|
<h5>How to Hide in Plain Sight</h5>
|
||||||
|
<h5>How to Climb a Wall</h5>
|
||||||
|
|
||||||
|
<h2>Learn the Art of Battle</h2>
|
||||||
|
<h5>How to Strengthen your Body</h5>
|
||||||
|
<h5>How to Fight like a Ninja</h5>
|
||||||
|
|
||||||
|
<h2>Learn the Art of Living with Honor</h2>
|
||||||
|
<h5>How to Breathe Properly</h5>
|
||||||
|
<h5>How to Simplify your Life</h5>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,97 @@
|
|||||||
|
---
|
||||||
|
id: 587d7790367417b2b2512ab0
|
||||||
|
title: Use tabindex to Add Keyboard Focus to an Element
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: استخدم tabindex إلى إضافة Keyboard Keyboard إلى عنصر
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> <code>tabindex</code> سمة <code>tabindex</code> HTML على ثلاث وظائف مميزة تتعلق بتركيز لوحة المفاتيح للعنصر. عندما يكون على علامة ، فإنه يشير إلى أنه يمكن التركيز على العنصر. تحدد القيمة (عدد صحيح موجب أو سلبي أو صفر) السلوك. تتلقى عناصر معينة ، مثل الروابط وعناصر التحكم في النموذج ، تركيز لوحة المفاتيح تلقائيًا عند قيام المستخدم بالتبويب من خلال صفحة. إنه بنفس ترتيب العناصر الموجودة في ترميز مصدر HTML. يمكن إعطاء هذه الوظيفة نفسها لعناصر أخرى ، مثل <code>div</code> و <code>span</code> و <code>p</code> ، بوضع سمة <code>tabindex="0"</code> عليها. إليك مثال: <code><div tabindex="0">I need keyboard focus!</div></code> <strong>ملاحظة</strong> <br> <code>tabindex</code> قيمة <code>tabindex</code> سالبة (عادة -1) إلى أن العنصر قابل للتركيز ، ولكن لا يمكن الوصول إليه عن طريق لوحة المفاتيح. يتم استخدام هذه الطريقة بشكل عام للتركيز على المحتوى برمجيًا (مثلما يحدث عندما يتم تنشيط <code>div</code> المستخدم في نافذة منبثقة) ، وهو خارج نطاق هذه التحديات. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> أنشأ Camper Cat استبيانًا جديدًا لجمع معلومات حول مستخدميه. وهو يعلم أن حقول الإدخال تحصل تلقائيًا على تركيز لوحة المفاتيح ، ولكنه يريد التأكد من أن مستخدمي لوحة المفاتيح يتوقفون مؤقتًا عند استخدام الإرشادات أثناء الجدولة خلال العناصر. إضافة سمة <code>tabindex</code> إلى علامة <code>p</code> وتعيين قيمتها إلى "0". المكافأة - باستخدام <code>tabindex</code> تمكّن أيضًا <code>tabindex</code> CSS الزائفة <code>:focus</code> على العمل على علامة <code>p</code> . </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تضيف التعليمات البرمجية الخاصة بك سمة <code>tabindex</code> إلى علامة <code>p</code> التي تحتوي على إرشادات النموذج.
|
||||||
|
testString: 'assert($("p").attr("tabindex"), "Your code should add a <code>tabindex</code> attribute to the <code>p</code> tag that holds the form instructions.");'
|
||||||
|
- text: يجب أن تقوم التعليمات البرمجية بتعيين السمة <code>tabindex</code> على علامة <code>p</code> إلى قيمة 0.
|
||||||
|
testString: 'assert($("p").attr("tabindex") == "0", "Your code should set the <code>tabindex</code> attribute on the <code>p</code> tag to a value of 0.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
p:focus {
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Ninja Survey</h1>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<form>
|
||||||
|
|
||||||
|
|
||||||
|
<p>Instructions: Fill in ALL your information then click <b>Submit</b></p>
|
||||||
|
|
||||||
|
|
||||||
|
<label for="username">Username:</label>
|
||||||
|
<input type="text" id="username" name="username"><br>
|
||||||
|
<fieldset>
|
||||||
|
<legend>What level ninja are you?</legend>
|
||||||
|
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||||
|
<label for="newbie">Newbie Kitten</label><br>
|
||||||
|
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||||
|
<label for="intermediate">Developing Student</label><br>
|
||||||
|
<input id="master" type="radio" name="levels" value="master">
|
||||||
|
<label for="master">9th Life Master</label>
|
||||||
|
</fieldset>
|
||||||
|
<br>
|
||||||
|
<fieldset>
|
||||||
|
<legend>Select your favorite weapons:</legend>
|
||||||
|
<input id="stars" type="checkbox" name="weapons" value="stars">
|
||||||
|
<label for="stars">Throwing Stars</label><br>
|
||||||
|
<input id="nunchucks" type="checkbox" name="weapons" value="nunchucks">
|
||||||
|
<label for="nunchucks">Nunchucks</label><br>
|
||||||
|
<input id="sai" type="checkbox" name="weapons" value="sai">
|
||||||
|
<label for="sai">Sai Set</label><br>
|
||||||
|
<input id="sword" type="checkbox" name="weapons" value="sword">
|
||||||
|
<label for="sword">Sword</label>
|
||||||
|
</fieldset>
|
||||||
|
<br>
|
||||||
|
<input type="submit" name="submit" value="Submit">
|
||||||
|
</form><br>
|
||||||
|
</section>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,85 @@
|
|||||||
|
---
|
||||||
|
id: 587d7790367417b2b2512ab1
|
||||||
|
title: Use tabindex to Specify the Order of Keyboard Focus for Several Elements
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: استخدم tabindex لتحديد ترتيب التركيز على لوحة المفاتيح للعديد من العناصر
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> <code>tabindex</code> السمة <code>tabindex</code> أيضًا ترتيب علامات التبويب الدقيق للعناصر. يتحقق ذلك عندما يتم تعيين قيمة السمة إلى عدد موجب من 1 أو أعلى. سيؤدي تعيين tabindex = "1" إلى تركيز لوحة المفاتيح على هذا العنصر أولاً. ثم يمر عبر تسلسل قيم <code>tabindex</code> المحددة (2 ، 3 ، وما إلى ذلك) ، قبل الانتقال إلى <code>tabindex="0"</code> الافتراضية و <code>tabindex="0"</code> . من المهم ملاحظة أنه عند تعيين ترتيب علامة التبويب بهذه الطريقة ، فإنه يتجاوز الترتيب الافتراضي (الذي يستخدم مصدر HTML). قد يؤدي ذلك إلى إرباك المستخدمين الذين يتوقعون بدء التنقل من أعلى الصفحة. قد تكون هذه التقنية ضرورية في بعض الظروف ، ولكن فيما يتعلق بإمكانية الوصول ، يجب توخي الحذر قبل تطبيقها. إليك مثال على ذلك: <code><div tabindex="1">I get keyboard focus, and I get it first!</div></code> <code><div tabindex="2">I get keyboard focus, and I get it second!</div></code> </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> يحتوي "كامبر كات" على حقل بحث في صفحة "اقتباسات ملهمة" التي ينوي وضعها في الزاوية اليمنى العليا باستخدام CSS. يريد <code>input</code> البحث وإرسال عناصر تحكم نموذج <code>input</code> ليكون أول عنصرين في ترتيب الجدولة. إضافة سمة <code>tabindex</code> مضبوطة على "1" إلى <code>input</code> البحث ، <code>tabindex</code> مضبوطة على "2" إلى <code>input</code> . </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تضيف الكود الخاص بك سمة <code>tabindex</code> إلى علامة <code>input</code> البحث.
|
||||||
|
testString: 'assert($("#search").attr("tabindex"), "Your code should add a <code>tabindex</code> attribute to the search <code>input</code> tag.");'
|
||||||
|
- text: يجب أن تضيف الكود الخاص بك سمة <code>tabindex</code> إلى علامة <code>input</code> <code>tabindex</code> .
|
||||||
|
testString: 'assert($("#submit").attr("tabindex"), "Your code should add a <code>tabindex</code> attribute to the submit <code>input</code> tag.");'
|
||||||
|
- text: يجب أن تحدد <code>tabindex</code> سمة <code>tabindex</code> في علامة <code>input</code> البحث إلى قيمة 1.
|
||||||
|
testString: 'assert($("#search").attr("tabindex") == "1", "Your code should set the <code>tabindex</code> attribute on the search <code>input</code> tag to a value of 1.");'
|
||||||
|
- text: يجب أن تحدد <code>tabindex</code> سمة <code>tabindex</code> على علامة <code>input</code> <code>tabindex</code> إلى قيمة 2.
|
||||||
|
testString: 'assert($("#submit").attr("tabindex") == "2", "Your code should set the <code>tabindex</code> attribute on the submit <code>input</code> tag to a value of 2.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Even Deeper Thoughts with Master Camper Cat</h1>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Home</a></li>
|
||||||
|
<li><a href="">Blog</a></li>
|
||||||
|
<li><a href="">Training</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<form>
|
||||||
|
<label for="search">Search:</label>
|
||||||
|
|
||||||
|
|
||||||
|
<input type="search" name="search" id="search">
|
||||||
|
<input type="submit" name="submit" value="Submit" id="submit">
|
||||||
|
|
||||||
|
|
||||||
|
</form>
|
||||||
|
<h2>Inspirational Quotes</h2>
|
||||||
|
<blockquote>
|
||||||
|
<p>“There's no Theory of Evolution, just a list of creatures I've allowed to live.”<br>
|
||||||
|
- Chuck Norris</p>
|
||||||
|
</blockquote>
|
||||||
|
<blockquote>
|
||||||
|
<p>“Wise men say forgiveness is divine, but never pay full price for late pizza.”<br>
|
||||||
|
- TMNT</p>
|
||||||
|
</blockquote>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,71 @@
|
|||||||
|
---
|
||||||
|
id: 587d774e367417b2b2512aa0
|
||||||
|
title: Wrap Content in the article Element
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: التفاف المحتوى في المادة عنصر
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> <code>article</code> عبارة عن عنصر آخر من عناصر HTML5 الجديدة التي تضيف المعنى الدلالي لترميزك. <code>Article</code> هي عنصر تقسيمي ، وتُستخدم لفك محتوى مستقل ومكتوب ذاتيًا. تعمل العلامة جيدًا مع إدخالات المدونات أو مشاركات المنتدى أو المقالات الإخبارية. عادةً ما يكون تحديد ما إذا كان المحتوى قائمًا بذاته أم لا ، ولكن هناك بعض الاختبارات البسيطة التي يمكنك استخدامها. اسأل نفسك ما إذا كنت قد أزلت كل السياق المحيط ، فهل سيظل هذا المحتوى منطقيًا؟ وبالمثل بالنسبة للنص ، هل سيتم تعليق المحتوى إذا كان في خلاصة RSS؟ تذكر أن الأشخاص الذين يستخدمون تقنيات مساعدة يعتمدون على ترميز منظم ، ذي معنى لغوي لفهم عملك بشكل أفضل. <strong>ملاحظة حول <code>section</code> <code>div</code></strong> <br> عنصر <code>section</code> جديد أيضًا مع HTML5 ، وله معنى دلالي مختلف قليلاً عن <code>article</code> . <code>article</code> للمحتوى المستقل ، <code>section</code> لتجميع المحتوى ذي الصلة الموضوعية. يمكن استخدامها داخل بعضها البعض ، حسب الحاجة. على سبيل المثال ، إذا كان الكتاب هو <code>article</code> ، فكل فصل هو <code>section</code> . عند عدم وجود علاقة بين مجموعات المحتوى ، استخدم <code>div</code> . <blockquote style=";text-align:right;direction:rtl"> <div> - محتوى المجموعات <br> <section> - مجموعات ذات صلة بالمحتوى <br> <article> - مجموعات محتوى مستقل بذاته <br></blockquote></section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> استخدم Camper Cat علامات <code>article</code> لتغليف المشاركات في صفحة مدونته ، ولكنه نسي استخدامها في الجزء العلوي منها. غيّر علامة <code>div</code> لاستخدام علامة <code>article</code> بدلاً من ذلك. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تحتوي شفرتك على ثلاث علامات <code>article</code> .
|
||||||
|
testString: 'assert($("article").length == 3, "Your code should have three <code>article</code> tags.");'
|
||||||
|
- text: يجب ألا تحتوي شفرتك على أي علامات <code>div</code> .
|
||||||
|
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
<main>
|
||||||
|
<div>
|
||||||
|
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||||
|
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img src="samuraiSwords.jpeg" alt="">
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||||
|
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<img src="samuraiSwords.jpeg" alt="">
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||||
|
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,99 @@
|
|||||||
|
---
|
||||||
|
id: 587d778b367417b2b2512aa7
|
||||||
|
title: Wrap Radio Buttons in a fieldset Element for Better Accessibility
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: التفاف أزرار الراديو في fieldset عنصر من أجل سهولة الوصول
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> يغطي موضوع النموذج التالي إمكانية الوصول إلى أزرار الاختيار. يتم منح كل خيار على <code>label</code> مع <code>for</code> سمة ربط إلى <code>id</code> من البند المقابل كما غطت في التحدي الماضي. نظرًا لأن الأزرار اللاسلكية غالبًا ما تأتي في مجموعة حيث يجب على المستخدم اختيار واحد ، فهناك طريقة لعرض الخيارات بشكل دلالي وهي جزء من مجموعة. و <code>fieldset</code> العلامة يحيط تجمع بأكمله من أزرار لتحقيق ذلك. وغالبا ما يستخدم <code>legend</code> كلمة دلالية لتقديم وصف للتجمع، وهو يقرأ من قبل القراء الشاشة لكل خيار في <code>fieldset</code> العنصر. لا تعتبر <code>fieldset</code> وعلامة وسيلة <code>legend</code> ضرورية عندما تكون الاختيارات لا تحتاج إلى شرح ، مثل اختيار النوع. باستخدام <code>label</code> مع <code>for</code> سمة لكل زر الراديو غير كافية. إليك مثال على ذلك: <blockquote style=";text-align:right;direction:rtl"> <form> <br> <مجموعة حقول> <br> <legend> اختر أحد العناصر الثلاثة التالية: </ legend> <br> <input id = "one" type = "radio" name = "items" value = "one"> <br> <label for = "one"> الاختيار الأول </ label> <br> <br> <input id = "two" type = "radio" name = "items" value = "two"> <br> <label for = "two"> الاختيار الثاني </ label> <br> <br> <input id = "three" type = "radio" name = "items" value = "three"> <br> <label for = "three"> الاختيار الثالث </ label> <br> </ مجموعة حقول> <br> </ form> <br></blockquote></section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> يريد Camper Cat معلومات حول مستوى النينجا من مستخدميه عند الاشتراك في قائمة البريد الإلكتروني الخاصة به. وأضاف انه مجموعة من أزرار الراديو، وتعلمت من الدرس الأخير جهدنا لاستخدام علامات التسمية مع <code>for</code> سمات كل خيار. الذهاب القطة قطة! ومع ذلك ، لا يزال رمزه بحاجة إلى بعض المساعدة. قم بتغيير علامة <code>div</code> المحيطة بأزرار <code>fieldset</code> علامة نطاق المجال ، وقم بتغيير علامة <code>p</code> بداخله إلى وسيلة <code>legend</code> . </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تحتوي شفرتك على علامة نطاق <code>fieldset</code> حول مجموعة أزرار التحديد.
|
||||||
|
testString: 'assert($("fieldset").length == 1, "Your code should have a <code>fieldset</code> tag around the radio button set.");'
|
||||||
|
- text: تأكد لديك <code>fieldset</code> عنصر له علامة إغلاق.
|
||||||
|
testString: 'assert(code.match(/<\/fieldset>/g) && code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length, "Make sure your <code>fieldset</code> element has a closing tag.");'
|
||||||
|
- text: يجب أن تحتوي الشفرة على علامة <code>legend</code> حول النص تسأل عن مستوى النينجا المستخدم.
|
||||||
|
testString: 'assert($("legend").length == 1, "Your code should have a <code>legend</code> tag around the text asking what level ninja a user is.");'
|
||||||
|
- text: يجب ألا تحتوي شفرتك على أي علامات <code>div</code> .
|
||||||
|
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
|
||||||
|
- text: يجب ألا تحتوي شفرتك على علامة <code>p</code> حول النص تسأل عن مستوى النينجا المستخدم.
|
||||||
|
testString: 'assert($("p").length == 4, "Your code should no longer have a <code>p</code> tag around the text asking what level ninja a user is.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<form>
|
||||||
|
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||||
|
<label for="email">Email:</label>
|
||||||
|
<input type="text" id="email" name="email">
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Add your code below this line -->
|
||||||
|
<div>
|
||||||
|
<p>What level ninja are you?</p>
|
||||||
|
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||||
|
<label for="newbie">Newbie Kitten</label><br>
|
||||||
|
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||||
|
<label for="intermediate">Developing Student</label><br>
|
||||||
|
<input id="master" type="radio" name="levels" value="master">
|
||||||
|
<label for="master">Master</label>
|
||||||
|
</div>
|
||||||
|
<!-- Add your code above this line -->
|
||||||
|
|
||||||
|
|
||||||
|
<input type="submit" name="submit" value="Submit">
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
<article>
|
||||||
|
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||||
|
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||||
|
</article>
|
||||||
|
<img src="samuraiSwords.jpeg" alt="">
|
||||||
|
<article>
|
||||||
|
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||||
|
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||||
|
</article>
|
||||||
|
<img src="samuraiSwords.jpeg" alt="">
|
||||||
|
<article>
|
||||||
|
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||||
|
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||||
|
</article>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,94 @@
|
|||||||
|
---
|
||||||
|
id: 587d781b367417b2b2512abe
|
||||||
|
title: Add a box-shadow to a Card-like Element
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: أضف box box إلى عنصر يشبه Card
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> تطبق خاصية <code>box-shadow</code> أو أكثر على عنصر. تأخذ الخاصية <code>box-shadow</code> قيمًا <code>offset-x</code> (كم تبعد مسافة دفع الظل أفقيًا عن العنصر) ، <code>offset-y</code> (أي بعد الآن تضغط الظل بشكل عمودي من العنصر) ، <code>blur-radius</code> <code>spread-radius</code> ولون القيمة ، بهذا الترتيب. تعد قيم <code>spread-radius</code> <code>blur-radius</code> و <code>blur-radius</code> <code>spread-radius</code> اختيارية. في ما يلي مثال على CSS لإنشاء ظلال متعددة مع بعض الضبابية ، باللون الأسود الغامق في الغالب: <blockquote style=";text-align:right;direction:rtl"> box-shadow: 0 10px 20px rgba (0،0،0،0.19)، 0 6px 6px rgba (0،0،0،0.23)؛ </blockquote></section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> يحتوي العنصر الآن على معرف <code>thumbnail</code> . باستخدام هذا المحدد ، استخدم القيم CSS الموجودة أعلاه لوضع <code>box-shadow</code> على البطاقة. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تضيف الشفرة خاصية <code>box-shadow</code> لمعرف <code>thumbnail</code> .
|
||||||
|
testString: 'assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g), "Your code should add a <code>box-shadow</code> property for the <code>thumbnail</code> id.");'
|
||||||
|
- text: يجب عليك استخدام CSS المعطى لقيمة <code>box-shadow</code> .
|
||||||
|
testString: 'assert(code.match(/box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\),\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi), "You should use the given CSS for the <code>box-shadow</code> value.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgba(45, 45, 45, 0.1);
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 27px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard" id="thumbnail">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Alphabet</h4>
|
||||||
|
<hr>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,93 @@
|
|||||||
|
---
|
||||||
|
id: 587d781b367417b2b2512abc
|
||||||
|
title: Adjust the background-color Property of Text
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: ضبط لون الخلفية خاصية النص
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> بدلاً من ضبط الخلفية العامة أو لون النص لجعل المقدمة قابلة للقراءة بسهولة ، يمكنك إضافة <code>background-color</code> لعنصر يحمل النص الذي تريد التأكيد عليه. يستخدم هذا التحدي <code>rgba()</code> بدلاً من رموز <code>hex</code> أو <code>rgb()</code> العادي <code>rgb()</code> . <blockquote style=";text-align:right;direction:rtl"> rgba لتقف على: <br> ص = أحمر <br> g = أخضر <br> ب = أزرق <br> a = alpha / level of opacity </blockquote> يمكن أن تتراوح قيم RGB من 0 إلى 255. يمكن أن تتراوح قيمة alpha من 1 ، وهو معتم تمامًا أو بلون خالص ، إلى 0 ، وهو شفاف تمامًا أو واضح. <code>rgba()</code> رائع لاستخدامه في هذه الحالة ، لأنه يسمح لك بضبط العتامة. هذا يعني أنك لست مضطرًا لحجب الخلفية تمامًا. ستستخدم <code>background-color: rgba(45, 45, 45, 0.1)</code> لهذا التحدي. ينتج لون رمادي غامق يكاد يكون شفافًا نظرًا لقيمة عتامة منخفضة تبلغ 0.1. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> لجعل النص أكثر وضوحًا ، قم بضبط <code>background-color</code> لعنصر <code>h4</code> إلى قيمة <code>rgba()</code> . بالنسبة إلى <code>h4</code> أيضًا ، أزل خاصية <code>height</code> وأضف <code>padding</code> قدرها 10 بكسل. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: 'يجب أن تضيف التعليمات البرمجية الخاصة بك خاصية <code>background-color</code> إلى عنصر <code>h4</code> لتعيين <code>rgba(45, 45, 45, 0.1)</code> .'
|
||||||
|
testString: 'assert(code.match(/background-color:\s*?rgba\(\s*?45\s*?,\s*?45\s*?,\s*?45\s*?,\s*?0?\.1\s*?\)/gi), "Your code should add a <code>background-color</code> property to the <code>h4</code> element set to <code>rgba(45, 45, 45, 0.1)</code>.");'
|
||||||
|
- text: يجب أن تضيف التعليمات البرمجية الخاصة بك خاصية <code>padding</code> إلى عنصر <code>h4</code> وتعيينها إلى 10 بكسل.
|
||||||
|
testString: 'assert($("h4").css("padding-top") == "10px" && $("h4").css("padding-right") == "10px" && $("h4").css("padding-bottom") == "10px" && $("h4").css("padding-left") == "10px", "Your code should add a <code>padding</code> property to the <code>h4</code> element and set it to 10 pixels.");'
|
||||||
|
- text: يجب إزالة خاصية <code>height</code> على عنصر <code>h4</code> .
|
||||||
|
testString: 'assert(!($("h4").css("height") == "25px"), "The <code>height</code> property on the <code>h4</code> element should be removed.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
height: 25px;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Alphabet</h4>
|
||||||
|
<hr>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,92 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a4367417b2b2512ad3
|
||||||
|
title: Adjust the Color of Various Elements to Complementary Colors
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: اضبط لون العناصر المختلفة على الألوان التكميلية
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> أظهر اختبار الألوان التكميلية أن الألوان المعاكسة على عجلة الألوان يمكن أن تجعل بعضها تبدو أكثر حيوية عندما توضع جنباً إلى جنب. ومع ذلك ، فإن التناقض البصري القوي يمكن أن يكون مزعجًا إذا تم استخدامه بشكل مفرط على موقع ويب ، ويمكن أن يجعل النص أصعب في بعض الأحيان للقراءة إذا وضع على خلفية ملونة مكملة. من الناحية العملية ، عادةً ما يكون أحد الألوان هو المسيطر ويتم استخدام المكمل لإضفاء الاهتمام البصري على محتوى معين على الصفحة. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> ستستخدم هذه الصفحة ظلًا من اللون <code>#09A7A1</code> ( <code>#09A7A1</code> ) <code>#09A7A1</code> المهيمن ، ويكمل اللون البرتقالي ( <code>#FF790E</code> ) لتسليط الضوء على أزرار التسجيل. تغيير <code>background-color</code> كل من <code>header</code> <code>footer</code> من الأسود إلى لون مخضر. ثم قم بتغيير <code>color</code> نص <code>h2</code> إلى البط البري كذلك. أخيرا ، قم بتغيير <code>background-color</code> <code>button</code> إلى اللون البرتقالي. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: 'يجب أن يكون لعنصر <code>header</code> <code>background-color</code> # 09A7A1.'
|
||||||
|
testString: 'assert($("header").css("background-color") == "rgb(9, 167, 161)", "The <code>header</code> element should have a <code>background-color</code> of #09A7A1.");'
|
||||||
|
- text: 'يجب أن يكون لعنصر <code>footer</code> <code>background-color</code> # 09A7A1.'
|
||||||
|
testString: 'assert($("footer").css("background-color") == "rgb(9, 167, 161)", "The <code>footer</code> element should have a <code>background-color</code> of #09A7A1.");'
|
||||||
|
- text: 'يجب أن يكون لعنصر <code>h2</code> <code>color</code> # 09A7A1.'
|
||||||
|
testString: 'assert($("h2").css("color") == "rgb(9, 167, 161)", "The <code>h2</code> element should have a <code>color</code> of #09A7A1.");'
|
||||||
|
- text: 'يجب أن يكون عنصر <code>button</code> <code>background-color</code> # FF790E.'
|
||||||
|
testString: 'assert($("button").css("background-color") == "rgb(255, 121, 14)", "The <code>button</code> element should have a <code>background-color</code> of #FF790E.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
padding: 0.25em;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
padding: 0.5em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<header>
|
||||||
|
<h1>Cooking with FCC!</h1>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<article>
|
||||||
|
<h2>Machine Learning in the Kitchen</h2>
|
||||||
|
<p>Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like <code>fetch Pringles</code>.</p>
|
||||||
|
<button>Sign Up</button>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<h2>Bisection Vegetable Chopping</h2>
|
||||||
|
<p>This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.</p>
|
||||||
|
<button>Sign Up</button>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
<br>
|
||||||
|
<footer>© 2018 FCC Kitchen</footer>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,83 @@
|
|||||||
|
---
|
||||||
|
id: 587d7791367417b2b2512ab5
|
||||||
|
title: Adjust the Height of an Element Using the height Property
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: ضبط ارتفاع عنصر باستخدام خاصية الارتفاع
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> يمكنك تحديد ارتفاع عنصر باستخدام خاصية <code>height</code> في CSS ، على غرار خاصية <code>width</code> . في ما يلي مثال يغير ارتفاع الصورة إلى 20 بكسل: <blockquote style=";text-align:right;direction:rtl"> img { <br> الارتفاع: 20 بكسل ؛ <br> } </blockquote></section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> إضافة خاصية <code>height</code> إلى علامة <code>h4</code> وتعيينها إلى 25 بكسل. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب تغيير التعليمات البرمجية الخاصة بك الخاصية <code>height</code> <code>h4</code> إلى قيمة 25 بكسل.
|
||||||
|
testString: 'assert($("h4").css("height") == "25px", "Your code should change the <code>h4</code> <code>height</code> property to a value of 25 pixels.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
margin-right: 20px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
---
|
||||||
|
id: 587d781d367417b2b2512ac8
|
||||||
|
title: Adjust the Hover State of an Anchor Tag
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: ضبط حالة التحويم لعلامة الارتساء
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> سوف يلمس هذا التحدي على استخدام الطبقات الزائفة. الفئة الزائفة هي كلمة رئيسية يمكن إضافتها إلى المحددات ، من أجل تحديد حالة معينة للعنصر. على سبيل المثال، تحت غطاء من علامة مرساة يمكن تغيير لدولة تحوم لها باستخدام <code>:hover</code> فئة مزيفة محدد. إليك CSS لتغيير <code>color</code> علامة الربط إلى اللون الأحمر أثناء حالة التمرير الخاصة بها: <blockquote style=";text-align:right;direction:rtl"> a: hover { <br> لون احمر؛ <br> } </blockquote></section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> محرر التعليمات البرمجية لديها قاعدة CSS أسلوب كل <code>a</code> علامات سوداء. إضافة قاعدة بحيث عند مرور المستخدم على <code>a</code> العلامة، و <code>color</code> الأزرق. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: 'يجب أن يظل <code>color</code> علامة الربط أسودًا ، مع إضافة قواعد CSS فقط لحالة <code>:hover</code> .'
|
||||||
|
testString: 'assert($("a").css("color") == "rgb(0, 0, 0)", "The anchor tag <code>color</code> should remain black, only add CSS rules for the <code>:hover</code> state.");'
|
||||||
|
- text: يجب أن يكون لعلامة الارتساء <code>color</code> أزرق عند التمرير.
|
||||||
|
testString: 'assert(code.match(/a:hover\s*?{\s*?color:\s*?blue;\s*?}/gi), "The anchor tag should have a <code>color</code> of blue on hover.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
a {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<a href="http://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,85 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a4367417b2b2512ad4
|
||||||
|
title: Adjust the Hue of a Color
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: اضبط هوى اللون
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> تتميز الألوان بالعديد من الخصائص بما في ذلك الصبغة والتشبع والخفة. قدم CSS3 الخاصية <code>hsl()</code> كطريقة بديلة لاختيار لون عن طريق تحديد هذه الخصائص بشكل مباشر. <b>هوى</b> هو ما يعتقده الناس بشكل عام بـ "اللون". إذا قمت بتصوير مجموعة متنوعة من الألوان تبدأ باللون الأحمر على اليسار ، تتحرك من خلال اللون الأخضر في الوسط ، والأزرق على اليمين ، حيث أن اللون يتناسب مع لون هذا الخط. في <code>hsl()</code> ، يستخدم hue مفهوم عجلة الألوان بدلاً من الطيف ، حيث يتم إعطاء زاوية اللون على الدائرة كقيمة بين 0 و 360. <b>التشبع</b> هو مقدار اللون الرمادي في اللون. لا يوجد لون رمادي كامل في أي لون مشبع ، ويكون اللون المشبع إلى حد ما رماديًا تقريبًا. يتم إعطاؤه كنسبة مئوية مع 100 ٪ مشبعة بالكامل. <b>الخفة</b> هي كمية اللون الأبيض أو الأسود في اللون. يتم إعطاء نسبة تتراوح من 0٪ (أسود) إلى 100٪ (أبيض) ، حيث 50٪ هو اللون الطبيعي. في ما يلي بعض الأمثلة على استخدام <code>hsl()</code> مع ألوان إضاءة مشبعة تمامًا ومشبعة تمامًا: <table class="table table-striped" style=";text-align:right;direction:rtl"><thead><tr><th> اللون </th><th> HSL </th></tr></thead><tbody><tr><td> أحمر </td><td> hsl (0 ، 100٪ ، 50٪) </td></tr><tr><td> الأصفر </td><td> hsl (60 ، 100٪ ، 50٪) </td></tr><tr><td> أخضر </td><td> hsl (120 ، 100٪ ، 50٪) </td></tr><tr><td> ازرق سماوي </td><td> hsl (180 ، 100٪ ، 50٪) </td></tr><tr><td> أزرق </td><td> hsl (240 ، 100٪ ، 50٪) </td></tr><tr><td> أرجواني </td><td> hsl (300 ، 100٪ ، 50٪) </td></tr></tbody></table></section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> قم بتغيير <code>background-color</code> كل عنصر <code>div</code> استنادًا إلى أسماء <code>cyan</code> ( <code>green</code> أو <code>cyan</code> أو <code>blue</code> ) باستخدام <code>hsl()</code> . كل ثلاثة يجب أن يكون التشبع الكامل والخفة العادية. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تستخدم التعليمات البرمجية الخاصة بك الخاصية <code>hsl()</code> اللون الأخضر.
|
||||||
|
testString: 'assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi), "Your code should use the <code>hsl()</code> property to declare the color green.");'
|
||||||
|
- text: يجب أن تستخدم التعليمات البرمجية الخاصة بك الخاصية <code>hsl()</code> لون السماوي.
|
||||||
|
testString: 'assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi), "Your code should use the <code>hsl()</code> property to declare the color cyan.");'
|
||||||
|
- text: يجب أن تستخدم التعليمات البرمجية الخاصة بك الخاصية <code>hsl()</code> اللون الأزرق.
|
||||||
|
testString: 'assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi), "Your code should use the <code>hsl()</code> property to declare the color blue.");'
|
||||||
|
- text: يجب أن يكون عنصر <code>div</code> <code>green</code> <code>background-color</code> خضراء.
|
||||||
|
testString: 'assert($(".green").css("background-color") == "rgb(0, 255, 0)", "The <code>div</code> element with class <code>green</code> should have a <code>background-color</code> of green.");'
|
||||||
|
- text: و <code>div</code> عنصر مع الطبقة <code>cyan</code> ينبغي أن يكون <code>background-color</code> من السماوي.
|
||||||
|
testString: 'assert($(".cyan").css("background-color") == "rgb(0, 255, 255)", "The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.");'
|
||||||
|
- text: و <code>div</code> عنصر مع الطبقة <code>blue</code> يجب أن يكون <code>background-color</code> من اللون الأزرق.
|
||||||
|
testString: 'assert($(".blue").css("background-color") == "rgb(0, 0, 255)", "The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.green {
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cyan {
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue {
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
display: inline-block;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="cyan"></div>
|
||||||
|
<div class="blue"></div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,89 @@
|
|||||||
|
---
|
||||||
|
id: 587d781b367417b2b2512abd
|
||||||
|
title: Adjust the Size of a Header Versus a Paragraph Tag
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: ضبط حجم رأس مقابل علامة فقرة
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> يجب أن يكون حجم خط علامات الرأس ( <code>h1</code> إلى <code>h6</code> ) أكبر من حجم خط علامات الفقرة. هذا يسهل على المستخدم فهم التصميم والشكل أهمية كل شيء على الصفحة. يمكنك استخدام خاصية <code>font-size</code> لضبط حجم النص في عنصر. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> لجعل العنوان أكبر بشكل ملحوظ من الفقرة ، قم بتغيير <code>font-size</code> علامة <code>h4</code> إلى 27 بكسل. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تضيف التعليمات البرمجية الخاصة بك خاصية <code>font-size</code> إلى عنصر <code>h4</code> لتعيين 27 بكسل.
|
||||||
|
testString: 'assert($("h4").css("font-size") == "27px", "Your code should add a <code>font-size</code> property to the <code>h4</code> element set to 27 pixels.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgba(45, 45, 45, 0.1);
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Alphabet</h4>
|
||||||
|
<hr>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,89 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a4367417b2b2512ad5
|
||||||
|
title: Adjust the Tone of a Color
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: اضبط نغمة اللون
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> يجعل خيار <code>hsl()</code> في CSS أيضًا من السهل ضبط نغمة اللون. خلط الأبيض مع لون نقي يخلق صبغة من هذا اللون ، وإضافة الأسود سيجعل الظل. بدلا من ذلك ، يتم إنتاج نغمة عن طريق إضافة اللون الرمادي أو كل من التلوين والتظليل. أذكر أن 's' و 'l' من <code>hsl()</code> تقف للتشبع والخفة ، على التوالي. يتغير النسبة المئوية للتشبع من مقدار الرمادية ، وتحدد نسبة الإضاءة مقدار اللون الأبيض أو الأسود في اللون. يكون ذلك مفيدًا عندما يكون لديك لون أساسي يعجبك ، ولكن تحتاج إلى أشكال مختلفة منه. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> يقوم حاليًا شريط التنقل الموجود على هذا الموقع برث <code>background-color</code> الخاص به من عنصر <code>header</code> . بدءًا من هذا اللون كقاعدة ، أضف <code>background-color</code> لعنصر <code>nav</code> بحيث يستخدم نفس اللون السماوي ، ولكنه يحتوي على 80٪ من قيم التشبع و 25٪ من الخفة لتغيير النغمة والظل. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن يحتوي عنصر <code>nav</code> على <code>background-color</code> لهجة السماوي المعدلة باستخدام الخاصية <code>hsl()</code> .
|
||||||
|
testString: 'assert(code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi), "The <code>nav</code> element should have a <code>background-color</code> of the adjusted cyan tone using the <code>hsl()</code> property.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
header {
|
||||||
|
background-color: hsl(180, 90%, 35%);
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-indent: 10px;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul {
|
||||||
|
margin: 0px;
|
||||||
|
padding: 5px 0px 5px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav li {
|
||||||
|
display: inline;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<h1>Cooking with FCC!</h1>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Home</a></li>
|
||||||
|
<li><a href="#">Classes</a></li>
|
||||||
|
<li><a href="#">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,82 @@
|
|||||||
|
---
|
||||||
|
id: 587d7791367417b2b2512ab4
|
||||||
|
title: Adjust the Width of an Element Using the width Property
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: ضبط عرض عنصر باستخدام خاصية العرض
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> يمكنك تحديد عرض عنصر باستخدام خاصية <code>width</code> في CSS. يمكن إعطاء القيم في وحدات الطول النسبي (مثل em) ، أو وحدات الطول المطلقة (مثل px) ، أو كنسبة مئوية من عنصر الأصل الذي يحتوي عليه. في ما يلي مثال يغير عرض الصورة إلى 220 بكسل: <blockquote style=";text-align:right;direction:rtl"> img { <br> العرض: 220 بكسل ؛ <br> } </blockquote></section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> إضافة خاصية <code>width</code> للبطاقة بأكملها وتعيينها إلى قيمة مطلقة تبلغ 245 بكسل. استخدم فئة <code>fullCard</code> لتحديد العنصر. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب تغيير التعليمات البرمجية الخاصة بك الخاصية <code>width</code> للبطاقة إلى 245 بكسل باستخدام محدد فئة <code>fullCard</code> .
|
||||||
|
testString: 'assert(code.match(/.fullCard\s*{[\s\S][^}]*\n*^\s*width\s*:\s*245px\s*;/gm), "Your code should change the <code>width</code> property of the card to 245 pixels by using the <code>fullCard</code> class selector.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
margin-right: 20px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,100 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a8367417b2b2512ae5
|
||||||
|
title: Animate Elements at Variable Rates
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: عناصر متحركة بمعدلات متغيرة
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> هناك مجموعة متنوعة من الطرق لتغيير معدلات الرسوم المتحركة لعناصر متحركة مشابهة. حتى الآن ، تم تحقيق ذلك من خلال تطبيق خاصية <code>animation-iteration-count</code> <code>@keyframes</code> ووضع قواعد <code>@keyframes</code> . ولتوضيح ذلك ، يتكون الرسم المتحرك على اليمين من "نجمين" يتناقص كل منهما في الحجم والتعتيم عند علامة 20٪ في قاعدة <code>@keyframes</code> ، مما يؤدي إلى إنشاء رسوم متحركة وميض. يمكنك تغيير القاعدة <code>@keyframes</code> لأحد العناصر بحيث <code>@keyframes</code> النجوم بمعدلات مختلفة. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> عدّل معدل الرسوم المتحركة للعنصر الذي يحمل اسم فئة <code>star-1</code> عن طريق تغيير القاعدة <code>@keyframes</code> إلى 50٪. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن <code>@keyframes</code> قاعدة <code>@keyframes</code> <code>star-1</code> 50٪.
|
||||||
|
testString: 'assert(code.match(/twinkle-1\s*?{\s*?50%/g), "The <code>@keyframes</code> rule for the <code>star-1</code> class should be 50%.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.stars {
|
||||||
|
background-color: white;
|
||||||
|
height: 30px;
|
||||||
|
width: 30px;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star-1 {
|
||||||
|
margin-top: 15%;
|
||||||
|
margin-left: 60%;
|
||||||
|
animation-name: twinkle-1;
|
||||||
|
animation-duration: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star-2 {
|
||||||
|
margin-top: 25%;
|
||||||
|
margin-left: 25%;
|
||||||
|
animation-name: twinkle-2;
|
||||||
|
animation-duration: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes twinkle-1 {
|
||||||
|
20% {
|
||||||
|
transform: scale(0.5);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes twinkle-2 {
|
||||||
|
20% {
|
||||||
|
transform: scale(0.5);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#back {
|
||||||
|
position: fixed;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id="back"></div>
|
||||||
|
<div class="star-1 stars"></div>
|
||||||
|
<div class="star-2 stars"></div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,81 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a8367417b2b2512ae3
|
||||||
|
title: Animate Elements Continually Using an Infinite Animation Count
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: تنشيط عناصر باستمرار باستخدام عدد الرسوم المتحركة اللانهائي
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> تغطي التحديات السابقة كيفية استخدام بعض خصائص الحركة وقاعدة <code>@keyframes</code> . خاصية الرسوم المتحركة الأخرى هي <code>animation-iteration-count</code> ، والذي يسمح لك بالتحكم في عدد المرات التي ترغب في تكرارها من خلال الرسوم المتحركة. في ما يلي مثال على ذلك: عدد مرات <code>animation-iteration-count: 3;</code> في هذه الحالة ، ستتوقف الرسوم المتحركة بعد تشغيلها 3 مرات ، ولكن من الممكن جعل الرسم المتحرك يعمل بشكل مستمر عن طريق تعيين هذه القيمة إلى غير محدود. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> للحفاظ على الكرة ترتد على اليمين في حلقة مستمرة ، قم بتغيير خاصية <code>animation-iteration-count</code> إلى بلا حدود. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن يكون لخاصية <code>animation-iteration-count</code> قيمة لانهائية.
|
||||||
|
testString: 'assert($("#ball").css("animation-iteration-count") == "infinite", "The <code>animation-iteration-count</code> property should have a value of infinite.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
|
||||||
|
#ball {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
margin: 50px auto;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(
|
||||||
|
35deg,
|
||||||
|
#ccffff,
|
||||||
|
#ffcccc
|
||||||
|
);
|
||||||
|
animation-name: bounce;
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-iteration-count: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce{
|
||||||
|
0% {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
top: 249px;
|
||||||
|
width: 130px;
|
||||||
|
height: 70px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div id="ball"></div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,105 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a8367417b2b2512ae6
|
||||||
|
title: Animate Multiple Elements at Variable Rates
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: تحريك عناصر متعددة بأسعار متغيرة
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> في التحدي السابق ، قمت بتغيير معدلات الرسوم المتحركة <code>@keyframes</code> عن طريق تغيير قواعد <code>@keyframes</code> الخاصة بهم. يمكنك تحقيق الهدف نفسه عن طريق معالجة <code>animation-duration</code> لعناصر متعددة. في الرسم المتحرك الذي يتم تشغيله في محرر الشفرات ، هناك ثلاثة "نجوم" في السماء تتألق في نفس المعدل في حلقة مستمرة. لجعلها تومض بمعدلات مختلفة ، يمكنك تعيين خاصية <code>animation-duration</code> إلى قيم مختلفة لكل عنصر. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> عيّن <code>animation-duration</code> للعناصر مع الفئات <code>star-1</code> ، و <code>star-2</code> ، و <code>star-3</code> to 1s ، و 0.9s ، و 1.1s ، على التوالي. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تظل خاصية <code>animation-duration</code> للنجمة مع الفئة class <code>star-1</code> على 1s.
|
||||||
|
testString: 'assert($(".star-1").css("animation-duration") == "1s", "The <code>animation-duration</code> property for the star with class <code>star-1</code> should remain at 1s.");'
|
||||||
|
- text: يجب أن تكون خاصية <code>animation-duration</code> للنجمة ذات الفئة <code>star-2</code> 0.9.
|
||||||
|
testString: 'assert($(".star-2").css("animation-duration") == "0.9s", "The <code>animation-duration</code> property for the star with class <code>star-2</code> should be 0.9s.");'
|
||||||
|
- text: يجب أن تكون <code>animation-duration</code> للنجمة مع الفئة class <code>star-3</code> هي 1.1s.
|
||||||
|
testString: 'assert($(".star-3").css("animation-duration") == "1.1s", "The <code>animation-duration</code> property for the star with class <code>star-3</code> should be 1.1s.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.stars {
|
||||||
|
background-color: white;
|
||||||
|
height: 30px;
|
||||||
|
width: 30px;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star-1 {
|
||||||
|
margin-top: 15%;
|
||||||
|
margin-left: 60%;
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-name: twinkle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star-2 {
|
||||||
|
margin-top: 25%;
|
||||||
|
margin-left: 25%;
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-name: twinkle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star-3 {
|
||||||
|
margin-top: 10%;
|
||||||
|
margin-left: 50%;
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-name: twinkle;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes twinkle {
|
||||||
|
20% {
|
||||||
|
transform: scale(0.5);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#back {
|
||||||
|
position: fixed;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id="back"></div>
|
||||||
|
<div class="star-1 stars"></div>
|
||||||
|
<div class="star-2 stars"></div>
|
||||||
|
<div class="star-3 stars"></div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,57 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a3367417b2b2512ad0
|
||||||
|
title: Center an Element Horizontally Using the margin Property
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: توسيط عنصر أفقيًا باستخدام خاصية الهامش
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> أسلوب آخر لتحديد المواقع هو مركز عنصر كتلة أفقيا. إحدى الطرق للقيام بذلك هي تعيين <code>margin</code> الخاص به إلى قيمة تلقائي. هذه الطريقة تعمل للصور أيضا. الصور هي عناصر مضمنة افتراضيًا ، ولكن يمكن تغييرها لحظر العناصر عند تعيين خاصية <code>display</code> للحظر. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> قم <code>div</code> على الصفحة بإضافة خاصية <code>margin</code> بقيمة تلقائية. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن يكون <code>div</code> <code>margin</code> على تلقائي.
|
||||||
|
testString: 'assert(code.match(/margin:\s*?auto;/g), "The <code>div</code> should have a <code>margin</code> set to auto.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div></div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,61 @@
|
|||||||
|
---
|
||||||
|
id: 587d781e367417b2b2512ac9
|
||||||
|
title: Change an Element's Relative Position
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: تغيير موضع نسبي للعنصر
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> تعامل CSS كل عنصر HTML كمربع خاص بها ، والذي يشار إليه عادة باسم <code>CSS Box Model</code> . تبدأ عناصر مستوى الحظر تلقائيًا في سطر جديد (فكّر في العناوين ، والفقرات ، والعناوين الفرعية) ، بينما تجلس العناصر المضمّنة داخل المحتوى المحيط (مثل الصور أو الامتدادات). يُسمى التنسيق الافتراضي للعناصر بهذه الطريقة <code>normal flow</code> للمستند ، ولكن يوفر CSS خاصية الموضع لتجاوزه. عندما يتم تعيين موضع عنصر ما إلى <code>relative</code> ، فإنه يتيح لك تحديد كيفية نقل CSS له <i>بالنسبة</i> إلى موضعه الحالي في التدفق العادي للصفحة. أزواج مع خصائص تعويض CSS من <code>left</code> أو <code>right</code> ، <code>top</code> أو <code>bottom</code> . يوضح ذلك عدد البكسلات أو النسب المئوية أو نظام الإدارة البيئية لنقل العنصر <i>بعيدًا</i> عن موضعه الطبيعي. المثال التالي ينقل الفقرة 10 بكسل من الأسفل: <blockquote style=";text-align:right;direction:rtl"> ص { <br> موقف: قريب <br> أسفل: 10 بكسل ؛ <br> } </blockquote> لا يؤدي تغيير موضع عنصر ما إلى نسبي إلى إزالته من التدفق العادي - حيث لا تزال عناصر أخرى حوله تتصرف كما لو كان هذا العنصر في موضعه الافتراضي. <strong>ملحوظة</strong> <br> يمنحك التموضع الكثير من المرونة والقوة على التخطيط المرئي للصفحة. من الجيد أن نتذكر أنه بغض النظر عن موضع العناصر ، يجب تنظيم ترميز HTML الأساسي وجعله منطقيًا عند القراءة من الأعلى إلى الأسفل. هذه هي الطريقة التي يدخل بها المستخدمون الذين يعانون من إعاقات بصرية (الذين يعتمدون على أجهزة مساعدة مثل قارئات الشاشة) إلى المحتوى الخاص بك. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> غيّر <code>position</code> <code>h2</code> إلى <code>relative</code> ، واستخدم إزاحة CSS لتحريكها بمقدار 15 بكسل بعيدًا عن الجزء <code>top</code> من المكان الذي توجد فيه في التدفق العادي. لاحظ أنه لا يوجد أي تأثير على مواضع عناصر h1 و p المحيطة. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن يكون لعنصر <code>h2</code> خاصية <code>position</code> معيّنة إلى <code>relative</code> .
|
||||||
|
testString: 'assert($("h2").css("position") == "relative", "The <code>h2</code> element should have a <code>position</code> property set to <code>relative</code>.");'
|
||||||
|
- text: يجب أن تستخدم شفرتك تخالف CSS لوضع <code>h2</code> 15px بشكلٍ نسبي بعيدًا عن <code>top</code> المكان الذي توجد فيه عادةً.
|
||||||
|
testString: 'assert($("h2").css("top") == "15px", "Your code should use a CSS offset to relatively position the <code>h2</code> 15px away from the <code>top</code> of where it normally sits.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h2 {
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<body>
|
||||||
|
<h1>On Being Well-Positioned</h1>
|
||||||
|
<h2>Move me!</h2>
|
||||||
|
<p>I still think the h2 is where it normally sits.</p>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,89 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a8367417b2b2512ae7
|
||||||
|
title: Change Animation Timing with Keywords
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: تغيير الرسوم المتحركة التوقيت مع الكلمات الرئيسية
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> في الرسوم المتحركة في CSS ، تتحكم الخاصية <code>animation-timing-function</code> سرعة تغير عنصر متحرك خلال مدة الرسم المتحرك. إذا كانت الرسوم المتحركة عبارة عن سيارة تتحرك من النقطة A إلى النقطة B في وقت معين ( <code>animation-duration</code> ) ، فإن <code>animation-timing-function</code> توضح كيفية تسارع السيارة وتبطئها على مدار محرك الأقراص. هناك عدد من الكلمات الرئيسية المحددة مسبقًا المتاحة للخيارات الشائعة. على سبيل المثال ، القيمة الافتراضية هي <code>ease</code> ، والتي تبدأ بطيئة ، وتسرع في الوسط ، ثم تتباطأ مرة أخرى في النهاية. تتضمن الخيارات الأخرى <code>ease-out</code> ، وهو سريع في البداية ثم يبطئ ، <code>ease-in</code> ، وهو بطيء في البداية ، ثم يسرع في النهاية ، أو <code>linear</code> ، والذي يطبق سرعة حركة ثابتة طوال الوقت. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> بالنسبة إلى العناصر ذات المعرف <code>ball1</code> و <code>ball2</code> ، أضف خاصية كل من <code>animation-timing-function</code> ، واضبط <code>#ball1</code> على <code>linear</code> ، و <code>#ball2</code> <code>ease-out</code> . لاحظ الفرق بين كيفية تحرك العناصر أثناء الرسم المتحرك ولكن معًا ، لأنهم يشتركون في نفس <code>animation-duration</code> تبلغ ثانيتين. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تكون قيمة خاصية <code>animation-timing-function</code> العنصر مع معرف <code>ball1</code> خطية.
|
||||||
|
testString: 'assert($("#ball1").css("animation-timing-function") == "linear", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be linear.");'
|
||||||
|
- text: يجب أن تكون قيمة خاصية <code>animation-timing-function</code> للعنصر مع معرف <code>ball2</code> سهلة التخفيف.
|
||||||
|
testString: 'assert($("#ball2").css("animation-timing-function") == "ease-out", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should be ease-out.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
|
||||||
|
.balls {
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(
|
||||||
|
35deg,
|
||||||
|
#ccffff,
|
||||||
|
#ffcccc
|
||||||
|
);
|
||||||
|
position: fixed;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
margin-top: 50px;
|
||||||
|
animation-name: bounce;
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
#ball1 {
|
||||||
|
left:27%;
|
||||||
|
|
||||||
|
}
|
||||||
|
#ball2 {
|
||||||
|
left:56%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce {
|
||||||
|
0% {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: 249px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="balls" id="ball1"></div>
|
||||||
|
<div class="balls" id="ball2"></div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,71 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a3367417b2b2512acf
|
||||||
|
title: Change the Position of Overlapping Elements with the z-index Property
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: تغيير موضع تراكب العناصر مع خاصية فهرس z
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> عندما يتم وضع العناصر للتراكب ، سيظهر العنصر الذي سيأتي لاحقًا في ترميز HTML ، بشكل افتراضي ، في أعلى العناصر الأخرى. ومع ذلك ، يمكن أن تحدد خاصية <code>z-index</code> ترتيب كيفية تكديس العناصر فوق بعضها البعض. يجب أن يكون عددًا صحيحًا (أي عددًا كاملاً وليس عشريًا) ، والقيم الأعلى لخاصية <code>z-index</code> لعنصر ما ، تحركه أعلى في المكدس من تلك ذات القيم الأقل. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> إضافة خاصية <code>z-index</code> إلى العنصر مع اسم الفئة <code>first</code> (المستطيل الأحمر) وتعيينه إلى قيمة 2 بحيث يغطي العنصر الآخر (المستطيل الأزرق). </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن يحتوي العنصر ذو الصنف <code>first</code> على قيمة <code>z-index</code> 2.
|
||||||
|
testString: 'assert($(".first").css("z-index") == "2", "The element with class <code>first</code> should have a <code>z-index</code> value of 2.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
width: 60%;
|
||||||
|
height: 200px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first {
|
||||||
|
background-color: red;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
}
|
||||||
|
.second {
|
||||||
|
background-color: blue;
|
||||||
|
position: absolute;
|
||||||
|
left: 40px;
|
||||||
|
top: 50px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="first"></div>
|
||||||
|
<div class="second"></div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,61 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a5367417b2b2512ad6
|
||||||
|
title: Create a Gradual CSS Linear Gradient
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: إنشاء تدرج خطي متدرج CSS
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> لا يقتصر تطبيق لون على عناصر HTML على لون واحد مسطح. يوفر CSS القدرة على استخدام انتقالات اللون ، والمعروفة باسم التدرجات ، على العناصر. يتم الوصول إلى هذا من خلال الدالة <code>linear-gradient()</code> لخاصية <code>background</code> . هنا الصيغة العامة: <code>background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);</code> تحدد الوسيطة الأولى الاتجاه الذي يبدأ منه انتقال اللون - يمكن تحديده كدرجة ، حيث يجعل 90deg تدرجًا رأسيًا ويصبح 45deg مائلًا مثل الخط المائل العكسي (Backslash). الوسيطات التالية تحدد ترتيب الألوان المستخدمة في التدرج. مثال: <code>background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));</code> </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> استخدم <code>linear-gradient()</code> <code>background</code> عنصر <code>div</code> ، <code>#CCFFFF</code> من اتجاه 35 درجة لتغيير اللون من <code>#CCFFFF</code> إلى <code>#FFCCCC</code> . <strong>ملحوظة</strong> <br> بينما هناك طرق أخرى لتحديد قيمة لون ، مثل <code>rgb()</code> أو <code>hsl()</code> ، استخدم قيم سداسية لهذا التحدي. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن يحتوي عنصر <code>div</code> على <code>background</code> <code>linear-gradient</code> مع الاتجاه والألوان المحددين.
|
||||||
|
testString: 'assert(code.match(/background:\s*?linear-gradient\(35deg,\s*?(#CCFFFF|#CFF),\s*?(#FFCCCC|#FCC)\);/gi), "The <code>div</code> element should have a <code>linear-gradient</code> <code>background</code> with the specified direction and colors.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
|
||||||
|
div{
|
||||||
|
border-radius: 20px;
|
||||||
|
width: 70%;
|
||||||
|
height: 400px;
|
||||||
|
margin: 50px auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div></div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,71 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a6367417b2b2512add
|
||||||
|
title: Create a Graphic Using CSS
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: قم بإنشاء رسم باستخدام CSS
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> من خلال التلاعب بمختصرات وخصائص مختلفة ، يمكنك عمل أشكال مثيرة للاهتمام. واحدة من أسهل في محاولة هو شكل هلال القمر. لهذا التحدي ، تحتاج إلى العمل مع خاصية <code>box-shadow</code> التي تقوم بتعيين ظل عنصر ، مع خاصية <code>border-radius</code> التي تتحكم في استدارة زوايا العنصر. سوف تقوم بإنشاء كائن مستدير وشفافة مع ظل هش يعوض قليلاً إلى الجانب - الظل سيكون في الواقع شكل القمر الذي تراه. لإنشاء كائن مستدير ، يجب تعيين الخاصية <code>border-radius</code> إلى قيمة 50٪. قد تتذكر من تحدي سابق أن خاصية <code>box-shadow</code> تأخذ قيمًا <code>offset-x</code> ، <code>offset-y</code> ، <code>blur-radius</code> ، و <code>blur-radius</code> <code>spread-radius</code> وقيمة اللون بهذا الترتيب. تعد قيم <code>spread-radius</code> <code>blur-radius</code> و <code>blur-radius</code> <code>spread-radius</code> اختيارية. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> التعامل مع عنصر مربع في المحرر لإنشاء شكل القمر. أولاً ، قم بتغيير <code>background-color</code> إلى شفاف ، ثم قم بتعيين الخاصية <code>border-radius</code> إلى 50٪ لجعل الشكل الدائري. وأخيرًا ، قم بتغيير الخاصية <code>box-shadow</code> لتعيين <code>offset-x</code> إلى 25px ، و <code>offset-y</code> إلى 10px ، و <code>blur-radius</code> إلى 0 ، <code>spread-radius</code> إلى 0 ، و color to blue. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب تعيين قيمة الخاصية <code>background-color</code> إلى <code>transparent</code> .
|
||||||
|
testString: 'assert(code.match(/background-color:\s*?transparent;/gi), "The value of the <code>background-color</code> property should be set to <code>transparent</code>.");'
|
||||||
|
- text: يجب تعيين قيمة خاصية <code>border-radius</code> إلى <code>50%</code> .
|
||||||
|
testString: 'assert(code.match(/border-radius:\s*?50%;/gi), "The value of the <code>border-radius</code> property should be set to <code>50%</code>.");'
|
||||||
|
- text: يجب تعيين قيمة الخاصية <code>box-shadow</code> إلى 25px للإزاحة <code>offset-x</code> ، و <code>offset-x</code> بكسل لـ <code>offset-x</code> <code>offset-y</code> ، و 0 لـ <code>blur-radius</code> ، و 0 لـ <code>spread-radius</code> ، وأخيراً اللون الأزرق للون.
|
||||||
|
testString: 'assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi), "The value of the <code>box-shadow</code> property should be set to 25px for <code>offset-x</code>, 10px for <code>offset-y</code>, 0 for <code>blur-radius</code>, 0 for <code>spread-radius</code>, and finally blue for the color.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.center
|
||||||
|
{
|
||||||
|
position: absolute;
|
||||||
|
margin: auto;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
|
||||||
|
background-color: blue;
|
||||||
|
border-radius: 0px;
|
||||||
|
box-shadow: 25px 10px 10px 10px green;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<div class="center"></div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,89 @@
|
|||||||
|
---
|
||||||
|
id: 587d781b367417b2b2512abb
|
||||||
|
title: Create a Horizontal Line Using the hr Element
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: إنشاء خط أفقي باستخدام عنصر hr
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> يمكنك استخدام علامة <code>hr</code> لإضافة خط أفقي عبر عرض عنصر محتواه. يمكن استخدام هذا لتعريف تغيير في الموضوع أو لفصل مجموعات المحتوى بشكل مرئي. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> أضف علامة <code>hr</code> أسفل <code>h4</code> التي تحتوي على عنوان البطاقة. <strong>ملحوظة</strong> <br> في HTML ، <code>hr</code> هي علامة ذاتية الإغلاق ، وبالتالي لا تحتاج إلى علامة إغلاق منفصلة. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تضيف الشفرة علامة <code>hr</code> إلى الترميز.
|
||||||
|
testString: 'assert($("hr").length == 1, "Your code should add an <code>hr</code> tag to the markup.");'
|
||||||
|
- text: يجب أن تأتي علامة <code>hr</code> بين العنوان والفقرة.
|
||||||
|
testString: 'assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?<p>/gi), "The <code>hr</code> tag should come between the title and the paragraph.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4><s>Google</s>Alphabet</h4>
|
||||||
|
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,89 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a6367417b2b2512ade
|
||||||
|
title: Create a More Complex Shape Using CSS and HTML
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: إنشاء شكل أكثر تعقيدًا باستخدام CSS و HTML
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> واحدة من أكثر الأشكال شعبية في العالم هي شكل القلب ، وفي هذا التحدي عليك إنشاء واحد باستخدام CSS النقي. ولكن أولا ، تحتاج إلى فهم <code>::before</code> و <code>::after</code> pseudo-elements. يتم استخدام هذه العناصر الزائفة لإضافة شيء ما قبل أو بعد عنصر محدد. في المثال التالي ، يتم استخدام العنصر <code>::before</code> pseudo-element لإضافة مستطيل إلى عنصر به <code>heart</code> الفئة: <blockquote style=";text-align:right;direction:rtl"> .heart :: before { <br> يحتوى: ""؛ <br> لون الخلفية: أصفر. <br> نصف قطر الحدود: 25٪ ؛ <br> الموقع: مطلقة <br> الارتفاع: 50 بكسل ؛ <br> العرض: 70 بكسل <br> أعلى: - 50 بكسل <br> اليسار: 5 بكسل ؛ <br> } </blockquote> بالنسبة لـ <code>::before</code> و <code>::after</code> pseudo-elements لتعمل بشكل صحيح ، يجب أن يكون لها خاصية <code>content</code> محددة. يتم استخدام هذه الخاصية عادةً لإضافة أشياء مثل صورة أو نص إلى العنصر المحدد. عندما يتم استخدام الـ <code>::before</code> و <code>::after</code> pseudo-elements لجعل الأشكال ، فإن خاصية <code>content</code> لا تزال مطلوبة ، لكن يتم ضبطها على سلسلة فارغة. في المثال أعلاه، عنصر مع فئة من <code>heart</code> لديه <code>::before</code> الزائفة العنصر الذي ينتج مستطيل أصفر مع <code>height</code> و <code>width</code> من 50px 70px و، على التوالي. يحتوي هذا المستطيل على زوايا دائرية نظرًا لنصف قطره 25٪ ويتم وضعه تمامًا عند 5 بكسل من <code>left</code> و 50 بكسل فوق الجزء <code>top</code> من العنصر. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> تحويل العنصر على الشاشة إلى القلب. في <code>heart::after</code> الاختيار ، قم بتغيير <code>background-color</code> الوردي و <code>border-radius</code> إلى 50٪. بعد ذلك ، استهدف العنصر <code>heart</code> الطبقة ( <code>heart</code> فقط) واملأ خاصية <code>transform</code> . استخدم وظيفة <code>rotate()</code> مع -45 درجة. (يعمل <code>rotate()</code> بنفس الطريقة التي يعمل بها <code>skewX()</code> و <code>skewY()</code> ). وأخيراً ، في <code>heart::before</code> selector ، قم بتعيين خاصية <code>content</code> الخاصة به إلى سلسلة فارغة. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: 'يجب أن تكون الخاصية <code>background-color</code> <code>heart::after</code> محدد الوردي.'
|
||||||
|
testString: 'assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi), "The <code>background-color</code> property of the <code>heart::after</code> selector should be pink.");'
|
||||||
|
- text: 'يجب أن يكون <code>border-radius</code> الحد <code>heart::after</code> محدد 50 ٪.'
|
||||||
|
testString: 'assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2, "The <code>border-radius</code> of the <code>heart::after</code> selector should be 50%.");'
|
||||||
|
- text: يجب أن تستخدم خاصية <code>transform</code> لفئة <code>heart</code> الدالة <code>rotate()</code> إلى -45 درجة.
|
||||||
|
testString: 'assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi), "The <code>transform</code> property for the <code>heart</code> class should use a <code>rotate()</code> function set to -45 degrees.");'
|
||||||
|
- text: 'يجب أن يكون <code>content</code> <code>heart::before</code> محدد سلسلة فارغة.'
|
||||||
|
testString: 'assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|")\1\s*?;/gi), "The <code>content</code> of the <code>heart::before</code> selector should be an empty string.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.heart {
|
||||||
|
position: absolute;
|
||||||
|
margin: auto;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: pink;
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
transform: ;
|
||||||
|
}
|
||||||
|
.heart::after {
|
||||||
|
background-color: blue;
|
||||||
|
content: "";
|
||||||
|
border-radius: 25%;
|
||||||
|
position: absolute;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
top: 0px;
|
||||||
|
left: 25px;
|
||||||
|
}
|
||||||
|
.heart::before {
|
||||||
|
content: ;
|
||||||
|
background-color: pink;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
top: -25px;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class = "heart"></div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,87 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a7367417b2b2512ae1
|
||||||
|
title: Create Movement Using CSS Animation
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: إنشاء حركة باستخدام CSS الرسوم المتحركة
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> عندما يكون للعنصر <code>position</code> محدد ، مثل <code>fixed</code> أو <code>relative</code> ، يمكن استخدام خصائص إزاحة CSS إلى <code>right</code> <code>left</code> <code>top</code> <code>bottom</code> في قواعد الرسوم المتحركة لإنشاء حركة. كما هو موضح في المثال أدناه ، يمكنك دفع العنصر إلى الأسفل ثم إلى الأعلى عن طريق تعيين الخاصية <code>top</code> للإطار الرئيسي <code>50%</code> إلى 50 بكسل ، ولكن بعد تعيينه على 0px للأول ( <code>0%</code> <code>100%</code> ) والإطار الرئيسي الأخير ( <code>100%</code> ). <blockquote style=";text-align:right;direction:rtl"> keyframes rainbow { <br> 0٪ <br> لون الخلفية: أزرق ؛ <br> العلوي: 0 بكسل ؛ <br> } <br> 50٪ { <br> background-color: green؛ <br> العلوي: 50 بكسل <br> } <br> 100٪ { <br> لون الخلفية: أصفر. <br> العلوي: 0 بكسل ؛ <br> } <br> } </blockquote></section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> أضف حركة أفقية إلى الرسوم المتحركة <code>div</code> . باستخدام خاصية الإزاحة <code>left</code> ، قم بإضافة قاعدة <code>@keyframes</code> بحيث يبدأ قوس قزح عند 0 بكسل عند <code>0%</code> ، وينتقل إلى 25 بكسل عند <code>50%</code> ، وينتهي عند -25 بكسل عند <code>100%</code> . لا تحل محل الخاصية <code>top</code> في المحرر - يجب أن يكون للرسوم المتحركة حركة رأسيًا وأفقيًا. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تستخدم قاعدة <code>@keyframes</code> لـ <code>0%</code> الإزاحة <code>left</code> من 0px.
|
||||||
|
testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?top:\s*?0(px)?;\s*?left:\s*?0(px)?;\s*?}/gi), "The <code>@keyframes</code> rule for <code>0%</code> should use the <code>left</code> offset of 0px.");'
|
||||||
|
- text: يجب أن تستخدم قاعدة <code>@keyframes</code> <code>50%</code> الإزاحة <code>left</code> من 25 بكسل.
|
||||||
|
testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?top:\s*?50px;\s*?left:\s*?25px;\s*?}/gi), "The <code>@keyframes</code> rule for <code>50%</code> should use the <code>left</code> offset of 25px.");'
|
||||||
|
- text: يجب أن تستخدم قاعدة <code>@keyframes</code> لـ <code>100%</code> الإزاحة <code>left</code> من -25 بكسل.
|
||||||
|
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?top:\s*?0(px)?;\s*?left:\s*?-25px;\s*?}/gi), "The <code>@keyframes</code> rule for <code>100%</code> should use the <code>left</code> offset of -25px.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
height: 40px;
|
||||||
|
width: 70%;
|
||||||
|
background: black;
|
||||||
|
margin: 50px auto;
|
||||||
|
border-radius: 5px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rect {
|
||||||
|
animation-name: rainbow;
|
||||||
|
animation-duration: 4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rainbow {
|
||||||
|
0% {
|
||||||
|
background-color: blue;
|
||||||
|
top: 0px;
|
||||||
|
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-color: green;
|
||||||
|
top: 50px;
|
||||||
|
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-color: yellow;
|
||||||
|
top: 0px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id="rect"></div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a5367417b2b2512ad8
|
||||||
|
title: Create Texture by Adding a Subtle Pattern as a Background Image
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: خلق نسيج عن طريق إضافة نمط دقيق كخلفية صورة
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> إحدى الطرق لإضافة الملمس والاهتمام إلى الخلفية وجعلها تبرز أكثر هي إضافة نمط دقيق. المفتاح هو التوازن ، لأنك لا تريد أن تبرز الخلفية أكثر من اللازم ، وأن تأخذها بعيدًا عن المقدمة. تدعم خاصية <code>background</code> وظيفة <code>url()</code> للربط بصورة للنسيج أو النمط المختار. يتم التفاف عنوان الارتباط بين علامات اقتباس داخل الأقواس. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> باستخدام رابط من <code>https://i.imgur.com/MJAkxbh.png</code> ، تعيين <code>background</code> من صفحة كاملة مع <code>body</code> محدد. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن يكون لعنصر <code>body</code> الخاص بك خاصية <code>background</code> معيّنة إلى <code>url()</code> بالرابط المحدد.
|
||||||
|
testString: 'assert(code.match(/background:\s*?url\(\s*("|"|)https:\/\/i\.imgur\.com\/MJAkxbh\.png\1\s*\)/gi), "Your <code>body</code> element should have a <code>background</code> property set to a <code>url()</code> with the given link.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,83 @@
|
|||||||
|
---
|
||||||
|
id: 587d7791367417b2b2512ab3
|
||||||
|
title: Create Visual Balance Using the text-align Property
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: إنشاء توازن مرئي باستخدام خاصية محاذاة النص
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> يركز هذا القسم من المنهج على التصميم المرئي التطبيقي. تعتمد المجموعة الأولى من التحديات على تصميم البطاقة المعينة لإظهار عدد من المبادئ الأساسية. غالبًا ما يكون النص جزءًا كبيرًا من محتوى الويب. يحتوي CSS على عدة خيارات لكيفية محاذاةه مع خاصية <code>text-align</code> . <code>text-align: justify;</code> يتسبب في كافة أسطر النص باستثناء السطر الأخير لمقابلة الحواف اليمنى واليسرى لمربع السطر. <code>text-align: center;</code> مراكز النص <code>text-align: right;</code> محاذاة إلى اليمين <code>text-align: left;</code> (الافتراضي) يسار النص. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> قم بمحاذاة نص علامة <code>h4</code> ، والذي يشير إلى "Google" ، إلى المركز. ثم قم بتبرير علامة الفقرة التي تحتوي على معلومات حول كيفية تأسيس Google. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تستخدم التعليمات البرمجية الخاصة بك الخاصية محاذاة النص على علامة <code>h4</code> إلى الوسط.
|
||||||
|
testString: 'assert($("h4").css("text-align") == "center", "Your code should use the text-align property on the <code>h4</code> tag to set it to center.");'
|
||||||
|
- text: يجب أن تستخدم شفرتك خاصية محاذاة النص على علامة <code>p</code> لتعيينها لتبريرها.
|
||||||
|
testString: 'assert($("p").css("text-align") == "justify", "Your code should use the text-align property on the <code>p</code> tag to set it to justify.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
margin-right: 20px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,76 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a7367417b2b2512ae2
|
||||||
|
title: Create Visual Direction by Fading an Element from Left to Right
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: إنشاء اتجاه مرئي بواسطة Fading عنصر من اليسار إلى اليمين
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> لهذا التحدي ، ستقوم بتغيير <code>opacity</code> عنصر متحرك بحيث يتلاشى تدريجياً عندما يصل إلى الجانب الأيمن من الشاشة. في الصورة المتحركة المعروضة ، يتحرك العنصر المستدير بخلفية التدرج إلى اليمين بواسطة علامة 50٪ للرسوم المتحركة في قاعدة <code>@keyframes</code> . </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> استهدف العنصر بمعرّف <code>ball</code> وأضف خاصية <code>opacity</code> إلى 0.1 عند <code>50%</code> ، بحيث يتلاشى العنصر أثناء انتقاله إلى اليمين. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تحدد قاعدة <code>keyframes</code> <code>opacity</code> خاصية <code>opacity</code> إلى 0.1٪ عند 50٪.
|
||||||
|
testString: 'assert(code.match(/@keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi), "The <code>keyframes</code> rule for fade should set the <code>opacity</code> property to 0.1 at 50%.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
|
||||||
|
#ball {
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
margin: 50px auto;
|
||||||
|
position: fixed;
|
||||||
|
left: 20%;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(
|
||||||
|
35deg,
|
||||||
|
#ccffff,
|
||||||
|
#ffcccc
|
||||||
|
);
|
||||||
|
animation-name: fade;
|
||||||
|
animation-duration: 3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade {
|
||||||
|
50% {
|
||||||
|
left: 60%;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id="ball"></div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,93 @@
|
|||||||
|
---
|
||||||
|
id: 587d781c367417b2b2512abf
|
||||||
|
title: Decrease the Opacity of an Element
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: تقليل تعتيم عنصر
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> يتم استخدام خاصية <code>opacity</code> في CSS لضبط العتامة ، أو العكس ، شفافية العنصر. <blockquote style=";text-align:right;direction:rtl"> قيمة 1 معتمة ، وهي غير شفافة على الإطلاق. <br> القيمة 0.5 هي نصف شفاف. <br> القيمة 0 شفافة تمامًا. </blockquote> سيتم تطبيق القيمة المقدمة على العنصر بأكمله ، سواء كانت هذه الصورة مع بعض الشفافية ، أو ألوان المقدمة والخلفية لكتلة من النص. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> اضبط <code>opacity</code> علامات الإرساء على 0.7 باستخدام فئة <code>links</code> لتحديدها. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تقوم التعليمة البرمجية بتعيين الخاصية <code>opacity</code> إلى 0.7 على علامات الربط عن طريق تحديد فئة <code>links</code> .
|
||||||
|
testString: 'assert.approximately(parseFloat($(".links").css("opacity")), 0.7, 0.1, "Your code should set the <code>opacity</code> property to 0.7 on the anchor tags by selecting the class of <code>links</code>.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgba(45, 45, 45, 0.1);
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 27px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
|
||||||
|
}
|
||||||
|
#thumbnail {
|
||||||
|
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard" id="thumbnail">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Alphabet</h4>
|
||||||
|
<hr>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a3367417b2b2512ad1
|
||||||
|
title: Learn about Complementary Colors
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: تعرف على الألوان التكميلية
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> تعتبر نظرية اللون وتأثيرها على التصميم موضوعًا عميقًا ولا تغطي سوى التحديات الأساسية فقط. على موقع الويب ، يمكن للون جذب الانتباه إلى المحتوى أو إثارة المشاعر أو خلق تناغم بصري. يمكن أن يؤدي استخدام مجموعات مختلفة من الألوان إلى تغيير مظهر موقع الويب ، ويمكن أن يوضع الكثير من التفكير في اختيار لوحة ألوان تعمل مع المحتوى الخاص بك. تعد عجلة الألوان أداة مفيدة لتصور كيف ترتبط الألوان ببعضها - إنها دائرة حيث تكون درجات متشابهة من الجيران والألوان المختلفة متباعدة. عندما يكون هناك لونان في مواجهة بعضهما بعضا على عجلة القيادة ، يطلق عليهما ألوان تكميلية. لديهم ميزة أنه إذا تم دمجها ، فإنها "تلغي" بعضها البعض وتخلق لونًا رماديًا. ومع ذلك ، عند وضعها جنبًا إلى جنب ، تظهر هذه الألوان أكثر حيوية وتنتج تباينًا بصريًا قويًا. بعض الأمثلة من الألوان التكميلية مع رموزها السداسية: <blockquote style=";text-align:right;direction:rtl"> الأحمر (# FF0000) والأزرق (# 00FFFF) <br> أخضر (# 00FF00) وأرجواني (# FF00FF) <br> الأزرق (# 0000FF) والأصفر (# FFFF00) </blockquote> يختلف هذا عن نموذج ألوان RYB القديم الذي تم تدريسه في المدرسة ، والذي يحتوي على ألوان أساسية ومتكاملة مختلفة. تستخدم نظرية الألوان الحديثة نموذج RGB المضاف (مثل على شاشة الكمبيوتر) والطراز CMY (K) subtractive (كما في الطباعة). اقرأ <a href="https://en.wikipedia.org/wiki/Color_model" target="_blank">هنا</a> لمزيد من المعلومات حول هذا الموضوع المعقد. هناك العديد من أدوات اختيار الألوان المتاحة عبر الإنترنت التي لديها خيار للعثور على مجموعة مكملة للون. <strong>ملحوظة</strong> <br> بالنسبة إلى جميع تحديات الألوان: يمكن أن يكون استخدام اللون طريقة فعالة لإضافة الاهتمام المرئي إلى الصفحة. ومع ذلك ، لا ينبغي استخدام اللون وحده باعتباره الطريقة الوحيدة لنقل المعلومات المهمة لأن المستخدمين الذين يعانون من إعاقات بصرية قد لا يفهمون هذا المحتوى. ستتم تغطية هذه المشكلة بمزيد من التفصيل في تحديات إمكانية الوصول التطبيقية. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> قم بتغيير خاصية <code>background-color</code> للفئات <code>blue</code> <code>yellow</code> إلى ألوانها الخاصة. لاحظ كيف تبدو الألوان مختلفة إلى جانب بعضها البعض مقارنة باللون الأبيض. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: و <code>div</code> عنصر مع الطبقة <code>blue</code> يجب أن يكون <code>background-color</code> من اللون الأزرق.
|
||||||
|
testString: 'assert($(".blue").css("background-color") == "rgb(0, 0, 255)", "The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.");'
|
||||||
|
- text: يجب أن يكون لعنصر <code>div</code> <code>yellow</code> <code>background-color</code> أصفر.
|
||||||
|
testString: 'assert($(".yellow").css("background-color") == "rgb(255, 255, 0)", "The <code>div</code> element with class <code>yellow</code> should have a <code>background-color</code> of yellow.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.blue {
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
.yellow {
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
display: inline-block;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="blue"></div>
|
||||||
|
<div class="yellow"></div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,79 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a4367417b2b2512ad2
|
||||||
|
title: Learn about Tertiary Colors
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: تعرف على ألوان التعليم العالي
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> تعمل شاشات الكمبيوتر وشاشات الأجهزة على إنشاء ألوان مختلفة من خلال الجمع بين كميات الضوء الأحمر والأخضر والأزرق. هذا هو المعروف باسم نموذج RGB المضاف اللون في نظرية الألوان الحديثة. تسمى الأحمر (R) والأخضر (G) والأزرق (B) بالألوان الأساسية. يؤدي خلط لونين أساسيين إلى إنشاء الألوان الثانوية السماوي (G + B) والأرجواني (R + B) والأصفر (R + G). لقد رأيت هذه الألوان في تحدي الألوان التكميلية. هذه الألوان الثانوية تكون مكملة للون الأساسي غير المستخدم في إنشائها ، وهي عكس ذلك اللون الأساسي على عجلة الألوان. على سبيل المثال ، يرصد الأرجواني مع الأحمر والأزرق ، وهو مكمل للأخضر. الألوان الثلاثية هي نتيجة دمج لون أساسي مع أحد جوار الألوان الثانوية. على سبيل المثال ، الأحمر (الأساسي) والأصفر (ثانوي) جعل البرتقالي. هذا يضيف ستة ألوان إضافية إلى عجلة ألوان بسيطة لإجمالي 12 لونًا. هناك طرق مختلفة لاختيار ألوان مختلفة تؤدي إلى تركيبة متناسقة في التصميم. يسمى أحد الأمثلة التي يمكن أن تستخدم ألوان ثلاثية نظام الألوان المكملة والمقسمة. يبدأ هذا المخطط بلون أساسي ، ثم يجمعه مع لونين متاخمين لملحقه. توفر الألوان الثلاثة تباينًا بصريًا قويًا في التصميم ، ولكنها أكثر دقة من استخدام لونين متكاملين. في ما يلي ثلاث ألوان تم إنشاؤها باستخدام نظام الإنقسام المنفصل: <table class="table table-striped" style=";text-align:right;direction:rtl"><thead><tr><th> اللون </th><th> رمز عشري </th></tr></thead><thead></thead><tbody><tr><td> البرتقالي </td><td> # FF7D00 </td></tr><tr><td> ازرق سماوي </td><td> # 00FFFF </td></tr><tr><td> توت العُليق </td><td> # FF007D </td></tr></tbody></table></section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> قم بتغيير خاصية <code>background-color</code> بالفصول <code>orange</code> <code>cyan</code> <code>raspberry</code> إلى ألوانها الخاصة. تأكد من استخدام الشفرات السداسية كبرتقال ، وأن التوت ليس أسماء ألوان معترف بها بالمتصفح. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن يكون لعنصر <code>div</code> <code>orange</code> <code>background-color</code> برتقالي.
|
||||||
|
testString: 'assert($(".orange").css("background-color") == "rgb(255, 125, 0)", "The <code>div</code> element with class <code>orange</code> should have a <code>background-color</code> of orange.");'
|
||||||
|
- text: و <code>div</code> عنصر مع الطبقة <code>cyan</code> ينبغي أن يكون <code>background-color</code> من السماوي.
|
||||||
|
testString: 'assert($(".cyan").css("background-color") == "rgb(0, 255, 255)", "The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.");'
|
||||||
|
- text: يجب أن يكون لعنصر <code>div</code> مع <code>raspberry</code> <code>background-color</code> للتوت.
|
||||||
|
testString: 'assert($(".raspberry").css("background-color") == "rgb(255, 0, 125)", "The <code>div</code> element with class <code>raspberry</code> should have a <code>background-color</code> of raspberry.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orange {
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cyan {
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.raspberry {
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="orange"></div>
|
||||||
|
<div class="cyan"></div>
|
||||||
|
<div class="raspberry"></div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,89 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a9367417b2b2512ae8
|
||||||
|
title: Learn How Bezier Curves Work
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: تعلم كيف بيجر المنحنيات العمل
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> قدم التحدي الأخير خاصية عرض <code>animation-timing-function</code> وبعض الكلمات الرئيسية التي تغير سرعة الرسوم المتحركة على مدار مدتها. تقدم CSS خيارًا بخلاف الكلمات الرئيسية التي توفر تحكمًا أكثر دقة في كيفية تشغيل الرسم المتحرك ، من خلال استخدام منحنيات Bezier. في الرسوم المتحركة CSS ، يتم استخدام منحنيات Bezier مع وظيفة <code>cubic-bezier</code> . شكل المنحنى يمثل كيفية تشغيل الرسوم المتحركة. يعيش المنحنى على نظام إحداثي 1 في 1. المحور السيني لنظام الإحداثيات هذا هو مدة الرسم المتحرك (فكر فيه كمقياس زمني) ، والمحور الصادي هو التغيير في الرسوم المتحركة. تتكون الدالة <code>cubic-bezier</code> من أربع نقاط رئيسية على هذه الشبكة 1: 1: <code>p0</code> ، <code>p1</code> ، <code>p2</code> ، <code>p3</code> . يتم تعيين <code>p0</code> و <code>p3</code> لك - وهما نقطة البداية والنهاية التي تقع دائما على التوالي في الأصل (0 ، 0) و (1 ، 1). يمكنك تعيين قيم x و y للنقطتين الأخريين ، وحيث تضعها في الشبكة تملي شكل المنحنى الذي سيتبعه الرسم المتحرك. يتم ذلك في CSS عن طريق تعريف قيمتي x و y لنقاط " <code>p1</code> و <code>p2</code> في النموذج: <code>(x1, y1, x2, y2)</code> . سحب كل ذلك معا ، وهنا مثال لمنحنى بيزير في رمز CSS: <code>animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);</code> في المثال أعلاه ، تكون قيم x و y مكافئة لكل نقطة (x1 = 0.25 = y1 و x2 = 0.75 = y2) ، والتي إذا تذكرت من فئة الهندسة ، ينتج عنها خط يمتد من الأصل إلى النقطة (1) ، 1). هذا الرسم المتحرك هو تغيير خطي لعنصر خلال طول الرسم المتحرك ، وهو مماثل لاستخدام الكلمة الرئيسية <code>linear</code> . وبعبارة أخرى ، يتغير بسرعة ثابتة. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> بالنسبة للعنصر الذي له معرف <code>ball1</code> ، قم بتغيير قيمة خاصية <code>animation-timing-function</code> من <code>linear</code> إلى قيمة الدالة المكافئة <code>cubic-bezier</code> المكافئة لها. استخدم قيم النقاط الواردة في المثال أعلاه. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تكون قيمة خاصية <code>animation-timing-function</code> للعنصر مع معرف <code>ball1</code> الخطية المكافئة.
|
||||||
|
testString: 'assert($("#ball1").css("animation-timing-function") == "cubic-bezier(0.25, 0.25, 0.75, 0.75)", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be the linear-equivalent cubic-bezier function.");'
|
||||||
|
- text: يجب ألا تتغير قيمة خاصية <code>animation-timing-function</code> للعنصر مع معرف <code>ball2</code> .
|
||||||
|
testString: 'assert($("#ball2").css("animation-timing-function") == "ease-out", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should not change.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
|
||||||
|
.balls{
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(
|
||||||
|
35deg,
|
||||||
|
#ccffff,
|
||||||
|
#ffcccc
|
||||||
|
);
|
||||||
|
position: fixed;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
margin-top: 50px;
|
||||||
|
animation-name: bounce;
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
#ball1 {
|
||||||
|
left: 27%;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
}
|
||||||
|
#ball2 {
|
||||||
|
left: 56%;
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce {
|
||||||
|
0% {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: 249px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="balls" id="ball1"></div>
|
||||||
|
<div class="balls" id="ball2"></div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,77 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a7367417b2b2512adf
|
||||||
|
title: Learn How the CSS @keyframes and animation Properties Work
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: تعلم كيف تعمل CSSkeyframes وخصائص الرسوم المتحركة
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> لتحريك عنصر ، تحتاج إلى معرفة خصائص الحركة وقاعدة <code>@keyframes</code> . تتحكم خصائص الرسم المتحرك في الكيفية التي ينبغي أن يتصرف بها <code>@keyframes</code> القاعدة <code>@keyframes</code> بما يحدث أثناء ذلك الرسم المتحرك. هناك ثمانية خصائص للرسوم المتحركة في المجموع. وهذا التحدي يبقيه بسيطة وتغطية اثنين من أهمها أولا: <code>animation-name</code> يحدد اسم للرسوم المتحركة، والذي يستخدم لاحقا من قبل <code>@keyframes</code> أن أقول CSS التي تسيطر على الذهاب مع والرسوم المتحركة. تحدد <code>animation-duration</code> الوقت للرسوم المتحركة. <code>@keyframes</code> هو كيفية تحديد ما يحدث بالضبط داخل الرسوم المتحركة على مدار المدة. يتم ذلك عن طريق إعطاء خصائص CSS "إطارات" محددة أثناء الرسوم المتحركة ، مع نسب تتراوح من 0٪ إلى 100٪. إذا قارنت هذا بفيلم ، فإن خصائص CSS لـ 0٪ هي كيفية عرض العنصر في المشهد الافتتاحي. تتمثل خصائص CSS بنسبة 100٪ في كيفية ظهور العنصر في النهاية قبل بدء القوائم مباشرةً. بعد ذلك ، يقوم CSS بتطبيق السحر على نقل العنصر خلال المدة المحددة للعمل على المشهد. في ما يلي مثال لتوضيح استخدام <code>@keyframes</code> وخصائص الرسم المتحرك: <blockquote style=";text-align:right;direction:rtl"> #anim { <br> اسم الرسوم المتحركة: ملونة. <br> مدة الرسوم المتحركة: 3 ثوانٍ ؛ <br> } <br> keyframes الملونة { <br> 0٪ <br> لون الخلفية: أزرق ؛ <br> } <br> 100٪ { <br> لون الخلفية: أصفر. <br> } <br> } </blockquote> للعنصر مع <code>anim</code> الهوية، ورمز المقتطف أعلاه يحدد <code>animation-name</code> إلى <code>colorful</code> ويحدد <code>animation-duration</code> إلى 3 ثوان. ثم <code>@keyframes</code> القاعدة <code>@keyframes</code> بخصائص الرسم المتحرك بالاسم <code>colorful</code> . يضبط اللون على اللون الأزرق في بداية الرسم المتحرك (0٪) والذي سينتقل إلى اللون الأصفر بنهاية الصورة المتحركة (100٪). أنت لا تقتصر على الانتقالات في نهاية البداية فقط ، يمكنك تعيين خصائص للعنصر لأي نسبة تتراوح بين 0٪ و 100٪. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> أنشئ <code>rect</code> للعنصر الذي يحتوي على <code>rect</code> id ، من خلال تعيين <code>animation-name</code> على قوس قزح <code>animation-duration</code> إلى 4 ثوانٍ. بعد ذلك ، قم بالإعلان عن قاعدة <code>@keyframes</code> ، وقم بتعيين <code>background-color</code> في بداية الرسم المتحرك ( <code>0%</code> ) إلى اللون الأزرق ، وسط الرسم المتحرك ( <code>50%</code> ) إلى اللون الأخضر ، ونهاية الحركة ( <code>100%</code> ) إلى الأصفر. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن يكون للعنصر ذو معرف <code>rect</code> خاصية <code>animation-name</code> ذات قيمة قوس قزح.
|
||||||
|
testString: 'assert($("#rect").css("animation-name") == "rainbow", "The element with id of <code>rect</code> should have an <code>animation-name</code> property with a value of rainbow.");'
|
||||||
|
- text: يجب أن يكون للعنصر ذي معرف <code>rect</code> خاصية <code>animation-duration</code> ذات قيمة 4 أضعاف.
|
||||||
|
testString: 'assert($("#rect").css("animation-duration") == "4s", "The element with id of <code>rect</code> should have an <code>animation-duration</code> property with a value of 4s.");'
|
||||||
|
- text: يجب أن تستخدم قاعدة <code>@keyframes</code> <code>animation-name</code> لقوس قزح.
|
||||||
|
testString: 'assert(code.match(/@keyframes\s+?rainbow\s*?{/g), "The <code>@keyframes</code> rule should use the <code>animation-name</code> of rainbow.");'
|
||||||
|
- text: يجب أن تستخدم قاعدة <code>@keyframes</code> لقوس قزح <code>background-color</code> أزرق عند 0٪.
|
||||||
|
testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi), "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of blue at 0%.");'
|
||||||
|
- text: يجب أن تستخدم قاعدة <code>@keyframes</code> لقوس قزح <code>background-color</code> خضراء بنسبة 50٪.
|
||||||
|
testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi), "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of green at 50%.");'
|
||||||
|
- text: يجب أن تستخدم قاعدة <code>@keyframes</code> لقوس قزح <code>background-color</code> أصفر بنسبة 100٪.
|
||||||
|
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi), "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of yellow at 100%.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
height: 40px;
|
||||||
|
width: 70%;
|
||||||
|
background: black;
|
||||||
|
margin: 50px auto;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rect {
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<div id="rect"></div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,72 @@
|
|||||||
|
---
|
||||||
|
id: 587d781e367417b2b2512acb
|
||||||
|
title: Lock an Element to its Parent with Absolute Positioning
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: قفل عنصر إلى الوالد مع وضع مطلق
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> الخيار التالي لخاصية <code>position</code> CSS <code>absolute</code> ، والذي يقوم بتثبيت العنصر في مكانه بالنسبة للحاوية الرئيسية. على عكس الوضع <code>relative</code> ، يؤدي هذا إلى إزالة العنصر من التدفق العادي للمستند ، لذلك فإن العناصر المحيطة به تتجاهله. يتم استخدام خصائص إزاحة CSS (أعلى أو أسفل وإلى اليسار أو اليمين) لضبط الموضع. واحد فارق بسيط مع تحديد المواقع المطلق هو أنه سيتم تأمين بالنسبة إلى أقرب السلف <em>المتوضعة</em> . إذا نسيت إضافة قاعدة الموضع إلى العنصر الرئيسي ، (عادة ما يتم ذلك باستخدام <code>position: relative;</code> ) ، سيظل المتصفح يبحث عن السلسلة وينتهي افتراضيًا بعلامة body. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> قفل عنصر <code>#searchbar</code> في أعلى يمين <code>section</code> الأصل من خلال إعلان <code>position</code> أنه <code>absolute</code> . إعطائها <code>top</code> و <code>right</code> إزاحة من 50 بكسل لكل منهما. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: 'و <code>#searchbar</code> يجب أن يكون العنصر في <code>position</code> المقرر أن <code>absolute</code> .'
|
||||||
|
testString: 'assert($("#searchbar").css("position") == "absolute", "The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.");'
|
||||||
|
- text: 'يجب أن تستخدم شفرتك <code>top</code> إزاحة CSS بمقدار 50 بكسل في عنصر <code>#searchbar</code> .'
|
||||||
|
testString: 'assert($("#searchbar").css("top") == "50px", "Your code should use the <code>top</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.");'
|
||||||
|
- text: 'يجب أن تستخدم شفرتك إزاحة CSS <code>right</code> من 50 بكسل في عنصر <code>#searchbar</code> .'
|
||||||
|
testString: 'assert($("#searchbar").css("right") == "50px", "Your code should use the <code>right</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
#searchbar {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
section {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<body>
|
||||||
|
<h1>Welcome!</h1>
|
||||||
|
<section>
|
||||||
|
<form id="searchbar">
|
||||||
|
<label for="search">Search:</label>
|
||||||
|
<input type="search" id="search" name="search">
|
||||||
|
<input type="submit" name="submit" value="Go!">
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,84 @@
|
|||||||
|
---
|
||||||
|
id: 587d781e367417b2b2512acc
|
||||||
|
title: Lock an Element to the Browser Window with Fixed Positioning
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: قفل عنصر إلى نافذة المتصفح مع تحديد المواقع الثابتة
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> مخطط التخطيط التالي الذي يقدمه CSS هو موضع <code>fixed</code> ، وهو نوع من الموضع المطلق الذي يقوم بتأمين عنصر يتعلق بإطار المستعرض. مماثلة للموضع المطلق ، يتم استخدامه مع خصائص إزاحة CSS ويزيل العنصر أيضًا من التدفق العادي للمستند. عناصر أخرى لم تعد "تدرك" حيث يتم وضعها ، والتي قد تتطلب بعض التعديلات تخطيط في مكان آخر. يتمثل أحد الاختلافات الرئيسية بين المواضع <code>fixed</code> <code>absolute</code> عدم تحرك عنصر ذي موضع ثابت عند تمرير المستخدم. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> يتم تمييز شريط التنقل في الشفرة بمعرف <code>navbar</code> . غيّر <code>position</code> ليتم <code>fixed</code> وإزاحته بمقدار 0 بكسل من <code>top</code> و 0 بكسل من <code>left</code> . لاحظ (عدم) التأثير على موقع <code>h1</code> ، لم يتم دفعه لأسفل لاستيعاب شريط التنقل وسيتعين تعديله بشكل منفصل. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: 'و <code>#navbar</code> يجب أن يكون العنصر في <code>position</code> لتعيين <code>fixed</code> .'
|
||||||
|
testString: 'assert($("#navbar").css("position") == "fixed", "The <code>#navbar</code> element should have a <code>position</code> set to <code>fixed</code>.");'
|
||||||
|
- text: 'يجب أن تستخدم شفرتك <code>top</code> إزاحة CSS بمقدار 0 بكسل في عنصر <code>#navbar</code> .'
|
||||||
|
testString: 'assert($("#navbar").css("top") == "0px", "Your code should use the <code>top</code> CSS offset of 0 pixels on the <code>#navbar</code> element.");'
|
||||||
|
- text: 'يجب أن تستخدم شفرتك إزاحة CSS <code>left</code> من 0 بكسل في عنصر <code>#navbar</code> .'
|
||||||
|
testString: 'assert($("#navbar").css("left") == "0px", "Your code should use the <code>left</code> CSS offset of 0 pixels on the <code>#navbar</code> element.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
#navbar {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
background-color: #767676;
|
||||||
|
}
|
||||||
|
nav ul {
|
||||||
|
margin: 0px;
|
||||||
|
padding: 5px 0px 5px 30px;
|
||||||
|
}
|
||||||
|
nav li {
|
||||||
|
display: inline;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Welcome!</h1>
|
||||||
|
<nav id="navbar">
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Home</a></li>
|
||||||
|
<li><a href="">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<p>I shift up when the #navbar is fixed to the browser window.</p>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,119 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a8367417b2b2512ae4
|
||||||
|
title: Make a CSS Heartbeat using an Infinite Animation Count
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: جعل CSS نبضات باستخدام عدد الرسوم المتحركة اللانهائي
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> إليك مثالًا متحركًا مستمرًا آخر مع خاصية <code>animation-iteration-count</code> التي تستخدم القلب الذي صممته في تحدٍ سابق. تتألف الرسوم المتحركة ذات نبض القلب لمدة ثانية واحدة من قطعتين متحركتين. في <code>heart</code> العناصر (بما في ذلك <code>:before</code> و <code>:after</code> قطع) والرسوم المتحركة لتغيير حجم باستخدام <code>transform</code> الملكية، والخلفية <code>div</code> والرسوم المتحركة لتغيير لونه باستخدام <code>background</code> الملكية. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> حافظ على نبض القلب بإضافة خاصية <code>animation-iteration-count</code> لكل من الطبقة <code>back</code> وفئة <code>heart</code> وتعيين القيمة إلى غير محدود. <code>heart:before</code> <code>heart:after</code> لا يحتاج المحددون إلى أي خصائص للرسوم المتحركة. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تكون لقيمة <code>animation-iteration-count</code> لفئة <code>heart</code> قيمة لانهائية.
|
||||||
|
testString: 'assert($(".heart").css("animation-iteration-count") == "infinite", "The <code>animation-iteration-count</code> property for the <code>heart</code> class should have a value of infinite.");'
|
||||||
|
- text: يجب أن يكون <code>animation-iteration-count</code> للفئة <code>back</code> قيمة لا نهائية.
|
||||||
|
testString: 'assert($(".back").css("animation-iteration-count") == "infinite", "The <code>animation-iteration-count</code> property for the <code>back</code> class should have a value of infinite.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.back {
|
||||||
|
position: fixed;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: white;
|
||||||
|
animation-name: backdiv;
|
||||||
|
animation-duration: 1s;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.heart {
|
||||||
|
position: absolute;
|
||||||
|
margin: auto;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: pink;
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
animation-name: beat;
|
||||||
|
animation-duration: 1s;
|
||||||
|
|
||||||
|
}
|
||||||
|
.heart:after {
|
||||||
|
background-color: pink;
|
||||||
|
content: "";
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
top: 0px;
|
||||||
|
left: 25px;
|
||||||
|
}
|
||||||
|
.heart:before {
|
||||||
|
background-color: pink;
|
||||||
|
content: "";
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
top: -25px;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes backdiv {
|
||||||
|
50% {
|
||||||
|
background: #ffe6f2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes beat {
|
||||||
|
0% {
|
||||||
|
transform: scale(1) rotate(-45deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(0.6) rotate(-45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<div class="back"></div>
|
||||||
|
<div class="heart"></div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,84 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a9367417b2b2512aea
|
||||||
|
title: Make Motion More Natural Using a Bezier Curve
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: جعل الحركة أكثر طبيعية باستخدام منحنى بيزيير
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> هذا التحدي ينشط عنصرًا لتكرار حركة الكرة التي يتم لعبها. غطت التحديات السابقة منحنيات بيزيير المكعبة <code>linear</code> <code>ease-out</code> ، ولكن لا يصور أي منهما حركة شعوذة بدقة. تحتاج إلى تخصيص منحنى بيزير لهذا الغرض. <code>animation-timing-function</code> تلقائيًا في كل إطار مفتاحي عند تعيين عدد مرات تشغيل <code>animation-iteration-count</code> غير محدود. نظرًا لوجود قاعدة الإطار الرئيسي التي تم تعيينها في منتصف مدة الرسوم المتحركة ( <code>50%</code> ) ، يؤدي ذلك إلى تقدمين متتاليين للرسوم المتحركة في حركة الكرة إلى أعلى وإلى أسفل. يحاكي المنحنى Bezier التكعيبي التالي حركة شعوذة: <code>cubic-bezier(0.3, 0.4, 0.5, 1.6);</code> لاحظ أن قيمة y2 أكبر من 1. على الرغم من أن المنحنى Bezier المكعّب يتم تعيينه على نظام إحداثيات 1 × 1 ، ولا يمكنه قبول سوى قيم x من 0 إلى 1 ، يمكن تعيين قيمة y لأعداد أكبر من واحد. هذا يؤدي إلى حركة كذاب مثالية لمحاكاة الكرة شعوذة. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> تغيير قيمة <code>animation-timing-function</code> للعنصر مع معرف <code>green</code> إلى وظيفة بيكي <code>cubic-bezier</code> مع قيم x1 و y1 و x2 و y2 على التوالي إلى 0.311 ، 0.441 ، 0.444 ، 1.649. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تكون قيمة خاصية <code>animation-timing-function</code> للعنصر ذي معرف <code>green</code> عبارة <code>cubic-bezier</code> وظيفة <code>cubic-bezier</code> بقيم x1 و y1 و x2 و y2 كما هو محدد.
|
||||||
|
testString: 'assert($("#green").css("animation-timing-function") == "cubic-bezier(0.311, 0.441, 0.444, 1.649)", "The value of the <code>animation-timing-function</code> property for the element with the id <code>green</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values as specified.'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.balls {
|
||||||
|
border-radius: 50%;
|
||||||
|
position: fixed;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
top: 60%;
|
||||||
|
animation-name: jump;
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
#red {
|
||||||
|
background: red;
|
||||||
|
left: 25%;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
}
|
||||||
|
#blue {
|
||||||
|
background: blue;
|
||||||
|
left: 50%;
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
}
|
||||||
|
#green {
|
||||||
|
background: green;
|
||||||
|
left: 75%;
|
||||||
|
animation-timing-function: cubic-bezier(0.69, 0.1, 1, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes jump {
|
||||||
|
50% {
|
||||||
|
top: 10%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="balls" id="red"></div>
|
||||||
|
<div class="balls" id="blue"></div>
|
||||||
|
<div class="balls" id="green"></div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
---
|
||||||
|
id: 58a7a6ebf9a6318348e2d5aa
|
||||||
|
title: Modify Fill Mode of an Animation
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: تعديل وضع التعبئة من الرسوم المتحركة
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> هذا رائع ، لكنه لا يعمل على الفور. لاحظ كيف تمت إعادة الرسوم المتحركة بعد مرور <code>500ms</code> ثانية ، مما يتسبب في عودة الزر إلى اللون الأصلي. تريد أن يظل الزر مظللاً. يمكن القيام بذلك عن طريق تعيين خاصية <code>animation-fill-mode</code> إلى <code>forwards</code> . يحدد <code>animation-fill-mode</code> النمط المطبق على عنصر عندما ينتهي الرسم المتحرك. يمكنك تعيينه على النحو التالي: <code>animation-fill-mode: forwards;</code> </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> عيّن خاصية <code>animation-fill-mode</code> <code>button:hover</code> إلى <code>forwards</code> حتى يظل الزر مظللاً عندما يمرر المستخدم فوقه. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: '<code>button:hover</code> should have a <code>animation-fill-mode</code> with a <code>forwards</code> .'
|
||||||
|
testString: 'assert(code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi), "<code>button:hover</code> should have a <code>animation-fill-mode</code> property with a value of <code>forwards</code>.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
button {
|
||||||
|
border-radius: 5px;
|
||||||
|
color: white;
|
||||||
|
background-color: #0F5897;
|
||||||
|
padding: 5px 10px 8px 10px;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
animation-name: background-color;
|
||||||
|
animation-duration: 500ms;
|
||||||
|
/* add your code below this line */
|
||||||
|
|
||||||
|
/* add your code above this line */
|
||||||
|
}
|
||||||
|
@keyframes background-color {
|
||||||
|
100% {
|
||||||
|
background-color: #4791d0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<button>Register</button>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,64 @@
|
|||||||
|
---
|
||||||
|
id: 587d781e367417b2b2512aca
|
||||||
|
title: Move a Relatively Positioned Element with CSS Offsets
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: انقل عنصر تم تحديد موضعه نسبيًا باستخدام إزاحات CSS
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> تخبر إزاحات CSS <code>top</code> أو <code>bottom</code> ، وإلى <code>left</code> أو <code>right</code> المتصفح عن مدى إزاحة عنصر متعلق بالمكان الذي سيجلس فيه في التدفق العادي للمستند. يتم تعويض عنصر بعيدًا عن نقطة معينة ، والتي تحرك العنصر بعيدًا عن الجانب المشار إليه (على نحو فعال ، في الاتجاه المعاكس). كما رأيت في التحدي الأخير ، فإن استخدام الإزاحة الأعلى نقل <code>h2</code> الأسفل. وبالمثل ، فإن استخدام إزاحة اليسار يؤدي إلى تحريك عنصر إلى اليمين. <h2 style=";text-align:right;direction:rtl"> تعليمات </h2><section id="instructions"> استخدم إزاحات CSS لنقل وحدات بكسل <code>h2</code> 15 إلى اليمين و 10 بكسل لأعلى. </section><h2 style=";text-align:right;direction:rtl"> اختبارات </h2><section id="tests"><pre style=";text-align:right;direction:rtl"> <code class="language-yml">tests: - text: 'Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.' testString: 'assert($("h2").css("bottom") == "10px", "Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.");' - text: 'Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.' testString: 'assert($("h2").css("left") == "15px", "Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.");'</code> </pre></section><h2 style=";text-align:right;direction:rtl"> بذور التحدي </h2><section id="challengeSeed"><div id="html-seed" style=";text-align:right;direction:rtl"><pre style=";text-align:right;direction:rtl"> <code class="language-html"><head> <style> h2 { position: relative; } </style> </head> <body> <h1>On Being Well-Positioned</h1> <h2>Move me!</h2> <p>I still think the h2 is where it normally sits.</p> </body></code> </pre></div></section><h2 style=";text-align:right;direction:rtl"> حل </h2><section id="solution"><pre style=";text-align:right;direction:rtl"> <code class="language-js">// solution required</code> </pre></section></section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> استخدم إزاحات CSS لنقل وحدات بكسل <code>h2</code> 15 إلى اليمين و 10 بكسل لأعلى. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تستخدم شفرتك إزاحة CSS لوضع <code>h2</code> 10px صعودًا نسبيًا. بعبارة أخرى ، حركه بمقدار 10 بكسل بعيدًا عن <code>bottom</code> المكان الذي يجلس فيه عادةً.
|
||||||
|
testString: 'assert($("h2").css("bottom") == "10px", "Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.");'
|
||||||
|
- text: يجب أن تستخدم شفرتك تخالف CSS لوضع <code>h2</code> 15px نسبيًا نحو اليمين. بعبارة أخرى ، حركه بمقدار 15 بكسل بعيدًا عن <code>left</code> المكان الذي يجلس فيه عادةً.
|
||||||
|
testString: 'assert($("h2").css("left") == "15px", "Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
h2 {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>On Being Well-Positioned</h1>
|
||||||
|
<h2>Move me!</h2>
|
||||||
|
<p>I still think the h2 is where it normally sits.</p>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,79 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a3367417b2b2512ace
|
||||||
|
title: Push Elements Left or Right with the float Property
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: دفع عناصر اليسار أو اليمين مع الخاصية العائمة
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> الأداة المواقع التالية لا فعلا استخدام <code>position</code> ، ولكن يحدد <code>float</code> الملكية عنصر. تتم إزالة العناصر العائمة من التدفق العادي للمستند ودفعها إما إلى <code>left</code> أو <code>right</code> من عنصرها الأصلي المحتوي على العناصر. يتم استخدامه بشكل شائع مع خاصية <code>width</code> لتحديد مقدار المساحة الأفقية التي يتطلبها العنصر المضمن. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> إن العلامات نظرا يعمل كذلك تخطيط عمودين، مع <code>section</code> و <code>aside</code> عناصر بجانب بعضها البعض. امنح العنصر <code>#left</code> <code>float</code> من <code>left</code> <code>#right</code> <code>float</code> على <code>right</code> . </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن يحتوي العنصر ذو المعرف <code>left</code> على قيمة <code>float</code> <code>left</code> .
|
||||||
|
testString: 'assert($("#left").css("float") == "left", "The element with id <code>left</code> should have a <code>float</code> value of <code>left</code>.");'
|
||||||
|
- text: يجب أن يكون للعنصر الذي له <code>right</code> معرف قيمة <code>float</code> من <code>right</code> .
|
||||||
|
testString: 'assert($("#right").css("float") == "right", "The element with id <code>right</code> should have a <code>float</code> value of <code>right</code>.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
#left {
|
||||||
|
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
#right {
|
||||||
|
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
aside, section {
|
||||||
|
padding: 2px;
|
||||||
|
background-color: #ccc;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Welcome!</h1>
|
||||||
|
</header>
|
||||||
|
<section id="left">
|
||||||
|
<h2>Content</h2>
|
||||||
|
<p>Good stuff</p>
|
||||||
|
</section>
|
||||||
|
<aside id="right">
|
||||||
|
<h2>Sidebar</h2>
|
||||||
|
<p>Links</p>
|
||||||
|
</aside>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,72 @@
|
|||||||
|
---
|
||||||
|
id: 587d781c367417b2b2512ac2
|
||||||
|
title: Set the font-size for Multiple Heading Elements
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: اضبط حجم الخط لعناصر العناوين المتعددة
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> يتم استخدام الخاصية <code>font-size</code> لتحديد حجم النص في عنصر معين. يمكن استخدام هذه القاعدة لعناصر متعددة لإنشاء تناسق مرئي للنص على الصفحة. في هذا التحدي ، ستقوم بتعيين القيم لجميع علامات <code>h1</code> إلى <code>h6</code> لموازنة أحجام العناوين. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"><ul style=";text-align:right;direction:rtl"><li style=";text-align:right;direction:rtl"> عيّن <code>font-size</code> لعلامة <code>h1</code> على 68 بكسل. </li><li style=";text-align:right;direction:rtl"> عيّن <code>font-size</code> علامة <code>h2</code> إلى 52 بكسل. </li><li style=";text-align:right;direction:rtl"> <code>font-size</code> علامة <code>h3</code> إلى 40 بكسل. </li><li style=";text-align:right;direction:rtl"> عيّن <code>font-size</code> علامة <code>h4</code> على 32 بكسل. </li><li style=";text-align:right;direction:rtl"> عيّن <code>font-size</code> علامة <code>h5</code> على 21 بكسل. </li><li style=";text-align:right;direction:rtl"> اضبط <code>font-size</code> علامة <code>h6</code> على 14 بكسل. </li></ul></section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تقوم التعليمات البرمجية بتعيين الخاصية <code>font-size</code> لعلامة <code>h1</code> إلى 68 بكسل.
|
||||||
|
testString: 'assert($("h1").css("font-size") == "68px", "Your code should set the <code>font-size</code> property for the <code>h1</code> tag to 68 pixels.");'
|
||||||
|
- text: يجب أن تقوم التعليمات البرمجية بتعيين الخاصية <code>font-size</code> للعلامة <code>h2</code> إلى 52 بكسل.
|
||||||
|
testString: 'assert($("h2").css("font-size") == "52px", "Your code should set the <code>font-size</code> property for the <code>h2</code> tag to 52 pixels.");'
|
||||||
|
- text: يجب أن تقوم التعليمات البرمجية بتعيين الخاصية <code>font-size</code> لعلامة <code>h3</code> إلى 40 بكسل.
|
||||||
|
testString: 'assert($("h3").css("font-size") == "40px", "Your code should set the <code>font-size</code> property for the <code>h3</code> tag to 40 pixels.");'
|
||||||
|
- text: يجب أن تقوم التعليمات البرمجية بتعيين الخاصية <code>font-size</code> لعلامة <code>h4</code> إلى 32 بكسل.
|
||||||
|
testString: 'assert($("h4").css("font-size") == "32px", "Your code should set the <code>font-size</code> property for the <code>h4</code> tag to 32 pixels.");'
|
||||||
|
- text: يجب أن تقوم التعليمات البرمجية بتعيين الخاصية <code>font-size</code> لعلامة <code>h5</code> إلى 21 بكسل.
|
||||||
|
testString: 'assert($("h5").css("font-size") == "21px", "Your code should set the <code>font-size</code> property for the <code>h5</code> tag to 21 pixels.");'
|
||||||
|
- text: يجب أن تقوم التعليمات البرمجية بتعيين الخاصية <code>font-size</code> لعلامة <code>h6</code> إلى 14 بكسل.
|
||||||
|
testString: 'assert($("h6").css("font-size") == "14px", "Your code should set the <code>font-size</code> property for the <code>h6</code> tag to 14 pixels.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<h1>This is h1 text</h1>
|
||||||
|
<h2>This is h2 text</h2>
|
||||||
|
<h3>This is h3 text</h3>
|
||||||
|
<h4>This is h4 text</h4>
|
||||||
|
<h5>This is h5 text</h5>
|
||||||
|
<h6>This is h6 text</h6>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,56 @@
|
|||||||
|
---
|
||||||
|
id: 587d781c367417b2b2512ac4
|
||||||
|
title: Set the font-size of Paragraph Text
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: قم بتعيين حجم خط نص الفقرة
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> لا تقتصر خاصية <code>font-size</code> في CSS على العناوين ، بل يمكن تطبيقها على أي عنصر يحتوي على نص. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> غيّر قيمة الخاصية <code>font-size</code> للفقرة إلى 16 بكسل لجعلها أكثر وضوحًا. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن يكون <code>font-size</code> علامة <code>p</code> الخاصة بك 16 بكسل.
|
||||||
|
testString: 'assert($("p").css("font-size") == "16px", "Your <code>p</code> tag should have a <code>font-size</code> of 16 pixels.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
p {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,90 @@
|
|||||||
|
---
|
||||||
|
id: 587d781c367417b2b2512ac3
|
||||||
|
title: Set the font-weight for Multiple Heading Elements
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: اضبط وزن الخط لعناصر العناوين المتعددة
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> يمكنك تعيين <code>font-size</code> كل علامة عنوان في التحدي الأخير ، هنا ستقوم بتعديل <code>font-weight</code> . تحدد الخاصية <code>font-weight</code> كيفية ظهور أحرف سميكة أو رقيقة في قسم من النص. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"><ul style=";text-align:right;direction:rtl"><li style=";text-align:right;direction:rtl"> <code>font-weight</code> <code>h1</code> لعلامة <code>h1</code> على 800. </li><li style=";text-align:right;direction:rtl"> <code>font-weight</code> لعلامة <code>h2</code> على 600. </li><li style=";text-align:right;direction:rtl"> <code>font-weight</code> <code>h3</code> لعلامة <code>h3</code> على 500. </li><li style=";text-align:right;direction:rtl"> <code>font-weight</code> <code>h4</code> لعلامة <code>h4</code> على 400. </li><li style=";text-align:right;direction:rtl"> <code>font-weight</code> <code>h5</code> لعلامة <code>h5</code> على 300. </li><li style=";text-align:right;direction:rtl"> <code>font-weight</code> لعلامة <code>h6</code> على 200. </li></ul></section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تقوم التعليمات البرمجية بتعيين الخاصية <code>font-weight</code> لعلامة <code>h1</code> إلى 800.
|
||||||
|
testString: 'assert($("h1").css("font-weight") == "800", "Your code should set the <code>font-weight</code> property for the <code>h1</code> tag to 800.");'
|
||||||
|
- text: يجب أن تقوم التعليمات البرمجية بتعيين الخاصية <code>font-weight</code> لعلامة <code>h2</code> إلى 600.
|
||||||
|
testString: 'assert($("h2").css("font-weight") == "600", "Your code should set the <code>font-weight</code> property for the <code>h2</code> tag to 600.");'
|
||||||
|
- text: يجب أن تقوم التعليمات البرمجية بتعيين الخاصية <code>font-weight</code> لعلامة <code>h3</code> إلى 500.
|
||||||
|
testString: 'assert($("h3").css("font-weight") == "500", "Your code should set the <code>font-weight</code> property for the <code>h3</code> tag to 500.");'
|
||||||
|
- text: يجب أن تقوم التعليمات البرمجية بتعيين الخاصية <code>font-weight</code> لعلامة <code>h4</code> إلى 400.
|
||||||
|
testString: 'assert($("h4").css("font-weight") == "400", "Your code should set the <code>font-weight</code> property for the <code>h4</code> tag to 400.");'
|
||||||
|
- text: يجب أن تقوم التعليمات البرمجية بتعيين الخاصية <code>font-weight</code> لعلامة <code>h5</code> إلى 300.
|
||||||
|
testString: 'assert($("h5").css("font-weight") == "300", "Your code should set the <code>font-weight</code> property for the <code>h5</code> tag to 300.");'
|
||||||
|
- text: يجب أن تقوم <code>font-weight</code> بتعيين الخاصية <code>font-weight</code> للعلامة <code>h6</code> إلى 200.
|
||||||
|
testString: 'assert($("h6").css("font-weight") == "200", "Your code should set the <code>font-weight</code> property for the <code>h6</code> tag to 200.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h1 {
|
||||||
|
font-size: 68px;
|
||||||
|
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 52px;
|
||||||
|
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 40px;
|
||||||
|
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
font-size: 32px;
|
||||||
|
|
||||||
|
}
|
||||||
|
h5 {
|
||||||
|
font-size: 21px;
|
||||||
|
|
||||||
|
}
|
||||||
|
h6 {
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h1>This is h1 text</h1>
|
||||||
|
<h2>This is h2 text</h2>
|
||||||
|
<h3>This is h3 text</h3>
|
||||||
|
<h4>This is h4 text</h4>
|
||||||
|
<h5>This is h5 text</h5>
|
||||||
|
<h6>This is h6 text</h6>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,57 @@
|
|||||||
|
---
|
||||||
|
id: 587d781d367417b2b2512ac5
|
||||||
|
title: Set the line-height of Paragraphs
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: قم بتعيين ارتفاع سطر الفقرات
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> توفر CSS خاصية <code>line-height</code> لتغيير ارتفاع كل سطر في كتلة نص. كما يوحي الاسم ، فإنه يغير مقدار المساحة العمودية التي يحصل عليها كل سطر من النص. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> أضف خاصية <code>line-height</code> إلى علامة <code>p</code> واضبطها على 25 بكسل. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تحدد الشفرة <code>line-height</code> علامة <code>p</code> إلى 25 بكسل.
|
||||||
|
testString: 'assert($("p").css("line-height") == "25px", "Your code should set the <code>line-height</code> of the <code>p</code> tag to 25 pixels.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,84 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a9367417b2b2512ae9
|
||||||
|
title: Use a Bezier Curve to Move a Graphic
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: استخدم منحنى Bezier لتحريك رسم
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> ناقش تحدٍّ سابق الكلمة الرئيسية <code>ease-out</code> التي تصف تغييرًا في الرسوم المتحركة يُسرع أولاً ثم يتباطأ في نهاية الرسم المتحرك. على اليمين ، يظهر الفرق بين الكلمة الرئيسية <code>ease-out</code> (للعنصر الأزرق) والكلمة الرئيسية <code>linear</code> (للعنصر الأحمر). يمكن تحقيق تقدم الرسوم المتحركة مماثلة للكلمة الرئيسية <code>ease-out</code> خلال استخدام وظيفة منحنى بيزييه مكعب مخصصة. بشكل عام ، يؤدي تغيير نقاط ربط <code>p1</code> و <code>p2</code> إلى إنشاء منحنيات Bezier مختلفة ، والتي تتحكم في كيفية تقدم الحركة عبر الزمن. في ما يلي مثال لمنحنى بيزيير باستخدام قيم لتقليد نمط التخفيف: <code>animation-timing-function: cubic-bezier(0, 0, 0.58, 1);</code> تذكر أن جميع دالات <code>cubic-bezier</code> تبدأ بـ <code>p0</code> في (0، 0) وتنتهي بـ <code>p3</code> عند (1، 1). في هذا المثال ، يتحرك المنحنى بشكل أسرع خلال المحور ص (يبدأ عند 0 ، وينتقل إلى قيمة <code>p1</code> y من 0 ، ثم ينتقل إلى قيمة <code>p2</code> y 1) من تحركه عبر المحور X (0 إلى البداية ، ثم 0 لـ <code>p1</code> ، حتى 0.58 لـ <code>p2</code> ). نتيجة لذلك ، يتقدم التغيير في العنصر المتحرك بشكل أسرع من وقت الرسوم المتحركة لتلك الشريحة. باتجاه نهاية المنحنى ، تنعكس العلاقة بين التغير في قيم x و y ، حيث تتحرك قيمة y من 1 إلى 1 (بدون تغيير) ، وتتحرك قيم x من 0.58 إلى 1 ، مما يجعل تغيرات الرسوم المتحركة تقدمًا أبطأ مقارنة مدة الرسوم المتحركة. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> لمعرفة تأثير هذا المنحنى Bezier أثناء العمل ، قم بتغيير <code>animation-timing-function</code> للعنصر ذي <code>red</code> إلى وظيفة <code>cubic-bezier</code> مع تعيين قيم x1 و y1 و x2 و y2 على التوالي إلى 0 ، 0 ، 0.58 ، 1 هذا سيجعل كلا العناصر يتقدمان من خلال الرسوم المتحركة بالمثل. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تكون قيمة خاصية <code>animation-timing-function</code> العنصر مع معرف <code>red</code> دالة <code>cubic-bezier</code> مع تعيين قيم x1 و y1 و x2 و y2 على التوالي إلى 0 ، 0 ، 0.58 ، 1.
|
||||||
|
testString: 'assert($("#red").css("animation-timing-function") == "cubic-bezier(0, 0, 0.58, 1)", "The value of the <code>animation-timing-function</code> property of the element with the id <code>red</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .");'
|
||||||
|
- text: يجب ألا يحتوي العنصر ذو معرف <code>red</code> <code>animation-timing-function</code> خاصية <code>animation-timing-function</code> الخطية.
|
||||||
|
testString: 'assert($("#red").css("animation-timing-function") !== "linear", "The element with the id <code>red</code> should no longer have the <code>animation-timing-function</code> property of linear.");'
|
||||||
|
- text: يجب ألا تتغير قيمة خاصية <code>animation-timing-function</code> للعنصر ذي المعرف <code>blue</code> .
|
||||||
|
testString: 'assert($("#blue").css("animation-timing-function") == "ease-out", "The value of the <code>animation-timing-function</code> property for the element with the id <code>blue</code> should not change.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.balls{
|
||||||
|
border-radius: 50%;
|
||||||
|
position: fixed;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
margin-top: 50px;
|
||||||
|
animation-name: bounce;
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
#red {
|
||||||
|
background: red;
|
||||||
|
left: 27%;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
}
|
||||||
|
#blue {
|
||||||
|
background: blue;
|
||||||
|
left: 56%;
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
}
|
||||||
|
@keyframes bounce {
|
||||||
|
0% {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: 249px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="balls" id= "red"></div>
|
||||||
|
<div class="balls" id= "blue"></div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,77 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a5367417b2b2512ad7
|
||||||
|
title: Use a CSS Linear Gradient to Create a Striped Element
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: استخدم CSS Linear Gradient لإنشاء عنصر مخطط
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> تتشابه دالة <code>repeating-linear-gradient()</code> إلى حد كبير مع <code>linear-gradient()</code> مع الفارق الرئيسي الذي يكرر نمط التدرج المحدد. ويقبل <code>repeating-linear-gradient()</code> مجموعة متنوعة من القيم ، ولكن من أجل البساطة ، ستعمل مع قيم زاوية وقيم توقف اللون في هذا التحدي. قيمة الزاوية هي اتجاه التدرج. تشبه نقاط توقف اللون قيم العرض التي تشير إلى مكان حدوث النقل ، ويتم تقديمها بنسبة مئوية أو عدد من وحدات البكسل. في المثال الموضحة في محرر التعليمة البرمجية ، يبدأ التدرج باللون <code>yellow</code> عند 0 بكسل والذي يمتزج باللون <code>blue</code> الثاني على بعد 40 بكسل من البداية. ونظرًا لأن توقف اللون التالي يبلغ 40 بكسل أيضًا ، يتغير التدرج فورًا إلى اللون <code>green</code> الثالث ، الذي يمتزج نفسه مع قيمة اللون الرابع <code>red</code> حيث أن هذا هو 80 بكسل بعيدًا عن بداية التدرج. في هذا المثال ، يساعد على التفكير في توقف اللون كزوجين حيث يتم مزج كل لونين معًا. <code>0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px</code> إذا كان كل لونين من قيم إيقاف اللون هما نفس اللون ، فإن المزج ليس ملحوظًا لأنه بين نفس اللون ، متبوعًا بفترة انتقال صلبة إلى اللون التالي ، حتى ينتهي بك الأمر مع المشارب. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> جعل خطوط عن طريق تغيير <code>repeating-linear-gradient()</code> لاستخدام زاوية التدرج من <code>45deg</code> ، ثم تعيين أول لونين توقف عن اللون <code>yellow</code> ، وأخيرا توقف اللونين الثاني إلى اللون <code>black</code> . </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تكون زاوية <code>repeating-linear-gradient()</code> 45 درجة.
|
||||||
|
testString: 'assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi), "The angle of the <code>repeating-linear-gradient()</code> should be 45deg.");'
|
||||||
|
- text: يجب ألا تكون زاوية <code>repeating-linear-gradient()</code> 90 درجة
|
||||||
|
testString: 'assert(!code.match(/90deg/gi), "The angle of the <code>repeating-linear-gradient()</code> should no longer be 90deg");'
|
||||||
|
- text: يجب أن يكون لون التوقف عند 0 بكسل <code>yellow</code> .
|
||||||
|
testString: 'assert(code.match(/yellow\s+?0(px)?/gi), "The color stop at 0 pixels should be <code>yellow</code>.");'
|
||||||
|
- text: يجب أن تكون درجة اللون الواحدة عند 40 بكسل <code>yellow</code> .
|
||||||
|
testString: 'assert(code.match(/yellow\s+?40px/gi), "One color stop at 40 pixels should be <code>yellow</code>.");'
|
||||||
|
- text: يجب أن يكون اللون الثاني في 40 بكسل <code>black</code> .
|
||||||
|
testString: 'assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi), "The second color stop at 40 pixels should be <code>black</code>.");'
|
||||||
|
- text: يجب أن تكون نقطة توقف اللون الأخيرة عند 80 بكسل <code>black</code> .
|
||||||
|
testString: 'assert(code.match(/black\s+?80px/gi), "The last color stop at 80 pixels should be <code>black</code>.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
|
||||||
|
div{
|
||||||
|
border-radius: 20px;
|
||||||
|
width: 70%;
|
||||||
|
height: 400px;
|
||||||
|
margin: 50 auto;
|
||||||
|
background: repeating-linear-gradient(
|
||||||
|
90deg,
|
||||||
|
yellow 0px,
|
||||||
|
blue 40px,
|
||||||
|
green 40px,
|
||||||
|
red 80px
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div></div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,67 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a7367417b2b2512ae0
|
||||||
|
title: Use CSS Animation to Change the Hover State of a Button
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: استخدم CSS Animation لتغيير حالة Hover لزر
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> يمكنك استخدام <code>@keyframes</code> لتغيير لون زر في حالة التمرير الخاصة به. في ما يلي مثال على تغيير عرض الصورة على مؤشر الماوس: <blockquote style=";text-align:right;direction:rtl"> <نمط> <br> img: hover { <br> اسم الرسوم المتحركة: العرض ؛ <br> مدة الحركة: 500 مللي ثانية ؛ <br> } <br><br> keyframes width { <br> 100٪ { <br> العرض: 40 بكسل <br> } <br> } <br> </ النمط> <br><br> <img src = "https://bit.ly/smallgooglelogo" alt = "شعار Google" /> </blockquote></section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> لاحظ أن <code>ms</code> يقف للمللي ثانية ، حيث 1000ms تساوي 1s. استخدم <code>@keyframes</code> لتغيير <code>background-color</code> عنصر <code>button</code> بحيث يصبح <code>#4791d0</code> عندما <code>#4791d0</code> المستخدم فوقها. يجب أن يكون لقاعدة <code>@keyframes</code> إدخال <code>100%</code> . </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تستخدم قاعدةkeyframes لون خلفية <code>animation-name</code> .
|
||||||
|
testString: 'assert(code.match(/@keyframes\s+?background-color\s*?{/g), "The @keyframes rule should use the <code>animation-name</code> background-color.");'
|
||||||
|
- text: 'يجب أن تكون هناك قاعدة واحدة تحت <code>@keyframes</code> تغير <code>background-color</code> إلى <code>#4791d0</code> بنسبة 100٪.'
|
||||||
|
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi), "There should be one rule under <code>@keyframes</code> that changes the <code>background-color</code> to <code>#4791d0</code> at 100%.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
button {
|
||||||
|
border-radius: 5px;
|
||||||
|
color: white;
|
||||||
|
background-color: #0F5897;
|
||||||
|
padding: 5px 10px 8px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
animation-name: background-color;
|
||||||
|
animation-duration: 500ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<button>Register</button>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,65 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a6367417b2b2512adb
|
||||||
|
title: Use the CSS Transform Property skewX to Skew an Element Along the X-Axis
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: استخدم skewX خاصية تحويل Transform إلى Skew an Element على طول X-Axis
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> إن الوظيفة التالية لخاصية <code>transform</code> هي <code>skewX()</code> ، التي <code>skewX()</code> العنصر المحدد بمحاذاة X (الأفقي) بدرجة معينة. تحرف التعليمة البرمجية التالية عنصر الفقرة بمقدار -32 درجة على طول المحور X. <blockquote style=";text-align:right;direction:rtl"> ص { <br> تحويل: skewX (-32deg) ؛ <br> } </blockquote></section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> انحرف العنصر بمعرف <code>bottom</code> بمقدار 24 درجة على طول المحور السيني باستخدام خاصية <code>transform</code> . </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب تحريف العنصر ذو <code>bottom</code> المعرّف بمقدار 24 درجة على طول المحور السيني.
|
||||||
|
testString: 'assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g), "The element with id <code>bottom</code> should be skewed by 24 degrees along its X-axis.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
width: 70%;
|
||||||
|
height: 100px;
|
||||||
|
margin: 50px auto;
|
||||||
|
}
|
||||||
|
#top {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
#bottom {
|
||||||
|
background-color: blue;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id="top"></div>
|
||||||
|
<div id="bottom"></div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,66 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a6367417b2b2512adc
|
||||||
|
title: Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: استخدم خاصية تحويل CSS skewY إلى Skew an Element على طول المحور ص
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> وبالنظر إلى أن وظيفة <code>skewX()</code> العنصر المحدد على طول المحور X بواسطة درجة معينة ، فلا غرابة في أن الخاصية <code>skewY()</code> عنصرًا على المحور Y (الرأسي). </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> إمزج العنصر بمعرف <code>top</code> -10 درجات على طول المحور ص باستخدام خاصية <code>transform</code> . </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن يتم تحريف العنصر ذو <code>top</code> الهوية بمقدار -10 درجات على طول المحور Y.
|
||||||
|
testString: 'assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g), "The element with id <code>top</code> should be skewed by -10 degrees along its Y-axis.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
width: 70%;
|
||||||
|
height: 100px;
|
||||||
|
margin: 50px auto;
|
||||||
|
}
|
||||||
|
#top {
|
||||||
|
background-color: red;
|
||||||
|
|
||||||
|
}
|
||||||
|
#bottom {
|
||||||
|
background-color: blue;
|
||||||
|
transform: skewX(24deg);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id="top"></div>
|
||||||
|
<div id="bottom"></div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,74 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a5367417b2b2512ad9
|
||||||
|
title: Use the CSS Transform scale Property to Change the Size of an Element
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: استخدم خاصية مقياس تحويل CSS لتغيير حجم عنصر
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> لتغيير مقياس عنصر ما ، يحتوي CSS على خاصية <code>transform</code> ، إلى جانب الدالة <code>scale()</code> . مثال الكود التالي يضاعف حجم جميع عناصر الفقرة في الصفحة: <blockquote style=";text-align:right;direction:rtl"> ص { <br> تحويل: مقياس (2)؛ <br> } </blockquote></section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> زيادة حجم العنصر مع معرف <code>ball2</code> إلى 1.5 مرة حجمها الأصلي. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: '<code>#ball2</code> خاصية <code>transform</code> لـ <code>#ball2</code> حجمها 1.5 مرة حجمها.'
|
||||||
|
testString: 'assert(code.match(/#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi), "Set the <code>transform</code> property for <code>#ball2</code> to scale it 1.5 times its size.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.ball {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin: 50 auto;
|
||||||
|
position: fixed;
|
||||||
|
background: linear-gradient(
|
||||||
|
35deg,
|
||||||
|
#ccffff,
|
||||||
|
#ffcccc
|
||||||
|
);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
#ball1 {
|
||||||
|
left: 20%;
|
||||||
|
}
|
||||||
|
#ball2 {
|
||||||
|
left: 65%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="ball" id= "ball1"></div>
|
||||||
|
<div class="ball" id= "ball2"></div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,65 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a5367417b2b2512ada
|
||||||
|
title: Use the CSS Transform scale Property to Scale an Element on Hover
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: استخدم خاصية مقياس تحويل CSS لقياس عنصر على التحويم
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> تحتوي خاصية <code>transform</code> على مجموعة متنوعة من الوظائف التي تسمح لك بتوسيع نطاق عناصرك أو تحريكها أو تدويرها أو إمالتها ، إلخ. عند استخدامها مع فئات زائفة مثل <code>:hover</code> الذي يحدد حالة معينة لعنصر ما ، يمكن لعقار <code>transform</code> بسهولة إضافة تفاعلية إلى العناصر الخاصة بك. في ما يلي مثال لقياس عناصر الفقرة إلى 2.1 مرة حجمها الأصلي عندما يمرر المستخدم فوقها: <blockquote style=";text-align:right;direction:rtl"> p: hover { <br> transform: scale (2.1)؛ <br> } </blockquote></section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> إضافة قاعدة CSS ل <code>hover</code> حالة <code>div</code> واستخدام <code>transform</code> الملكية لقياس <code>div</code> عنصر إلى 1.1 مرات حجمها الأصلي عند مرور مستخدم أكثر من ذلك. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن يتراوح حجم عنصر <code>div</code> 1.1 مرة عندما يمرر المستخدم فوقها.
|
||||||
|
testString: 'assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi), "The size of the <code>div</code> element should scale 1.1 times when the user hovers over it.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
width: 70%;
|
||||||
|
height: 100px;
|
||||||
|
margin: 50px auto;
|
||||||
|
background: linear-gradient(
|
||||||
|
53deg,
|
||||||
|
#ccfffc,
|
||||||
|
#ffcccf
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div></div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,88 @@
|
|||||||
|
---
|
||||||
|
id: 587d781a367417b2b2512ab9
|
||||||
|
title: Use the em Tag to Italicize Text
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: استخدم علامة em لإضفاء طابع مائل على النص
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> للتأكيد على النص ، يمكنك استخدام علامة <code>em</code> . يعرض هذا النص <code>font-style: italic;</code> ، حيث يقوم المستعرض بتطبيق CSS الخاص <code>font-style: italic;</code> إلى العنصر. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> التفاف علامة <code>em</code> حول محتويات علامة الفقرة لاعطائها التركيز. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تضيف الشفرة علامة <code>em</code> إلى الترميز.
|
||||||
|
testString: 'assert($("em").length == 1, "Your code should add an <code>em</code> tag to the markup.");'
|
||||||
|
- text: يجب أن تلتف العلامة <code>em</code> حول محتويات علامة <code>p</code> ولكنها لا تحمل علامة <code>p</code> نفسها.
|
||||||
|
testString: 'assert($("p").children().length == 1 && $("em").children().length == 2, "The <code>em</code> tag should wrap around the contents of the <code>p</code> tag but not the <code>p</code> tag itself.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,90 @@
|
|||||||
|
---
|
||||||
|
id: 587d781b367417b2b2512aba
|
||||||
|
title: Use the s Tag to Strikethrough Text
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: استخدم علامة s إلى نص يتوسطه خط
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> لإنشاء خط يتوسطه النص ، وهو عندما يقطع خط أفقي عبر الأحرف ، يمكنك استخدام العلامة <code>s</code> . يُظهر أن جزءًا من النص لم يعد صالحًا. باستخدام علامة <code>s</code> ، يقوم المستعرض بتطبيق CSS من <code>text-decoration: line-through;</code> إلى العنصر. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> التفاف <code>s</code> الكود حول "جوجل" داخل <code>h4</code> العلامة ثم قم بإضافة كلمة الأبجدية بجانبه، والذي لا ينبغي أن يكون تنسيق يتوسطه خط. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تضيف الشفرة علامة <code>s</code> واحدة إلى الترميز.
|
||||||
|
testString: 'assert($("s").length == 1, "Your code should add one <code>s</code> tag to the markup.");'
|
||||||
|
- text: يجب أن تلتف العلامة <code>s</code> حول نص Google في علامة <code>h4</code> . يجب ألا يحتوي على الكلمة الأبجدية.
|
||||||
|
testString: 'assert($("s").text().match(/Google/gi) && !$("s").text().match(/Alphabet/gi), "A <code>s</code> tag should wrap around the Google text in the <code>h4</code> tag. It should not contain the word Alphabet.");'
|
||||||
|
- text: قم بتضمين الكلمة الأبجدية في علامة <code>h4</code> ، بدون تنسيق يتوسطه خط.
|
||||||
|
testString: 'assert($("h4").html().match(/Alphabet/gi), "Include the word Alphabet in the <code>h4</code> tag, without strikethrough formatting.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,90 @@
|
|||||||
|
---
|
||||||
|
id: 587d781a367417b2b2512ab7
|
||||||
|
title: Use the strong Tag to Make Text Bold
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: استخدم العلامة القوية لجعل النص غامقًا
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> لجعل النص عريضًا ، يمكنك استخدام العلامة <code>strong</code> . وغالبًا ما يستخدم هذا للفت الانتباه إلى النص ويرمز إلى أنه مهم. باستخدام العلامة <code>strong</code> ، يطبق المستعرض CSS <code>font-weight: bold;</code> إلى العنصر. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> لف علامة <code>strong</code> حول "جامعة ستانفورد" داخل علامة <code>p</code> . </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تضيف الشفرة علامة واحدة <code>strong</code> إلى الترميز.
|
||||||
|
testString: 'assert($("strong").length == 1, "Your code should add one <code>strong</code> tag to the markup.");'
|
||||||
|
- text: يجب أن تكون العلامة <code>strong</code> داخل علامة <code>p</code> .
|
||||||
|
testString: 'assert($("p").children("strong").length == 1, "The <code>strong</code> tag should be inside the <code>p</code> tag.");'
|
||||||
|
- text: يجب أن تلتف العلامة <code>strong</code> حول عبارة "جامعة ستانفورد".
|
||||||
|
testString: 'assert($("strong").text().match(/^Stanford University$/gi), "The <code>strong</code> tag should wrap around the words "Stanford University".");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,96 @@
|
|||||||
|
---
|
||||||
|
id: 587d781c367417b2b2512ac0
|
||||||
|
title: Use the text-transform Property to Make Text Uppercase
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: ''
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
undefined
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
undefined
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: ''
|
||||||
|
testString: 'assert($("h4").css("text-transform") === "uppercase", "The <code>h4</code> text should be uppercase.");'
|
||||||
|
- text: ''
|
||||||
|
testString: 'assert(($("h4").text() !== $("h4").text().toUpperCase()), "The original text of the h4 should not be changed.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgba(45, 45, 45, 0.1);
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 27px;
|
||||||
|
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
#thumbnail {
|
||||||
|
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard" id="thumbnail">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Alphabet</h4>
|
||||||
|
<hr>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,88 @@
|
|||||||
|
---
|
||||||
|
id: 587d781a367417b2b2512ab8
|
||||||
|
title: Use the u Tag to Underline Text
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: ''
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
undefined
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
undefined
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: ''
|
||||||
|
testString: 'assert($("u").length === 1, "Your code should add a <code>u</code> tag to the markup.");'
|
||||||
|
- text: ''
|
||||||
|
testString: 'assert($("u").text() === "Ph.D. students", "The <code>u</code> tag should wrap around the text "Ph.D. students".");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at <strong>Stanford University</strong>.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,86 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9aedf08823
|
||||||
|
title: Add a Negative Margin to an Element
|
||||||
|
challengeType: 0
|
||||||
|
guideUrl: 'https://arabic.freecodecamp.org/guide/certificates/add-a-negative-margin-to-an-element'
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: أضف هامشًا سلبيًا إلى عنصر
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> عنصر في <code>margin</code> يتحكم في مقدار المسافة بين عنصر في <code>border</code> والعناصر المحيطة بها. إذا قمت بتعيين <code>margin</code> العنصر إلى قيمة سالبة ، فسيزداد حجم العنصر. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> حاول تعيين <code>margin</code> إلى قيمة سالبة مثل القيمة للمربع الأحمر. غيّر <code>margin</code> المربع الأزرق إلى <code>-15px</code> ، حتى يملأ العرض الأفقي الكامل للمربع الأصفر حوله. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تعطي فئة <code>blue-box</code> عناصر - <code>-15px</code> من <code>margin</code> .
|
||||||
|
testString: 'assert($(".blue-box").css("margin-top") === "-15px", "Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.injected-text {
|
||||||
|
margin-bottom: -25px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
border-style: solid;
|
||||||
|
border-color: black;
|
||||||
|
border-width: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow-box {
|
||||||
|
background-color: yellow;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-box {
|
||||||
|
background-color: crimson;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
margin: -15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-box {
|
||||||
|
background-color: blue;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="box yellow-box">
|
||||||
|
<h5 class="box red-box">padding</h5>
|
||||||
|
<h5 class="box blue-box">padding</h5>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,108 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9bedf08813
|
||||||
|
title: Add Borders Around Your Elements
|
||||||
|
challengeType: 0
|
||||||
|
guideUrl: 'https://arabic.freecodecamp.org/guide/certificates/add-borders-around-your-elements'
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: أضف حدود حول عناصرك
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> تحتوي حدود CSS على خصائص مثل <code>style</code> <code>color</code> <code>width</code> على سبيل المثال ، إذا أردنا إنشاء حد أحمر يبلغ 5 بيكسل حول عنصر HTML ، فيمكننا استخدام هذا الفصل الدراسي: <blockquote style=";text-align:right;direction:rtl"> <نمط> <br> .thin-red-border { <br> لون الحدود: أحمر. <br> border-width: 5px؛ <br> نمط الحدود: صلب ؛ <br> } <br> </ النمط> </blockquote></section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
undefined
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن يكون لعنصر <code>img</code> الخاص بك فئة <code>smaller-image</code> .
|
||||||
|
testString: 'assert($("img").hasClass("smaller-image"), "Your <code>img</code> element should have the class <code>smaller-image</code>.");'
|
||||||
|
- text: ''
|
||||||
|
testString: 'assert($("img").hasClass("thick-green-border"), "Your <code>img</code> element should have the class <code>thick-green-border</code>.");'
|
||||||
|
- text: امنح صورتك عرضًا بحدود 10 <code>10px</code> .
|
||||||
|
testString: 'assert($("img").hasClass("thick-green-border") && parseInt($("img").css("border-top-width"), 10) >= 8 && parseInt($("img").css("border-top-width"), 10) <= 12, "Give your image a border width of <code>10px</code>.");'
|
||||||
|
- text: امنح صورتك نمطًا حدوديًا <code>solid</code> .
|
||||||
|
testString: 'assert($("img").css("border-right-style") === "solid", "Give your image a border style of <code>solid</code>.");'
|
||||||
|
- text: ''
|
||||||
|
testString: 'assert($("img").css("border-left-color") === "rgb(0, 128, 0)", "The border around your <code>img</code> element should be green.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smaller-image {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<h2 class="red-text">CatPhotoApp</h2>
|
||||||
|
<main>
|
||||||
|
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||||
|
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,92 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1248bd9aedf08824
|
||||||
|
title: Add Different Margins to Each Side of an Element
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: ''
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
undefined
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
undefined
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: لديك <code>blue-box</code> الطبقة يجب أن تعطي الجزء العلوي من عناصر <code>40px</code> من <code>margin</code> .
|
||||||
|
testString: 'assert($(".blue-box").css("margin-top") === "40px", "Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.");'
|
||||||
|
- text: ''
|
||||||
|
testString: 'assert($(".blue-box").css("margin-right") === "20px", "Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.");'
|
||||||
|
- text: ''
|
||||||
|
testString: 'assert($(".blue-box").css("margin-bottom") === "20px", "Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.");'
|
||||||
|
- text: يجب أن تعطيك فئة <code>blue-box</code> يمين العناصر <code>40px</code> من <code>margin</code> .
|
||||||
|
testString: 'assert($(".blue-box").css("margin-left") === "40px", "Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.injected-text {
|
||||||
|
margin-bottom: -25px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
border-style: solid;
|
||||||
|
border-color: black;
|
||||||
|
border-width: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow-box {
|
||||||
|
background-color: yellow;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-box {
|
||||||
|
background-color: crimson;
|
||||||
|
color: #fff;
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-right: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-box {
|
||||||
|
background-color: blue;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h5 class="injected-text">margin</h5>
|
||||||
|
|
||||||
|
<div class="box yellow-box">
|
||||||
|
<h5 class="box red-box">padding</h5>
|
||||||
|
<h5 class="box blue-box">padding</h5>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,93 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9aedf08824
|
||||||
|
title: Add Different Padding to Each Side of an Element
|
||||||
|
challengeType: 0
|
||||||
|
guideUrl: 'https://arabic.freecodecamp.org/guide/certificates/add-different-padding-to-each-side-of-an-element'
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: ''
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
undefined
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
undefined
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تعطي <code>40px</code> في <code>blue-box</code> أعلى العناصر <code>40px</code> من <code>padding</code> .
|
||||||
|
testString: 'assert($(".blue-box").css("padding-top") === "40px", "Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.");'
|
||||||
|
- text: يجب أن تعطي صفحتك <code>blue-box</code> حق العناصر المكوّنة من 20 <code>20px</code> من <code>padding</code> .
|
||||||
|
testString: 'assert($(".blue-box").css("padding-right") === "20px", "Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.");'
|
||||||
|
- text: يجب أن تعطي صفحتك <code>blue-box</code> الجزء السفلي من العناصر 20 <code>20px</code> من <code>padding</code> .
|
||||||
|
testString: 'assert($(".blue-box").css("padding-bottom") === "20px", "Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.");'
|
||||||
|
- text: ''
|
||||||
|
testString: 'assert($(".blue-box").css("padding-left") === "40px", "Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.injected-text {
|
||||||
|
margin-bottom: -25px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
border-style: solid;
|
||||||
|
border-color: black;
|
||||||
|
border-width: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow-box {
|
||||||
|
background-color: yellow;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-box {
|
||||||
|
background-color: crimson;
|
||||||
|
color: #fff;
|
||||||
|
padding-top: 40px;
|
||||||
|
padding-right: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
padding-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-box {
|
||||||
|
background-color: blue;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h5 class="injected-text">margin</h5>
|
||||||
|
|
||||||
|
<div class="box yellow-box">
|
||||||
|
<h5 class="box red-box">padding</h5>
|
||||||
|
<h5 class="box blue-box">padding</h5>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,108 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9aedf08814
|
||||||
|
title: Add Rounded Corners with border-radius
|
||||||
|
challengeType: 0
|
||||||
|
guideUrl: 'https://arabic.freecodecamp.org/guide/certificates/add-rounded-corners-a-border-radius'
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: ''
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
undefined
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
undefined
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: ''
|
||||||
|
testString: 'assert($("img").hasClass("thick-green-border"), "Your image element should have the class "thick-green-border".");'
|
||||||
|
- text: ''
|
||||||
|
testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 8, "Your image should have a border radius of <code>10px</code>");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thick-green-border {
|
||||||
|
border-color: green;
|
||||||
|
border-width: 10px;
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smaller-image {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<h2 class="red-text">CatPhotoApp</h2>
|
||||||
|
<main>
|
||||||
|
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||||
|
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,87 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9aedf08822
|
||||||
|
title: Adjust the Margin of an Element
|
||||||
|
challengeType: 0
|
||||||
|
guideUrl: 'https://arabic.freecodecamp.org/guide/certificates/adjust-the-margin-of-an-element'
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: ضبط هامش عنصر
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> عنصر في <code>margin</code> يتحكم في مقدار المسافة بين عنصر في <code>border</code> والعناصر المحيطة بها. هنا ، يمكننا ملاحظة أن الصندوق الأزرق والمربع الأحمر متداخلان داخل المربع الأصفر. لاحظ أن المربع الأحمر به <code>margin</code> أكبر من المربع الأزرق ، مما يجعله يبدو أصغر. عند زيادة <code>margin</code> الصندوق الأزرق ، سيزيد من المسافة بين حدوده والعناصر المحيطة به. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> غيّر <code>margin</code> المربع الأزرق ليطابق ذلك المربع الأحمر. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: ''
|
||||||
|
testString: 'assert($(".blue-box").css("margin-top") === "20px", "Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.injected-text {
|
||||||
|
margin-bottom: -25px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
border-style: solid;
|
||||||
|
border-color: black;
|
||||||
|
border-width: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow-box {
|
||||||
|
background-color: yellow;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-box {
|
||||||
|
background-color: crimson;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-box {
|
||||||
|
background-color: blue;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h5 class="injected-text">margin</h5>
|
||||||
|
|
||||||
|
<div class="box yellow-box">
|
||||||
|
<h5 class="box red-box">padding</h5>
|
||||||
|
<h5 class="box blue-box">padding</h5>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,85 @@
|
|||||||
|
---
|
||||||
|
id: bad88fee1348bd9aedf08825
|
||||||
|
title: Adjust the Padding of an Element
|
||||||
|
challengeType: 0
|
||||||
|
guideUrl: 'https://arabic.freecodecamp.org/guide/certificates/adjust-the-padding-of-an-element'
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: ضبط الحشو من عنصر
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
undefined
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
undefined
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تعطي فئة <code>blue-box</code> عناصر <code>20px</code> من <code>padding</code> .
|
||||||
|
testString: 'assert($(".blue-box").css("padding-top") === "20px", "Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.injected-text {
|
||||||
|
margin-bottom: -25px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
border-style: solid;
|
||||||
|
border-color: black;
|
||||||
|
border-width: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow-box {
|
||||||
|
background-color: yellow;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-box {
|
||||||
|
background-color: crimson;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-box {
|
||||||
|
background-color: blue;
|
||||||
|
color: #fff;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h5 class="injected-text">margin</h5>
|
||||||
|
|
||||||
|
<div class="box yellow-box">
|
||||||
|
<h5 class="box red-box">padding</h5>
|
||||||
|
<h5 class="box blue-box">padding</h5>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,254 @@
|
|||||||
|
---
|
||||||
|
id: 5a9d7286424fe3d0e10cad13
|
||||||
|
title: Attach a Fallback value to a CSS Variable
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: إرفاق قيمة الرجوع إلى متغير CSS
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> عند استخدام المتغير كقيمة لعنوان CSS ، يمكنك إرفاق قيمة احتياطي سيعود متصفحك إليها إذا كان المتغير المحدد غير صالح. <strong>ملاحظة:</strong> لا يتم استخدام هذا الاحتياطي لزيادة توافق المتصفح ، ولن يعمل على متصفحات IE. بدلاً من ذلك ، يتم استخدامه بحيث يكون للمستعرض لون لعرضه إذا لم يتمكن من العثور على المتغير الخاص بك. إليك طريقة القيام بذلك: <blockquote style=";text-align:right;direction:rtl"> الخلفية: var (- penguin-skin، black)؛ </blockquote> سيؤدي هذا إلى تعيين خلفية سوداء إذا لم يتم تعيين المتغير الخاص بك. لاحظ أن هذا يمكن أن يكون مفيدا لتصحيح الأخطاء. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
undefined
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: تطبيق القيمة الاحتياطية من <code>black</code> إلى خاصية <code>background</code> للفئة <code>penguin-top</code> .
|
||||||
|
testString: 'assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi), "Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-top</code> class.");'
|
||||||
|
- text: ''
|
||||||
|
testString: 'assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi), "Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-bottom</code> class.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.penguin {
|
||||||
|
--penguin-skin: black;
|
||||||
|
--penguin-belly: gray;
|
||||||
|
--penguin-beak: yellow;
|
||||||
|
position: relative;
|
||||||
|
margin: auto;
|
||||||
|
display: block;
|
||||||
|
margin-top: 5%;
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin-top {
|
||||||
|
top: 10%;
|
||||||
|
left: 25%;
|
||||||
|
|
||||||
|
/* change code below */
|
||||||
|
background: var(--pengiun-skin);
|
||||||
|
/* change code above */
|
||||||
|
|
||||||
|
width: 50%;
|
||||||
|
height: 45%;
|
||||||
|
border-radius: 70% 70% 60% 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin-bottom {
|
||||||
|
top: 40%;
|
||||||
|
left: 23.5%;
|
||||||
|
|
||||||
|
/* change code below */
|
||||||
|
background: var(--pengiun-skin);
|
||||||
|
/* change code above */
|
||||||
|
|
||||||
|
width: 53%;
|
||||||
|
height: 45%;
|
||||||
|
border-radius: 70% 70% 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-hand {
|
||||||
|
top: 0%;
|
||||||
|
left: -5%;
|
||||||
|
background: var(--penguin-skin, black);
|
||||||
|
width: 30%;
|
||||||
|
height: 60%;
|
||||||
|
border-radius: 30% 30% 120% 30%;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-hand {
|
||||||
|
top: 0%;
|
||||||
|
left: 75%;
|
||||||
|
background: var(--penguin-skin, black);
|
||||||
|
width: 30%;
|
||||||
|
height: 60%;
|
||||||
|
border-radius: 30% 30% 30% 120%;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-cheek {
|
||||||
|
top: 15%;
|
||||||
|
left: 35%;
|
||||||
|
background: var(--penguin-belly, white);
|
||||||
|
width: 60%;
|
||||||
|
height: 70%;
|
||||||
|
border-radius: 70% 70% 60% 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-cheek {
|
||||||
|
top: 15%;
|
||||||
|
left: 5%;
|
||||||
|
background: var(--penguin-belly, white);
|
||||||
|
width: 60%;
|
||||||
|
height: 70%;
|
||||||
|
border-radius: 70% 70% 60% 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.belly {
|
||||||
|
top: 60%;
|
||||||
|
left: 2.5%;
|
||||||
|
background: var(--penguin-belly, white);
|
||||||
|
width: 95%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 120% 120% 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-feet {
|
||||||
|
top: 85%;
|
||||||
|
left: 60%;
|
||||||
|
background: var(--penguin-beak, orange);
|
||||||
|
width: 15%;
|
||||||
|
height: 30%;
|
||||||
|
border-radius: 50% 50% 50% 50%;
|
||||||
|
transform: rotate(-80deg);
|
||||||
|
z-index: -2222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-feet {
|
||||||
|
top: 85%;
|
||||||
|
left: 25%;
|
||||||
|
background: var(--penguin-beak, orange);
|
||||||
|
width: 15%;
|
||||||
|
height: 30%;
|
||||||
|
border-radius: 50% 50% 50% 50%;
|
||||||
|
transform: rotate(80deg);
|
||||||
|
z-index: -2222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-eye {
|
||||||
|
top: 45%;
|
||||||
|
left: 60%;
|
||||||
|
background: black;
|
||||||
|
width: 15%;
|
||||||
|
height: 17%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-eye {
|
||||||
|
top: 45%;
|
||||||
|
left: 25%;
|
||||||
|
background: black;
|
||||||
|
width: 15%;
|
||||||
|
height: 17%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sparkle {
|
||||||
|
top: 25%;
|
||||||
|
left: 15%;
|
||||||
|
background: white;
|
||||||
|
width: 35%;
|
||||||
|
height: 35%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blush-right {
|
||||||
|
top: 65%;
|
||||||
|
left: 15%;
|
||||||
|
background: pink;
|
||||||
|
width: 15%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blush-left {
|
||||||
|
top: 65%;
|
||||||
|
left: 70%;
|
||||||
|
background: pink;
|
||||||
|
width: 15%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.beak-top {
|
||||||
|
top: 60%;
|
||||||
|
left: 40%;
|
||||||
|
background: var(--penguin-beak, orange);
|
||||||
|
width: 20%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.beak-bottom {
|
||||||
|
top: 65%;
|
||||||
|
left: 42%;
|
||||||
|
background: var(--penguin-beak, orange);
|
||||||
|
width: 16%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background:#c6faf1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin * {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="penguin">
|
||||||
|
<div class="penguin-bottom">
|
||||||
|
<div class="right-hand"></div>
|
||||||
|
<div class="left-hand"></div>
|
||||||
|
<div class="right-feet"></div>
|
||||||
|
<div class="left-feet"></div>
|
||||||
|
</div>
|
||||||
|
<div class="penguin-top">
|
||||||
|
<div class="right-cheek"></div>
|
||||||
|
<div class="left-cheek"></div>
|
||||||
|
<div class="belly"></div>
|
||||||
|
<div class="right-eye">
|
||||||
|
<div class="sparkle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="left-eye">
|
||||||
|
<div class="sparkle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="blush-right"></div>
|
||||||
|
<div class="blush-left"></div>
|
||||||
|
<div class="beak-top"></div>
|
||||||
|
<div class="beak-bottom"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,250 @@
|
|||||||
|
---
|
||||||
|
id: 5a9d7295424fe3d0e10cad14
|
||||||
|
title: Cascading CSS variables
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: ''
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
undefined
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
undefined
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: 'يعلن عن متغير <code>--penguin-belly</code> في <code>:root</code> <code>--penguin-belly</code> إلى <code>pink</code> .'
|
||||||
|
testString: 'assert(code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi), "declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
|
||||||
|
/* add code below */
|
||||||
|
|
||||||
|
/* add code above */
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: var(--penguin-belly, #c6faf1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin {
|
||||||
|
--penguin-skin: gray;
|
||||||
|
--penguin-beak: orange;
|
||||||
|
position: relative;
|
||||||
|
margin: auto;
|
||||||
|
display: block;
|
||||||
|
margin-top: 5%;
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-cheek {
|
||||||
|
top: 15%;
|
||||||
|
left: 35%;
|
||||||
|
background: var(--penguin-belly, white);
|
||||||
|
width: 60%;
|
||||||
|
height: 70%;
|
||||||
|
border-radius: 70% 70% 60% 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-cheek {
|
||||||
|
top: 15%;
|
||||||
|
left: 5%;
|
||||||
|
background: var(--penguin-belly, white);
|
||||||
|
width: 60%;
|
||||||
|
height: 70%;
|
||||||
|
border-radius: 70% 70% 60% 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.belly {
|
||||||
|
top: 60%;
|
||||||
|
left: 2.5%;
|
||||||
|
background: var(--penguin-belly, white);
|
||||||
|
width: 95%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 120% 120% 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin-top {
|
||||||
|
top: 10%;
|
||||||
|
left: 25%;
|
||||||
|
background: var(--penguin-skin, gray);
|
||||||
|
width: 50%;
|
||||||
|
height: 45%;
|
||||||
|
border-radius: 70% 70% 60% 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin-bottom {
|
||||||
|
top: 40%;
|
||||||
|
left: 23.5%;
|
||||||
|
background: var(--penguin-skin, gray);
|
||||||
|
width: 53%;
|
||||||
|
height: 45%;
|
||||||
|
border-radius: 70% 70% 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-hand {
|
||||||
|
top: 0%;
|
||||||
|
left: -5%;
|
||||||
|
background: var(--penguin-skin, gray);
|
||||||
|
width: 30%;
|
||||||
|
height: 60%;
|
||||||
|
border-radius: 30% 30% 120% 30%;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-hand {
|
||||||
|
top: 0%;
|
||||||
|
left: 75%;
|
||||||
|
background: var(--penguin-skin, gray);
|
||||||
|
width: 30%;
|
||||||
|
height: 60%;
|
||||||
|
border-radius: 30% 30% 30% 120%;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-feet {
|
||||||
|
top: 85%;
|
||||||
|
left: 60%;
|
||||||
|
background: var(--penguin-beak, orange);
|
||||||
|
width: 15%;
|
||||||
|
height: 30%;
|
||||||
|
border-radius: 50% 50% 50% 50%;
|
||||||
|
transform: rotate(-80deg);
|
||||||
|
z-index: -2222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-feet {
|
||||||
|
top: 85%;
|
||||||
|
left: 25%;
|
||||||
|
background: var(--penguin-beak, orange);
|
||||||
|
width: 15%;
|
||||||
|
height: 30%;
|
||||||
|
border-radius: 50% 50% 50% 50%;
|
||||||
|
transform: rotate(80deg);
|
||||||
|
z-index: -2222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-eye {
|
||||||
|
top: 45%;
|
||||||
|
left: 60%;
|
||||||
|
background: black;
|
||||||
|
width: 15%;
|
||||||
|
height: 17%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-eye {
|
||||||
|
top: 45%;
|
||||||
|
left: 25%;
|
||||||
|
background: black;
|
||||||
|
width: 15%;
|
||||||
|
height: 17%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sparkle {
|
||||||
|
top: 25%;
|
||||||
|
left: 15%;
|
||||||
|
background: white;
|
||||||
|
width: 35%;
|
||||||
|
height: 35%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blush-right {
|
||||||
|
top: 65%;
|
||||||
|
left: 15%;
|
||||||
|
background: pink;
|
||||||
|
width: 15%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blush-left {
|
||||||
|
top: 65%;
|
||||||
|
left: 70%;
|
||||||
|
background: pink;
|
||||||
|
width: 15%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.beak-top {
|
||||||
|
top: 60%;
|
||||||
|
left: 40%;
|
||||||
|
background: var(--penguin-beak, orange);
|
||||||
|
width: 20%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.beak-bottom {
|
||||||
|
top: 65%;
|
||||||
|
left: 42%;
|
||||||
|
background: var(--penguin-beak, orange);
|
||||||
|
width: 16%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin * {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="penguin">
|
||||||
|
<div class="penguin-bottom">
|
||||||
|
<div class="right-hand"></div>
|
||||||
|
<div class="left-hand"></div>
|
||||||
|
<div class="right-feet"></div>
|
||||||
|
<div class="left-feet"></div>
|
||||||
|
</div>
|
||||||
|
<div class="penguin-top">
|
||||||
|
<div class="right-cheek"></div>
|
||||||
|
<div class="left-cheek"></div>
|
||||||
|
<div class="belly"></div>
|
||||||
|
<div class="right-eye">
|
||||||
|
<div class="sparkle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="left-eye">
|
||||||
|
<div class="sparkle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="blush-right"></div>
|
||||||
|
<div class="blush-left"></div>
|
||||||
|
<div class="beak-top"></div>
|
||||||
|
<div class="beak-bottom"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,252 @@
|
|||||||
|
---
|
||||||
|
id: 5a9d72a1424fe3d0e10cad15
|
||||||
|
title: Change a variable for a specific area
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: ''
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> عند إنشاء المتغيرات الخاصة بك في <code>:root</code> ، سيتم تعيين قيمة هذا المتغير للصفحة بأكملها. يمكنك بعد ذلك كتابة هذه المتغيرات عن طريق ضبطها مرة أخرى داخل عنصر محدد. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
undefined
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: ''
|
||||||
|
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi), "The <code>penguin</code> class should reassign the <code>--penguin-belly</code> variable to <code>white</code>.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--penguin-skin: gray;
|
||||||
|
--penguin-belly: pink;
|
||||||
|
--penguin-beak: orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: var(--penguin-belly, #c6faf1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin {
|
||||||
|
|
||||||
|
/* add code below */
|
||||||
|
|
||||||
|
/* add code above */
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
margin: auto;
|
||||||
|
display: block;
|
||||||
|
margin-top: 5%;
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-cheek {
|
||||||
|
top: 15%;
|
||||||
|
left: 35%;
|
||||||
|
background: var(--penguin-belly, pink);
|
||||||
|
width: 60%;
|
||||||
|
height: 70%;
|
||||||
|
border-radius: 70% 70% 60% 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-cheek {
|
||||||
|
top: 15%;
|
||||||
|
left: 5%;
|
||||||
|
background: var(--penguin-belly, pink);
|
||||||
|
width: 60%;
|
||||||
|
height: 70%;
|
||||||
|
border-radius: 70% 70% 60% 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.belly {
|
||||||
|
top: 60%;
|
||||||
|
left: 2.5%;
|
||||||
|
background: var(--penguin-belly, pink);
|
||||||
|
width: 95%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 120% 120% 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin-top {
|
||||||
|
top: 10%;
|
||||||
|
left: 25%;
|
||||||
|
background: var(--penguin-skin, gray);
|
||||||
|
width: 50%;
|
||||||
|
height: 45%;
|
||||||
|
border-radius: 70% 70% 60% 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin-bottom {
|
||||||
|
top: 40%;
|
||||||
|
left: 23.5%;
|
||||||
|
background: var(--penguin-skin, gray);
|
||||||
|
width: 53%;
|
||||||
|
height: 45%;
|
||||||
|
border-radius: 70% 70% 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-hand {
|
||||||
|
top: 0%;
|
||||||
|
left: -5%;
|
||||||
|
background: var(--penguin-skin, gray);
|
||||||
|
width: 30%;
|
||||||
|
height: 60%;
|
||||||
|
border-radius: 30% 30% 120% 30%;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-hand {
|
||||||
|
top: 0%;
|
||||||
|
left: 75%;
|
||||||
|
background: var(--penguin-skin, gray);
|
||||||
|
width: 30%;
|
||||||
|
height: 60%;
|
||||||
|
border-radius: 30% 30% 30% 120%;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-feet {
|
||||||
|
top: 85%;
|
||||||
|
left: 60%;
|
||||||
|
background: var(--penguin-beak, orange);
|
||||||
|
width: 15%;
|
||||||
|
height: 30%;
|
||||||
|
border-radius: 50% 50% 50% 50%;
|
||||||
|
transform: rotate(-80deg);
|
||||||
|
z-index: -2222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-feet {
|
||||||
|
top: 85%;
|
||||||
|
left: 25%;
|
||||||
|
background: var(--penguin-beak, orange);
|
||||||
|
width: 15%;
|
||||||
|
height: 30%;
|
||||||
|
border-radius: 50% 50% 50% 50%;
|
||||||
|
transform: rotate(80deg);
|
||||||
|
z-index: -2222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-eye {
|
||||||
|
top: 45%;
|
||||||
|
left: 60%;
|
||||||
|
background: black;
|
||||||
|
width: 15%;
|
||||||
|
height: 17%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-eye {
|
||||||
|
top: 45%;
|
||||||
|
left: 25%;
|
||||||
|
background: black;
|
||||||
|
width: 15%;
|
||||||
|
height: 17%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sparkle {
|
||||||
|
top: 25%;
|
||||||
|
left: 15%;
|
||||||
|
background: white;
|
||||||
|
width: 35%;
|
||||||
|
height: 35%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blush-right {
|
||||||
|
top: 65%;
|
||||||
|
left: 15%;
|
||||||
|
background: pink;
|
||||||
|
width: 15%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blush-left {
|
||||||
|
top: 65%;
|
||||||
|
left: 70%;
|
||||||
|
background: pink;
|
||||||
|
width: 15%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.beak-top {
|
||||||
|
top: 60%;
|
||||||
|
left: 40%;
|
||||||
|
background: var(--penguin-beak, orange);
|
||||||
|
width: 20%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.beak-bottom {
|
||||||
|
top: 65%;
|
||||||
|
left: 42%;
|
||||||
|
background: var(--penguin-beak, orange);
|
||||||
|
width: 16%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin * {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="penguin">
|
||||||
|
<div class="penguin-bottom">
|
||||||
|
<div class="right-hand"></div>
|
||||||
|
<div class="left-hand"></div>
|
||||||
|
<div class="right-feet"></div>
|
||||||
|
<div class="left-feet"></div>
|
||||||
|
</div>
|
||||||
|
<div class="penguin-top">
|
||||||
|
<div class="right-cheek"></div>
|
||||||
|
<div class="left-cheek"></div>
|
||||||
|
<div class="belly"></div>
|
||||||
|
<div class="right-eye">
|
||||||
|
<div class="sparkle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="left-eye">
|
||||||
|
<div class="sparkle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="blush-right"></div>
|
||||||
|
<div class="blush-left"></div>
|
||||||
|
<div class="beak-top"></div>
|
||||||
|
<div class="beak-bottom"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,81 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9aedf08803
|
||||||
|
title: Change the Color of Text
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: تغيير لون النص
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
undefined
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
undefined
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن يكون عنصر <code>h2</code> باللون الأحمر.
|
||||||
|
testString: 'assert($("h2").css("color") === "rgb(255, 0, 0)", "Your <code>h2</code> element should be red.");'
|
||||||
|
- text: ''
|
||||||
|
testString: 'assert(code.match(/<h2\s+style\s*=\s*(\"|")\s*color\s*:\s*(?:rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)|rgb\(\s*100%\s*,\s*0%\s*,\s*0%\s*\)|red|#ff0000|#f00|hsl\(\s*0\s*,\s*100%\s*,\s*50%\s*\))\s*\;(\"|")>\s*CatPhotoApp\s*<\/h2>/)," Your <code>style</code> declaration should end with a <code>;</code> .");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h2>CatPhotoApp</h2>
|
||||||
|
<main>
|
||||||
|
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||||
|
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,85 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9aedf08806
|
||||||
|
title: Change the Font Size of an Element
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: تغيير حجم الخط من عنصر
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> يتم التحكم في <code>font-size</code> الخاصية CSS <code>font-size</code> ، كما يلي: <blockquote style=";text-align:right;direction:rtl"> h1 { <br> حجم الخط: 30 بكسل <br> } </blockquote></section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
undefined
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: بين علامات <code>style</code> ، <code>p</code> العناصر <code>p</code> <code>font-size</code> <code>16px</code> . يجب أن يكون حجم المتصفح ونص التكبير بنسبة 100٪.
|
||||||
|
testString: 'assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i), "Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<h2 class="red-text">CatPhotoApp</h2>
|
||||||
|
<main>
|
||||||
|
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||||
|
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,245 @@
|
|||||||
|
---
|
||||||
|
id: 5a9d726c424fe3d0e10cad11
|
||||||
|
title: Create a custom CSS Variable
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: ''
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
undefined
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> في فئة <code>penguin</code> ، أنشئ اسمًا <code>--penguin-skin</code> وأعطيه قيمة <code>gray</code> </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: ''
|
||||||
|
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi), "<code>penguin</code> class should declare the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.penguin {
|
||||||
|
|
||||||
|
/* add code below */
|
||||||
|
|
||||||
|
/* add code above */
|
||||||
|
position: relative;
|
||||||
|
margin: auto;
|
||||||
|
display: block;
|
||||||
|
margin-top: 5%;
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin-top {
|
||||||
|
top: 10%;
|
||||||
|
left: 25%;
|
||||||
|
background: black;
|
||||||
|
width: 50%;
|
||||||
|
height: 45%;
|
||||||
|
border-radius: 70% 70% 60% 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin-bottom {
|
||||||
|
top: 40%;
|
||||||
|
left: 23.5%;
|
||||||
|
background: black;
|
||||||
|
width: 53%;
|
||||||
|
height: 45%;
|
||||||
|
border-radius: 70% 70% 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-hand {
|
||||||
|
top: 0%;
|
||||||
|
left: -5%;
|
||||||
|
background: black;
|
||||||
|
width: 30%;
|
||||||
|
height: 60%;
|
||||||
|
border-radius: 30% 30% 120% 30%;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-hand {
|
||||||
|
top: 0%;
|
||||||
|
left: 75%;
|
||||||
|
background: black;
|
||||||
|
width: 30%;
|
||||||
|
height: 60%;
|
||||||
|
border-radius: 30% 30% 30% 120%;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-cheek {
|
||||||
|
top: 15%;
|
||||||
|
left: 35%;
|
||||||
|
background: white;
|
||||||
|
width: 60%;
|
||||||
|
height: 70%;
|
||||||
|
border-radius: 70% 70% 60% 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-cheek {
|
||||||
|
top: 15%;
|
||||||
|
left: 5%;
|
||||||
|
background: white;
|
||||||
|
width: 60%;
|
||||||
|
height: 70%;
|
||||||
|
border-radius: 70% 70% 60% 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.belly {
|
||||||
|
top: 60%;
|
||||||
|
left: 2.5%;
|
||||||
|
background: white;
|
||||||
|
width: 95%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 120% 120% 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-feet {
|
||||||
|
top: 85%;
|
||||||
|
left: 60%;
|
||||||
|
background: orange;
|
||||||
|
width: 15%;
|
||||||
|
height: 30%;
|
||||||
|
border-radius: 50% 50% 50% 50%;
|
||||||
|
transform: rotate(-80deg);
|
||||||
|
z-index: -2222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-feet {
|
||||||
|
top: 85%;
|
||||||
|
left: 25%;
|
||||||
|
background: orange;
|
||||||
|
width: 15%;
|
||||||
|
height: 30%;
|
||||||
|
border-radius: 50% 50% 50% 50%;
|
||||||
|
transform: rotate(80deg);
|
||||||
|
z-index: -2222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-eye {
|
||||||
|
top: 45%;
|
||||||
|
left: 60%;
|
||||||
|
background: black;
|
||||||
|
width: 15%;
|
||||||
|
height: 17%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-eye {
|
||||||
|
top: 45%;
|
||||||
|
left: 25%;
|
||||||
|
background: black;
|
||||||
|
width: 15%;
|
||||||
|
height: 17%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sparkle {
|
||||||
|
top: 25%;
|
||||||
|
left: 15%;
|
||||||
|
background: white;
|
||||||
|
width: 35%;
|
||||||
|
height: 35%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blush-right {
|
||||||
|
top: 65%;
|
||||||
|
left: 15%;
|
||||||
|
background: pink;
|
||||||
|
width: 15%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blush-left {
|
||||||
|
top: 65%;
|
||||||
|
left: 70%;
|
||||||
|
background: pink;
|
||||||
|
width: 15%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.beak-top {
|
||||||
|
top: 60%;
|
||||||
|
left: 40%;
|
||||||
|
background: orange;
|
||||||
|
width: 20%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.beak-bottom {
|
||||||
|
top: 65%;
|
||||||
|
left: 42%;
|
||||||
|
background: orange;
|
||||||
|
width: 16%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background:#c6faf1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin * {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="penguin">
|
||||||
|
<div class="penguin-bottom">
|
||||||
|
<div class="right-hand"></div>
|
||||||
|
<div class="left-hand"></div>
|
||||||
|
<div class="right-feet"></div>
|
||||||
|
<div class="left-feet"></div>
|
||||||
|
</div>
|
||||||
|
<div class="penguin-top">
|
||||||
|
<div class="right-cheek"></div>
|
||||||
|
<div class="left-cheek"></div>
|
||||||
|
<div class="belly"></div>
|
||||||
|
<div class="right-eye">
|
||||||
|
<div class="sparkle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="left-eye">
|
||||||
|
<div class="sparkle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="blush-right"></div>
|
||||||
|
<div class="blush-left"></div>
|
||||||
|
<div class="beak-top"></div>
|
||||||
|
<div class="beak-bottom"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,110 @@
|
|||||||
|
---
|
||||||
|
id: bad87fed1348bd9aede07836
|
||||||
|
title: Give a Background Color to a div Element
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: ''
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
undefined
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> إنشاء فئة تسمى <code>silver-background</code> مع <code>background-color</code> الفضة. قم بتعيين هذا الفصل إلى عنصر <code>div</code> الخاص بك. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: ''
|
||||||
|
testString: 'assert($("div").hasClass("silver-background"), "Give your <code>div</code> element the class <code>silver-background</code>.");'
|
||||||
|
- text: ''
|
||||||
|
testString: 'assert($("div").css("background-color") === "rgb(192, 192, 192)", "Your <code>div</code> element should have a silver background.");'
|
||||||
|
- text: ''
|
||||||
|
testString: 'assert(code.match(/\.silver-background\s*{\s*background-color:\s*silver;\s*}/), "Define a class named <code>silver-background</code> within the <code>style</code> element and assign the value of <code>silver</code> to the <code>background-color</code> property.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thick-green-border {
|
||||||
|
border-color: green;
|
||||||
|
border-width: 10px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smaller-image {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<h2 class="red-text">CatPhotoApp</h2>
|
||||||
|
<main>
|
||||||
|
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||||
|
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,96 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9aedf08807
|
||||||
|
title: Import a Google Font
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: ''
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> بالإضافة إلى تحديد الخطوط العامة الموجودة في معظم أنظمة التشغيل ، يمكننا أيضًا تحديد خطوط ويب مخصصة غير قياسية للاستخدام على موقعنا على الويب. هناك مصادر متنوعة لخطوط الويب على الإنترنت ، ولكن في هذا المثال سنركز على مكتبة Google Fonts. <a href="https://fonts.google.com/" target="_blank">Google Fonts</a> هي مكتبة مجانية لخطوط الويب يمكنك استخدامها في CSS بالرجوع إلى عنوان URL الخاص بالخط. لذلك ، دعنا نمضي قدمًا ونستورد ونطبق خط Google (لاحظ أنه إذا تم حظر Google في بلدك ، فستحتاج إلى تخطي هذا التحدي). لاستيراد أحد خطوط Google ، يمكنك نسخ عنوان URL (الخطوط) من مكتبة Google Fonts ، ثم لصقه في HTML. لهذا التحدي ، سنقوم باستيراد خط <code>Lobster</code> . لإجراء ذلك ، انسخ مقتطف الشفرة التالي وألصقه في الجزء العلوي من محرر الشفرة (قبل عنصر <code>style</code> الافتتاحي): <code><link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"></code> يمكنك الآن استخدام خط <code>Lobster</code> في CSS باستخدام <code>Lobster</code> باعتباره FAMILY_NAME كما في المثال التالي: <br> <code>font-family: FAMILY_NAME, GENERIC_NAME;</code> . GENERIC_NAME اختياري ، وهو خط احتياطي في حالة عدم توفر الخط المحدد الآخر. يتم تغطيتها في التحدي التالي. أسماء العائلة حساسة لحالة الأحرف وتحتاج إلى لفها بين علامتي تنصيص إذا كان هناك فراغ في الاسم. على سبيل المثال ، تحتاج إلى علامات اقتباس لاستخدام الخط <code>"Open Sans"</code> ، ولكن لا تستخدم خط <code>Lobster</code> . </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
undefined
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: ''
|
||||||
|
testString: 'assert(new RegExp("googleapis", "gi").test(code), "Import the <code>Lobster</code> font.");'
|
||||||
|
- text: ''
|
||||||
|
testString: 'assert($("h2").css("font-family").match(/lobster/i), "Your <code>h2</code> element should use the font <code>Lobster</code>.");'
|
||||||
|
- text: استخدم محدد CSS <code>h2</code> لتغيير الخط.
|
||||||
|
testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?\s*;\s*\}/gi.test(code), "Use an <code>h2</code> CSS selector to change the font.");'
|
||||||
|
- text: يجب أن يستمر عنصر <code>p</code> استخدام <code>monospace</code> للخط.
|
||||||
|
testString: 'assert($("p").css("font-family").match(/monospace/i), "Your <code>p</code> element should still use the font <code>monospace</code>.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<h2 class="red-text">CatPhotoApp</h2>
|
||||||
|
<main>
|
||||||
|
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||||
|
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,60 @@
|
|||||||
|
---
|
||||||
|
id: 5b7d72c338cd7e35b63f3e14
|
||||||
|
title: Improve Compatibility with Browser Fallbacks
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: تحسين التوافق مع Fallbacks المستعرض
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> عند العمل مع CSS ، من المحتمل أن تصل إلى مشكلات توافق المستعرض في مرحلة ما. هذا هو السبب في أنه من المهم توفير fallbacks المتصفح لتجنب المشاكل المحتملة. عندما يقوم المتصفح بتوزيع CSS لصفحة ويب ، فإنه يتجاهل أي خصائص لا يتعرف عليها أو يدعمها. على سبيل المثال ، إذا كنت تستخدم متغير CSS لتعيين لون خلفية على أحد المواقع ، فسيتجاهل Internet Explorer لون الخلفية لأنه لا يدعم متغيرات CSS. في هذه الحالة ، سيستخدم المتصفح أي قيمة لديه لهذا الموقع. إذا لم يعثر على أي قيمة أخرى لهذه الخاصية ، فسيتم إرجاعها إلى القيمة الافتراضية ، والتي عادةً ما تكون غير مثالية. وهذا يعني أنه إذا كنت تريد توفير احتياطي للمتصفح ، فسيكون الأمر سهلاً مثل توفير قيمة أخرى مدعومة بشكل أوسع فورًا قبل الإعلان. وبهذه الطريقة ، سيكون للمتصفح القديم شيئًا ما يتراجع عنه ، في حين أن المتصفح الأحدث سوف يفسر أي إعلان يأتي لاحقًا في السلسلة. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> يبدو أنه يتم استخدام متغير لضبط لون خلفية فئة <code>.red-box</code> . دعونا نحسن من توافق المتصفح الخاص بنا عن طريق إضافة إعلان <code>background</code> آخر قبل الإعلان الحالي وتعيين قيمته إلى اللون الأحمر. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تتضمن قاعدة <code>.red-box</code> الخاصة بك احتياطيًا مع تعيين <code>background</code> إلى اللون الأحمر مباشرةً قبل بيان <code>background</code> الموجود.
|
||||||
|
testString: 'assert(code.match(/.red-box\s*{[^}]*background:\s*(red|#ff0000|#f00|rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)|rgb\(\s*100%\s*,\s*0%\s*,\s*0%\s*\)|hsl\(\s*0\s*,\s*100%\s*,\s*50%\s*\))\s*;\s*background:\s*var\(\s*--red-color\s*\);/gi), "Your <code>.red-box</code> rule should include a fallback with the <code>background</code> set to red immediately before the existing <code>background</code> declaration.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--red-color: red;
|
||||||
|
}
|
||||||
|
.red-box {
|
||||||
|
|
||||||
|
background: var(--red-color);
|
||||||
|
height: 200px;
|
||||||
|
width:200px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="red-box"></div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,66 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9aedf08746
|
||||||
|
title: Inherit Styles from the Body Element
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: وراثة الأنماط من عنصر الجسم
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> الآن لقد ثبت أن كل صفحة HTML لديها <code>body</code> عنصر، والتي لها <code>body</code> عنصر يمكن أيضا أن تكون على غرار مع CSS. تذكر أن بإمكانك تصميم عنصر <code>body</code> تمامًا مثل أي عنصر HTML آخر ، وسوف ترث جميع العناصر الأخرى أنماط عناصر <code>body</code> . </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> أولاً ، قم بإنشاء عنصر <code>h1</code> باستخدام النص <code>Hello World</code> Then ، دعنا نمنح كل العناصر على صفحتك لون <code>green</code> بإضافة <code>color: green;</code> لإعلان أسلوب عنصر <code>body</code> . أخيرًا ، امنح عنصر <code>body</code> الخاص بك <code>body</code> عائلة <code>monospace</code> من خلال إضافة <code>font-family: monospace;</code> لإعلان أسلوب عنصر <code>body</code> . </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: قم بإنشاء عنصر <code>h1</code> .
|
||||||
|
testString: 'assert(($("h1").length > 0), "Create an <code>h1</code> element.");'
|
||||||
|
- text: يجب أن يحتوي عنصر <code>h1</code> على نص <code>Hello World</code> .
|
||||||
|
testString: 'assert(($("h1").length > 0 && $("h1").text().match(/hello world/i)), "Your <code>h1</code> element should have the text <code>Hello World</code>.");'
|
||||||
|
- text: تأكد من أن عنصر <code>h1</code> لديه علامة إغلاق.
|
||||||
|
testString: 'assert(code.match(/<\/h1>/g) && code.match(/<h1/g) && code.match(/<\/h1>/g).length === code.match(/<h1/g).length, "Make sure your <code>h1</code> element has a closing tag.");'
|
||||||
|
- text: امنح <code>body</code> عنصر خاصية <code>color</code> <code>green</code> .
|
||||||
|
testString: 'assert(($("body").css("color") === "rgb(0, 128, 0)"), "Give your <code>body</code> element the <code>color</code> property of <code>green</code>.");'
|
||||||
|
- text: امنح <code>body</code> عنصر الخاصية <code>monospace</code> <code>font-family</code> <code>monospace</code> .
|
||||||
|
testString: 'assert(($("body").css("font-family").match(/monospace/i)), "Give your <code>body</code> element the <code>font-family</code> property of <code>monospace</code>.");'
|
||||||
|
- text: بك <code>h1</code> عنصر يجب أن يرث الخط <code>monospace</code> من هاتفك <code>body</code> العنصر.
|
||||||
|
testString: 'assert(($("h1").length > 0 && $("h1").css("font-family").match(/monospace/i)), "Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element.");'
|
||||||
|
- text: بك <code>h1</code> عنصر يجب أن يرث اللون الأخضر من هاتفك <code>body</code> العنصر.
|
||||||
|
testString: 'assert(($("h1").length > 0 && $("h1").css("color") === "rgb(0, 128, 0)"), "Your <code>h1</code> element should inherit the color green from your <code>body</code> element.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,108 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9aedf08815
|
||||||
|
title: Make Circular Images with a border-radius
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: جعل الصور الدائرية مع نصف قطرها
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> بالإضافة إلى وحدات البكسل ، يمكنك أيضًا تحديد نطاق <code>border-radius</code> باستخدام نسبة مئوية. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> إعطاء صورة القط الخاص بك <code>border-radius</code> <code>50%</code> . </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن يكون لشعاعك نصف قطر حدًا <code>50%</code> ، مما يجعله دائريًا تمامًا.
|
||||||
|
testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 48, "Your image should have a border radius of <code>50%</code>, making it perfectly circular.");'
|
||||||
|
- text: تأكد من استخدام قيمة النسبة المئوية <code>50%</code> .
|
||||||
|
testString: 'assert(code.match(/50%/g), "Be sure to use a percentage value of <code>50%</code>.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thick-green-border {
|
||||||
|
border-color: green;
|
||||||
|
border-width: 10px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smaller-image {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<h2 class="red-text">CatPhotoApp</h2>
|
||||||
|
<main>
|
||||||
|
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||||
|
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9aedf07756
|
||||||
|
title: Override All Other Styles by using Important
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: تجاوز كافة الأنماط الأخرى باستخدام هام
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> ياي! لقد أثبتنا فقط أن الأنماط المضمنة ستتجاوز جميع إعلانات CSS في عنصر <code>style</code> . لكن انتظر. هناك طريقة أخيرة لتجاوز CSS. هذه هي أقوى طريقة للجميع. ولكن قبل القيام بذلك ، دعنا نتحدث عن سبب رغبتك في تجاوز CSS. في العديد من المواقف ، ستستخدم مكتبات CSS. قد تتجاوز هذه بطريق الخطأ CSS الخاص بك. لذلك عندما تحتاج بالتأكيد إلى التأكد من أن عنصر ما يحتوي على CSS خاص ، يمكنك استخدامه <code>!important</code> دعنا نرجع إلى إعلان الفصل <code>pink-text</code> . تذكر أنه تم تجاوز فئة <code>pink-text</code> لدينا بواسطة تعريفات فئة لاحقة ، وإعلانات معرف ، وأنماط مضمنة. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> دعنا نضيف الكلمة الأساسية <code>!important</code> لإعلان اللون الخاص بعنصر النص الوردي الخاص بك للتأكد 100٪ من أن عنصر <code>h1</code> سيكون لونه ورديًا. مثال على كيفية القيام بذلك هو: <code>color: red !important;</code> </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن يحتوي عنصر <code>h1</code> <code>pink-text</code> .
|
||||||
|
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
|
||||||
|
- text: يجب أن يحتوي عنصر <code>h1</code> على الفصل <code>blue-text</code> .
|
||||||
|
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
|
||||||
|
- text: يجب أن يحتوي عنصر <code>h1</code> على معرف <code>orange-text</code> .
|
||||||
|
testString: 'assert($("h1").attr("id") === "orange-text", "Your <code>h1</code> element should have the id of <code>orange-text</code>.");'
|
||||||
|
- text: 'يجب أن يكون عنصر <code>h1</code> بنمط <code>color: white</code> المضمن <code>color: white</code> .'
|
||||||
|
testString: 'assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi), "Your <code>h1</code> element should have the inline style of <code>color: white</code>.");'
|
||||||
|
- text: يجب أن يكون لديك تعريف فئة <code>pink-text</code> الكلمة الأساسية <code>!important</code> لتجاوز كافة التعريفات الأخرى.
|
||||||
|
testString: 'assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g), "Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.");'
|
||||||
|
- text: يجب أن يكون عنصر <code>h1</code> باللون الوردي.
|
||||||
|
testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", "Your <code>h1</code> element should be pink.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: black;
|
||||||
|
font-family: monospace;
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
#orange-text {
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
|
.pink-text {
|
||||||
|
color: pink;
|
||||||
|
}
|
||||||
|
.blue-text {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,74 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd8aedf06756
|
||||||
|
title: Override Class Declarations by Styling ID Attributes
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: تجاوز تعريفات الطبقة عن طريق تحديد سمات المعرف
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> لقد أثبتنا فقط أن المتصفحات تقرأ CSS من الأعلى إلى الأسفل. ويعني هذا أنه في حالة وجود تعارض ، سيستخدم المتصفح أي إعلان من لغة CSS يظهر في النهاية. لكننا لم ننتهي بعد. هناك طرق أخرى يمكنك من خلالها تجاوز CSS. هل تتذكر سمات معرف؟ لنقم بتجاوز فصول <code>blue-text</code> <code>pink-text</code> <code>blue-text</code> ، وجعل عنصر <code>h1</code> برتقاليًا ، من خلال إعطاء عنصر <code>h1</code> ثم تصميم ذلك المعرف. </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> امنح عنصر <code>h1</code> سمة <code>id</code> <code>orange-text</code> . تذكر أن أنماط المعرّف تبدو كالتالي: <code><h1 id="orange-text"></code> ترك فصول <code>pink-text</code> <code>blue-text</code> <code>pink-text</code> في عنصر <code>h1</code> . قم بإنشاء تعريف CSS لمعرف <code>orange-text</code> الخاص بك في عنصر <code>style</code> الخاص بك. إليك مثال على ما يبدو عليه هذا: <blockquote style=";text-align:right;direction:rtl"> # brown-text { <br> اللون: بني؛ <br> } </blockquote> ملاحظة: لا يهم ما إذا كنت قد أعلنت CSS هذا أعلى أو أسفل فئة النص الوردي ، نظرًا لأن سمة المعرّف ستحظى دائمًا بالأسبقية. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن يحتوي عنصر <code>h1</code> <code>pink-text</code> .
|
||||||
|
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
|
||||||
|
- text: يجب أن يحتوي عنصر <code>h1</code> على الفصل <code>blue-text</code> .
|
||||||
|
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
|
||||||
|
- text: امنح عنصر <code>h1</code> معرف <code>orange-text</code> .
|
||||||
|
testString: 'assert($("h1").attr("id") === "orange-text", "Give your <code>h1</code> element the id of <code>orange-text</code>.");'
|
||||||
|
- text: يجب أن يكون هناك عنصر <code>h1</code> واحد فقط.
|
||||||
|
testString: 'assert(($("h1").length === 1), "There should be only one <code>h1</code> element.");'
|
||||||
|
- text: قم بإنشاء إعلان CSS لمعرف <code>orange-text</code> الخاص بك
|
||||||
|
testString: 'assert(code.match(/#orange-text\s*{/gi), "Create a CSS declaration for your <code>orange-text</code> id");'
|
||||||
|
- text: لا تعطي <code>h1</code> الخاص بك أي سمات <code>style</code> .
|
||||||
|
testString: 'assert(!code.match(/<h1.*style.*>/gi), "Do not give your <code>h1</code> any <code>style</code> attributes.");'
|
||||||
|
- text: يجب أن يكون عنصر <code>h1</code> باللون البرتقالي.
|
||||||
|
testString: 'assert($("h1").css("color") === "rgb(255, 165, 0)", "Your <code>h1</code> element should be orange.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: black;
|
||||||
|
font-family: monospace;
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
.pink-text {
|
||||||
|
color: pink;
|
||||||
|
}
|
||||||
|
.blue-text {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h1 class="pink-text blue-text">Hello World!</h1>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,73 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9aedf06756
|
||||||
|
title: Override Class Declarations with Inline Styles
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: تجاوز التعريفات فئة باستخدام الأنماط المضمّنة
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> لذلك قمنا ثبت أن الإعلانات معرف تجاوز الإعلانات الطبقة، بغض النظر عن مكان يتم الإعلان عنها في حياتك <code>style</code> CSS عنصر. هناك طرق أخرى يمكنك من خلالها تجاوز CSS. هل تتذكر الأنماط المضمنة؟ </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
undefined
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن يحتوي عنصر <code>h1</code> <code>pink-text</code> .
|
||||||
|
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
|
||||||
|
- text: ''
|
||||||
|
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
|
||||||
|
- text: يجب أن يحتوي عنصر <code>h1</code> على معرف <code>orange-text</code> .
|
||||||
|
testString: 'assert($("h1").attr("id") === "orange-text", "Your <code>h1</code> element should have the id of <code>orange-text</code>.");'
|
||||||
|
- text: ''
|
||||||
|
testString: 'assert(document.querySelector("h1[style]"), "Give your <code>h1</code> element an inline style.");'
|
||||||
|
- text: يجب أن يكون عنصر <code>h1</code> أبيض.
|
||||||
|
testString: 'assert($("h1").css("color") === "rgb(255, 255, 255)", "Your <code>h1</code> element should be white.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: black;
|
||||||
|
font-family: monospace;
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
#orange-text {
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
|
.pink-text {
|
||||||
|
color: pink;
|
||||||
|
}
|
||||||
|
.blue-text {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,65 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9aedf04756
|
||||||
|
title: Override Styles in Subsequent CSS
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: ''
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
undefined
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> إنشاء فئة CSS إضافية تسمى <code>blue-text</code> يعطي عنصر باللون الأزرق. تأكد من أنه أقل من <code>pink-text</code> الفصل <code>pink-text</code> . قم <code>blue-text</code> فئة <code>blue-text</code> على عنصر <code>h1</code> بالإضافة إلى فصل <code>pink-text</code> ، ودعنا نرى أيهما يفوز. يتم تطبيق سمات فئات متعددة على عنصر HTML بمسافة بينها مثل: <code>class="class1 class2"</code> ملاحظة: لا يهم أي ترتيب يتم سرد الفئات في عنصر HTML. ومع ذلك ، فإن ترتيب إعلانات <code>class</code> في قسم <code><style></code> هو ما هو مهم. سوف يكون للإعلان الثاني الأسبقية على الأول. نظرًا لأنه يتم الإعلان عن <code>.blue-text</code> الثانية ، فإنه يؤدي إلى تجاوز سمات <code>.pink-text</code> </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن يحتوي عنصر <code>h1</code> <code>pink-text</code> .
|
||||||
|
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
|
||||||
|
- text: يجب أن يحتوي عنصر <code>h1</code> على الفصل <code>blue-text</code> .
|
||||||
|
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
|
||||||
|
- text: يجب أن ينتمي <code>blue-text</code> <code>pink-text</code> إلى نفس عنصر <code>h1</code> .
|
||||||
|
testString: 'assert($(".pink-text").hasClass("blue-text"), "Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.");'
|
||||||
|
- text: ''
|
||||||
|
testString: 'assert($("h1").css("color") === "rgb(0, 0, 255)", "Your <code>h1</code> element should be blue.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: black;
|
||||||
|
font-family: monospace;
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
.pink-text {
|
||||||
|
color: pink;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h1 class="pink-text">Hello World!</h1>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,60 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9aedf08756
|
||||||
|
title: Prioritize One Style Over Another
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: ''
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
undefined
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
undefined
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن يحتوي عنصر <code>h1</code> <code>pink-text</code> .
|
||||||
|
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
|
||||||
|
- text: يجب أن يحتوي <code><style></code> على فئة CSS <code>pink-text</code> يغير <code>color</code> .
|
||||||
|
testString: 'assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g), "Your <code><style></code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.");'
|
||||||
|
- text: ''
|
||||||
|
testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", "Your <code>h1</code> element should be pink.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: black;
|
||||||
|
font-family: monospace;
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h1>Hello World!</h1>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,89 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9aede08807
|
||||||
|
title: Set the Font Family of an Element
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: ''
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> يمكنك تعيين الخط الذي يجب أن يستخدمه عنصر ما ، باستخدام خاصية <code>font-family</code> . على سبيل المثال ، إذا أردت تعيين خط عنصر <code>h2</code> على <code>sans-serif</code> ، <code>sans-serif</code> CSS التالي: <blockquote style=";text-align:right;direction:rtl"> h2 { <br> عائلة الخط: sans-serif؛ <br> } </blockquote></section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> اجعل جميع عناصر <code>p</code> تستخدم خط <code>monospace</code> . </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: يجب أن تستخدم عناصر <code>p</code> الخاصة بك <code>monospace</code> الخط.
|
||||||
|
testString: 'assert($("p").not(".red-text").css("font-family").match(/monospace/i), "Your <code>p</code> elements should use the font <code>monospace</code>.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<h2 class="red-text">CatPhotoApp</h2>
|
||||||
|
<main>
|
||||||
|
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||||
|
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,110 @@
|
|||||||
|
---
|
||||||
|
id: bad87eee1348bd9aede07836
|
||||||
|
title: Set the id of an Element
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: عيّن معرف عنصر
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> بالإضافة إلى الفصول الدراسية ، يمكن أن يحتوي كل عنصر HTML أيضًا على سمة <code>id</code> . هناك العديد من المزايا لاستخدام سمات <code>id</code> : يمكنك استخدام <code>id</code> لوضع نمط لعنصر واحد ، وبعد ذلك ستعرف أنه يمكنك استخدامها لتحديد عناصر محددة وتعديلها باستخدام جافا سكريبت. يجب أن تكون سمات <code>id</code> فريدة. لن تقوم المتصفحات بفرض هذا ، ولكنها أفضل الممارسات المتفق عليها على نطاق واسع. لذا يرجى عدم إعطاء أكثر من عنصر واحد نفس سمة <code>id</code> . في ما يلي مثال على كيفية إعطاء عنصر <code>h2</code> معرف تطبيق <code>cat-photo-app</code> : <code><h2 id="cat-photo-app"></code> </section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> امنح <code>form</code> الخاص بك <code>form</code> " <code>cat-photo-form</code> . </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: ''
|
||||||
|
testString: 'assert($("form").attr("id") === "cat-photo-form", "Give your <code>form</code> element the id of <code>cat-photo-form</code>.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thick-green-border {
|
||||||
|
border-color: green;
|
||||||
|
border-width: 10px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smaller-image {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.silver-background {
|
||||||
|
background-color: silver;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<h2 class="red-text">CatPhotoApp</h2>
|
||||||
|
<main>
|
||||||
|
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<div class="silver-background">
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||||
|
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
@ -0,0 +1,97 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9acdf08812
|
||||||
|
title: Size Your Images
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
localeTitle: حجم صورك
|
||||||
|
---
|
||||||
|
|
||||||
|
## Description
|
||||||
|
<section id="description"> يحتوي CSS على خاصية تسمى <code>width</code> الذي يتحكم في عرض العنصر. تمامًا مثل الخطوط ، سنستخدم <code>px</code> (بكسل) لتحديد عرض الصورة. على سبيل المثال ، إذا أردنا إنشاء فئة CSS تسمى <code>larger-image</code> تعطي عناصر HTML عرضًا يبلغ 500 بكسل ، فسنستخدم: <blockquote style=";text-align:right;direction:rtl"> <نمط> <br> .larger-image { <br> العرض: 500 بكسل ؛ <br> } <br> </ النمط> </blockquote></section>
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
<section id="instructions"> قم بإنشاء فئة باسم <code>smaller-image</code> واستخدمها لتغيير حجم الصورة بحيث يكون عرضها 100 بكسل فقط. <strong>ملحوظة</strong> <br> نظرًا لاختلاف تنفيذ المتصفح ، قد تحتاج إلى التكبير بنسبة 100٪ لاجتياز الاختبارات على هذا التحدي. </section>
|
||||||
|
|
||||||
|
## Tests
|
||||||
|
<section id='tests'>
|
||||||
|
|
||||||
|
```yml
|
||||||
|
tests:
|
||||||
|
- text: ''
|
||||||
|
testString: 'assert($("img[src="https://bit.ly/fcc-relaxing-cat"]").attr("class") === "smaller-image", "Your <code>img</code> element should have the class <code>smaller-image</code>.");'
|
||||||
|
- text: يجب أن تكون صورتك بعرض 100 بكسل. يجب أن يكون تكبير المتصفح بنسبة 100٪.
|
||||||
|
testString: 'assert($("img").width() === 100, "Your image should be 100 pixels wide. Browser zoom should be at 100%.");'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Challenge Seed
|
||||||
|
<section id='challengeSeed'>
|
||||||
|
|
||||||
|
<div id='html-seed'>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<h2 class="red-text">CatPhotoApp</h2>
|
||||||
|
<main>
|
||||||
|
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||||
|
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
<section id='solution'>
|
||||||
|
|
||||||
|
```js
|
||||||
|
// solution required
|
||||||
|
```
|
||||||
|
</section>
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user