مقدمة إلى تطوير الواجهة الأمامية from Coursera

مرحبًا بك في المقدمة إلى تطوير الواجهة الأمامية، الدورة التدريبية الأولى في برنامج مطوري الواجهة الأمامية من Meta.

تُعد هذه الدورة التدريبية مكانًا جيدًا للبدء إذا كانت رغبتك أن تكون مطور ويب. سيتم تعريفك بالمسؤوليات اليومية لمطور الويب، والحصول على فهم عام للتقنيات الأساسية والضمنية التي تدعم الإنترنت.سيتم تعريفك بكيفية قيام مطوري الواجهة الأمامية بإنشاء المواقع الإلكترونية والتطبيقات التي تعمل بشكل جيد ويسهل صيانتها.

سيتم التعرُّف على تقنيات تطوير الويب الأساسية، مثل HTML وCSS، والحصول على فرص لممارسة استخدامها.سيتم تقديمك أيضًا إلى إطارات عمل واجهة المستخدم الحديثة، مثل Bootstrap وReact، التي تجعل من السهل إنشاء تجارب مستخدم تفاعلية.

بنهاية هذه الدورة التدريبية، سيكون بإمكانك:

- وصف دور مطور الواجهة الأمامية

- شرح التقنيات الأساسية والضمنية التي تدعم الإنترنت

- استخدام HTML لإنشاء صفحة ويب بسيطة

- استخدام CSS للتحكم في مظهر صفحة ويب بسيطة

- شرح مفهوم React

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

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

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

What's inside

Syllabus

البدء في تطوير الويب

في هذه الوحدة، سيتم تعريفك بالأنواع المختلفة لمطوري الويب وأدوار ومسؤوليات مطوري الواجهة الأمامية والواجهة الخلفية والمكدس الكامل. سيتم إلقاء نظرة أولية على التقنيات الأساسية: HTML وCSS وJavaScript، واستكشاف المفاهيم التي تدعم كيفية عمل الإنترنت.

مقدمة إلى HTML وCSS

في هذه الوحدة، سيتم تعريفك بكيفية إنشاء مستندات HTML وإضافة الأنماط والتخطيط الأساسيين باستخدام CSS.

إطارات عمل واجهة المستخدم

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

التقييم المقدَر بدرجات في نهاية الدورة التدريبية

في هذه الوحدة، سيتم تقييمك بناءً على المهارات الأساسية التي يتم تناولها في الدورة التدريبية.

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Introduces learners to the foundations of front-end development, ideal for those aspiring to be web developers

Taught by Meta Staff, who have extensive experience in the field of front-end development

Provides a solid understanding of the core technologies used in front-end development, including HTML, CSS, and JavaScript

Covers modern UI frameworks like Bootstrap and React, which are widely used in the industry

Offers hands-on practice through interactive exercises and projects

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:

Read Getting Started With HTML

Show steps

This tutorial provides a firm grasp of the fundamentals of HTML, helping you understand how to structure web pages and add basic content.

Browse courses on HTML

Show steps

Go to the MDN Web Docs page for Getting Started With HTML.
Read through the tutorial.
Try out the examples provided in the tutorial.

Practice HTML Basics

Show steps

Recall the fundamental concepts of HTML to strengthen your foundation for the course.

Browse courses on HTML

Show steps

Review the syntax and structure of HTML elements.
Create a basic HTML document using a text editor or online tool.
Add headings, paragraphs, and lists to your document.

Join a study group

Show steps

Joining a study group will provide you with opportunities to discuss course material with peers, ask questions, and learn from others.

Browse courses on Collaboration

Show steps

Find a study group that meets your schedule and learning style.
Participate actively in study group discussions.
Contribute to the group by sharing your knowledge and insights.

13 other activities

Expand to see all activities and additional details

Show all 16 activities

HTML Coding Practice

Show steps

Practice writing HTML code by completing exercises and challenges, which will help you solidify your understanding of HTML syntax and structure.

Browse courses on HTML

Show steps

