تنميط متقدم بتصميم سريع الاستجابة from Coursera

What's inside

Syllabus

الأسبوع الأول: النمط مع التصميم سريع الاستجابة

ماذا يعني أن يكون لديك تصميم سريع الاستجابة لموقعك الخاص؟ كيف يمكنك معرفة ما إذا كان موقعك الحالي سريع الاستجابة أم لا؟ سنبدأ هذا الأسبوع بالنظريات الكامنة وراء "نموذج الجوال أولًا" – وهي فكرة تعني أن موقع الجوال الخاص بك لابد وأن يوفر كل ما هو مطلوب، وليس نسخة مختصرة من صفحة جيدة. ونُنهي الأسبوع باتخاذ أول خطوة ملموسة باستخدام قياسات المرونة في CSS الخاصة بك.

أسبوعين: مفاهيم أساسية

ستتاح لك هذا الأسبوع فرصة لتطبيق النظريات باستخدام استعلامات الوسائط في CSS الخاص بك. يمكن أن تكتشف هذه الاستعلامات تلقائيًا حجم المتصفح المستخدم لعرض الصفحة بحيث يمكنك تحديد نوع النمط الذي تريد تحقيقه. سوف يوجد أيضًا مناقشة حول الممارسات الشائعة لتصميم طرق عرض مختلفة بأحجام شاشات مختلفة ("منافذ العرض").

الأسبوع الثالث: استخدام الإطارات الموجودة

يمكن استخدام الأدوات الموجودة وذلك بعد أن ينتهي كل مبرمج جيد ويقضي وقتًا في إعداد المواقع من البداية. وبعد كل هذا، لماذا نُعيد إعداد العجلة؟ ستمنحك الأعمال التي أتممناها حتى هذه النقطة المعرفة اللازمة لابتكار مواقعك الفريدة من خلال هذه الإطارات. سنعمل خلال هذا الأسبوع على بوتستراب وهو إطار يستخدم لغة HTML5 وبرنامج CSS وجافا سكريبت (إذا لم تستخدم جافا سكريبت من قبل، فلا داعي للقلق)

الأسبوع الرابع: تجربة!

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

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Delves into the concepts of designing websites for multiple devices and screen sizes, which is now an industry standard

Emphasizes the importance of mobile-first design, which is highly relevant for modern web development

Provides hands-on experience with CSS3, including topics like flexbox and media queries, which are essential for responsive web design

Introduces the popular Bootstrap framework, which offers pre-built components and styles for efficient and consistent web development

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in تنميط متقدم بتصميم سريع الاستجابة with these activities:

تعرف على أساسيات HTML و CSS

Show steps

إن مراجعة أساسيات HTML و CSS سيعزز فهمك لمفاهيم التصميم سريع الاستجابة التي سيتم تناولها في هذه الدورة التدريبية.

Browse courses on HTML

Show steps

مراجعة معايير HTML الأساسية
مراجعة مبادئ CSS الأساسية
بناء صفحة ويب بسيطة باستخدام HTML و CSS

التدرب على استخدام استعلامات الوسائط

Show steps

سيساعدك التدرب على استخدام استعلامات الوسائط في CSS على إتقان مفاهيم الاستجابة التي ستتم تغطيتها في الدورة التدريبية.

Browse courses on CSS

Show steps

كتابة استعلامات وسائط أساسية
تطبيق استعلامات الوسائط لتنسيق عناصر مختلفة وفقًا لحجم الشاشة
إنشاء تصميم سريع الاستجابة باستخدام استعلامات الوسائط

مناقشة الأسئلة المترددة مع الزملاء

Show steps

يمكن أن تساعدك مناقشة الأسئلة المتكررة مع زملائك على توضيح المفاهيم وتحسين الفهم.

Show steps

حدد زميلًا أو مجموعة من الزملاء لمناقشة الأسئلة معهم.
قم بإعداد قائمة بالأسئلة المتعلقة بالمفاهيم التي تواجه صعوبة في فهمها.
اجتمع مع زملائك لمناقشة الأسئلة.
شارك الأفكار والحلول.

Three other activities

Expand to see all activities and additional details

Show all six activities

متابعة دروس حول Bootstrap

Show steps

ستوفر لك متابعة الدروس حول Bootstrap فهمًا عميقًا لإطار العمل هذا واستخدامه لإنشاء مواقع ويب سريعة الاستجابة.

Browse courses on Bootstrap

Show steps

متابعة دروس حول مبادئ Bootstrap الأساسية
إنشاء مشروع موقع ويب صغير باستخدام Bootstrap
إتقان المكونات المتقدمة والأدوات المساعدة لـ Bootstrap

الحصول على شهادة Bootstrap

Show steps

سيساعدك هذا النشاط على فهم أساسيات Bootstrap بشكل أفضل، مما يعزز فهمك لمفهوم التصميم سريع الاستجابة.

Browse courses on Bootstrap

Show steps

قم بالتسجيل للحصول على دورة مجانية عبر الإنترنت حول Bootstrap.
اتبع الدروس وممارسة الأمثلة المقدمة.
قم بإنشاء مشروع بسيط باستخدام Bootstrap.

إنشاء مواقع ويب متجاوبة باستخدام Bootstrap

Show steps

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

Show steps

