Monthly Subscription Starting at AED 99 + VAT

Front-End Developer Capstone
  • Level Professional
  • المدة 28 ساعات hours
  • الطبع بواسطة Meta
  • Offered by

عن

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!

الوحدات

Project info

    • 1 Videos
    • 4 Readings
    • 1 Discussion
Show info about module content

1 Discussions

  • Meet and greet

1 Videos

  • Introduction to the course

4 Readings

  • Course syllabus
  • How to be successful in this course
  • Checking your development environment
  • Additional resources

Setting up the project

    • 1 Videos
    • 6 Readings
    • 4 Assignment
Show info about module content

4 Assignment

  • Readiness check: Did you set up the Git repository?
  • Readiness check: Did you set up the React project?
  • Readiness check: Did you push your commits?
  • Knowledge check: Setting up the project

1 Videos

  • Setting up the project

6 Readings

  • Recap: Version control
  • Exercise: Setting up the repository
  • Recap: React set up
  • Exercise: Setting up the React project
  • Exercise: Committing the project
  • Additional resources

Planning the UX and UI

    • 2 Videos
    • 5 Readings
    • 5 Assignment
Show info about module content

5 Assignment

  • Readiness check: Did you complete the wireframe?
  • Readiness check: Did you establish the designs for your key components?
  • Readiness check: Did you establish a typographic hierarchy, fonts and colors using the style guide?
  • Knowledge check: Planning the UX and UI
  • Module Quiz: Starting the Project

2 Videos

  • Planning the UX and UI
  • Module summary: Starting the project

5 Readings

  • Recap: Principles of UX and UI
  • Exercise: Wireframing the project
  • Exercise: Designing components
  • Exercise: Applying design fundamentals in Figma
  • Additional resources

Semantic structure

    • 1 Videos
    • 5 Readings
    • 4 Assignment
Show info about module content

4 Assignment

  • Readiness check: Did you set up a semantic HTML document?
  • 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

1 Videos

  • Setting up a semantic HTML document

5 Readings

  • Recap: Semantic HTML
  • Exercise: Setting up the HTML document
  • Recap: Meta tags and Open Graph protocol
  • Exercise: Adding meta tags and setting up OGP
  • Additional resources

Styling and responsiveness

    • 1 Videos
    • 5 Readings
    • 4 Assignment
Show info about module content

4 Assignment

  • Readiness check: Did you set up a responsive CSS layout?
  • Readiness check: Did you check that the visual elements of the website match the Figma design?
  • Readiness check: Did you commit your progress to Git?
  • Knowledge check: Styling and responsiveness

1 Videos

  • Styling elements

5 Readings

  • Recap: CSS grids
  • Exercise: Setting up the CSS layout
  • Recap: Styling elements
  • Exercise: Styling elements
  • Additional resources

Adding components

    • 2 Videos
    • 3 Readings
    • 5 Assignment
Show info about module content

5 Assignment

  • 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?
  • Knowledge check: Adding components
  • Module Quiz: Project Foundations

2 Videos

  • Project components
  • Module summary: Project foundations

3 Readings

  • Recap: React basics
  • Exercise: Setting up the app components
  • Additional resources

Table booking system

    • 1 Videos
    • 7 Readings
    • 5 Assignment
Show info about module content

5 Assignment

  • Readiness check: Did you set up a component for viewing the available bookings?
  • Readiness check: Did you share table booking state across components?
  • Readiness check: Are your components semantically correct?
  • Readiness check: Did you set up component unit tests?
  • Knowledge check: Table booking system

1 Videos

  • Customer table bookings

7 Readings

  • Recap: State in React
  • Recap: Forms
  • Exercise: Defining the Bookings page
  • Exercise: Adding table booking state
  • Recap: Unit testing
  • Exercise: Adding unit tests
  • Additional resources

Interacting with the API

    • 1 Videos
    • 5 Readings
    • 5 Assignment
Show info about module content

5 Assignment

  • Readiness check: Is your bookings page using "live" data?
  • Readiness check: Is the table booking system working end-to-end?
  • 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

1 Videos

  • Querying a table booking API

5 Readings

  • Recap: Querying APIs in React
  • Exercise: Connecting the bookings page to the API
  • Exercise: Submitting the new booking page to the API
  • Exercise: Update the unit tests for the API queries
  • Additional resources

Improving the experience

    • 2 Videos
    • 8 Readings
    • 7 Assignment
Show info about module content

7 Assignment

  • Readiness check: Is your booking form validating user data?
  • Readiness check: Did you set up the form validation and submission unit tests?
  • Readiness check: Is your application accessible?
  • Readiness check: Have you completed the heuristics usability evaluation?
  • Readiness check: Did you commit your progress to Git?
  • Knowledge check: Improving the experience
  • Module Quiz: Project Functionality

2 Videos

  • The importance of UX
  • Module summary: Project functionality

8 Readings

  • Recap: Form validation
  • Exercise: Adding form validation
  • Exercise: Adding unit tests for the form validation and submission
  • Recap: Accessibility
  • Exercise: Ensuring your application is accessible to users
  • Recap: UX and UI usability evaluation
  • Exercise: Evaluating and revising the UX
  • Additional resources

Final project assessment

    • 1 Videos
    • 2 Readings
    • 1 PeerReview
    • 2 Assignment
Show info about module content

2 Assignment

  • Readiness check: Prepare to submit the project
  • Final Graded Quiz

1 Peer Review

  • Booking a table on the Little Lemon website

1 Videos

  • Course recap: Capstone Project

2 Readings

  • About the final project assessment
  • Solution: Booking a table on the Little Lemon website

Course wrap-up

    • 1 Videos
    • 1 Readings
    • 1 Discussion
Show info about module content

1 Discussions

  • Reflect on learning

1 Videos

  • Congratulations, you have completed the Capstone Project!

1 Readings

  • Next steps

Auto Summary

The Front-End Developer Capstone course on Coursera allows you to demonstrate your skills by solving real-world problems using React. This professional-level course guides you through building an app, integrating all learned technologies. Ideal for those with front-end development experience, it results in a job-ready portfolio to impress recruiters. Duration: 1680 minutes. Subscription options: Starter, Professional.

Taught by Meta Staff
Instructor

Taught by Meta Staff