Web Development Essentials: HTML, CSS, and Figma Layouts
Learn to convert design mockups into responsive websites using modern HTML, CSS, BEM methodology, and Git to build your frontend developer portfolio.
💬مدرب ذكاء اصطناعي اسأل عن أي درس واحصل على إجابة واضحة فورًا، في أي وقت.
🕐ابدأ في أي وقت بلا جداول أو مواعيد نهائية — تعلّم بوتيرتك، وقتما يناسبك.
🌐بالعربية الدروس والمهام والشهادة — كل ذلك بلغتك بالكامل.
حول هذه الدورة
Building modern, responsive websites starts with mastering core frontend technologies and learning how to translate design files into functional web pages. This text-based course guides you step by step through structural HTML, styled CSS, design layout inspection in Figma, and professional version control with Git.
You will gain practical confidence by working through written explanations and code exercises. By understanding foundational layout techniques, responsive design principles, and project workflow basics, you will be ready to build real-world web pages and present your work to potential clients or employers.
What you'll learn:
- Learn foundational web terminology, semantic HTML5 tags, and core CSS3 styling principles
- Apply modern layout techniques using CSS Flexbox, Grid, and mobile-first responsive design
- Inspect design mockups in Figma to extract accurate colors, typography, spacing, and CSS properties
- Implement BEM naming conventions for clean, maintainable, and structured frontend code
- Master Git and GitHub workflows to track code changes and host your project portfolio
- Understand basic web accessibility guidelines and key considerations for starting freelance web projects
The training starts with foundational definitions, element syntax, and document structure before advancing to practical layout techniques and design integration. You will conclude by learning version control workflows to publish your web projects online.
This course is designed for absolute beginners with no prior coding or design experience required. Start reading today to build your frontend skillset and take your first steps in web development.
محتوى الدورة
ما الذي ستحصل عليه
📜شهادة إتمام أضفها إلى ملفك على LinkedIn
💬مدرّس AI شخصي عالق في دورة؟ اسأل مدرّسك المدمج أي شيء، في أي وقت.
🎧النسخة الصوتية مضمَّنة تعلَّم أثناء تنقُّلك — دون شاشة
♾️وصول مدى الحياة عُد متى شئت، بلا انتهاء
📱الهاتف أو الكمبيوتر يعمل في أي مكان وعلى أي جهاز
💸استرداد خلال 14 يومًا دون أسئلة
⚡قصير ومركَّز 2 ساعة 54 دقيقة من المحتوى التطبيقي
شهادة إتمام
كل دورة تكملها على PickAClass تُصدر شهادة كهذه — أصلية، بكودها الخاص، قابلة للتحقّق عبر الرابط، ومفصّلة عمّا أُثبت فعلًا.
P
PickAClass
ملف المهارات · قابل للتحقّق
وثيقة
شهادة إتقان
تشهد هذه الوثيقة بأن
الاسم واللقب
أثبت بنجاح إتقان
Web Development Essentials: HTML, CSS, and Figma Layouts
المهارات المُثبَتة
✓
تحليل أنماط السلوك
تأسيسي
1.2 ساعة
✓
أطر معمارية لاتخاذ القرارات
متمكّن
1.4 ساعة
✓
تصميم اختبار A/B
متمكّن
1.7 ساعة
✓
كتابة نصوص سلوكية
متقدّم
1.9 ساعة
P
PickAClass — الاسم واللقب
Web Development Essentials: HTML, CSS, and Figma Layouts