أفضل الأكواد والمشاريع HTML و CSS و JS الجاهزة على Codepen (الجزء الثاني)
تطوير ويب لغات برمجة
إستمرار لما كنت قد أطلقته قبل عدة أيام على مدمن ويب، وهي سلسلة أفضل الأكواد والقوالب والمشاريع الجاهزة (HTML و CSS و Javascript) على موقع CodePen والتي بدأتها بجزأها الأول في المقال أفضل أكواد وقوالب HTML و CSS و JS ومشاريع جاهزة على Codepen (الجزء الأول). أعود إليكم بقائمة جديدة لأفضل أكواد ومشاريع HTML و CSS و JS جاهزة على Codepen (الجزء الثاني) للإستفادة منها في مشاريعكم وأعمالكم أو للإلهام لأي أفكار جديدة لعناصر في مواقعكم ومشاريعكم في مجال تطوير الويب والواجهات الأمامية.
- أفضل الأكواد والمشاريع HTML و CSS و JS الجاهزة على Codepen (الجزء الأول).
- أفضل الأكواد والمشاريع HTML و CSS و JS الجاهزة على Codepen (الجزء الثالث).
- أفضل الأكواد HTML و CSS و JS الجاهزة على موقع Codepen (الجزء الرابع).
- أفضل أكواد HTML و CSS و JS جاهزة على Codepen (الجزء الخامس).
- أفضل أكواد HTML و CSS و JS جاهزة على Codepen (الجزء السادس).
- أفضل أكواد وقوالب HTML و CSS و JS ومشاريع جاهزة على Codepen (الجزء السابع)
والتي ستساعدكم بشكل كبير ومذهل في تطوير أعمالكم ومشاريعكم على الويب وتصميم الواجهات الأمامية وكل من يعمل في مجال تطوير الويب والبرمجة.
{tocify} {$title=ستقرأ في هذا المقال}أفضل أكواد ومشاريع HTML و CSS و JS جاهزة على Codepen (الجزء الثاني)
Better bullets for lists
ستايلات جميلة متحركة لقوائم مع تأثيرات متحركة عند مرور الماوس عليها.
See the Pen Better bullets for lists by Ibrahim Jabbari (@ibrahimjabbari) on CodePen.
Duplicate Word Finder
كود رائع لسكربت التحقق من الكلمات المكررة في النصوص بأسلوب سهل وجميل.
See the Pen Duplicate Word Finder by Bence Szabo (@finnhvman) on CodePen.
Video Sharing Platform UI
قالب واجهة موقع فيديوهات مشابه لليوتيوب بتصميم رائع ومميز
See the Pen Video Sharing Platform UI by Aysenur Turk (@TurkAysenur) on CodePen.
Slack / Discord Cyberpunk 2077 redesign w/ Preact
واجهة أمامية رائعة بتأثيرات مميزة وبمظهر جميل وفريد داكن مشابه لواجهة Discord.
HTML + CSS + jQuery
See the Pen Slack / Discord Cyberpunk 2077 redesign w/ Preact by Hussard (@hussard) on CodePen.
Cookie Bannier
كود عرض رسالة الكوكيز بأسلوب فريد ومميز يمكنك الإستفادة منه واستخدامه في مشاريعة أو موقعك الإلكتروني.
HTML + CSS + Javascript
See the Pen Cookie Bannier by Aaron Iker (@aaroniker) on CodePen.
SAP ScrollTrigger - Demo
كود مميز يبين عمل خاصية ScrollTrigger لعرض أقسام الصفحة بأسلوب حركي مميز عند التمرير للأسفل.
HTML + CSS + Javascript
See the Pen GSAP ScrollTrigger - Demo by Noel Delgado (@noeldelgado) on CodePen.
Job Search Platform UI
مشروع واجهة أمامية لموقع أو تطبيق ويب لعرض الوظائف الشاغرة كمنصة توظيف بمظهر مميز وفريد
HTML + CSS + jQuery + Javascript
See the Pen Job Search Platform UI by Aysenur Turk (@TurkAysenur) on CodePen.
Navigation PageDesign/Lesson
كود رائع لقالب صفحة هبوط أو ما يسمى مواقع الصفحة الواحدة OnePage Website.
HTML + CSS + jQuery + Javascript
See the Pen Navigation PageDesign/Lesson by Sara Mazal Web (@Saramazal) on CodePen.
إقرأ أيضا: مواقع رائعة لممارسة البرمجة وتطوير مشاريع الويب .
Simple CSS Waves | Mobile & Full width
كود جميل ومميز CSS لأمواج متحركة
HTML + CSS
See the Pen Simple CSS Waves | Mobile & Full width by Goodkatz (@goodkatz) on CodePen.
Messaging App UI with Dark Mode
مشروع واجهة أمامية لتطبيق ويب محادثة ودردشة بمظهر مميز وفريد
HTML + CSS + JS
See the Pen Messaging App UI with Dark Mode by Aysenur Turk (@TurkAysenur) on CodePen.
Glassmorphism Creative Cloud App Redesign
مشروع واجهة أمامية بمظهر وألوان فريدة ومميزة و
HTML + CSS + jQuery + Javascript
See the Pen Glassmorphism Creative Cloud App Redesign by Aysenur Turk (@TurkAysenur) on CodePen.
Responsive Social Platform UI
مشروع واجهة أمامية أو قالب لموقع تواصل إجتماعي بمظهر فريد وبألوان داكنة رائعة
HTML + CSS + jQuery + Javascript
See the Pen Responsive Social Platform UI by Aysenur Turk (@TurkAysenur) on CodePen.
Skateboard Video Platform
مشروع واجهة أمامية أو قالب لموقع فيديوهات ومشاركة مقاطع الفيديو بألوان داكنة مميزة. القالب مليء بالتأثيرات والمزايا الفريدة والتي ستلهمك في أعمالك ومشاريعك لإظهارها بشكل مميز وفريد.
See the Pen Skateboard Video Platform by Aysenur Turk (@TurkAysenur) on CodePen.
Task Manager UI with CSS Grid
قالب ومشروع واجهة أمامية جاهزة لتطبيق إدارة مهام بألوان رائعة ومظهر فريد.
See the Pen Task Manager UI with CSS Grid by Aysenur Turk (@TurkAysenur) on CodePen.
See the Pen Customer Management UI by Aysenur Turk (@TurkAysenur) on CodePen.
إقرأ أيضا: 9 مواقع وأدوات مفيدة لتطوير و تصميم الواجهات الأمامية ومواقع الويب .
CSS Glitched Text
كود رائع لتأثير نصي متحرك بتقنية الجليتك CSS
See the Pen CSS Glitched Text by Ibrahim Jabbari (@ibrahimjabbari) on CodePen.
Hover Reveal Effect
كود رائع لتأثير صندوق منبثق عند مرور الماوس فوق نص أو كلمة.
See the Pen Hover Reveal Effect by Ibrahim Jabbari (@ibrahimjabbari) on CodePen.
How to wrap text around an image using HTML/CSS
كيفية التفاف النص حول صورة باستخدام HTML / CSS.
See the Pen How to wrap text around an image using HTML/CSS by Ibrahim Jabbari (@ibrahimjabbari) on CodePen.
Instagram re-design
مشروع واجهة أمامية بمظهر مشابه لموقع إنستغرام.
See the Pen Instagram re-design by Aysenur Turk (@TurkAysenur) on CodePen.
animation-page
واجهة أمامية متحركة وجميلة لصفحة دخول.
See the Pen animation-page by Aysenur Turk (@TurkAysenur) on CodePen.
Animated background
خلفية متحركة جميلة CSS.
See the Pen Animated background by Marco Barría (@fixcl) on CodePen.
الخلاصة
كان هذا هو الجزء الثاني من سلسلة أفضل أكواد ومشاريع HTML و CSS و JS الجاهزة على Codepen والتي يقدمها مدمن ويب، والذي ستتبعه أجزاء أخرى ستتضمن أكواد Pens ومشاريع جاهزة رائعة ومميزة للإستفادة منها في تطوير أعمالكم ومشاريعكم ومواقعكم الألكترونية بشكل أفضل.
إذا كان لديك أي تعليق أو روابط لأكواد ومشاريع أخرى على موقع Codepen تقترحها علينا، فشاركها معنا في التعليقات أدناه لنقوم بإضافتها وإدراجها في الأجزاء القادمة.
