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