تخطيط وتطوير مواقع الويب. تطوير الويب للمستوى المتقدم - دورة 1990 فرك. من ستيبيك، تدريب 131 درسًا، التاريخ: 1 ديسمبر 2023.
Miscellanea / / December 04, 2023
مرحبًا!
اسمي ديما. وأنا أدعوك للغوص في أعماق إنشاء موقع الويب وتخطيطه!
هذه الدورة مخصصة لأولئك الذين يعرفون الأساسيات بالفعل، ولكنهم يريدون الانتقال من مستوى جيد في إنشاء مواقع الويب إلى مستوى ممتاز.
الدورة مخصصة لأولئك الذين يعرفون أساسيات HTML وCSS، ولكنهم يعلمون أنه لا يزال هناك العديد من التقنيات وتقنيات التطوير والتقنيات التي يستخدمها المطورون المحترفون الحقيقيون.
إذا كان هذا يبدو مألوفًا، فهذه الدورة مخصصة لك)
أضف الحياة إلى مواقع الويب الخاصة بك باستخدام الرسوم المتحركة الحديثة عبر CSS
سنبدأ بإدخال الديناميكيات في مواقعنا، أي أننا سنقوم بالرسوم المتحركة. سوف نتعلم كيفية تحريك الأزرار والنصوص والعناوين باستخدام CSS النقي، وسنتعلم كيفية إنشاء رسوم متحركة للبطاقات، وإنشاء قائمة تنقل ديناميكية، وكل هذا بدون سطر واحد من كود JS، فقط CSS خالص.
تحتوي هذه الدورة على أفضل الممارسات في التصميم سريع الاستجابة.
ستتعلم طرقًا وحيلًا جديدة لتصميم مواقعك بشكل سريع الاستجابة، واستخدام تقنيات جديدة لتحديد استعلامات الوسائط وكتابتها، وستتعلم كيفية قم بتكييف جميع عناصر الصفحة عن طريق تغيير خاصية CSS واحدة فقط بحيث يبدو موقعك أفضل من أي وقت مضى على أي جهاز محمول جهاز
تعلم كل تعقيدات ومزايا المعالجات المسبقة الحديثة
سوف تتعلم كيفية تسريع إنشاء موقع الويب الخاص بك عدة مرات باستخدام الإمكانات الكاملة لمعالج SASS الأولي، مثل الخلطات والمتغيرات والوظائف.
الأساسيات الأساسية لاستخدام NPM
كما أن حزم NPM مع المكونات الإضافية اللازمة لكل مطور محترف ستمنحنا الفرصة لإنشاء مواقع الويب وتحسينها بشكل أسرع وأكثر كفاءة من أي وقت مضى.
سيساعدك نظام التحكم في إصدار Git في تطويرك
بالإضافة إلى ذلك، سوف تتعلم الأساسيات اللازمة للعمل مع نظام التحكم في إصدار git بحيث تكون لديك دائمًا القدرة على العودة إلى الإصدار الصحيح من موقعك، بغض النظر عن مدى سوء الأخطاء التي ارتكبتها في المرة الأخيرة تحديث الموقع)
أنت تقوم بإنشاء موقعين حديثين لمحفظتك
هذه الدورة مبنية على الممارسة وتنقسم إلى دروس فيديو صغيرة سنقوم فيها خطوة بخطوة بإنشاء مشروعين حديثين كبيرين على النظام العائم - حتى تتمكن من دعم المشاريع القديمة وبالطبع على نظام GRID CSS، الذي يسمح لك بإنشاء تخطيطات ذات تعقيد لا يصدق.
وبالطبع، لن تخجل من عرض هذه المشاريع على عملائك المحتملين أو أصحاب العمل المستقبليين.
أنا دائما على اتصال!
وكن مطمئنًا، فلن تترك وحدك، لأنه بعد كل درس صغير، ستتاح لك الفرصة لمقارنة الكود الخاص بك مع الكود الخاص بي أو ببساطة طرح سؤال؛ عادةً لا تستغرق الإجابات وقتًا طويلاً للوصول.
ضمان استعادة الاموال!
وإذا كان لا يزال لديك شكوك، فإن هذه الدورة توفر لك الفرصة لإعادة الأموال التي أنفقتها عليها إذا لم تعجبك خلال 30 يومًا.
انضم إلي وسنتعلم معًا كيفية إنشاء مواقع ويب احترافية وحديثة.
اراك في الفصل!
9
الدوراتلقد قمت بإنشاء دورات أصلية عبر الإنترنت منذ عام 2016. أقوم بتدريس العمل مع محرري الرسوميات في Adobe بشكل احترافي، وأقوم بتدريس التصميم وتطوير الويب.
مرحبًا! اسمي ديما! لا أريد التباهي، لكن يجب علي ذلك) لقد قمت بتدريس أكثر من 5000 طالب حول العالم في دوراتي التدريبية الخاصة عبر الإنترنت. أكثر من 2000 مراجعة حقيقية بمتوسط تقييم 4.83 من 5.00! أقوم بتدريس تصميم الويب وتطوير الويب والبرامج اللازمة (Photoshop Illustrator، Figma). تتكون خبرتي في التدريس من 5 سنوات من التدريس المستقل، بالإضافة إلى التدريس من خلال المدارس والدورات التدريبية عبر الإنترنت، على منصات التعلم عن بعد العالمية. يلاحظ طلاب دوراتي أفضل صفاتي في الطريقة التي أقدم بها المواد دون حشو، وبطريقة ممتعة ومثيرة للاهتمام.
التحضير / التكرار / الرسوم المتحركة الأولى
1. مرحبًا!) قم بتنزيل المواد الخاصة بالدورة
2. تثبيت وتكوين البرامج اللازمة
3. مسار مقطع خاصية جديد. نبدأ في إنشاء القسم الأول من الموقع
4. إذا لم يعمل تطبيق الكشفية بالنسبة لك
5. التدريب العملي: قم بإنشاء الشكل الخاص بك باستخدام Clip-path
6. محاذاة العناصر عموديًا باستخدام الموضع المطلق
7. تعرف على @KeyFrames. لنقم بإنشاء الرسوم المتحركة الأولى.
8. رؤية الواجهة الخلفية وإنشاء الأزرار من خلال الفئات الزائفة
9. تحريك زر باستخدام العناصر الزائفة
10. وضع ملء الرسوم المتحركة. بدء الرسوم المتحركة من نقطة محددة.
11. 3 مبادئ لتطوير الويب
12. استخدم REM بدلاً من PX
جيت و جيثب
1. ما هو موضوع هذه الكتلة؟
2. الأوامر الأساسية في المحطة
3. كيفية تحرير الملفات عبر المحطة
4. قم بتثبيت نظام git على جهاز الكمبيوتر الخاص بنا
5. كيفية تشغيل git في مشروع معين
6. إنشاء الالتزام الأول
7. تقديم مشروع إلى جيثب
8. إذا كان لديك خطأ عند إرسال مشروعك إلى GitHub
9. خطأ في تسجيل الدخول عند محاولة دفع مشروع إلى GitHub
10. الممارسة: قم بإنشاء مستودعك الخاص
11. كيفية حذف مستودع جيثب
12. كيفية تنزيل المستودعات من جيثب
13. نحن نحاكي عمل مطورين في مستودع واحد
14. كيفية عرض معلومات حول الالتزامات في المحطة. سجل جيت
15. ما هي الفروع
16. كيفية إنشاء الفروع والتنقل فيها.
17. نقوم بسد الفجوة من بداية الدورة التدريبية المصغرة بالرمزين -u و -M
18. حدث خطأ في الالتزام غير محفوظ أثناء الخروج
19. كيفية دفع التغييرات التي تم إنشاؤها إلى فرع جديد
20. كيفية دفع الالتزامات المتعددة إلى فرع جديد
21. ما هي حالة الرأس المنفصل؟ رأس منفصل
22. كيفية استعادة ملف معين من التزام سابق
23. سجل git المتقدم وعرض git
24. كيفية دمج الفروع باستخدام Git merge. طريقة التقديم السريع
25. كيفية حذف الفروع
26. كيفية إزالة ملفات الدليل من حالة عدم التعقب
27. إعادة ضبط البوابة - صعب. كيفية التراجع الصعب عن الالتزام
28. الطريقة الثانية للعثور على التزام عالق باستخدام ORIG_HEAD
29. إعادة ضبط البوابة --soft
30. Git Commit --amend تغيير تعليق الالتزام السابق
31. إعادة تعيين بوابة - مختلط
32. الفرق بين إعادة ضبط git واستعادة git
33. مقدمة إلى فرق جيت. طباعة الفرق بين العديد من الالتزامات على وحدة التحكم
34. مثال عملي على استخدام git diff
35. كيفية عرض مخطط الفرع في المحطة. سجل جيت --الرسم البياني
36. نقوم بدمج الفروع باستخدام git merge. طريقة "الاندماج الحقيقي"
37. كيفية التراجع بعد الدمج
38. كيفية نسخ التزام محدد باستخدام git Cherry-Pick
39. دمج الفروع مع git rebase
40. أيهما أفضل git rebase أم git merge؟
41. كيفية استخدام ملف .gitignore
42. كلمة أخيرة
التخطيط المتقدم - CSS/SASS
1. ما هو موضوع هذه الكتلة؟
2. كيف تعمل متغيرات SASS
3. طريقة عمل الخلطات
4. كيفية إضافة الوسائط إلى mixins
5. ما هي قوالب SASS؟
6. كيف تعمل وظائف SASS
7. تنظيم ملفات SASS لمشروع كبير
8. 3 طرق لوضع العناصر
9. كيف يعمل تعويم؟
10. إنشاء نظام الشبكة الخاصة بنا
11. تطبيق التدرج على النص. مقطع الخلفية
12. كيفية إنشاء الرموز باستخدام HTML
13. تحريك وإنهاء الجزء الثاني
14. كيفية إنشاء الخطوط أيقونة الخاصة بك
15. نحن نستخدم خاصية المنظور لتعكس منظور العناصر
16. كيف يعمل وضع المزج في CSS
17. إنهاء القسم بالبطاقات
18. كيفية تقريب النص باستخدام خاصية الشكل الخارجي
19. كيف تعمل مرشحات CSS
20. كيفية إضافة فيديو إلى الصفحة
21. التعرف على علامة النموذج ومحتوياتها
22. تحريك النموذج
23. إنشاء زر الاختيار الخاص بك باستخدام CSS
24. إنشاء تذييل موقع الويب
25. إنشاء قائمة تنقل باستخدام CSS خالص - الجزء الأول
26. إعداد انتقالات سرعة الرسوم المتحركة باستخدام cube-bezier
27. الرسوم المتحركة همبرغر
التصميم التكيفي
1. ما هو موضوع هذه الكتلة؟
2. كيفية إنشاء مواقع ويب سريعة الاستجابة
3. إنشاء مزيج مع قواعد الوسائط
4. التكيف مع المشروع الجزء 1
5. التكيف مع المشروع الجزء 2
6. التكيف مع المشروع الجزء 3
7. ما هي الصور المستجيبة
8. كيفية التكيف مع الصور في HTML
9. دعونا نكيف صور HTML في مشروعنا
10. التكيف مع الصور CSS
11. بعض التعديلات النهائية للموقع
مدير حزمة العقدة
1. ما هو موضوع هذه الكتلة؟
2. ما هو Node.js و npm
3. تحضير الحزمة الأولى npm للاستخدام
4. إطلاق الحزمة الأولى من npm
5. باستخدام بلع في مشروعنا
6. كيفية فتح موقع على شبكة الإنترنت على الهاتف المحمول
مقدمة إلى CSS GRID
1. ما هو موضوع هذه الكتلة؟
2. تحضير
3. كيفية إنشاء قالب الشبكة. قالب الشبكة
4. كيف تعمل وحدات fr
5. كيفية نقل عنصر إلى خلية أخرى
6. وضع عناصر متعددة في خلية واحدة
7. الممارسة: إنشاء تخطيط موقع الويب
8. مثال للمعلم. إنشاء تخطيط
9. كيفية إعادة تسمية كل سطر في الشبكة
10. كيفية إنشاء قالب الشبكة باستخدام نظام التسمية
11. ما هي الشبكات الصريحة والضمنية؟
12. كيفية محاذاة العناصر داخل الخلايا
13. كيفية محاذاة الشبكة داخل الحاوية
14. محتوى الحد الأدنى والحد الأقصى
15. الملء التلقائي والملاءمة التلقائية. أحجام الخلايا على أساس المحتوى
16. خاتمة. حديقة الشبكة
مشروع GRID CSS
1. ما هو موضوع هذه الكتلة؟
2. تحضير
3. إنشاء قالب الشبكة الجزء 1
4. إنشاء قالب الشبكة الجزء 2
5. كيف تعمل نقوش SVG
6. لقد انتهينا من القسم الثاني من الموقع
7. إنشاء قسم "الشعار" الجزء الأول
8. إنشاء قسم "الشعار"، الجزء الثاني
9. إنشاء قسم بالبطاقات
10. إنشاء معرض
11. إنشاء تذييل
12. صنع "الهمبرغر"
13. إنشاء رأس الجزء 1
14. إنشاء رأس الجزء 2
15. نحن نتكيف مع الموقع
نراكم مرة أخرى!
1. مع السلامة!
احصل على شهادتك
1. اختبار للحصول على شهادة إتمام الدورة