اذهب إلى المحتوى
  • 0

تصميم موقع انفوجرافيك

عبد الواحد الحدادي

السؤال

مرحبا بكم من جديد إخواني وأخواتي الكرام؛ 

كنت أبحث عن المواقع الجميلة لكي أحاول تصميمها وتقليدها استناداً على ما تعلمته من هذه الدروة الجميلة، وأفضل ما انجذبتُ إليه هو تصميم موقع على طريقة الانفوجرافيك، فكيف يمكنني تصميمه وهل له لغات أخرى تساعد على تصميمهِ ... هذا رابط لموقع يبرز ما أريد الوصول إليه ~ اضغط هنا

أرجو مساعدتكم، وشكرا جزيلاً لكم أيها المحترمين .

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

مرحبًا عبد الواحد.

يمكنك تصميم موقع مشابه للموقع الذي قمت بإرساله باستخدام HTML و CSS و JavaScript و Bootstrap مع استخدام بعض مكتبات JavaScript مثل:

  •  مكتبة aos.js و هي المكتبة التي تم استخدامها لصنع الحركات ال animations يمكنك الاطلاع على التوثيق الخاص بها من هنا.
  • مكتبة sweet alert.js و هي المكتبة المسؤولة عن إظهار حاويات منبثقة لتأكيد عملة إرسال البيانات في الجزء الخاص بالمراسلة يمكنك الإطلاع على التوثية الخاص بها من هنا5f6a8f56acea8_Screenshot(2132).thumb.png.5ef521e4f2effedf323fb73018a2fe09.png

 

  • مكتبة owl carousel.js  و هي المكتبة التي تم استخدامها لبناء ال carousel في قسم our clients يمكنك الاطلاع على التوثيق الخاص بها من هنا.5f6a907e72ee1_Annotation2020-09-23015535.thumb.jpg.f2d10c7fdb584c71063f24162e8e0060.jpg

 

يمكنك بناء جميع أقسام الموقع باستخدام HTML و css و javaScript و jquery و Bootstrap و بعض التأثيرات الخاصة ب css التي قمت بتعلمها خلال الدورة.

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

بالتوفيق.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

يمكنك تصميم نفس الموقع المطروح و أكثر من ذلك، انت قد تعلمت css و html و js،  إذا لديك الأساسيات في تصميم الويب و يمكنك تطوير ذاتك من خلال قيامك ببناء أعمال متنوعة و بأشكال كثيرة.

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

  • سأطرح عليك هنا بعض المكتبات التي سوف تساعدك في بناء مواقع إنفوجرافيك وغيرها بشكل أنيق و وفق ما تعلمته من مهارات و أساسيات في التصميم :
    • btn.css : مكتبة توفر لك العديد من الأزرار بأشكال متعددة و متوافقة مع جميع الشاشات.
    • button with effect : عدة أزرار بأشكال متعددة بالإضافة لوجود أيقونات تساعد في إظهار مظهر جذاب و عصري، يمكنك الإستعانة بهم و إستخدامهم بسيط.
    • font awesome : مكتبة توفر لك العديد من الأيقونات التي تساعد في إظهار موقعك بشكل جذاب و أنيق و ملفت، يمكنك تعديل ألوانها و أحجامها بكل سهولة و سأترك لك هنا فيديو يوضح لك طريقة إستخدام هذه المكتبة.

بالتوفيق.

 

تم التعديل في بواسطة ياسين عناية
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

يمكنك تصميم موقع مشابة للموقع المطروح واجمل من ذلك ايضاً عن طريق معرفة جيده جدأ ب HTML ,CSS .

ولكي تحترف التصميم يجب عليك معرفة جيده لأخر إصدارات HTML5 CSS3 

وأنصحك بالتعمق فى هذه الخواص من css :

تستطيع جعل هذا الموقع متوافق على جميع الشاشات بواسطة :

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...