Find online HTML coding exercises or practice problems.
Attempt to solve the exercises on your own.
Check your solutions against provided answers or ask for help if needed.

Solve HTML challenges

Show steps

Solving HTML challenges will help you solidify your understanding of HTML syntax and improve your problem-solving skills.

Browse courses on HTML

Show steps

Find online HTML challenges or practice exercises.
Set a timer for 30 minutes and try to solve as many challenges as possible.
Review your answers and identify areas where you need improvement.

Build a Simple Webpage

Show steps

Creating a simple webpage from scratch will provide you with hands-on experience in applying HTML and CSS concepts.

Browse courses on HTML

Show steps

Plan the structure and content of your webpage.
Write the HTML code for the webpage.
Add CSS styles to enhance the appearance of your webpage.
Test your webpage in a web browser.

Build a simple CSS layout

Show steps

Building a simple CSS layout will help you understand how CSS works and how to use it to style web pages.

Browse courses on CSS

Show steps

Find a tutorial on how to build a simple CSS layout.
Follow the tutorial step-by-step.
Experiment with different CSS properties to see how they affect the layout.

Build a Simple Website

Show steps

Solidify your understanding of HTML and CSS by creating a functional website.

Browse courses on Website Development

Show steps

Plan the layout and structure of your website.
Code the HTML and CSS for your website.
Test your website on different devices and browsers.
Publish your website online.

Attend an HTML and CSS Workshop

Show steps

Attending a workshop can provide you with structured guidance, hands-on exercises, and expert insights to enhance your understanding of HTML and CSS.

Browse courses on HTML

Show steps

Find an HTML and CSS workshop that aligns with your learning goals.
Register for the workshop.
Attend the workshop and actively participate in the activities.
Follow up with the workshop organizers or instructors if you have any questions or need further support.

Explore Advanced CSS Techniques

Show steps

Expand your CSS knowledge by exploring advanced techniques and effects.

Show steps

Find online tutorials or articles on advanced CSS topics.
Follow the tutorials and experiment with the techniques.
Apply the techniques to your own projects.

Create a responsive website using Bootstrap

Show steps

Creating a responsive website using Bootstrap will help you apply your skills in HTML, CSS, and Bootstrap to build a functional and visually appealing website.

Browse courses on Bootstrap

Show steps

Choose a design for your website.
Code the HTML and CSS for your website.
Add Bootstrap to your website.
Test your website on different devices to ensure it is responsive.

Develop a Website Prototype

Show steps

Creating a website prototype allows you to apply your knowledge of HTML and CSS to a more complex project, simulating real-world development scenarios.

Browse courses on HTML

Show steps

Plan the structure and design of your website prototype.
Develop the HTML and CSS code for your prototype.
Create a user interface that is both visually appealing and user-friendly.
Test your prototype to ensure it functions correctly.
Refine your prototype based on feedback or further learning.

Develop a CSS Framework

Show steps

Enhance your CSS skills by creating a custom framework for your future projects.

Show steps

Define the styles and components you want to include in your framework.
Create a modular and reusable CSS codebase.
Test your framework on different devices and browsers.
Document your framework for easy use and reference.

Contribute to an Open-Source Front-End Project

Show steps

Get involved in the open-source community and contribute to real-world projects.

Show steps

Find an open-source front-end project that interests you.
Identify areas where you can contribute, such as bug fixes, feature improvements, or documentation.
Submit your contributions and collaborate with the project maintainers.

Participate in a Hackathon

Show steps

Challenge yourself and collaborate with others to build innovative web applications.

Show steps

Find a hackathon that aligns with your interests.
Form a team and brainstorm ideas.
Develop and code your project within the time limit.
Present your project to the judges.

Mentor Junior Front-End Developers

Show steps

Share your knowledge and skills by mentoring others who are just starting out in front-end development.

Show steps

Reach out to junior developers through online forums or meetups.
Offer your guidance and support on their projects and questions.
Provide constructive feedback and encouragement.

Career center

