1- كيف انشاء هذه بى css اريد طريقته بى css
2- كيف انشاء هذه بى boot strab اريد طريقته ايضا
4 Likes
في السؤال الأول ستجد مع كل كود تعليق بسيط يوضح لك ما قمت به:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lara Darine</title>
<link rel="stylesheet" href="main.css">
<!-- قمت باستدعاء خط من مكتبة خطوط قوقل الشهيرة -->
<link href="https://fonts.googleapis.com/css?family=Oxygen:400,700&display=swap" rel="stylesheet">
<!-- قمت باستدعاء مكتبة font awesome من أجل الإستفادة من أيقوناتها -->
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
</head>
<body>
<!-- قمت بإنشاء العنصر الأب الذي يحتوي على كل العناصر التي أحتاجها -->
<div class="container">
<div class="line">
<ul id="steps">
<li id="s1" class="items">
<!-- قمت باستدعاء الأيقونة التي أحتاجها في هذا العنصر -->
<i class="fa fa-shopping-cart"></i>
<span>Shopping</span>
</li>
<li id="s2" class="items">
<i class="fa fa-cart-plus"></i>
<span>Add article</span>
</li>
<li id="s3" class="items">
<i class="fa fa-credit-card"></i>
<span>Payment</span>
</li>
<li id="s4" class="items">
<i class="fa fa-thumbs-up"></i>
<span>Done</span>
</li>
</ul>
</div>
<div class="line" id="prog">
</div>
</div>
<!-- قمت باضافة هذا الزر فقط من أجل إظهار تطور المراحل باستعمال الجافاسكريبت -->
<div id="next">Next</div>
<!-- من أجل استدعاء وتحميل ملف الجافاسكريبت -->
<script src="app.js"></script>
</body>
</html>
CSS:
body {
font-family: 'Oxygen', sans-serif;
}
/* عمل تنسيق العنصر الأب */
.container {
/* جعل خلفية الحاوي رمادية اللون */
background-color: #f7f7f7;
border: 1px solid #efefef;
/* العرض */
width: 700px;
/* الطول */
height: 120px;
/* تنسيق الهوامش الجانبية من أجل أن يكون الحاوي في منتصف الصفحة */
margin: 0 auto;
}
/* تنسيق العنصر الذي يحتوي على عنصر قائمة المراحل */
.line {
/* جعل قيمة الطول صغيرة ليظهر على شكل خط */
height: 6px;
/* إعطاؤه لون أخضر خافت */
background-color: #6aa883;
width: 80%;
margin: auto;
position: relative;
top: 22%;
}
/* عنصر المراحل */
#steps {
/* من استخدام تقنية الفلكس بوكس من أجل عرض العناصر أفقيا */
display: flex;
flex-direction: row;
/* جعل وضعية القائبة نسبية للعنصر الأب من أجل التحكم في وضعية العناصر */
position: relative;
top: -32px;
/* حذف النقاط والهوامش الافتراضية لعناصر القائمة */
list-style: none;
/* توزيع العناصر بحيت تكون المسافة بينهما متباعدة ومتساوية */
justify-content: space-between;
padding: 0;
/* من أجل جعل الأيقونات تظهر في الوسط */
align-items: center;
}
/* عناصر القائمة */
.items {
/* تحديد الطول والعرض بنفس القيمة */
width: 70px;
height: 70px;
/* جعل العنصر يظهر على شكل دائري */
border-radius: 50%;
/* تحديد لون الدائرة */
border: 2px #308c41 solid;
/* تحديد لون خلفية الدائرة عندما تكون غير مفعلة */
background-color: #f7f7f7;
/* من استخدام تقنية الفلكس بوكس من أجل عرض العناصر عموديا */
display: flex;
flex-direction: column;
/* توسيط المحتوى */
justify-content: center;
align-items: center;
/* جعل العناصر تظهر فوق الخط */
z-index: 99;
/* عمل حدود خارجية بنفس لون الخلفية لتقطيع الخط بين كل عنصر */
outline: #f7f7f7 solid 4px;
}
/* عنصر الأيقونة */
i {
/* تحديد حجم الأيقونة ولونها */
font-size: 24pt !important;
color: #308c41;
}
/* تنسيق نص المراحل */
.items span {
position: absolute;
top: 78px;
color: darkolivegreen;
}
/* هذا الكلاس يضاف إلى المراحل المفعلة عن طريق الجافاسكريبت */
.active {
/* تغيير لون خلفية الدائرة */
background-color: #308c41;
}
/* الأيقونات المفعلة */
.active i {
/* تغيير لون الأيقونة إلى الأبيض من أجل التباين */
color: aliceblue;
}
/* تغيير نص العنصر المفعل إلى اللون الأخضر */
.active span {
color: #308c41;
font-weight: bold;
}
/* تغيير لون الخط عند تطور المراحل */
#prog {
background-color: #308c41;
top: 20px;
/* جعل العرض افتراضيا 0 من أجل التحكم فيه عن طريق الجافاسكريبت */
width: 0;
margin: 0 10%;
border-radius: 0 5px 5px 0;
/* من أجل إضفاء الحركية عند تغيير قيمة العرض */
transition: all 1s ease;
}
/* تنسيقات الزر */
#next {
width: 100px;
margin: 20px auto;
padding: 4px;
color: #308c41;
border: #6aa883 solid 1px;
border-radius: 5px;
cursor: pointer;
text-align: center;
font-weight: bold;
transition: all 1s ease;
}
/* عند وضع الماوس على الزر */
#next:hover {
color: antiquewhite;
background-color: #308c41;
}
JavaScript:
فقط من أجل إظهار تطور المراحل
// تعريف الزر
const next = document.querySelector('#next');
// تعريف خط تقدم المراحل
const prog = document.getElementById('prog');
// تحديد قيمة التقدم
let progState = 0;
// إنشاء مصفوفة لتخزين عناصر المراحل المفعلة
let active = [];
// عند الضغط على الزر
next.addEventListener('click', () =>{
// إذا كل المراحل غير مفعلة، ستفعل الأولى
if (active.length == 0) {
const item = document.querySelector(`#s1`);
item.classList.add('active');
active.push(item);
}
// إذا كل المراحل مفعلة يعاد كل شيء إلى مرحلة الصفر
else if(active.length > 3) {
for (let index = 0; index < active.length; index++) {
const item = active[index];
progState = 0;
item.classList.remove('active');
}
active = [];
}
// تفعيل المراحل الباقية
else {
const item = document.querySelector(`#s${active.length + 1}`);
(progState < 60)? progState += 25 : progState = 70;
setTimeout(() => {
item.classList.add('active');
}, 1000);
active.push(item);
}
// تحديث قيمة عرض خط المراحل المفعلة
prog.style.width = progState + '%';
});
يمكنك الإطلاع على النتيجة من هنا:
https://laradarine.github.io/steps-progression/
يمكنك أيضا الإطلاع على المستودع:
بالنسبة للسؤال الثاني:
أنصحك أخ محمود ومادمت في مرحلة التعلم أن تتجنب إستخدام المكاتب وأطر العمل وتركز على التعمق في مفاهيم الـ CSS وتتعلم أساسيات الـ Javascript ومن ثم لا بأس أن تتعلم ما شئت، كما أن تعلم المكاتب ضروري لتسهيل العمل بالنسبة للمحترف وليس المتعلم.
وكمثال توضيحي: جميل أن تكون لدي آلة لتشكيل الحلوى لمساعدتي على تجهيز قهوة الإفطار أو المساء بسرعة وسهولة، ففي النهاية لن يلاحظ من يأكلها كيف صنعتها، ولكن من الجيد أن أتقن التشكيل بنفسي، فأحيانا لا تعطيني الآلة الأشكال التي أريدها وهذا هو الفرق. بالتوفيق لك.
4 Likes
يبارك فيك خويا مصعب، ويحقق أمانيك، لطف منك شكرا 
3 Likes
شكرا لارا 
3 Likes
عظيم
3 Likes
شكرا للى توضيح ده بجد شكرا للى مجهودك ده معايا بجد اشكرك ثانيا ازاى وصلتى للى مرحله دى ايه الحاجات اللى عاملتيه عشان تبقى بى المستوى ده ؟ ممكن تقولى ليا عشان اطور نفسى فى اسرع واقت ؟
3 Likes
أتعلم أخي محمود لا أعرف بماذا سأجيبك، ظروفي كلها تحتم علي عدم الظهور في هذا المجال، لكن هناك أمل لا ينطفىء لحلم أتمنى بلوغه يوما إن شاء الله، لذلك وقودي الصبر والاصرار، عندكم مثل مصري يقول (طول البال يهدم جبال) أحاول إستثمار وقتي بتخصيص جزء منه يوميا دون إنقطاع لمواكبة التطورالسريع للمعلومات، والأهم عندي ليس كمية الوقت بل مقدار تركيزي على ما أتعلمه، كذلك البحث الجيد عن المعلومة التي أحتاجها، لمساعدتي على تنفيذ ما أرغب به وفق الحاجة لأتطور تدريجيا، ثم التطبيق والممارسة لترسخ المعلومة في ذهني. لا أعلم إن كنت أفدتك أولا ولكن هذا ما أقوم به شخصيا.
2 Likes
ما شاء الله يا لارا، كالعادة مستوى رفيع وطريقة سهلة في شرح المفاهيم 
مثل رائع 
1 Like
قطرة من بحركم. ألف مبروك التخرج أستاذنا مزيد من النجاح والتألق إن شاء الله، كما نتمنى لمنصتكم أيضا أن تكون السباقة في تعليم البرمجة بالعربية (لأنه على ما يبدوا هو العائق الأول الذي يمنع الأغلبية من التقدم في المجال) لتستقطب جميع شرائح المجتمع بما في ذلك الاطفال، ولما لا قد نراهم يطورون تطبيقات مهمة لمجتمعنا العربي، فمن يُوفرقدرة تعلم البرمجة للعرب دون تعلّم الانجليزية لهو فاتح جديد.
1 Like
ربي يبارك فيكي يا لارا
ليست “منصتكم” وإنما “مصنتنا” جميعاً يا لارا… في الأخير هي صرح تعليمي مفتوح للجميع والمجتمع هو من يقوم ببنائه 
بالفعل، هذه هو الوجهة بإذن الله، حينما يصبح الشباب لديهم القدرة، وقتها سيكون (تلقائياً) لدى الأطفال قابلية للدخول في هذا العلم.
نسأل الله لنا جميعاً التوفيق
1 Like
<li id="s2" class="items">
ليه يا لارا احنا بنحط id … class جوه عنصر واحد رغم اننا مش استعمالنا id ف css
؟