تابع القناة30 مشروع
مشاريع Frontend
اتعلم بإنك تبني. ابدأ بمشاريع المبتدئ وانت ماشي في الرود ماب، وكل ما تخلص مرحلة جرّب مشروع أصعب.
- مبتدئHTML
Single-Page CV
اعمل CV في صفحة HTML واحدة تعرض فيها خبراتك.
التفاصيل على roadmap.sh - مبتدئHTML
Basic HTML Website
اعمل موقع بسيط بالـ HTML بس، فيه كذا صفحة.
التفاصيل على roadmap.sh - مبتدئCSS
Personal Portfolio
حوّل الموقع اللي فات لبورتفوليو شخصي بالـ CSS.
التفاصيل على roadmap.sh - مبتدئCSS
Changelog Component
اعمل component للـ changelog بتاع موقع بالـ HTML والـ CSS.
التفاصيل على roadmap.sh - مبتدئCSS
Testimonial Cards
اعمل كروت آراء العملاء لموقع بالـ HTML والـ CSS.
التفاصيل على roadmap.sh - مبتدئCSS
Datepicker UI
اعمل شكل datepicker بسيط بالـ HTML والـ CSS.
التفاصيل على roadmap.sh - مبتدئAccessibility
Accessible Form UI
اعمل فورم سهل الاستخدام لأي حد، بالـ HTML والـ CSS.
التفاصيل على roadmap.sh - مبتدئCSS
Image Grid Layout
رتّب مجموعة صور في grid بالـ HTML والـ CSS.
التفاصيل على roadmap.sh - مبتدئCSS
Tooltip UI
اعمل tooltip لعناصر القايمة بالـ HTML والـ CSS بس.
التفاصيل على roadmap.sh - مبتدئJavaScript
Tabs
اعمل component للتابات بالـ HTML والـ CSS والـ JavaScript.
التفاصيل على roadmap.sh - مبتدئJavaScript
Cookie Consent
اعمل بانر موافقة على الـ cookies بالـ JavaScript.
التفاصيل على roadmap.sh - مبتدئJavaScript
Restricted Textarea
اعمل textarea بيعد الحروف وانت بتكتب وليه حد أقصى.
التفاصيل على roadmap.sh - مبتدئJavaScript
Accordion
اعمل component للـ accordion بالـ HTML والـ CSS والـ JavaScript.
التفاصيل على roadmap.sh - مبتدئFrontend
Age Calculator
اعمل حاسبة عمر بالـ HTML والـ CSS والـ JavaScript.
التفاصيل على roadmap.sh - مبتدئFrontend
Flash Cards
اعمل تطبيق flash cards بأي framework.
التفاصيل على roadmap.sh - مبتدئHTML
Pricing Comparison Table
اعمل صفحة مقارنة أسعار بجدول HTML حقيقي وسهل الاستخدام.
التفاصيل على roadmap.sh - مبتدئHTML
Blog Post Page
اعمل صفحة مقال بـ HTML سليم: عناوين ولينكات وصورة بتعليق.
التفاصيل على roadmap.sh - مبتدئHTML
Contact Form
اعمل فورم تواصل بـ labels حقيقية وتحقق من البيانات من المتصفح.
التفاصيل على roadmap.sh - مبتدئHTML
Photo Showcase
اعمل صفحة صور بـ alt text وتعليقات، وفيديو متضمّن.
التفاصيل على roadmap.sh - مبتدئCSS
Pricing Cards
اعمل صف من تلات كروت أسعار بالـ HTML والـ CSS.
التفاصيل على roadmap.sh - متوسطFrameworks
Quiz App
اعمل تطبيق اختبارات في المتصفح يختبر أي معلومات.
التفاصيل على roadmap.sh - متوسطAPI
Weather Web App
اعمل تطبيق طقس بيجيب حالة الجو لأي مكان ويعرضها.
التفاصيل على roadmap.sh - متوسطAPI Integration
GitHub Random Repository
اعمل أداة بتجيب repository عشوائي من GitHub API.
التفاصيل على roadmap.sh - متوسطJavaScript
Custom Dropdown
اعمل dropdown بشكلك انت بالـ HTML والـ CSS والـ JavaScript.
التفاصيل على roadmap.sh - متوسطJavaScript
Task Tracker
اعمل to-do list تتابع بيها مهامك بالـ JavaScript.
التفاصيل على roadmap.sh - متوسطAPI Integration
Reddit Client
اعمل Reddit client بأعمدة subreddits تختارها انت.
التفاصيل على roadmap.sh - متوسطJavaScript
Temperature Converter
اعمل محوّل درجات حرارة بين الوحدات المختلفة.
التفاصيل على roadmap.sh - متوسطFrameworks
Pomodoro Timer
اعمل تايمر pomodoro يساعدك تركز وتنجز.
التفاصيل على roadmap.sh - متوسطCSS
Theme Switcher with CSS Variables
اعمل زرار يغير ثيم كارت باستخدام CSS variables.
التفاصيل على roadmap.sh - متقدمFrameworks
24hr Story Feature
اعمل نسخة من الـ stories بتاعة Instagram في المتصفح.
التفاصيل على roadmap.sh
مبنية على roadmap.sh/frontend/projects.