-->

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

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

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

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

إن كُنت مطور ويب أو واجهات أمامية، فبالتأكيد أنك قد سمعت عن موقع كود بن Codepen، والذي يعتبر من أشهر المواقع المتخصصة في تحرير وإختبار الأكواد HTML و CSS و Javascript أونلاين. والذي يحوي محتوى هائل ومميز من الأكواد والقوالب والمشاريع الجاهزة لواجهات أمامية وعناصر ويب مختلفة.

لذا قررت في مدمن ويب أن أشارككم أفضل الأكواد والقوالب والمشاريع الجاهزة (HTML و CSS و Javascript) على موقع كود بن CodePen في سلسلة من المقالات والتي سيبدأ جزأها الأول من هذا المقال، والتي ستساعدكم بشكل كبير ومذهل في تطوير أعمالكم ومشاريعكم على الويب وتصميم الواجهات الأمامية وكل من يعمل في مجال تطوير الويب والبرمجة.

{tocify} {$title=ستقرأ في هذا المقال}

ماهو موقع CodePen ؟

👋 CodePen هو منصة أو بيئة تنمية اجتماعية. في جوهره ، يسمح لك بكتابة التعليمات البرمجية والأكواد في المتصفح ، والاطلاع على نتائجها أثناء الإنشاء. محرر أكواد مفيد ومجاني عبر الإنترنت للمبرمجين ومطوري الويب، وخاصة لتمكين الأشخاص الذين يتعلمون البرمجة. فالموقع يكز بشكل أساسي على لغات برمجة الواجهات الأمامية مثل HTML و CSS و JavaScript وصيغ المعالجة المسبقة التي تتحول إلى تلك الأشياء. والذي يُعد الأفضل في هذا المجال.

إقرأ أيضا: أفضل المواقع لتنزيل قوالب و واجهات مواقع HTML/CSS مجانية.

لذا، وبعد أن عرفنا ماهو موقع CodePen، سأقدم لكم الجزء الأول من أفضل أكواد وقوالب HTML و CSS و Javascript جاهزة على Codepen والتي تعتبر من أروع واسهل الأكواد التي يمكنك التعلم منها والإستفادة ايضاََ منها وإستخدامها في أحد مشاريع الويب الخاصة بك، والذي ستتبعه أجزاء أخرى خلال الفترة القادمة بإذن الله تعالى.

يمكنك الإطلاع على الأجزاء الأخرى للسلسلة:


أفضل أكواد وقوالب HTML و CSS و Javascript على Codepen (الجزء الأول)

All the border-radius

لمعرفة جميع أشكال خاصية Border Radius على الـ CSS.

See the Pen All the border-radius' by Chris Coyier (@chriscoyier) on CodePen.


Sexy Grid

تعرف على خاصية الـ Grid بأسلوب رائع ومبسط من خلال هذه الصفحة والأكواد فيها.

See the Pen Sexy Grid by Srdjan Pajdic (@MightyShaban) on CodePen.


responsive <!-- No Div --> car

كود مذهل وبدون أي أكواد Div لسيارة متحركة Animated Car.

See the Pen responsive <!-- No Div --> car by abxlfazl khxrshidi (@abxlfazl) on CodePen.


Bootstrap 4.1 FAQ example with tabs and accordions

كثيراََ ما نحتاج في مواقعنا إلى تصميم خاص عبارة عن Tabs و Accordions وربما نقوم بالبحث عن مكتبات jQuery أو Css جاهزة للقيام بذلك. لذا الكود التالي على موقع كود بن فريد ومميز ويدمج بين الـ Tabs و Accordions بأسلوب رائع وبسيط.

HTML + CSS + jQuery

See the Pen Bootstrap 4.1 FAQ example with tabs and accordions by Morten Sørensen (@moso) on CodePen.


FAQ Accordion

كود رائع وبسيط لأكورديون الأسئلة الشائعة أو Frequently Asked Questions. والذي يمكنك الإستفادة منه وإستخدامه في مشاريعك أو في موقعك أو حتى في مدونتك على بلوجر أو ووردبرس.

HTML + CSS + jQuery

See the Pen FAQ by Katherine Kato (@kathykato) on CodePen.


Table No More - Resize screen to mobile size

كود بوتستراب رائع لجدول مع تأثير المرور على الصفوف والذي يمكنك الإستفادة منه وإستخدامه في مشاريعك أو في موقعك أو حتى في مدونتك على بلوجر أو ووردبرس.

HTML + CSS

See the Pen Table No More - Resize screen to mobile size by Shahen Algoo (@bootpen) on CodePen.

Slider | Responsive

