К содержимому
learnspaceYOUR NEXT CHAPTER
ПРОСТРАНСТВО ОБУЧЕНИЯ
ГлавнаяКаталог курсовМоё обучениеCoursera

Знания без границ

Учитесь у лучших университетов и компаний мира.

Открыть Coursera
Интеграция
Пространство университета
Моё пространствоСтраница курса
↵
ЯЛичный кабинетСтудент
© 2026 LearnSpaceКаждый день — возможность узнать больше.Помощь
Front-End Developer Capstone · LearnSpace
Назад в каталог
courseraПрограммирование

Front-End Developer Capstone

Курс от Meta
Средний≈ 27.5 чАнглийский
О курсеНавыкиПрограммаПреподаватели

О курсе

The Capstone project enables you to demonstrate multiple skills from the Certificate by solving an authentic real-world problem. Each module includes a brief recap of, and links to, content that you have covered in previous courses in this program. This course will test your knowledge and understanding, and provide you with a platform to show off your new abilities in front-end web development using React. During this course, you will be guided through the process of building an app, combining all the skills and technologies you've learned throughout this program to solve the problem at hand. On completion of the Capstone project, you’ll have a job-ready portfolio that you can show to recruiters, demonstrate during interviews and impress potential employers. To complete this course, you will need front-end developer experience. Additionally, it always helps to have a can-do attitude!

Навыки, которые вы освоите

React.jsCascading Style Sheets (CSS)Hypertext Markup Language (HTML)Git (Version Control System)User Interface (UI) DesignJavascriptWeb Content Accessibility GuidelinesUser Interface and User Experience (UI/UX) DesignFront-End Web DevelopmentCode ReviewVersion ControlUsabilitySemantic WebUI/UX StrategyUsability TestingUser Interface (UI)Web ApplicationsHTML and CSSResponsive Web DesignSoftware Technical Review

Программа курса

4 модулей · 109 учебных материалов

01Starting the project29 материалов

Project info

Introduction to the courseВидеоCourse syllabusЧтениеHow to be successful in this courseЧтениеChecking your development environmentЧтение

Учитесь у экспертов

Taught by Meta Experts

Преподаватель курса

Front-End Developer Capstone
В каталоге вашей программы

Инвестируйте в себя

Новые знания — в удобное для вас время.

Начать на Coursera

Обучение откроется на Coursera
в новой вкладке

Обучение на Coursera

≈ 27.5 ч

4 модулей

Язык: Английский

Субтитры: Арабский, Французский, Бенгальский, Китайский (Китай), Греческий, Бразильский португальский, Вьетнамский, Немецкий, Пушту, Урду, Русский, Тайский, Индонезийский, Азербайджанский, Испанский, Дари, Хинди, Венгерский

Часть программы вашего университета
Preparing to Solve Little Lemon's CrisisDIALOGUE
Additional resourcesЧтение

Setting up the project

Setting up the projectВидеоRecap: Version controlЧтениеExercise: Setting up the repositoryЧтениеReadiness check: Did you set up the Git repository?ЗаданиеRecap: React set upЧтениеExercise: Setting up the React projectЧтениеReadiness check: Did you set up the React project?ЗаданиеExercise: Committing the projectЧтениеReadiness check: Did you push your commits?ЗаданиеKnowledge check: Setting up the projectЗаданиеAdditional resourcesЧтение

Planning the UX and UI

Planning the UX and UIВидеоRecap: Principles of UX and UIЧтениеExercise: Wireframing the projectЧтениеReadiness check: Did you complete the wireframe?ЗаданиеExercise: Designing componentsЧтениеReadiness check: Did you establish the designs for your key components?ЗаданиеExercise: Applying design fundamentals in FigmaЧтениеReadiness check: Did you establish a typographic hierarchy, fonts and colors using the style guide?ЗаданиеKnowledge check: Planning the UX and UIЗаданиеModule summary: Starting the projectВидеоModule Quiz: Starting the ProjectЗаданиеAdditional resourcesЧтение
02Project foundations30 материалов

Semantic structure

