-->

أفضل الأكواد والمشاريع HTML و CSS و JS الجاهزة على Codepen (الجزء الثاني)

الجزء الثاني من سلسلة أفضل أكواد وقوالب HTML و CSS و JS ومشاريع جاهزة على Codepen لاستخدامها في مشاريع الويب وتصميم الواجهات الامامية.

أفضل الأكواد والمشاريع HTML و CSS و JS الجاهزة على Codepen (الجزء الثاني)

أفضل الأكواد والمشاريع HTML و CSS و JS الجاهزة على Codepen (الجزء الثاني)

إستمرار لما كنت قد أطلقته قبل عدة أيام على مدمن ويب، وهي سلسلة أفضل الأكواد والقوالب والمشاريع الجاهزة (HTML و CSS و Javascript) على موقع 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 تقترحها علينا، فشاركها معنا في التعليقات أدناه لنقوم بإضافتها وإدراجها في الأجزاء القادمة.

كلمات مفتاحية: #أفضل-أكواد #أفضل-قوالب-html #أفضل-أكواد-codepen #أفضل-مشاريع-codepen #best-codepen  #مشاريع-جاهزة #تطوير-ويب #واجهات-أمامية
DMCA.com Protection Status
جميع الحقوق محفوظة لـمدمن ويب ©

نقاشات