كود سلايدر متحرك ومتجاوب على جميع الشاشات أنيق ورائع. (

HTML + CSS + jQuery + Javascript

See the Pen Slider | Responsive by Agustin Ortiz (@Creaticode) on CodePen.


CSS Category Filter System

كود رائع لقالب صفحة عرض عناصر مع خاصية الفلترة بأسلوب بسيط ورائع.

HTML + CSS

See the Pen Sistema de Filtro por Categorias CSS by Agustin Ortiz (@Creaticode) on CodePen.


إقرأ أيضا: مواقع رائعة لممارسة البرمجة وتطوير مشاريع الويب .

Pricing Table

قوائم الأسعار Pricing Table بقالب رائع وألوان جميلة.

HTML + CSS

See the Pen Pricing Table | Tabla de Precios by Agustin Ortiz (@Creaticode) on CodePen.


Pretty Tab Menu CSS/JS

كود جميل يدمج استخدام الـ Tabs كقوائم بأسلوب جميل.

HTML + CSS + JS

See the Pen Pretty Tab Menu CSS/JS by Agustin Ortiz (@Creaticode) on CodePen.

Accordion style drop-down menu

كود آخر رائع وجميل يدمج استخدام الـ الأكورديون Accordion مع القوائم Menu لتوليد قوائم منسدلة بخاصية الأكورديون Accordion بأسلوب جميل وبسيط ومع ميزة الأيقونات بجانب أسماء القوائم.

HTML + CSS + jQuery + Javascript

See the Pen Menú despegable estilo acordeón | Accordion Menu by Agustin Ortiz (@Creaticode) on CodePen.

Comments Box / List

كود رائع وبسيط لصناديق وفوائم التعليقات والذي يمكنك إستخدامه في مواقعك أو مدوناتك سواء على بلوجر أو ووردبرس.

HTML + CSS

See the Pen Comments Box / List | Lista de Comentarios by Agustin Ortiz (@Creaticode) on CodePen.


Paper 3D button effects

كود عرض لأشكال أزرار ورقية بتأثيرات مختلفة رائعة ومميزة.

See the Pen Paper 3D button effects by Chris Wright (@chriswrightdesign) on CodePen.


Preloaders

أكواد لأشكال أيقونات متحركة Preloaders والتي تظهر عند تحميل الصفحة.

See the Pen Preloader 2 by Foolish Developer (@fghty) on CodePen.

See the Pen Preloader 1 by Foolish Developer (@fghty) on CodePen.


إقرأ أيضا: 9 مواقع وأدوات مفيدة لتطوير و تصميم الواجهات الأمامية ومواقع الويب .

إقرأ أيضا: كيف تصبح مطور ويب (Full Stack Web Developer) ؟ .

button animation 3

أشكال لأزرار رائعة ومتحركة عند الضغط عليها بتأثيرات متحركة جميلة ومتنوعة.

See the Pen button animation 3 by Foolish Developer (@fghty) on CodePen.


team section

كود رائع لعرض بطاقات فريق العمل بأسلوب وتنسيق مميز وبأثيرات Flip عند مرور الماوس عليها.

See the Pen team section 2 by Foolish Developer (@fghty) on CodePen.


Flip subscribe Card

كود جميل لعرض بطاقة أو صندوق الإشتراك في قناة يوتيوب بأسلوب جميل وبسيط.

See the Pen Flip subscribe Card by Foolish Developer (@fghty) on CodePen.


CSS3 Box Shadows Effects

كود جميل لعرض أشكال تأثير الظل للصناديق والمربعات لإستخدامها في مشروعك أو موقعك.

See the Pen CSS3 Box Shadows Effects by Halil İbrahim Nuroğlu (@haibnu) on CodePen.


CSS 3D TEXT

كود رائع وبسيط لعرض النصوص بتقنية 3D بأسلوب رائع وجميل.

See the Pen CSS 3D TEXT by Foolish Developer (@fghty) on CodePen.


Skeleton Screen Loading Animation

كود رائع ومميز لعرض المحتوى كالصناديق والمربعات بتقنية Skeleton Screen Loading Animation.

See the Pen Skeleton Screen Loading Animation by Foolish Developer (@fghty) on CodePen.

الخلاصة

كان هذا هو الجزء الأول من سلسلة أفضل أكواد وقوالب HTML و CSS و JS ومشاريع جاهزة على Codepen والتي يقدمها مدمن ويب، والذي ستتبعه أجزاء أخرى ستتضمن أكواد Pens ومشاريع جاهزة رائعة ومميزة للإستفادة منها في تطوير أعمالكم ومشاريعكم ومواقعكم الألكترونية بشكل أفضل.

إذا كان لديك أي رابط لأكواد ومشاريع أخرى تقترحها علينا، فشاركها معنا في التعليقات أدناه لنقوم بإضافتها وإدراجها في الأجزاء القادمة.

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

نقاشات