Learners who complete مقدمة إلى تطوير الواجهة الأمامية will develop knowledge and skills that may be useful to these careers:

Front-End Engineer

Front End Engineers specialize in developing the visual interface of websites or applications. This course introduces the core concepts of Front End Development, which is useful for anyone interested in this line of work. It will help such a professional understand the technologies and techniques involved in creating functional and attractive user interfaces, and may increase their enjoyment of working in this field.

See salaries and explore the career path for Front-End Engineer

Web Developer

Web Developers build and maintain websites and applications. This course provides a foundational understanding of the technologies and techniques involved in web development. It is very suitable for Web Developers, as it can enhance their understanding of basic web concepts, and advance their skills in building and maintaining robust web applications.

See salaries and explore the career path for Web Developer

UI Designer

UI Designers create the visual interface of websites or applications. This course provides a solid foundation in the core concepts of front end development, including HTML, CSS, and React. UI Designers will benefit from this course as it enhances their technical understanding of the tools and technologies used to implement their designs.

See salaries and explore the career path for UI Designer

UX Designer

UX Designers focus on the user experience of websites or applications. By providing a foundational understanding of the core concepts of front end development, this course can be helpful to UX Designers who wish to gain a more thorough understanding of the technical aspects of the field.

See salaries and explore the career path for UX Designer

Software Engineer

Software Engineers design, develop, and maintain software systems. This course may be useful to Software Engineers who wish to gain a basic understanding of front end development. It will provide them with knowledge in the technologies used to create and manage user interfaces.

See salaries and explore the career path for Software Engineer

Information Architect

Information Architects design and organize the content on websites or applications. This course introduces the basic concepts of front end development, which may be useful to Information Architects who wish to gain a better understanding of the technical aspects of the field.

See salaries and explore the career path for Information Architect

Computer Programmer

Computer Programmers write and test code that makes computers perform tasks. While this course does not directly teach programming, it may be helpful to programmers who want to develop a foundational knowledge of the technologies used in front end development.

See salaries and explore the career path for Computer Programmer

Technical Writer

Technical Writers create documentation and instructions for technical products or services. This course may be useful to Technical Writers who wish to learn more about the technical aspects of front end development. It will help them to better understand the products and services they document.

See salaries and explore the career path for Technical Writer

Product Manager

Product Managers oversee the development and marketing of products or services. This course may be useful to Product Managers who want to gain a foundational understanding of the technologies and techniques used in front end development. It will help them to better communicate with their technical teams and make informed decisions about product development.

See salaries and explore the career path for Product Manager

Interaction Designer

Interaction Designers create the interactive elements of websites or applications. This course provides a basic understanding of the core concepts of front end development, which may be useful to Interaction Designers who wish to gain a more thorough understanding of the technical aspects of the field.

See salaries and explore the career path for Interaction Designer

Visual Designer

Visual Designers create the visual style of websites or applications. This course may be useful to Visual Designers who wish to gain a foundational understanding of the technologies and techniques used in front end development.

See salaries and explore the career path for Visual Designer

Graphic designer

Graphic Designers create visual content for websites, applications, and other media. This course provides a basic understanding of the core concepts of front end development, which may be useful to Graphic Designers who wish to gain a more thorough understanding of the technical aspects of web design.

See salaries and explore the career path for Graphic designer

Motion Graphic Designer

Motion Graphic Designers create animated graphics for websites, applications, and other media. This course provides a basic understanding of the core concepts of front end development, which may be useful to Motion Graphic Designers who wish to gain a more thorough understanding of the technical aspects of web design.

See salaries and explore the career path for Motion Graphic Designer

Webmaster

Webmasters maintain and update websites. This course may be useful to Webmasters who want to gain a foundational understanding of the technologies and techniques used in front end development.

See salaries and explore the career path for Webmaster

Database Administrator

Database Administrators manage and maintain databases. This course is not directly related to database administration, but it may be of interest to DBA professionals who wish to gain a basic understanding of the technologies and techniques used in front end development.

See salaries and explore the career path for Database Administrator