Setting up a semantic HTML documentВидеоRecap: Semantic HTMLЧтениеExercise: Setting up the HTML documentЧтениеReadiness check: Did you set up a semantic HTML document?ЗаданиеRecap: Meta tags and Open Graph protocolЧтениеExercise: Adding meta tags and setting up OGPЧтениеReadiness check: Did you establish meta tags and Open Graph protocol data?ЗаданиеReadiness check: Did you commit your progress to Git?ЗаданиеKnowledge check: Semantic structureЗаданиеAdditional resourcesЧтение

Styling and responsiveness

Styling elementsВидеоRecap: CSS gridsЧтениеExercise: Setting up the CSS layoutЧтениеReadiness check: Did you set up a responsive CSS layout?ЗаданиеRecap: Styling elementsЧтениеExercise: Styling elementsЧтениеReadiness check: Did you check that the visual elements of the website match the Figma design?

Adding components

Project componentsВидеоRecap: React basicsЧтениеExercise: Setting up the app componentsЧтениеReadiness check: Did you set up the app components?ЗаданиеReadiness check: Are your components semantically correct?ЗаданиеReadiness check: Did you commit your progress to Git?Задание
03Project functionality41 материалов

Table booking system

Customer table bookingsВидеоRecap: State in ReactЧтениеRecap: FormsЧтениеExercise: Defining the Bookings pageЧтениеReadiness check: Did you set up a component for viewing the available bookings?ЗаданиеExercise: Adding table booking stateЧтениеReadiness check: Did you share table booking state across components?ЗаданиеReadiness check: Are your components semantically correct?ЗаданиеRecap: Unit testingЧтениеExercise: Adding unit testsЧтениеReadiness check: Did you set up component unit tests?ЗаданиеKnowledge check: Table booking systemЗаданиеAdditional resourcesЧтение

Interacting with the API

Querying a table booking APIВидеоRecap: Querying APIs in ReactЧтениеExercise: Connecting the bookings page to the APIЧтениеReadiness check: Is your bookings page using "live" data?ЗаданиеExercise: Submitting the new booking page to the APIЧтениеReadiness check: Is the table booking system working end-to-end?Задание

Improving the experience

The importance of UXВидеоRecap: Form validationЧтениеExercise: Adding form validationЧтениеReadiness check: Is your booking form validating user data?ЗаданиеExercise: Adding unit tests for the form validation and submissionЧтениеReadiness check: Did you set up the form validation and submission unit tests?Задание
04Project Assessment9 материалов

Final project assessment

Course recap: Capstone ProjectВидеоAbout the final project assessmentЧтениеReadiness check: Prepare to submit the projectЗаданиеBooking a table on the Little Lemon websiteВзаимная проверкаSolution: Booking a table on the Little Lemon websiteЧтениеFinal Graded QuizЗадание

Course wrap-up

Congratulations, you have completed the Capstone Project!ВидеоReflect on learningОбсуждениеNext stepsЧтение
Задание
Readiness check: Did you commit your progress to Git?Задание
Knowledge check: Styling and responsivenessЗадание
Additional resourcesЧтение
Knowledge check: Adding componentsЗадание
Module summary: Project foundationsВидео
Module Quiz: Project FoundationsЗадание
Additional resourcesЧтение
Exercise: Update the unit tests for the API queriesЧтение
Readiness check: Did you set up the API unit tests?Задание
Readiness check: Did you commit your progress to Git?Задание
Knowledge check: Interacting with the APIЗадание
Additional resourcesЧтение
Recap: AccessibilityЧтение
Exercise: Ensuring your application is accessible to usersЧтение
Readiness check: Is your application accessible?Задание
Recap: UX and UI usability evaluationЧтение
Exercise: Evaluating and revising the UXЧтение
Readiness check: Have you completed the heuristics usability evaluation?Задание
Readiness check: Did you commit your progress to Git?Задание
Knowledge check: Improving the experienceЗадание
Module summary: Project functionalityВидео
Module Quiz: Project FunctionalityЗадание
Additional resourcesЧтение