C8 - FRONT END DEVELOPER CAPSTONE - COURSE 8/9

META FRONT END DEVELOPER PROFESSIONAL CERTIFICATE

 FRONT END DEVELOPER CAPSTONE

LECTURE COURSE 8/9

CHECK OUT VIDEOS OF THE COURSE HERE

Subscribe to more Courses.
COLLABORATOR CHANNELS
YOUCOURSE - COURSES FROM BEST UNIVERSITYS IN THE WORLD - https://www.youtube.com/@YouCourse
ARQUITECTURAS - ARCHITECTURE CHANNEL, DOCUMENTALS AND MORE - https://www.youtube.com/@ArquitecturasYT
CADESIGNERS - SOFTWARE CHANNEL AND MODELS - https://www.youtube.com/@CADesigners
UNDERGROUND - Subscribe! Free Music - Creative Commons - https://www.youtube.com/@UndergroundMC

FACEBOOK GROUPS
ARQUITECTURAS - ARCHITECTURE CHANNEL - https://www.facebook.com/groups/arquitecturasyt
YOUCOURSE - COURSES FROM BEST UNIVERSITYS IN THE WORLD - https://www.facebook.com/groups/youcourse/
CADESIGNERS - SOFTWARE DESIGN CHANNEL - https://www.facebook.com/groups/cadesignersyt
UNDERGROUND - Free Music - Creative Commons - https://www.facebook.com/groups/undergroundyt

Facebook - https://www.facebook.com/YouCourseYT
Twitter - https://twitter.com/YouCourseYT
Tik Tok - https://www.tiktok.com/@youcourseyt
Kwai - YouCourse - @yourcourse

WEEK 1 - Starting the project

00:00 - Introduction to the course 3m

3:21 - Setting up the project 3m

6:31 - Planning the UX and UI 3m

9:46 - Module summary: Starting the project 2m

WEEK 2 - Project foundations

12:37 - Setting up a semantic HTML document 2m

15:13 - Styling elements 3m

19:04 - Project components 3m

22:46 - Module summary: Project foundations 2m

WEEK 3 - Project functionality

25:43 - Customer table bookings 3m

28:45 - Querying a table booking API 3m

32:14 - The importance of UX 2m

34:48 - Module summary: Project functionality 3m

WEEK 4 -Project Assessment

37:52 - Course recap: Capstone Project 3m

41:01 - Congratulations, you have completed the Capstone Project! 3m

THANK'S FOR WATCHING

Meta
Meta builds technologies that help people connect with friends and family, find communities, and grow businesses. The Meta Professional Certificates create opportunities so that anyone regardless of education, background or experience can learn high-quality skills to land a high-growth career—no degree or experience required to get started. Meta also offers training courses on the metaverse to educate people, brands, businesses and professionals on the opportunities it presents and what it means for our world today and into the future.


ABOUT COURSE
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!

WEEK 1 - Starting the project

In this module, you’ll get started with the capstone project. This will include a brief recap of, and links to, content in the React course you have already completed.

Checking your development environment

Overview
In this reading, you'll recap fundamental concepts related to setting up your development environment correctly in preparation for developing the Little Lemon reserve-a-table web app functionality.

General setup
To setup and check your development environment, you'll need to revisit several resources from other courses in this program:

