نبذة عامة
قد تكون قد سمعت عن موقع الكود بن ، وهو وموقع معروف جدا ومشهور ، ولكن ان لم يسبق وسمعت عنه ، يمكنك الدخول له وتفحصه ، وهذا درس يشرح بشكل مفصل ، في هذه التدوينة سيتم نشر مجموعة من أروع واسهل الأكواد التي يمكنك التعلم منها والإستفادة ايضاََ كإستخدامها في أحد مشاريعك القادمة .
Bullseye Game
كود بإستخدام الـ HTML , CSS , JS ، يمكنك اعتباره كلعبة جميلة ، يمكنك تعلم الكود من خلالها فربما تأتيك أفكار بشكل أفضل .!
Pure Css “day and night” toggle
كود بإستخدام الـ HTML , CSS ، لإنشاء زر التبديل ، ويمكنك استخدامه في التبديل ما بين الوضع المظلم أو الوضع المضىء ..
CSS Card Hover Effects
كود فقط بإستخدام الـ HTML , CSS ، اذا كان لديك مجموعة من الأقسام وكل قسم له صورة ، وعنوان ونص قصير ، هذا كود جميل وانيق مع ثأثير أجمل عند إقتراب مؤشر الفأرة يلبي إحياجك لذلك ..
Social Link
إذا كنت تريد عرض مواقع التواصل الإجتماعى عبر موقعك ، يمكنك إستخدام هذه الأكواد ،وايضاََ يمكنك الإستفاده منها فى تطوير نفسك ، فهى مكتوبة بواسطة HTML + CSS فقط بالإضافة إلى إستخدام الانيميشن الموجود فى CSS3
Day Night Simulation
كود رائع وجميل ، ويعطيك الكثير من الإلهام انصحك بشدة برؤيته !
HTML + CSS + jQuery
PureCSS Tabs
كثيراََ ما نحتاج في مواقعنا إلى تصميم خاص عبارة عن Tabs وربما نقوم بالبحث عن مكتبات jQuery أو Css جاهزة للقيام بذلك ،
هذا كود سهل وبسيط ويمكنك استخدامه بسهولة في كيفية عمل Tabs بواسطة الـ CSS فقط .
CSS3 Loading animations
أحياناََ يكون لدينا سرعة الإنترنت بطيئة ، وبعض العناصر تظهر بشكل غريب اثناء التحميل ، ومن أجل ذلك يتم إضافة Spinner Loading ويتم إختفائها أثناء انتهاء تحميل الموقع.
يمكنك مشاهدة هذا الكود قد يساعدك بشكل كبير إما بإستخدامه أو إلهامك ببعض الأفكار لعمل شىء مشابه له .
رابط المعاينة – تعلم كيف أقوم بإنشاء Spinner Loading
Messaging App UI with Dark Mode
لربما تعمل الان على مشروع يحتوى على نظام محادثة ، هنا كود جميل وواضح وايضاََ متجاوب على جميع الشاشات ، ويحتوى على النظام الليلي .
MY ACCORDION
إنشاء أكوردين مع أنيميشن جميل ، بواسطة الـ HTML + CSS فقط .
Modal CSS
كود عبارة عن Modal أو ما يسمى أيضاََ بـ PopUp مبني بواسطة الـ HTML + CSS فقط ، ربما تستفيد منه في مشاريعك أو التعلم منه .
مجموعة من الأكواد الخاصة بصفحة 404
أحياناََ عندما يكون المستخدم في موقعنا ويريد البحث عن صفحة معينة ، وربما هذه الصفحة لا تكون موجودة في موقعنا ، حتى لا يعطيه صفحة بنتيجة غير او مفهومة أو صفحة بيضاء
نقوم بإستخدام صفحة 404 ، وهذه مجموعة من الأكواد التي يمكنك استخدامها .
1- Fargo 404
2- No Vacancy 404
3- 404 – Lost In Space
5- 404 page
إذا كنت مولعا بالأكواد والبرمجة وتمتلك موقع شخصي ربما هذه الصفحة ستفيدك .
Direction-aware hover effect
إذا كان لديك قسم في موقعك عبارة عن مجموعة من الـ Blocks ، ربما يكون عبارة عن عرض الأعمال ، أو عرص صور معينة أو أي كان ، هذا قد يساعدك كثيراََ .