قم باختيار فكرة لموقع ويب متجاوب.
قم بتصميم هيكل الموقع باستخدام Bootstrap.
قم بإضافة المحتوى والصور إلى الموقع.
اختبر الموقع على أجهزة وأحجام شاشات مختلفة.

Career center

Learners who complete تنميط متقدم بتصميم سريع الاستجابة will develop knowledge and skills that may be useful to these careers:

Front-End Web Developer

**Front-End Web Developers** translate designs into functional websites and applications. This course can provide a crucial foundation for the foundational concepts and technologies they use daily, such as CSS, media queries, Bootstrap, and responsive design. By learning to use these tools, individuals can create accessible and engaging user experiences across multiple platforms from scratch.

See salaries and explore the career path for Front-End Web Developer

Web Designer

**Web Designers** create the aesthetic and interactive elements of websites and applications. This course can enhance their skills by teaching the principles of responsive design and the use of Bootstrap, a popular front-end framework. By gaining proficiency in these areas, they can create visually appealing and user-friendly websites that adapt seamlessly to various devices and screen sizes.

See salaries and explore the career path for Web Designer

UX Designer

**UX Designers** focus on enhancing user experience by ensuring that websites and applications are easy to use, navigate, and visually appealing. This course aligns well with the field as it emphasizes the importance of responsive design in creating user-friendly interfaces across multiple platforms. By mastering these concepts, UX Designers can improve the accessibility and overall experience of digital products.

See salaries and explore the career path for UX Designer

UI Designer

**UI Designers** specialize in creating the visual elements of user interfaces. A deep understanding of responsive design is crucial for UI Designers to ensure that interfaces are aesthetically pleasing and functional across different devices. This course provides a solid foundation in these principles, enabling UI Designers to create user-centric and visually appealing interfaces.

See salaries and explore the career path for UI Designer

Web Developer

**Web Developers** encompass both front-end and back-end development. This course aligns well with the front-end aspect of web development, providing a strong foundation in responsive design and the use of Bootstrap. By mastering these skills, Web Developers can create dynamic and interactive websites that adapt seamlessly to different platforms and devices.

See salaries and explore the career path for Web Developer

Product Designer

**Product Designers** oversee the entire lifecycle of a product, from ideation to launch. This course can be beneficial for Product Designers who want to gain a deeper understanding of responsive design and Bootstrap, enabling them to create user-centric digital products that seamlessly adapt to various devices.

See salaries and explore the career path for Product Designer

Full-Stack Developer

**Full-Stack Developers** possess proficiency in both front-end and back-end development. While this course primarily focuses on front-end concepts, it can still be valuable for Full-Stack Developers who want to enhance their understanding of responsive design and Bootstrap. By gaining these skills, they can create more cohesive and user-friendly web applications.

See salaries and explore the career path for Full-Stack Developer

Graphic designer

**Graphic Designers** create visual concepts for a wide range of media, including websites and applications. This course can be beneficial for Graphic Designers who want to expand their skill set and learn about responsive design. By understanding the principles of responsive design, they can create visually appealing and functional designs that adapt to different screen sizes.

See salaries and explore the career path for Graphic designer

Software Engineer

**Software Engineers** design, develop, and maintain software applications. While this course focuses specifically on front-end technologies, it can still provide a useful foundation for Software Engineers who want to gain a better understanding of responsive design. By incorporating these principles into their development process, they can create software applications that are accessible and user-friendly across multiple platforms.

See salaries and explore the career path for Software Engineer

Interaction Designer

**Interaction Designers** focus on creating intuitive and engaging user experiences. This course can be valuable for them as it provides a deep dive into responsive design and Bootstrap. By mastering these concepts, Interaction Designers can create interactive elements and interfaces that seamlessly adapt to different devices, enhancing the overall user experience.

See salaries and explore the career path for Interaction Designer

Information Architect

**Information Architects** design and organize the structure and content of websites and applications. This course may be useful for Information Architects who want to gain a deeper understanding of responsive design. By learning how to create websites that adapt to different screen sizes, they can ensure that users can easily find the information they need, regardless of the device they are using.

See salaries and explore the career path for Information Architect

Content Strategist

**Content Strategists** develop and manage the content for websites and applications. This course can be beneficial for Content Strategists who want to learn about responsive design and how it impacts content creation. By understanding the principles of responsive design, they can create content that is easily readable and accessible on all devices.

See salaries and explore the career path for Content Strategist

Technical Writer

**Technical Writers** create documentation and instructions for software and other technical products. This course may be helpful for Technical Writers who want to learn about responsive design and how to create documentation that is easily accessible on different devices. By understanding these principles, they can ensure that users can easily find the information they need, regardless of the device they are using.

See salaries and explore the career path for Technical Writer

Project Manager

**Project Managers** oversee the planning, execution, and delivery of projects. This course may be useful for Project Managers who want to gain a better understanding of responsive design and how it impacts project planning and execution. By understanding the principles of responsive design, they can ensure that projects are delivered in a way that meets the needs of users on all devices.

See salaries and explore the career path for Project Manager

Business Analyst

**Business Analysts** analyze business needs and develop solutions to improve business processes. This course may be helpful for Business Analysts who want to learn about responsive design and how it impacts user experience. By understanding the principles of responsive design, they can develop solutions that are accessible and user-friendly on all devices.

See salaries and explore the career path for Business Analyst