Programming with JavaScript: Setting up VS Code (note: only the VS Code setup part in the first half of the video is relevant to this course

React Basics: Before you learn React (note: this lesson item will be especially helpful if it's been a while since you've worked with HTML, CSS and JavaScript. Since you'll be working with all of these technologies alongside React, a refresher might be helpful for you.)

Advanced React: Setting up a react project in VS Code

Conclusion
In this reading, you recapped the process of ensuring your development environment is set up and ready to go, which you can apply to setting up the development environment for your project. Having all the necessary requirements sorted out and taken care of might prevent errors as you start developing your React app.

Additional resources

Overview
The following resources are additional reading materials that will help you get more involved with the React ecosystem. You may also find them useful to refer back to if you get stuck throughout the development of your Little Lemon web app.

Useful links to other courses in this program
As this course is a culmination of all the concepts covered previously in the Front-End developer program, it’s advisable to revisit the courses that precede the current course:

Introduction to Front-End Development
Programming with JavaScript
Version Control
HTML and CSS in-depth
React Basics
Advanced React
Principles of UX/UI Design

Other useful resources
As an aspiring React developer, you should also keep up with the community!

Besides the earlier courses in the program, there are some useful external resources that you might want to check out:

Connect with the React community
Follow the updates published on the official React Docs blog
React ecosystem resources

Recap: Version control

Overview
To simulate a real-world project, you will build the Little Lemon React app using version control. In this reading, you will recap the concept of version control to progress with your React app. For assessment in the capstone project, you must use version control to keep track of your code changes and download the starter code for the Little Lemon app from a GitHub repository. It’s important to note that you should use the GitHub account you created for earlier courses.

What is version control?
Recall that version control is a way to track changes made to your project's code over time. To work with version control, you must work with the command line or terminal to type commands using Git. Additionally, you need to be familiar with some of the basics of GitHub, such as setting up a GitHub account, connecting to GitHub, adding a new repository and cloning a repository.

To revisit these concepts in more detail, please use the following links from the Version Control course in the Front-End developer program:

What is version control?
Version control Git terminology
What are Unix Commands?
Change directories and listing contents
Creating and moving directories and files
Creating your GitHub account
Connecting to GitHub via SSH
Creating and cloning a repository

Conclusion

In this reading, you revisited the concepts of version control, Git and GitHub. You are now prepared for the next lesson item, which is an exercise in setting up a repository for your project. Once you have completed the capstone project, you will be equipped with the skills to push your code to a GitHub repository for showcasing in a portfolio.

Exercise: Setting up the repository

Overview
In earlier courses in the Front-End Developer program, including React Basics and Advanced React, you used create-react-app to build your own starter, boilerplate React projects. This means that, by now, you should be quite familiar with setting up a React project using VS Code and the create-react-app npm package. Furthermore, you should also understand version control best practices and be able to track and manage changes to your code. In this exercise and exercises to come, you will integrate this understanding and further expand your skillset, starting with setting up a repository with GitHub.

The following resources may help you complete this exercise:

React Basics - Setting up a React project in VS Code
Version Control - What is version control?
Version Control - Create your GitHub account

Scenario
It's time for you to start building the web application for the Little Lemon website. You’ll begin by setting up the project on your local machine and tracking it with Git.
Instructions
Step 1: Setup a new React app using create-react-app

Navigate to a folder on your machine where you want Little Lemon restaurant’s web app to live.

Start a new React project inside the chosen folder using the npm init react-app my-app command, where my-app is the name of your choice.

For assistance, refer to the "Opening the built-in VS Code terminal and running npm init react-app command" section in the Setting up a React project in VS Code lesson item from the React Basics course.

Step 2: Add a new repository on GitHub
Navigate to your GitHub account.

Tip: If you need to create an account, refer to the Create your GitHub account lesson item.

Inside the GitHub account, create a new repository.

Once the new repository window displays, note the URL of the repository.

Step 3: Use the git command to push to your repository

Once you’ve built the starter app using create-react-app, navigate to the directory using the command line. You will need to push your files to the repository on GitHub.

• Run the git init command to initialize the repository.
• Use the git add command to stage your files for commit.
• Use the git commit command to commit your staged changes.

Tip: You may refer to the Add and commit lesson item in the Version Control course for further assistance.

Use the git remote command to add a remote for the repository on GitHub.

Tip: If you’re unsure of the remote URL, view the repository on GitHub and it will provide you with the relevant information.

You may find it helpful to revisit the Connecting to GitHub via HTTPS, Connecting to GitHub via SSH and Remote vs. local lesson items in the Version Control course for additional guidance.

Use the git push command to push the commits to the remote repository.

Tip: Refer to the Push and pull lesson item for further assistance.

Run the git status command, then the git log command to confirm that Git is tracking your project locally and that you have the correct Git user set up.


Log on to GitHub and check that your commits are visible on the repository

Conclusion

You have completed all the steps necessary to set up your project's Git. You can now push every new commit to the remote origin and share your project's code with the world.

Recap: React set up

Overview
In this reading, you will recap setting up React by revisiting the React Basics course from the Front-End developer program.

Preparing to set up React
Setting up React on your local development environment - that is, on your computer - is pretty straightforward. First, as discussed in the previous lesson item, you need to make sure that you have all the prerequisites taken care of:

• You have a computer with admin access.
• You have Node.js and npm installed.
• You have a code editor installed, preferably VS Code.
• You have Git installed.

How to set up React
There are two common ways a new React app is built using the create-react-app command.

The first approach is using the npm init command:

npm init react-app name-of-the-app

In the command above, the name-of-the-app is the part that you can customize, while the rest of the command has to be typed as is.

The second approach involves using the npx command, specifically:

npx create-react-app name-of-the-app

Again, the part of the command that reads name-of-the-app needs to be altered to reflect your preferred app name, such as, for example, little-lemon. Thus, your command to initialize a new React project using the create-react-app npm package becomes either of the following:

npm init react-app little-lemon

npx create-react-app little-lemon

In the code examples above, either approach works. The former command is the one that was used throughout the React Basics and Advanced React courses in this specialization. The latter command is the variety that you're likely to come across in various React tutorials on the web.

Setup troubleshooting

If you run into issues while you're running the create-react-app npm package, there can be several reasons for it, such as:

• Your installed Node.js or npm versions are too old.
• Your computer is not powerful enough to develop modern web apps.
• You are not connected to the internet and the command cannot install dependencies into your app's node_modules folder.

However, most of the time, your installation will go smoothly.

Conclusion

In this reading, you revisited the process of setting up a React app in your local development environment.

Exercise: Setting up the React project

Overview

You previously discovered that instead of building a new React project from scratch, you can cut down on the initial steps by starting from a boilerplate project. However, you’ll first want to set up a few things to make this a streamlined process. In this exercise, you will set up a React project and tweak the resulting default boilerplate.

Scenario

So far, you have been preparing to create the reserve-a-table function for the Little Lemon website. As a part of this process, it is now time to set up your React project properly.

Note: Before you begin, this exercise assumes that you are using the VS Code editor as your editor of choice. However, it is possible to use other editors to achieve similar results. If you are using another editor, you may use this exercise as a pointer and demonstration of how things are done in VS Code.

VS Code comes with many extensions that can help you when developing applications in any kind of technology and React is no different. There are numerous extensions that you have available at your disposal to make your React development a smoother and more efficient experience. In the steps that follow, you'll set up a few React-specific extensions, including:

• ES7+ React/Redux/GraphQL/React-Native
• Auto Rename Tag 
• Trailing Spaces 

You’ll also clean up your starter app’s code.

Instructions

Step 1: Setup the ES7+ React/Redux/GraphQL/React-Native VS Code extension

Add the ES7+ React/Redux/GraphQL/React-Native VS Code extension. This extension provides you with JavaScript and React/Redux snippets in ES7+ with Babel plugin features for VS Code.

Step 2: Setup the Auto Rename Tag VS Code extension

Add the Auto Rename Tag VS Code extension. This extension makes it possible to automatically rename the paired HTML/XML tag as Visual Studio IDE does.

Step 3: Setup the Trailing Spaces VS Code extension

Add the Trailing Spaces VS Code extension. This extension allows you to highlight and delete trailing spaces. It’s also useful when working with Git to help you spot accidental whitespace addictions more easily and prevent unnecessary commits.

Step 4: Create the React project

Use create-react-app to create the Little Lemon project.

Tip: Refer to the previous recap reading for guidelines.

Step 5: Remove the starter app's boilerplate code from App.js

• Open the project in Visual Studio Code. create-react-app generates some code in the App.js file that we will not need for the project.
• Remove all the code in between the returned div with the classname of App.
• Add some text in between the opening and closing div tags, such as Homepage, for the time being.

Step 6: Remove the starter app's logo.svg file

Delete the logo.svg file from the app and delete its import from the App.js file.

Conclusion

By completing this exercise, you have set up and altered the default boilerplate React project in preparation to build the full application. Well done.

Exercise: Committing the project

Overview

So far, you've set up your project using create-react-app. You've also set up the repository on GitHub so that you can push your commits to it, making them visible to the world or to a select few people, based on whether your repository is public or private.  Additionally, you've added some VS Code extensions to help you streamline your workflow and simplified your starter app in the previous exercise. Specifically, you've:

• Removed all the code in between the returned div with the className of App.
• Added some text in between the opening and closing div tags.
• Deleted the logo.svg file from the app, as well as deleted its import inside the App.js file.
• However, you haven't been instructed to commit these updates to your project yet. In this exercise, you will:
• Add your changes as another commit
• Push those changes to your remote origin (GitHub)
• Inspect the updates on GitHub

Scenario

When you add new features to the React app you are building for Little Lemon as you progress through the various course exercises and save the changes to your app’s code, you need to commit and push those changes to GitHub. This makes it possible to track changes and for other developers to access your code if need be. You should then verify that you’ve pushed those changes by inspecting the newly-added commit on the GitHub website. Committing progress you’ve made with your project will feature throughout the development process.

Note: To recap key topics related to committing your project, you can revisit the Version Control course.

Instructions

Step 1: Add your changes as another commit

• Save all your updates in your local project. Make sure to save each file individually or click the File > Save All command in VS Code's top-level menu.
• Once that's done, open the built-in terminal and run the git add --all command, followed by the git commit -m "Some commit message of your choice goes here" command.

Tip: Make sure that the commit message is sensical, such as Simplify the boilerplate app.

Step 2: Push your changes to your remote origin (GitHub)

Now that you have saved and committed the changes, you can push them to GitHub.

• Use the git push command to push the saved and committed changes to GitHub.

Step 3: Inspect the updates on GitHub

• Open your browser and navigate to GitHub.
• Make sure you're logged in.
• Locate your project's repository.
• Ensure that your most recently pushed commit is displayed.

Tip: Sometimes it takes a few seconds for GitHub to update with your changes. Refreshing the GitHub web application might help show the updates.

Conclusion

By completing this exercise, you now have the ability to commit your changes to GitHub as you make them to your project.

Additional resources

The following resource is additional reading material that will help you gain more insight into setting up a React app.

Create a New React App (an official React docs reading)

Recap: Principles of UX and UI

Overview

In this reading, you will briefly revisit the principles of UX and UI. User experience (UX) refers to how a user interacts with or utilizes a product. So, by giving users meaningful, relevant and satisfying experiences, UX design aims to boost user satisfaction. The user interface or UI is the primary means through which a user communicates with a computer, phone, or another device.

UX

Typically, the UX design phase of product development happens first, followed by the UI design. There are five primary stages in the UX design process: 

1. Empathize

Understand users' needs by placing yourself in their shoes and identifying the type of consumer they are. This helps you better understand their requirements and needs. 

As a part of this stage, imagine you get permission to interview and observe Adrian's customers at various stages of trying to complete an online booking on the restaurant website. You want to listen to their frustrations.  The key here is to understand your user's needs. From the results of this research, a persona has been created that you can reference throughout the design process of your Little Lemon reserve-a-table web app. 

A user journey map has also been created to empathize more with this persona. This will keep your ideas grounded and prevent you from making assumptions.

2. Define the problem

Part of user research is identifying the problem. You collate and distill all the information collected from your users and identify the critical issues and needs that they have.   You should prioritize these frustrations or pain points by importance. You now know who your users are, their frustrations and what problems you need to solve. So, you can move on to the next stage.

3. Ideation 

Once you know the issues and whom you're solving for, you can ideate. Ideating is generating ideas and solutions for the identified problem through sketching, brainstorming, user flow, mind mapping and even handwriting notes. The key here is to keep an open mind and not commit to one specific idea, which may be iterated throughout the design process. To iterate is to reflect on your work and refine and improve your design.  You will sketch out your ideas into something that will address the Little Lemon customers’ needs. You will then develop them into wireframes.  A wireframe is a two-dimensional representation of the user interface concerned with the placement and hierarchy of content and the functionalities offered, plus the everyday actions that users will take.

4. Prototype 

This is a simulation of the final product. You have iterated and refined your ideas into a fresh new solution, but you have yet to prove it will work for everyone and release it.  In this stage, you should first simulate how it will behave with a prototype, take your wireframe and flesh it out. Give it some color, put in some buttons and text and make it interactive.  You can simulate a real scenario for your customers to help them achieve their required goals. Since UX is an iterative process based on user and client feedback, you may also have to iterate at this stage. So, your ideas are constantly being refined into something approaching a final design solution.

5. Test and build 

In this final stage, you will test your design. The testing stage is where you present your solution to users and get their feedback. You create a test script with clear instructions for achieving a task or tasks. Your test participants interact with your prototype while trying to accomplish the task. Any frustrations can be communicated and highlighted at this stage and you can go back and address them before the next step.  You’ve listened to users, empathized with them and aimed to solve their needs through iterative design techniques. You've watched them use your product and have tweaked it to make it easier and more intuitive.  Now it's time to build; following these steps can help ensure you create a product that addresses the needs of your users and offers a great user experience.

UI

Although there are no specific UI design processes, it's crucial, because when it's done correctly, users don't notice it, but when it’s done poorly or not at all, the users will have a bad experience.  A good UI design must be consistent, as consistency is one of the critical factors in usability and learnability. Use UI components and design patterns like those used in the associated design, such as menus, prompts, buttons, input fields, layout, colors and typography. There are several types of consistency in UI, including:

• Visual consistency means that the page's fonts, colors and icon styles should all be consistent. The call-to-action buttons, for instance, must look the same on every page. 
• Functional consistency refers to the behavior of interface controls, such as buttons, menu items and so on, by adhering to the principle of least surprise.
• User-expectation consistency is designing a product consistently by meeting the user's expectations for how it should look or function.

Conclusion

You now have revisited UX  and UI. You should be able to explain the differences between UX and UI and recognize the importance of putting the customer at the forefront of your decisions as you work on any project. For more detail on UX and UI, please revisit the following lesson items in the Introduction to UX and UI course:

Introduction to UX and UI

What is UX?

UX goals + quality components

Overview of the UX process

Empathy tools: Artifacts in the UX process

What is UI?

Exercise: Wireframing the project

Overview

In this exercise, you will create a wireframe of the homepage of the Little Lemon website. On completion, you will have all the skills to wireframe your design solution for your project on the reserve-a-table section of the Little Lemon website. 

A wireframe is like an architect's drawing - a building blueprint but for a digital product. Its purpose is to create a basic structure for each screen in the design before things like branding, colors and images are considered. In other words, wireframes provide a way to communicate ideas quickly that can be refined later.  With wireframes, the focus is placed on the user experience and what users need to accomplish a task.  

Although wireframes can be sketched out on paper, in this exercise, Figma will be used to draw the wireframe. This makes it possible to share the wireframe with other team members, giving them the opportunity to make comments in the same document.

Scenario

Little Lemon has faced difficulties with the reserve-a-table feature on its website. The feature doesn’t exist in the navigation bar and there is no specific button on its homepage to highlight this option. In this exercise, you will create a wireframe of the homepage incorporating this feature.

Instructions

Step 1: List the client's requirements

First, let's list the Little Lemon owners’ (your client's) requirements. These will become content blocks that will provide a skeleton of where the content will appear in the wireframe:

• About Little Lemon
• Highlights and specials
• Descriptions and photos of dishes
• Navigation bar
• Footer
• Testimonials

Now, that you have a better idea of the content, let’s start creating the actual wireframe in Figma.

Step 2: Create the frame and grid

• Create a 1440 x 2900 frame
• Add a 12-column layout grid to the frame.

Note: You may wish to revisit the Grids and constraints lesson item in the Principles of UX/UI course before you begin or refer to it as you go along.

Construct content blocks using rectangles and name the sections. In the first frame, you need content blocks that contain the following:

• Navigation bar
• Hero section that showcases the Little Lemon restaurant
• Highlights section showing the week’s specials
• Testimonials
• About the Little Lemon restaurant
• Footer

Move the content blocks out of the frame.

Select the rectangles and make them narrower to give you a rough guide of the content blocks to use as a reference when designing within the frame.

Step 3: Design the Navigation Bar content block

In the navigation bar, the elements you need are the Little Lemon logo and links to the other pages on the website.

For the logo, create a rectangle and draw diagonal lines through it. This is a conventional way to denote a placeholder on a wireframe if an image is not readily available.

The Little Lemon owners have provided a list of pages needed for the website, as given below. You'll need to link to each one: 

• Home
• About
• Menu
• Reservations
• Order online
• Login

Step 4: Design the Hero Section content block

In the Hero content block, include:

• The Little Lemon name
• Where it is located
• A brief description of what type of food it offers
•  The option to book a table online

In relation to the latter item, put this in the content block as a button, so that, once clicked, the user is brought to another page where they can carry this task out. To do this, add a grey background and populate the block.

Step 5: Design the Highlights content block

It’s now time to move on to the Highlights block, where the owners want to highlight Little Lemon’s weekly specials.

In this section, you should include the following:

• Title
• Name of the dish
• Dish description
• Price and
• Image of the dish

Note that when a dish is clicked, the user is taken to another screen and that this highlights section is scrollable horizontally in order to see further items.

Add a button so the user can go to the order online page.

Step 6: Design the Testimonials content block

Once users have created a profile and logged in, they can leave reviews and ratings out of 5. To accomplish this:

• Add a background to separate it from the Highlights content block above.
• Create placeholders for the reviews.

Step 7: Design the About content block

As the Little Lemon owners have yet to provide the written content for this section, add a text box placeholder. 

Because you will need some images here, also add image placeholders.

Step 8: Design the Footer Navigation content block

First add a background, followed by the following content:

• Logo
• Doormat navigation (links to other pages)
• Contact details
• Social media links

Repeat this process for all the screens in the reserve-a-table page section of the website.

Note: No colors, fonts or images are included at this stage. All that is important when wireframing the project is the content, layout and functionality.

Conclusion

Now that you have covered the basics in wireframing and wireframed the first page or homepage, you can wireframe and design your solution for the reserve-a-table project.

Exercise: Designing components

Overview

In this exercise, you will create a drop-down animated component animation in Figma using variants. When you complete this exercise, you’ll be able to add this to your reserve-a-table section on the Little Lemon website project.

Note: The subject matter of designing a component in Figma, as well as interactive component design has previously been covered in the Principles of UX/UI design course. You may want to revise or refer to the following lesson items whilst completing the exercise:

Design a component in Figma

Interactive component design

Scenario

As defined as an opportunity in the User Journey map that you explored in the Principles of UX and UI recap earlier in this lesson, the persona Tilly wanted an option to select a type of occasion when making a reservation.  This may, for example, allow Little Lemon to prepare something special to mark the event and save her time either by calling in advance to explain or in order to be discreet, alerting the staff to the nature of the occasion before she and her party arrive for her booking.

Instructions

Step 1: Create the component and variants

Create a desktop frame:

• In this frame, create a rectangle that is 400w x 80h.
• Change the fill color to #EDEFEE.
• Add rounded corners, with a radius of 8, and give it a drop shadow effect.

Add some text, an icon and an arrow (a chevron) to indicate this is a dropdown menu, which, when clicked, will open up the occasion options for the user to select.

Duplicate the rectangle to examine the list as it would be displayed when it drops down:

• On the duplicated rectangle, remove the rounded corners and the drop shadow.
• Add a dashed bottom stroke, delete the icons as they are not necessary and change the title to Birthday. 
• Then, group the elements.

Duplicate this box and add the other occasion options and name them. 

Note: Although three options - birthday, engagement and anniversary - are used in this exercise, feel free to add additional options.

Group all the elements and navigate to the top menu bar to create a component and a variant. These are encompassed in a purple dashed container.

Note: You can easily extend the container so that you can position the main component and the variant side by side.

On the left, in the layers panel, there are now two variants -the default, which is how the dropdown list will display in idle state, and variant 2, which will display the active state:

Delete the dropdown options in the default

Copy variant 2 and name it Birthday, as that's what the user will get when they select the Birthday option. 

• Delete the party icon and the other options in the dropdown. 
• Modify the arrow by rotating it 180 degrees. To make the user aware that they have made a selection, change the rectangular fill color to #495E57 and the text color to white.

Duplicate this variant twice (for the additional two options) and rename them Engagement and Anniversary.

You have now created the dropdown list.

Step 2: Prototype and animate 

To animate the dropdown, navigate to prototype on the right-side bar and connect the components.

To create a nice, smooth animation, use Smart animate in these connections to create a small delay when clicked.

• Connect the default or idle state to variant 2. 
• Connect variant 2 to the Birthday state, with the same settings: on click and smart animate.
• Repeat for the Engagement and Anniversary variants.
• Also connect these variants to the default or idle variant when the Birthday, Engagement, or Anniversary option is clicked. 

Note: The connections covered in point 3 to point 6 are as follows:

Next, create a new desktop frame and call it prototype.

• Copy the default or idle component and add it to the prototype frame.
• Then, add the text Select occasion.

Step 3: Present animation 

Now is the moment of truth to determine whether the dropdown menu works as intended.

• Navigate to the presentation mode.
• Click the dropdown menu. The options should appear.

Select an occasion. The button should change color.

Navigate back to the idle state and determine if you can change the occasion. This is important should a user make a mistake in their selection. 

Note: When testing your dropdown menu, the smooth transition created by using Smart Animate should be visible.

Conclusion

By completing this exercise, you have created a dropdown animated menu that you can incorporate into many aspects of your project when creating the reserve-a-table section for the Little Lemon website.

Exercise: Applying design fundamentals in Figma

Overview

This exercise will cover the steps from wireframes to high-fidelity mock-ups and apply design fundamentals using the brand style guide, which specifies every aspect of the look and feel of the brand. This includes typefaces, colors, and how pictures and images should be used. It also includes a UI kit, a set of files containing critical UI components like font sizes, icons and documentation. A Figma file of the wireframe used in this exercise and an image resource folder is provided below.

RESOURCE 1 - WIREFRAME

RESOURCE 2 - ASSETS

On completion, you will have the skills necessary to take the wireframes of your design solution for your project on the reserve-a-table section of the Little Lemon website to produce high-fidelity mock-ups. You may wish to revise the following lesson items in the Principles of UX/UI course before you begin or refer to them as you go along:

Working with images

Design text hierarchy and grid

High fidelity design

Scenario

The owners of the Little Lemon Restaurant have approved the wireframes for their website and want you to turn these wireframes into a high-fidelity design or a design that closely resembles the final product using their brand style guide.

Instructions

Step 1: Brand style guide 

First, let’s examine the style guide provided by the owners of Little Lemon. This guide serves as a starting point.

Now, let’s start with creating the styles as per the brand style guide. Styles help you simplify your workflow, keep text and colors consistent and save valuable time.

To create a color style, follow the next steps using the Little Lemon brand colors:

To create text styles, follow the next steps using the Little Lemon brand text styles:

Step 2: Add content to the placeholders on the wireframe

First, the Navigation bar needs a logo and the text needs to be altered.

Next up is the Hero section.

Finally, work with the Highlights section.

Conclusion

Well done! You should now have something similar to the following mock-up:

Additional resources

Here is a list of resources that may be helpful as you continue your learning journey. These resources provide some more in-depth information on the topics covered in this module.

A practical guide to relating scenarios and personas 
Personas 
An article on wireframing
Grids and constraints
Guide to components in Figma

WEEK 2 - Project foundations

In this module, you’ll use semantic HTML, meta tags and Open Graph protocol to create a modern HTML structure for the web app. You will also use CSS grid and other CSS styling to set up a responsive, clear and inviting website.

Recap: Semantic HTML

Overview

In this reading, you will recap semantic HTML. The revision topics in this reading are from the HTML and CSS in-depth course from the Front-End developer program, with a particular focus on the Semantic and Meta tags lesson in the HTML in-depth module.

What are semantic tags?

Semantic tags are a way to describe the meaning of your web page through tags. For example, older, non-semantic HTML used the following HTML structure to style a main menu section of a web page:

<div>    

  <ul>

    <li><a href="/home">Homepage</a></li>        

    <li><a href="/about">About Us</a></li>

    <li><a href="/blog">Blog</a></li>  

  </ul>

</div>

The above structure is not signaling that it's a menu for navigation in any way. Instead, to create a more semantic HTML structure, you replace the <div> element with the HTML5 <nav> element.

<nav>    

  <ul>

    <li><a href="/home">Homepage</a></li>        

    <li><a href="/about">About Us</a></li>

    <li><a href="/blog">Blog</a></li>  

  </ul>

</nav>

The code example above is a better way to signal intent. Let’s explore why.

The nav versus div elements

In the example above, the <nav> element describes the meaning of the particular section of the webpage as the element itself is meant to be used to contain some kind of navigation. However, a <div> tag is just there to group any collection of HTML elements when there is no better (more semantic) way to group them. This means that the <div> tag is less semantic or less meaningful. In other words, it conveys less meaning about what exactly the given HTML snippet's role and purpose is. The <nav> tag is more semantic because it signals that the given structure is meant to be used as some sort of navigation menu. This is a simple but effective example for reminding you what semantic HTML is all about.

Metadata and meta tags

To further revise the purpose of semantic HTML, please revisit the following lesson items from the HTML and CSS in-depth course:

Metadata
Metadata cheat sheet

It's important to remember that <meta> tags are tags that contain data about a given web page. They are used to define SEO-relevant data, responsive and mobile behavior of a given web page, encoding and more.

The role attribute

The role attribute is another tool you have at your disposal when writing semantic HTML. The role attribute describes the role of an element in a web page. This attribute is global meaning you can use it on any element. While many elements have implicit roles, you can make them explicit by adding a role attribute.

<a href="/book" role="button">Book a table</a>

Conclusion

In this reading, you revisited the concept of semantic tags in HTML and the role attribute. Following this quick revision of semantic HTML, including meta tags, you should be ready to complete the exercise in the next lesson item, which involves setting up the HTML document for the Little Lemon web app.

Exercise: Setting up the HTML document´

Overview

Using semantic HTML and understanding how it works in React is the next fundamental step in the process of creating the reserve-a-table web functionality for Little Lemon. In this exercise, you will organize your JSX code so that it follows HTML5 best practices. 

To revisit using semantic HTML in webpages, you may find it helpful to refer to the following lesson items in the HTML and CSS in-depth course now or as you progress through the exercise:

Semantic tags
Semantic HTML cheat sheet

Scenario

By completing this exercise, your React app will use a semantic HTML structure to better describe the intention and semantics of the document. As you have learned, semantic HTML is important for describing the meaning, or semantics, of your HTML document. It also assists accessibility software, such as screen readers, in describing your content to users with disabilities.

Instructions 

Step 1: Set up the initial semantic structure

• Open your project in Visual Studio Code.
• Open the App.js file.
• The App component’s root element uses a div element. As this is not a semantic tag, replace it with a React fragment.

Tip: Remember, a fragment starts with a <> tag and ends with a </> tag.

Review your UI/UX and decide how each of the sections of the design will be represented using semantic tags.

Tip: Use the header, nav, main and footer semantic tags.

Inside the fragment, add the semantic tags.

Step 2: Break the sections down into React components

Now that you have planned your semantic structure, it is important to decide which sections will be dynamically updated and if those sections should be child components of the App component.

Tip: For simplicity, you can create a component for each semantic element you added to App.js.

• Create a JavaScript file for each semantic element that will be a React component, for example, Header.js, Nav.js, Main.js and Footer.js.
• In each component, return the semantic HTML element.
• In App.js, replace the semantic tags with the corresponding child components, for example <header></header> will be replaced with <Header/>.

Step 3: Add the logo and navigation elements

The initial components are now set up. You will now add the details for the logo and navigation.

• Add the Little Lemon logo to the appropriate React component using the <img> tag.
• Add the website navigation to the Nav component. It is important to add a hyperlink for each key page of the website based on your mockup.

Tip: Use a <ul> element and add an <li> element for each <a> hyperlink.

Step 4: Add the footer content

Review your design and add the necessary HTML elements to the footer component.

Conclusion

By completing this exercise, you have now set up the semantic foundations to build the rest of your application. As you progress through the course, ensure that you apply the appropriate semantic HTML elements to the content that you are building.

Recap: Meta tags and Open Graph protocol

Overview

In this reading, you will revisit the concepts of Open Graph protocol and Open Graph meta tags.

What is Open Graph protocol (OGP)?

Open Graph protocol is an internet protocol that was built by Facebook. It's a structured way to describe the content of a web page. Before OGP, there were many ways to turn a web page into a rich object, ready to be shared on social media. The OGP brought about a single, simple technology for making this possible. 

A review of meta tags and OGP

Meta tags have many purposes, but the most important are:

• Sharing your web pages on social media
• Improving your website’s search engine optimization using your code (often referred to as technical SEO)

Just like regular HTML, Open Graph meta tags can be validated. Most web and IT professionals know that SEO is a moving target, just like most other technologies on the web. However, for the most part, SEO is not directly affected by the use of meta tags. Additionally, meta tags are very important because they allow you to increase conversions because they affect the way that shared content looks on social media sites.

However, keep in mind that poorly formatted meta tags might end up in, for example, a user sharing a link to your web app, but instead of a relevant image showing up in the shared preview, some other image displays. Although this other image still exists on your site, it's different from the one that you'd like to show up when your web app's URLs are shared on social media.

Meta tags examples

Here are a few specific examples of meta tags in use:

description

A meta description is a summary of what a given page is about.

<meta name="description" content="Get all your sports fishing equipment at 

One Place Fishing. Open Monday to Friday, 9 to 5, in the Great Lake area."/>

og:title

The og:title meta tag is there for you to give a title for your shared link or shared content.

<meta name="og:title" content="One Place Fishing"/>

og:description

A title is usually followed by a description, which is what the og:description meta tag is for.

<meta name="og:description" content="some description here"/>

og:image The og:image meta tag specifies the image to serve when a link is shared on

social media.

<meta name="og:image" content="https://example.com/one-place-fishing-store.jpg"/>

You can find out more information about the OGP and about how to use the Open Graph tags from the ogp.me website.

To re-iterate, meta tags are "tags about HTML tags". In other words, they give some additional information about the web page itself. You might say that the Open Graph tags are a subset of meta tags, with this subset being specifically responsible for formatting previews to your web app's content when its URLs are shared as links. What's so great about the OGP is that it plugs into the existing system of meta tags in HTML5 and allows developers to seamlessly turn web pages into rich objects in a social graph.

Conclusion

You’ve revisited meta tags and the Open Graph protocol in this reading. You should now be prepared to add meta tags to your project as well as set up OGP.

Exercise: Adding meta tags and setting up OGP

Overview

Building a website is an important part of marketing a business. Equally, word of mouth and social media are important for bringing in new customers. In this exercise, you will prepare the Little Lemon web app for search engines and social media platforms, by adding meta tags and setting up Open Graph protocol (OGP).

Scenario

The Little Lemon restaurant makes great food and the owners hope that happy customers will recommend the restaurant to others by sharing the website on social media. Potential customers may also try to find the website using popular search engines. It is an important task to make sure that the website is presented correctly on both search engines and social media platforms. In this exercise, you will add metatags and set up the Open Graph protocol (OGP) to help ensure the correct presentation of your project on these various platforms.  You may find it helpful to refer to the following lesson items in the HTML and CSS in-depth course now or as you progress through the exercise:

Metadata
UX with meta tags
Social media cards
Setting up social media cards

Instructions

You will apply the following to the index.html file in your project.

Step 1: Add the appropriate description (meta tag)

Add your own description for your Little Lemon restaurant application:

<meta name="description" content="your text goes here"/>

Step 2: Add the og:title meta tag

Add the Open Graph's title for your Little Lemon restaurant application, inside the double quotes in the content HTML attribute:

<meta name="og:title" content=""/>

Step 3: Add the og:description meta tag

Add your own description for your Little Lemon restaurant application, inside the double quotes in the content HTML attribute:

<meta name="og:description" content=""/>

Step 4: Add the og:image meta tag

Add your own Open Graph image for your Little Lemon restaurant application, inside the double quotes in the content HTML attribute:

<meta name="og:image" content=""/>

Conclusion

In this exercise, you prepared the Little Lemon web app for search engines and social media platforms using Open Graph meta tags. When the app is launched online, it will appear with the correct information for potential customers.

Additional resources

Here is a list of lesson items from the HTML and CSS in-depth course that may be helpful as you continue your learning journey. These resources provide some more in-depth information on the topics covered in this module.

Semantic tags and why we need them
Semantic HTML cheat sheet
Semantic tags in action
Metadata
Metadata cheat sheet

Recap: CSS grids

Overview

In this reading, you will recap CSS Grids in preparation for setting up a CSS grid in your Little Lemon web app project.

What is a CSS Grid?

CSS Grids are two-dimensional web page layouts that are responsible and compatible with various browsers. They are an alternative to Flexbox and tables. In a Grid Layout, columns are vertical tracks and rows are horizontal tracks.

Using CSS Grid layouts

You can use a CSS grid layout on any collection of elements on your web page. To do so, you need to use the display property and set it to the value of grid. You can think of the display: grid CSS property as sort of a switch that turns the grid display on.

Once you have the CSS grid activated, you can quickly define a simple grid by just using grid-template-columns and grid-template-rows properties.As a reminder, here's an example of this, taken from the CSS Grids lesson item from the HTML and CSS in depth course, an earlier course in the Front-End developer program:

.container {

    display: grid;

    grid-template-columns: 100px 100px 100px;

    grid-template-rows: 2fr 1fr; 

}

The fraction unit

Let’s explore the above code snippet, remember that grids introduce a new unit, fr, which stands for fraction. The fraction unit is a quick way to divide your grid in a straightforward and versatile way. Remember that you can use fraction and pixel values interchangeably in both grid rows and grid columns.

The repeat function

Another really useful tool in the grid layout is the repeat CSS function, which allows you to repeat columns or rows so that the code itself is less repetitive. As an example, here's how you'd re-write the above code snippet using the repeat function:

.container {

    display: grid;

    grid-template-columns: repeat(3, 100px);

    grid-template-rows: 2fr 1fr;

}

The first value given to the repeat function above is the number 3, meaning, there should be three columns in this grid. The second value is the width of each column in the grid - in this case, the width of each column is 100px.

The minmax function

Another useful function that you can utilize is the minmax function. In the example below, the grid-auto-rows property is used with a call to the minmax function, which sets the value for this grid's rows to 150px each.

.container {

    display: grid;

    grid-template-columns: repeat(3, 100px);

    grid-auto-rows: minmax(150px, auto);

}

More on using CSS Grids

It’s important to note that the HTML and CSS in-depth course has additional lesson items that describe how to use CSS grid in more depth. If you need to brush up on additional topics, please take your time to do it. The following links may be helpful.

Grids and Flexbox cheat sheet
Grid showcase
Grid template area

Conclusion

In this reading, you revisited the topics of CSS Grid and Grid layouts.  With this recap on CSS grids completed, you are now positioned well to complete the exercise in the next lesson item, Setting up the CSS Grid.

Exercise: Setting up the CSS layout

Overview

To build upon the wireframes you designed for the Little Lemon reserve-a-table web app functionality, your next task is to create the web app layout using HTML and CSS. In this exercise, you will use your CSS skills to code reusable sections of your app’s layout.  The code you write in this exercise is one of many building blocks that you can use and reuse in different parts of your React app.

Scenario

Visitors to the Little Lemon website will be viewing the content on different devices, from small devices such as mobile phones to large devices like desktops and tablets. Therefore, the owners of Little Lemon have requested that the website is responsive.  To achieve this you will need to implement the responsive column layout that you previously planned, using either a CSS Grid or Flexbox Layout. In this exercise, you will create the necessary CSS rules to allow for a responsive layout. You will apply these rules throughout the course.  As you progress through the exercise, it may be helpful to revisit the following lesson items from the HTML and CSS in-depth course:

CSS web layout
CSS units of measurement
Understanding Flexbox
Basic Flexbox
CSS Grids
Grids and Flexbox cheat sheet

Instructions

Step 1: Set up the CSS rules

Based on the mockup, decide if you will use a CSS Grid or Flexbox Layout

Open the app.

Based on the mockup, add the required CSS Grid or Flexbox rules to the file.

Tip: If you are unsure which rules to add, refer to the Grids and Flexbox cheat sheet lesson item.

Step 2: Apply the CSS rules to HTML elements

• Open the index.html file and apply the CSS rules to the HTML elements.
• Open your previously created component files and apply the CSS rules to the HTML elements.

Step 3: Verify that the HTML elements are positioned correctly

• Run your app using the npm start command
• Open the web browser and go to http://localhost:3000 to view the web app.
• Ensure that the elements are positioned correctly in the web browser
• Using the web browser developer tools to view the web page in responsive mode, ensure that the elements are positioned correctly on a mobile device.

Conclusion

By completing this exercise, the Little Lemon website’s visual layout will display correctly on different device sizes. This will provide a good user experience to visitors of the website.

Recap: Styling elements

Overview

In this reading, you will revisit some of the various different CSS concepts that will assist you with styling elements in your Little Lemon web app project.

Default CSS styling

Recall that CSS is a design language that allows you to affect the way that your HTML elements are displayed in the browser. Even if you don't have any CSS styles declared in your web page (or web app), the browser will still display the HTML.  This means that the browser comes with some pre-built styling. In other words, the browser has some preconceptions of how every single element on the page should look. For example, there are block elements, such as <h1> to <h6>, <p> and <div>, which, by default, come with the display: block property set. In fact, the browser comes with pre-built styles for every single HTML tag.  No matter how minimal an HTML element looks on the page, it's sure to have some CSS styling applied.  Likewise, it would not be possible to show an element on the page if it did not have some CSS styling applied.

Practical CSS styling

You can think of your own CSS code as code that overrides the default, built-in styles. For example, there is not a single element in HTML that a browser styles as display: grid by default.  This allows you, as discussed previously, to switch on the CSS grid as needed. Perhaps that's all that it takes. You get to keep all the browser's styles for all the HTML elements, with the default display property overridden to be grid.

This brings us to the topic of CSS selectors. You don't have to use CSS element styles like the following: 

div {

    display: grid;

}

Adding the above code snippet to your CSS styles would likely be bad because you'd be setting every single <div> element on the page to display as grid.  Luckily, CSS selectors are very versatile, so by virtue of simply adding a single CSS class to a <div> tag in your style sheet, you can target only those <div> tags that have a given class in your HTML, and thus your CSS selector becomes a much more fine-tuned tool, with pin-point precision:

div.main-grid {

    display: grid;

    /* ... your styles ... */

}

Of course, to make it work, you'd need to update your HTML as well:

<div class="main-grid">

    <!-- Your content -->

</div>

Conclusion

In this reading, you revisited the basics of styling elements using CSS. To explore the topics covered in this lesson in greater detail, please visit the following lesson items from the Introduction to Front-end development course:  

Selecting and styling
Alignment basics
Box model introduction

By completing this overview, you’re ready to tackle your next exercise, which involves styling elements.

Exercise: Styling elements

Overview

Now that the layout of the Little Lemon web app is set up, the next step is to set up the necessary CSS rules to apply the visual stylings based on the design that you built in Figma. In this exercise, you’ll use your CSS skills to code the way specific HTML elements should look on the Little Lemon web app. 

Scenario

Little Lemon wants you to implement recognizable styles for HTML elements on their restaurant app. In this exercise, you will style these HTML elements. The styles need to be in line with the Figma design and wireframe you created, including, for example, font size, spacing, line height, colors, background colors and borders. 

In preparation for this exercise, you can recap CSS selectors, best practices and examples by referring to the following lesson items in the HTML and CSS in-depth course:

Widely used selectors
All selectors and their specificity
Combination selectors
Pseudo-classes

Instructions

Step 1: Consider your Figma design and wireframe

Inspect the design and mockup for your app. During your evaluation, you may consider:

• What is the common theme across your site?
• What are the colors?
• What are the font sizes?
• What are the responsive design considerations?
• Will your HTML elements (including images) have the border radius set to 0 or will it be somewhat rounded?
• Will your divs, articles, asides and other tags have a CSS shadow?
• What other CSS properties you can think of?

Step 2: Style the HTML headings, paragraphs and spans

Bearing in mind design considerations, style your headings, paragraphs and spans, namely, the following elements:

• h1, h2, h3, h4, h5 and h6
• p
• span

Step 3: Style the navigation elements

Bearing in mind design considerations, style your navigation elements, namely:

• nav
• ul
• li

Step 4: Style your images

Bearing in mind design considerations, style your images, that is, the img tag.

Note: You might need to come back to this task again and again as you develop the app and fine-tune the styling.

Step 5: Apply the rules to existing HTML elements

Open your previously created component files and apply the CSS rules to the HTML elements.

Step 6: Verify that the HTML elements are styled correctly

• Run your app using the npm-start command.
• Open the web browser and go to http://localhost:3000 to view the web app.
• Ensure that the elements are styled correctly in the web browser.
• Using the web browser developer tools, view the web page in responsive mode to ensure that the elements are styled correctly on a mobile device.

Conclusion

By completing this exercise, you have a complete CSS code for the HTML elements which you can use to style the elements in your project.

Additional resources

Here is a list of resources that may be helpful as you continue your learning journey. These resources provide some more in-depth information on the topics covered in this module.

You may find it helpful to revisit the following lesson items in the HTML and CSS in-depth course:

• CSS web layout
• CSS units of measurement
• CSS grids
• Grids and Flexbox cheat sheet
• Grid showcase

Recap: React basics

Overview

Having worked through the two React-focused courses in this Front-End developer program, you are likely to know that React is all about components and that components rely heavily on the JSX syntax. In this reading, you’ll be guided through a quick recap of the basic building blocks of React.

What is React?

React is a declarative and component-based JavaScript library used to build user interfaces. It allows you to build components and compose them together. 

This feature, namely, the composability of React components, is very important because it allows you to construct React apps similar to how you'd create a structure with toy blocks. Simply put, it's a process that allows the construction of complex structures from simple building blocks.

React components

In modern React, every React component is a JavaScript function. To differentiate between regular HTML elements and custom React components, you need to capitalize the component function's name. Then, using JSX syntax, you can render a component from another component. JSX syntax relies on expressions and ternary operators.

Rendering components

For a component to be rendered (displayed) on a screen, it needs to be imported into another component. A component that imports another component is known as the parent component. The component that gets imported and rendered is referred to as a child component. 

You can render multiple components from the parent component and pass data from a parent component to a child component using props.

For example, suppose you have a parent component named App, which imports a child component named Header:

import React from "react";

import Header from "./Header";

export default function App() {

    return (

        <Header />

    )

}

The Header component returns some HTML with the heading element containing some text.

export default function Header() {

    return (

        <div className="main-grid">

            <h1>This is the Header</h1>

        </div>

    )

}

Props, state and event handlers

There are two ways that components work with data: props and state. If the data comes from a parent component, that data comes in the form of props. Props are immutable and external to a component, meaning they come from outside a component. State is mutable and internal to a component, meaning it exists inside a component.

Event handlers are a way to update state. Event handlers in React work similarly to the event attributes in plain HTML. There are several differences between the two syntaxes, but the two main ones are:

• HTML event attributes use lowercase; React event attributes use camelCase.
• HTML event attributes use parentheses; React event attributes don't use parentheses.

Conclusion

In this reading, you revisited the topic of React basics. Now that you've re-acquainted yourself with some of the basic React concepts, you are better prepared to take on your next exercise, which will involve setting up components for your project app. If you would like a more in-depth recap of the React basics, please revisit the following lesson items from the React basics course:  

Creating React components
Transpiling JSX
Types of events
Parent-child data flow
What is state?

Exercise: Setting up the app components

Overview

In this exercise, you will set up the components and routing for the different areas of the Little Lemon website.

Scenario

Now that the visual foundations of the Little Lemon website are set up, you’ll need to set up the components and routing for the functions and features of the website. Using component-based web development, you can code components that you can reuse throughout the Little Lemon website, for example, you could code the Nav component for the homepage of the website and re-use it for other pages, such as the About page and Bookings page. For more information on this approach to web development, you may find it helpful to revisit the following lesson items in the Introduction to Front-end development course:

Single page applications
What is React?
Component hierarchy
Creating React hierarchy
Navigation
The NavBar

Instructions

Step 1: Recognize components to build, using your design

Map, 1-to-1, the components you have in Figma. Here is an example of the components that could be built for the web app's homepage layout:

• Nav (the top-level navigation of the website, sometimes referred to as the navbar)
• CallToAction (sometimes referred to as the jumbotron or the hero, this component is the call-to-action section that guides the user to click a call-to-action button while enticing them to do so in as few words as possible)
• Homepage (the component for the homepage)
• Specials (the component that loops over the specials that come from a data source)
• CustomersSay (testimonials, including star ratings, customer images and customer details)
• Chicago (the component that describes the Little Lemon Chicago restaurant and gives a short backstory for it)
• BookingPage (the component for the table reservations page)

Step 2: Set up the Navigation

Now that your components are set up, the next step is to add the navigation and routes. 

• Update the hyperlinks in your navbar to use the Link component.
• In the Main component you created in the previous exercise, add the Routes component and define a route for each page. For example:

<Routes> 

    <Route path="/" element={<HomePage />}></Route>

    <Route path="/booking" element={<BookingPage />}></Route>

</Routes>

 Step 3: Code the first version of the homepage's components

Now that you've identified the components that your homepage needs to have, code some simple components for the page.

Note: At this point, all that you need to have are the images and text.

Step 4: Style the homepage components

Style the components that you've coded for the homepage using the style guide. You may choose to style the following using CSS rules that you’ve previously created, or, update the rules as necessary.

• Font size
• Color
• Background
• Line-height
• Letter-spacing
• Grid
• Flex
• Display
• Border
• Border radius

Note: Keep in mind that you may need to set aside sufficient time for styling. Styling these components will take some time, maybe even a few hours.

Conclusion

By completing this exercise, you have built and styled-components for the homepage of the Little Lemon website. You can apply these skills to creating component-based layouts for the Little Lemon reserve-a-table functionality.

Additional resources

The following resources are additional reading materials related to adding components to your app project. These will add to the knowledge that you’ve gained in this lesson.

• Components and props
• Introducing JSX
• Styling and CSS in React
• Introducing expressions in JSX

WEEK 3 - Project functionality

In this module, you'll code the table booking system using React. You'll also explore the importance of UX and form validation and write unit tests. Additionally, you'll cover accessibility and UX and UI usability evaluation.

Recap: State in React

Overview

React state is the cornerstone of making React apps interactive – the same applies to your table booking app. To prepare for adding state to your project, you'll brush up on your knowledge of working with state in React in this reading.

React state overview

State is an object. You can control it using the useState hook. For example, consider the following code of a task list in a to-do app:

import React, { useState } from "react";

import { TaskList } from "./components/TaskList";

export default function App() {

  const [tasks, setTasks] = useState([

    { id: 1, task: "Go shopping", done: true },

    { id: 2, task: "Wash dishes", done: false },

  ]);

  return (

    <TaskList tasks={tasks} />

  )

}

There are several important concepts to revisit in the above code example, namely:

• Object destructuring on line 1
• Array destructuring of useState variables on line 5
• Using an array of objects for the initial state value on lines 5 to 8
• Passing in state data as props from the parent component to a child component

Object destructuring

Object destructuring is a common pattern in React. Inspect the first line of code again:

import React, { useState } from "react";

In this line, React is imported and then { useState } is imported. This allows you to write useState instead of React.useState in the rest of the App component's code, without accessing it through the React object. This pattern is commonly used for imports.

Array destructuring of useState variables

The code that begins on line five of the code example provided earlier is using the useState hook. Here's a slight variation on the given code, so that it's easier to describe what is happening:

const [tasks, setTasks] = useState()

As mentioned already, this is an example of array destructuring. The return value of a useState call is always an array. 

Tip: The advantage of array destructuring over object destructuring is that you can destructure an object using only the exact property key of the source object, while you can destructure a member from an array using any name.

Using an array of objects for the initial state value

The initial state value of the task list app example is using an array of objects. This is because it is a very convenient way to work with data in JavaScript. In fact, it is so convenient that many APIs return arrays of objects when their data is fetched.

Back to the example, what will the value of the tasks variable in the example code below be?

import React, { useState } from "react";

import { TaskList } from "./components/TaskList";

export default function App() {

  const [tasks, setTasks] = useState([

    { id: 1, task: "Go shopping", done: true },

    { id: 2, task: "Wash dishes", done: false },

  ]);

  return (

    <TaskList tasks={tasks} />

  )

}

The starting value of the tasks variable will be:

[

    {id: 1, task: "Go shopping", done: true},

    {id: 2, task: "Wash dishes", done: false }

]

Having this data structure as the starting code of the task list allows you to easily create, read, update and delete the tasks array's members, that is, the individual tasks.

Passing in state data as props from the parent component to a child component

Take note of the return value of the App component:

return (

    <TaskList tasks={tasks} />

)

This is the rendering mechanism of React. It uses the array of task objects and it passes it to the TaskList component. Then, if you were actually building this app, you'd code the TaskList component so that it accepts the props.tasks and does something with the data that comes in.

Conclusion

In this reading, you revisited the concept of state in a react app. Now that you've recapped state and its related concepts, it’s time to complete your next exercise, Adding Table-Booking State. While this recap has given you a brief overview of working with state in React, if you would like a more in-depth refresher on these topics, you can revisit the following items from the React basics course:

• What is state
• Observing state
• Managing state
• Data Flow in React

Additionally, you might want to check out the following lesson items from the Advanced React course:

• What you know about props and state
• Revising useState hook
• Working with complex data in useState
• Using the useState hook

Recap: Forms

Overview

Forms are an interesting topic in React, as they do not work like other DOM elements in React. This is because form elements keep their own state in regular HTML. Before moving on to your next exercise, it’s important for you to understand this distinction between form elements and other elements in React, as well as how to work with them properly.

Form elements in React

Let’s begin with an example of a form in HTML. Say you want to have a number input, so you write the following code:

<form>

    <label>

        Number of guests:

        <input type="number" name="guests" />

    </label>

    <button type="Submit">Submit</button>

</form>

The default behavior of an HTML form is to open a new page after the user clicks the submit button. In React, however, the usual practice is to use the preventDefault() method on an instance of the Event object that was built when the listened-to event was fired. Using the preventDefault() method stops the default behavior of the HTML form element. Once you've prevented the form's default behavior, you can use JavaScript and React to control the way that the form will be submitted. Additionally, after the preventDefault() is run, you can do whatever you need to do with the form data in a given scenario. There are two ways of achieving this: controlled and uncontrolled components.

Controlled and uncontrolled components

With controlled components, you let React take control of a given form's state. Although this requires some extra setup in your React code, the end result is that you can pass the form state value around in your React app, just like you can any other state value.  

Alternatively, you can let the DOM control the state of your components, in which case you'd be using uncontrolled components.  With uncontrolled components, you don't need to use event handlers for state updates in your form's elements. Instead, you can use refs to obtain the needed form element's values straight from the DOM. 

The advantage of uncontrolled components is that sometimes it helps integrate React with other Front-end libraries. However, keep in mind that controlled components are the approach the official React docs suggest using most of the time.

Conclusion

Now that you've been re-acquainted with the concepts of forms in React, including controlled and uncontrolled components, you are better equipped to define the New Booking page in your app project in the next exercise. For a more in-depth recap of forms in React, you can revisit the following lesson items in the Advanced React course:

• What are controlled components?
• Controlled components vs. uncontrolled components
• Creating a form component in React
• Create a controlled form component

Exercise: Defining the Bookings page

Overview

Now that you’ve set up the foundations of the project, the next step is to begin adding the key features of the Little Lemon web app.In this exercise, you’ll set up the table booking page.

Scenario

Currently, a visitor to the Little Lemon web app cannot reserve a table.  Your task is to improve the app by allowing the user to enter data into the form so that they can complete their registration.  Thus, you need to build a Booking Form component that has the following entries (form items):

• Date
• Time
• Number of guests
• Occasion (Birthday, Anniversary)
• Submit reservation button (to submit the form)

To do this, you need to implement a form in a controlled component named BookingForm. As you progress through the exercise, it may be helpful to revisit the following lesson items:

Creating a form
What are controlled components?
Creating a Form component in React
Event handling and embedded expressions
Using hooks
Observing state

Instructions

Step 1: Check the component and routes

If you haven’t done so already, create the BookingForm and BookingPage components. The BookingPage will contain the BookingForm component, in addition to any additional content before and after the form. 

Note: Before proceeding to the next step, check that your routes and navigation bar are set up to allow navigation to the booking page.

Step 2: Code the form structure

Next, you’ll need to build the form structure in the BookingForm component. You can use the following plain HTML5 implementation as a starting point, however, you should convert it to JSX so that you can later connect the input to the React state.

<form style="display: grid; max-width: 200px; gap: 20px">

   <label for="res-date">Choose date</label>

   <input type="date" id="res-date">

   <label for="res-time">Choose time</label>

   <select id="res-time ">

      <option>17:00</option>

      <option>18:00</option>

      <option>19:00</option>

      <option>20:00</option>

      <option>21:00</option>

      <option>22:00</option>

   </select>

   <label for="guests">Number of guests</label>

   <input type="number" placeholder="1" min="1" max="10" id="guests">

   <label for="occasion">Occasion</label>

   <select id="occasion">

      <option>Birthday</option>

      <option>Anniversary</option>

   </select>

   <input type="submit" value="Make Your reservation">

</form>

Note: Keep in mind the difference between the for attribute in HTML and htmlFor in JSX. Also, remember to self-close all tags in JSX.

Step 3: Code the form behavior

Using what you already know about events, effects and state in React, update your form's code to keep track of its own state.

• Define a state variable for field in the form.
• Connect each state variable to the form fields using the value and onChange form element attributes.
• The options in the booking time field should be displayed from a list of available times. For now, create a stateful array in the component named availableTimes and use this state variable to populate the time select field options.

Tip: Use the useState function to declare the variable.

Now that the state is connected to the input elements, the form is ready to communicate with an API, a task you may complete in future.

Conclusion

By completing this exercise, you’ve created the component of the Bookings page for customers to reserve a table. In the next lesson, you’ll work on lifting up the state and connecting the component to the list of available reservation times.

Exercise: Adding table booking state

Overview

Previously, you set up the BookingForm component and tracked its state. However, to be truly functional, your Little Lemon reserve-a-table web app functionality will need to be able to share state across components.

Scenario

The goal of this exercise is for you to expand the implementation of the component for the Booking page of the Little Lemon website. 

As part of the reserve-a-table web app functionality, the page will display the existing booked table times and available slots, using a list component containing several instances of a BookingSlot component.  

Available booking slots will be shared between the components and updated when the user submits the form. As your progress through the exercise, it may be worth revising the following lesson items in the Advanced React course:

Working with React hooks
Lifting up state
Working with complex data in useState
What is useReducer and how it differs from useState

Instructions

Step 1: Life state up to the Main component

As you added the table booking state to the BookingForm component in the previous exercise, in this exercise, you need to lift the state up to the Main component. This is the preferred approach in this case, as your app is relatively simple.

• Move the availableTimes useState hook from the BookingForm component into the Main component
• Pass down the state and state changing functions from the Main component to the BookingForm component using props in order to make state work across different components.

Step 2: Update BookingForm to display available times based on the selected date

• The next step is to prepare the available times to be updated based on the date the user has selected. To do this, you will change the availableTimes state to a reducer.
• In the Main component, create a function named updateTimes which will handle the state change. This function will change the availableTimes based on the selected date. For now, the function can return the same available times regardless of the date.
• Next, create a function called initializeTimes which will create the initial state for the availableTimes.
• Then, change availableTimes to a reducer using the useReducer function and provide the two previous functions as parameters.
• Update the BookingForm component to dispatch the state change when the date form field is changed.

Tip: Include the newly selected date in the dispatch parameter.

Conclusion

By completing this exercise, you should now have an app for Little Lemon in which state works across several components, moving you another step closer to having a fully-functional booking page. 

Although outside the scope of this capstone project, it’s worth mentioning that you may favor more robust state management approaches in the case of larger or more complex apps.

Recap: Unit testing

Overview

How do you guarantee that the app you code is working as planned? You could test all the pieces of functionality manually by opening up the app in the browser and going through all the possible interactions. However, this would be time-consuming and error-prone. 

Besides this manual testing approach, other approaches are usually better suited for the task.  These approaches are unit testing, automated testing and integration testing. In this reading, you’ll revisit the concept of unit testing.

Unit testing: A quick refresher

Unit testing is testing that focuses on units of code. In practice, when testing React apps, you write unit tests for specific react components. Let’s explore this using a simple code example. 

The following React app consists of a single component, App component. This app is just a button that increments a number value on click. The app's code is as follows:

import React from "react";

export default function App() {

  const [number, setNumber] = React.useState(1);

  function increment() {

    setNumber((prevNumber) => prevNumber + 1);

  }

  return (

    <>

      <h1 data-test-id="currentNumber"> {number} </h1> 

      <button data-testid="add-one" onClick={increment}>

          Add one 

      </button>

    </>

  );

}

Now that you have the full app's code, you can write the unit test for it.

Writing unit tests

Here is the test code of the test file named App.test.js:

import { render, fireEvent, screen } from "@testing-library/react";

import App from "./App";

test("Adds one", () => {

  // render the App component

  render(<App />); 

  

  // save the heading in a variable

  const heading = screen.getByTestId("currentNumber"); 

  

  // save the button in a variable

  const btn = screen.getByTestId("addOne"); 

  

  // click the btn

  fireEvent.click(btn); 

  

  // test assumption

  expect(heading).toHaveTextContent("2");

});

After you've written the test, you can run it using the command npm test or npm run test, which are essentially the same command. Once you run the test command, the output will look as follows:

PASS  src/App.test.js

  √ Adds one (29 ms)

Test Suites: 1 passed, 1 total

Tests:       1 passed, 1 total

Snapshots:   0 total

Time:        3.278 s

Ran all test suites.

Watch Usage: Press w to show more.

Testing best practices

In addition to recapping what unit tests are and how to run them, it’s worth summarizing some best practices to keep in mind when writing tests. These include:

• Avoid including implementation details.
• Work with DOM nodes.
• Resemble software usage.
• Keep maintainability in mind.

Conclusion

In this reading, you revisited the concept of unit testing and how developers use it to ensure that their code works as expected. Next up, you’ll have the opportunity to work with unit tests first-hand by adding unit tests to your project. To explore the topics recapped in this reading in greater depth, please refer to the following lesson items from the Advanced React course:

• Why React Testing Libary
• Writing the first test for your form

Exercise: Adding unit tests

Overview

In this exercise, you will write two unit tests that you can use to check that your web app is working correctly. With regards to writing tests and the related syntax, you may find it useful to recap the following lesson items in the Advanced React course:

Why React Testing library
Writing the first test for your form

Scenario

Testing code is a key step of the app development process. In this exercise, you’ll practice writing and implementing unit tests for components and state using React Testing Library to verify that the individual functionalities within your Little Lemon web app work as expected.

Instructions

Step 1: Test for some static text being rendered in the BookingForm component

Using your mockups, pick a part of the BookingForm component that has some static text, such as a heading or label.

In preparation for coding a test of this static test, review the following starting code for a test, based on an example in the Writing the first test for your form lesson referenced earlier:

import { render, screen } from "@testing-library/react";

import BookingForm from './BookingForm';

test('Renders the BookingForm heading', () => {

    render(<BookingForm />);

    const headingElement = screen.getByText("Book Now");

    expect(headingElement).toBeInTheDocument();

})

Keeping in mind the above example, code a test for the static text being rendered in the BookingForm component, using code like this:

screen.getByText("BookingForm");

Note: You will need to adjust the code based on what you've decided your Bookings component should render.

Step 2: Test the updateTimes and initializeTimes functions

The next step is to validate the behavior of the updateTimes and initializeTimes reducer functions.

• Write a unit test for the initializeTimes function to validate that it returns the correct expected value.
• Write a unit test for the updateTimes function to validate that it returns the same value that is provided in the state. This unit test is important as it will be updated later when the logic of changing the available times based on the selected date is implemented.

Conclusion

In this exercise, you explored two examples of unit tests that can be used to check that your web app works correctly.  In the event that the tests produce errors or unexpected outcomes, you’ll have a better idea of where exactly you need to apply a fix.

Additional resources

Here is a list of resources in the form of additional reading materials that will help you gain more insight into project functionality related to the table booking system of your app project.

• The article on destructuring assignment syntax allows you to get values out of the array that are returned when the useState hook is invoked. This resource describes how the destructuring assignment works in more detail.
• The Read props inside the child component link on the Beta version of React docs discusses how to use destructuring assignment to get values out of the props object.
• The useState reference on the official React docs website helps you to understand how to work with this hook and some of the caveats involved.
• The useEffect reference on the official React docs website helps you to understand the syntax of this hook and goes into some depth to explain how to use and troubleshoot the useEffect hook.
• The rules of hooks reading on the reactjs.org website gives you an overview of how to work with the hooks as recommended by the React Core team at Meta.
• The useReducer hook reference on the reactjs.org website discusses the basics of useReducer, along with specifying initial state and lazy initialization.
• The syntax and usage of the useReducer hook reading on the reactjs.org website complements the previous additional resource well.
• The using the useRef hook reference on the reactjs.org's docs website is a great example of various options that are available when working with this hook.
• The reusing logic with custom hooks on reactjs.org discusses the dynamics of custom hooks and goes to some length in giving a few practical examples to complement the theory behind them.

Recap: Querying APIs in React

Overview

In this recap, you'll revisit some of the concepts you covered in the Advanced React course. You need to have a solid grasp of these concepts to be able to fetch remote data and work with it in your project and future apps.

JSON data in your apps

JSON, which stands for JavaScript Object Notation, is the most popular data transfer format. It's a file extension format and a data interchange format. For an example of a JSON file, you can inspect any React app built using the create-react-app npm package. Each such app has a package.json file written in JSON format. Feel free to open this package.json file to quickly remind yourself of the basic syntax rules of JSON. It's important to remember that React projects are just some of the ones to use the package.json file. Any Node.js application initialized using the npm init command will show several prompts in the console or terminal. Based on your answers, npm will populate the contents of the package.json file that gets built in the process.

Fetching JSON data 

So, how do you obtain this JSON data in our apps? Well, generally, the JSON data exists somewhere on the web, at a specific URL. You can access that data in several ways, but one of the common ways to do it is using the fetch() function, which is built into JavaScript.

The fetch() function

Using the Fetch API, you access the JSON data on the web - either from your own server or from a third-party JSON API.  However, it's important to remember that React allows you to use the fetch() method, which is considered a side effect functionality.

Side effects

A side effect is anything that is happening outside of React itself. There are many examples of side effects, such as:

• Using console()
• Using document.title
• Using fetch()

As a result, to add a fetch() call to your React app, you need to use the fetch() function call inside a useEffect hook.

Working with retrieved JSON data 

Once you've received this data, you need to:

• Update the responsible component's state with it.
• Loop over the data received and saved to that component's state or loop over the data received and passed from that component to its child component or components.

Looping over the data received usually involves using the map() method available on arrays, which is why it's convenient if your data comes in as an array of objects.

Simpler approaches

Note that when you are coding your apps locally, especially if you are focused on building functionality on the front end, you can simulate this data retrieval by simply placing a JSON file inside your project.  In that case, all you need to do to access the data is to parse the JSON string from that .json file into the component that's supposed to receive it. This can be even further simplified by saving your data as a plain JavaScript array of objects - effectively, it's the same thing as fetching data, but it saves time and effort!  An additional advantage of this approach is that you already have the data in the form ready to be used by your React app, so you'd just need to import this data module into the appropriate component and work with it.  This has the added benefit of not having to deal with side effects and data fetching from a remote server, so it's ideal for quick application prototypes.

Conclusion

With this overview on querying APIs in React, you are better prepared for your next exercise where you will connect the Bookings page using live data.  For more information on querying APIs in React, you can revisit the following lesson items from the Advanced React course:

• What are the rules of hooks?
• What you need to know before fetching data
• Data fetching using hooks
• Fetching data - Putting it all together

Exercise: Connecting the bookings page to the API

Overview

In this exercise, you will connect the Bookings page of the Little Lemon restaurant to the API.

Scenario

Now that the Booking page is set up, you need to make sure that customers do not reserve a table that has already been reserved. Double booking a table would lead to a poor customer experience. By updating the web app to retrieve the available booking times for an API, you can help ensure that Little Lemon’s customers can reserve a table without issue. The goal of this exercise is for you to work with data in your Little Lemon restaurant app by connecting the Bookings page to the booking API. As you progress through the exercise, the following lesson items from the Advanced React course are worth revisiting:

• What are side effects?
• Data fetching using hooks

Instructions

Step 1: Set up the API library

To prepare for the completion of this exercise, you need to include the API JavaScript file in your code.

Add the following code to your index.html.

<script src="https://raw.githubusercontent.com/Meta-Front-End-Developer-PC/

capstone/master/api.js"></script>

The API has two functions that you can use in your code: 

• fetchAPI(date) - This function accepts a date as a parameter and returns an array of available reservation times for the provided date 
• submitAPI(formData) - This function accepts the booking form data as a parameter and will return true if the data was successfully submitted.

Step 2: Update the booking form to display the available times from the API

Update the initializeTimes function that you previously created to use the fetchData API function to return the available times for today’s date. 

Tip: You can create a Date object to represent today’s date.

Update the updateTimes function that you previously created to use the fetchData API function. Remember, you dispatched the selected date to the updateTimes function. This should be passed to the fetchData function as a parameter.

Step 3: Test the behavior

Run your web app and check that the available times on the booking form change when you select a different date.

Conclusion

By completing this exercise, the Bookings page of your app is connected to an API and the customer now has an improved experience of the Little Lemon restaurant.

Exercise: Submitting the new booking page to the API

Overview

Now that the reservation times are updated based on the date selected, the next step is to submit the booking form to the API.

Scenario

In your web app for Little Lemon, users will want to create new bookings. In previous exercises, you set up the form and connected the state. The next step is to submit the booking form to the API and notify the user when the booking is successful. In preparation for this exercise, you may find it helpful to revisit the following lesson items:

Creating a form component in React
Working with React hooks
Data Flow in React

Instructions

Step 1: Set up a booking confirmation page

• Create a component named ConfirmedBooking that will represent the booking confirmation page.
• Add JSX to display a message that the booking has been confirmed.
• Add a route that will allow navigation to the booking confirmation page.

Step 2: Set up the function for submitting the form

• In the Main component, set up a function named submitForm that accepts the form data as a parameter and will submit it to the submitAPI (formData) API set up in the previous exercise. 
• If the submitAPI(formData) API call returns true, navigate to the booking confirmed page.

Tip: You can use the useNavigate() hook to navigate via code.

Step 2: Update the submit event handler

• Pass the submitForm function to the BookingForm component via props.
• Update the button submit event handler to call the submitForm function, passing the form data as a parameter.

Step 3: Test the app

Run the app and verify that the booking confirmation page is displayed when you submit the form. 

Conclusion

In this exercise, you connected the form submission to the API. Little Lemon customers can now successfully reserve a table. However, this is not the end of developing the web app.  As a developer, you must make sure that the web app is well-tested and meets the user experience requirements. You will work on this in the next exercises.

Exercise: Update the unit tests for the API queries

Overview

Now that the functionality of the booking form is set up, it is important to add and update unit tests to automate verifying the expected behavior of the web app.

Scenario

In this exercise, you will update your previous unit tests for initializeTimes and updateTimes. Unit testing is an important part of software development. Creating and maintaining your tests will help ensure that you deliver a quality product to Little Lemon's owner.

Instructions

Step 1: Update the test for initializeTimes

Now that the initializeTimes function calls the fetchAPI function, the unit tests need to be updated. In fact, if you run the tests now, you will discover that the existing test is failing. For testing purposes, the fetchAPI function will return a non-empty array of available booking times.

Step 2: Update the test for updateTimes

Similar to the previous step, the test you previously created for updateTimes will fail. You will need to update the test to include a pre-selected date as part of the dispatch data.

Step 3: Run the tests

Run all unit tests and verify that they are succeeding.

Conclusion

By completing this exercise, you demonstrated your ability to implement unit tests for the API queries.

Additional resources

Here is a list of resources that may be helpful as you continue your learning journey. These resources provide some more in-depth information on the topics covered in this module.

• The following article on using the Fetch API shows more advanced usage for interacting with REST APIs.
• The following article explains what a REST API is and why it is important.
• The following article on the React website shows more examples of using the Fetch API within React.
• The following article shows various testing recipes for writing unit tests in your React application.

Recap: Form validation

Overview
In this reading, you will recap form validation to progress with your Little Lemon reserve-a-table forms. The topics revisited in this reading are from Form design in the Principles of UX/UI design course.

What is form validation?
Form validation is the process of checking that user input in a web form is complete and accurate before it is submitted to the server. This is typically done using JavaScript on the client-side to check that all required fields have been filled out and that the data entered meets certain criteria, such as being a valid email address, hence reducing errors and improving the user experience.

Form validation types
There are two types of form validation: server-side and client-side. Let’s revisit each concept briefly.

Server-side
The user completes and submits the form with all the necessary information. The information is transmitted to the server for form validation when the user presses the submit button. The user receives a confirmation or informative error message when the server responds.

Client-side
These validation alerts appear when the user enters data into the form fields, before being submitted to the server. The validation message, typically shown next to the fields, serves as a prompt for the user to respond immediately.

The importance of form validation
During the crucial phases of interaction between the user interface and the user, form validation acts as the focal point of communication. Although form validation may appear straightforward and serve only a minor purpose in the overall interface, its importance surpasses all these. Suppose a scenario exists in an application where the user must complete the following processes using forms with user validation:

• Registration or sign-in
• Cart and checkout

Consider the possibility that incomplete form validation would prevent your users from completing these forms. These are the fundamental forms of your user interface and can impact your company. In other words, bad form validation communication will probably result in unsatisfactory business outcomes.

Regardless of the chosen validation method, it's worth considering the following when determining how to provide user feedback:

Location
Don't display all errors together as a group. Instead, put them precisely next to the respective field where they belong.

 
Be understanding
Humanize your language and inform your users of the error. Make suggestions to your users to ensure they receive the correct information quickly and easily.

 
Be adaptable
Whenever you can, do this. Be flexible and open-minded when providing your input to avoid upsetting or infuriating users.

Conclusion
In this reading, you recapped the concept of form validation and the various methods you can use. For best practice in form design, please revisit the lesson item on Form design best practice in the Principles of UX/UI design course.

Exercise: Adding form validation

Overview

Now that all the features are implemented, it is important to provide a good user experience. Part of a good user experience is preventing the user from submitting invalid data. This has the added benefit of helping to ensure data integrity when it is submitted to the API.

Scenario

In this exercise, you will update the booking form to use client-side validation. You will achieve this using both HTML5 validation and validation through React. You can recap concepts related to client-side form validation by revisiting the following lesson items:

• HTML and CSS in-depth: Forms and validation
• HTML and CSS in-depth: Making the most out of client-side validation
• React basics: Common event handling
• Advanced React: Creating a form component in React

Instructions

Step 1: Implement HTML5 validation

• For each form input field, consider what HTML5 validation can be applied. For example, the user should not be able to reserve a table for less than one person.
• Apply the validation to each form input field in BookingForm.

Step 2: Implement client-side validation using React

After applying the HTML5 validation, consider which input fields could use further validation via JavaScript and React. For example, the submit button should be disabled if the form input fields are invalid.

Tip: Use events to detect field changes and submit button clicks.

Tip: If you built your form using Formik, take advantage of Formik’s built-in validation functions.

Step 3: Run the web app

Run the web app and verify that the form validation behaves as expected. When all of the fields are valid, it should be possible to submit the form.

Conclusion

In this exercise, you added client-side form validation to improve the user experience and help ensure valid data is submitted to the API. Customers reserving a table using the website will now have a more satisfactory experience when using the Little Lemon website.

Exercise: Adding unit tests for the form validation and submission

Overview

In the previous exercise, you added HTML5 validation and JavaScript functions to validate the form. As a developer, it is good practice to create unit tests for this validation to prevent regressions in the future. In this exercise, you will write unit tests for the validation and submission of your forms.

Scenario

In this exercise, you will add unit tests for the validation created in the previous exercise. As you develop applications, fix bugs and add new features, updating and adding unit tests is an important activity to help ensure the quality of code. Writing reliable, quality code will give you confidence when delivering your final product to your client. As you progress through the exercise, you may find it helpful to revisit the following lesson items:

• Introduction to Jest
• Writing tests with Jest
• Why React testing library
• Writing the first test for your form

Instructions

Step 1: Validate the HTML5 validation is applied

In a previous exercise, you implemented unit tests to test that the HTML content returned from a component was correct.

• Review the previous exercise and the HTML validation you added to the form input fields. 
• For each input field, add a unit test to validate that the correct attributes are applied to the HTML element.

Step 2: Add unit tests for JavaScript validation functions

In the previous exercise, you implemented JavaScript functions to validate the form input fields.

• Using the React testing library, implement unit tests to verify both the valid and invalid states for these functions.
• It is important to add a unit test for both valid and invalid states to ensure good test coverage of your code. Without this, there is a risk of a bug existing in a code path that is not tested.

Step 3: Run the tests

Run all tests in your web app and verify that they are all successful.

Conclusion

You have now implemented all features and automated tests for the project. However, as the developer who designed the UI and UX, it is important to validate the user experience. In the next lesson, you will conduct an evaluation of the user experience.

Recap: Accessibility

Overview

Your web app needs to be accessible, so, in this reading, you will recap what you have already learned in previous courses to ensure your project is accessible to all.

Content

Making websites usable for all users, including those with disabilities, impairments and limits, is known as web accessibility. These restrictions or disabilities may include:

• blindness
• poor vision
• difficulty learning
• other cognitive impairments
• deafness
• loss of hearing
• speech impairments

By following specific design guidelines for the web, accessibility ensures that users with disabilities or restrictions enjoy an experience that is at least comparable to that of non-disabled users.  Website accessibility is crucial since it gives all users equal access to your material. Digital accessibility must be implemented. It’s not optional. In most developed countries, websites and mobile applications must adhere to regulations that prevent discrimination against individuals with disabilities. 

Elements of web accessibility

The four major elements to concentrate on while developing an accessible website are outlined in the WCAG (Web Content Accessibility Guidelines)and standards. These are published by the World Wide Web Consortium's (W3C) Web Accessibility Initiative (WAI).  These four principles, which contain online accessibility recommendations that you can use as a guide and strive to implement on your site whenever and wherever it is practical, will each be recapped below.

Perceivable

The information and content on your website must be perceived, understood and known by visitors. Users who are blind or have impaired vision frequently use screen-reader software, transforming a written text into synthesized speech or braille letters. Remember that perceiving doesn't necessarily mean seeing with one's eyes.

Operable

The use of operable websites is possible without interfering in any way with the user. Every feature of the website's functionality must be accessible to all users, including page navigation, link selection from a menu and the ability to play and pause audio and video. In general, the most usable websites are plain, uncomplicated and devoid of any unnecessary functionality that can obstruct users with disabilities and limits.

Understandable

Visitors should be able to quickly understand all your website's material, including its textual and graphic design content. Verbose, jumbled language is complex for your average visitor to understand and restricts access for those with cognitive issues and impairments and visitors who do not speak the primary language of your website. This idea also applies to the organization of your website. Your website's navigation should be easily accessible to users on most, if not all, of your pages, and it should be organized logically.

Robust

All visitors to your website, including those who use assistive technology like screen readers should readily understand and consume the material.

Conclusion 

In this reading, you revisited the concept of accessibility and how it can be implemented to make websites and web applications usable for all users. By concentrating on your website's level of accessibility, you'll improve UX for every visitor and demonstrate to your users that you value their business and care about them as individuals, increasing their loyalty to and support for your business.

To explore some of these topics further, you can revisit the Designing for accessibility lesson item in the Principles of UX/UI design course.

Exercise: Ensuring your application is accessible to users

Overview

The goal of this exercise is for you to review your application's accessibility and revise the project with improvements.

Scenario

It is very important to ensure any app you create is accessible to all users. As such, you need to ensure the accessibility of the app you have created for Little Lemon. 

There are many ways that you can improve a React application's accessibility. One way that has been discussed in this course is the use of semantic markup. Another important accessibility improvement that ties in well with setting up semantic markup is the use of ARIA attributes

As you complete this exercise, you may find it helpful to review the following content:

Web accessibility
Designing for accessibility

You can also check out the Accessibility resource available at the official React docs website linked in the additional resources. This provides a nice overview of accessibility in React, including the points discussed here, plus a few additional points.

Instructions

Step 1:  Improving the semantic markup you're using

Improve your app accessibility by improving the semantic markup you’re using.

Note: This step's completion will depend on how much work you've already done on making your app's code semantic in the previous lesson items that were dedicated to this specific goal.

Step 2: Use ARIA attributes

Improve app accessibility by using ARIA attributes

Add at least the aria-label attribute and set it to On Click, as follows:

aria-label="On Click"

Tip: Remember, the aria-* attributes are an exception to the rule that all JSX properties and attributes use camelCase. In the case of ARIA attributes, it's proper JSX syntax to use the hyphen-cased syntax, just like in plain HTML.

Note: This step's completion will also depend on how much attention you've paid to the semantic structure of your app in the previous exercises.

Step 3: Labeling forms

To improve the accessibility of your forms, use the label element and the HTML For attribute, which maps to the id attribute of the actual form item, such as an input.

Note: This is important because it allows users to click on a specific form input label, and it will automatically focus into the given form input.

Conclusion

You have now practiced reviewing an application's accessibility and revising the project with improvements. Although these three steps are not all the different ways in which you can improve the accessibility of your React apps, you are three steps closer to ensuring your web app is accessible to all users.

Recap: UX and UI usability evaluation

Overview

In this reading, you will revisit the design evaluation methodologies described in a previous course. Applying all or some of these methodologies will help you create a wonderful experience for the users of your Little Lemon reserve-a-table web app. 

How do you determine whether your products are genuinely usable? 

At first impression, the term usability might appear too abstract or biased to ever truly determine whether your products are usable. However, usability is crucial whether you're building a login page, a search interface or anything else you can think of!

Heuristics are measurements that can be used to determine how usable your products are. Heuristics are helpful benchmarks when used independently. But when combined with usability testing, heuristics can (re)shape your design. The word heuristics simply refers to rules. Rigid guidelines are tough to articulate in UX design. There is no foolproof method to design experiences that are certain to succeed.  Instead, you can use principles to direct your design work and evaluate your creation before user testing.

Researchers and leaders have made various product and UI design recommendations. Some of the most notable are Dieter Rams, Ben Shneiderman and Jacob Nielson.

Dieter Rams 

For many years, German industrial designer Dieter Rams oversaw the creation of Braun's consumer goods. About 50 years ago, he created the 10 principles of good design, commonly referred to as the ten commandments, to address the question, Is my design a good design? These ideas continue to be relevant today. 

Ben Shneiderman

Shneiderman teaches computer science at the University of Maryland Human-Computer Interaction Lab in College Park. In human-computer interaction, he undertakes fundamental research, creating innovative concepts, procedures and tools, including the direct manipulation of interface and the eight golden rules of interface design.

Jakob Nielson

User advocate Jakob Nielsen is the principal of the Nielsen Norman Group, which he co-founded with Dr. Donald A. Norman (former VP of research at Apple Computer). Dr. Nielsen founded the discount usability engineering movement for quick and affordable UI changes and devised the 10 usability heuristics. Jakob Nielsen's heuristics were developed based on work together with Rolf Molich in 1990 and are probably the most-used usability heuristics for UI design. 

Conclusion

You have revisited UX and UI evaluation methodologies and how and where these can be applied to improve your designs. You can now apply these to assess your project. For even more information on Dieter Rams’ 10 principles of good design, Ben Shneidermans’ 8 golden rules and Jakob Nielson’s 10 usability heuristics, you can revisit the Evaluation cheat sheets lesson item in the Principles of UX and UI design course.

Exercise: Evaluating and revising the UX

Overview

In this exercise, you will carry out an abridged version of a heuristic evaluation using Jakob Nielsen’s 10 usability heuristics for user interface design. To complete the evaluation, you will use a template, which is a guide that will assist you in determining how user-friendly your solution to the little Lemon reserve-a-table online function is.  The goal of this template is not to provide you with a specific diagnosis but to assist you in identifying areas to focus on to improve the user experience. Simply put, the goal is to help you identify problems with your solution that may make it difficult for users to find information, complete tasks and effectively use the site.

Instructions

Step 1 

Open the Excel sheet called Heuristics evaluation template below.

DOWNLOAD DOCUMENT

Click on Heuristics Template 1 at the bottom of the Excel sheet. In Template 1, all the heuristics are listed with their relevant definitions. 

Start by selecting the usability problems under the relevant heuristics it violates. Then assign a severity rating of none, cosmetic, minor, major or catastrophic to each problem. The severity ratings are outlined below:

• S0: It violates a heuristic but does not appear to be a usability issue.
• S1: Users may easily overcome cosmetic usability issues or occur infrequently. Unless extra time is available, it does not need to be fixed for the next release.
• S2: Minor usability problems may occur more frequently or be more challenging to overcome. Fixing this should be given low priority for the next release.
• S3: Major usability problem occurs frequently and persistently or users may be unable or unaware of how to fix the problem. It is essential to fix, so it should be given high priority.
• S4: Usability catastrophe seriously impairs the use of the product and cannot be overcome by users. It is imperative to fix this before the product can be released.

Step 2

Click on Heuristics Template 2 at the bottom of the Excel sheet. All the heuristics are mentioned and what each means in template 2.

Describe the problem you encounter and assign an easy-to-fix rating to each problem, which is maximum, considerable, concentrated, easy or trivial.  The easy-to-fix ratings are outlined below:

• E0: Fix will require maximum effort, including more investigation into the proper solution. 
• E1: Fix will require considerable effort, but the issue and solution are understood. 
• E2: Fix will require a more concentrated effort, but the issue and solution are understood. 
• E3: A single developer with minor effort can quickly complete Fix. 
• E4: Fix is trivial and easy to implement.

Conclusion

In this exercise, you completed an abridged version of a heuristic evaluation using Jakob Nielsen’s 10 usability heuristics for user interface design. 

Additional resources

Here is a list of resources that may be helpful as you continue your learning journey. These resources provide some more in-depth information on the topics covered in this module.

The following article on client-side form validation shows further examples of how to enhance your user experience.
The following article goes more in-depth on improving accessibility using ARIA labels.
The following resource on the official React docs page explores web accessibility.
The following article covers website forms usability.

WEEK 4 - Project Assessment

In this module, you’ll have the opportunity to perform a self-review of your project and a peer review of other learners’ solutions for the Little Lemon reserve-a-table web app, assessing the projects in terms of usability, accessibility, design and code.

About the final project assessment

This course's final project assessment consists of a peer review and one final graded quiz. 

The purpose of the assessment

The primary purpose of the assessment is to check your knowledge and understanding of the key learning objectives of the course.  The assessment is designed to help you make sure that you can apply what you have learned. Most importantly, the assessment helps you establish which topics you have mastered and which topics require further focus before completing the course.

What to expect from the peer review 

You will combine the skills and knowledge that you applied throughout the course to write code to create a form that handles table bookings for the Little Lemon restaurant.  Your table bookings form will all be assessed in the peer review submission, and you will assess some of your peers' projects too.

What to expect from the final graded quiz 

The quiz only tests the topics you have already covered, so there shouldn't be any surprises. Please review the feedback on your answers and, where necessary, go back and work through the topics that require further attention. 

Good luck! 

Next steps

Well done on completing this course! You have really enhanced your knowledge and practical ability. 

By completing the Capstone project, you now have a job-ready portfolio that you can show to recruiters, demonstrate during interviews and impress potential employers.      

The final course in this program, Coding Interview Preparation, will help prepare you for the unique aspects of a coding job interview, with approaches to problem solving, computer science foundations and soft skills needed to land the job.

You’ll gain strategic insights and tips for successful interviewing. And, you’ll have the opportunity to openly discuss the interview process with other learners taking this course.

Coding Interview Preparation is part of multiple programs

This course can be applied to multiple  Professional Certificate programs. Completing this course will count towards your learning in any of the following programs:

• Meta Android Developer Professional Certificate
• Meta iOS Developer Professional Certificate
• Meta Front-End Developer Professional Certificate
• Meta Back-End Developer Professional Certificate
• Meta Database Engineer Professional Certificate

THANK'S FOR READING!!!