semasaf/coursera

From the Meta - Front end Developer

Coursera

From the Meta - Front end Developer

Create an HTML Documents

Add the DOCTYPE. | Add the HTML, head, and body elements. | Add the title element. | Add the text to the body element.

Create and style a webpage

Add photo.jpg to the webpage. | Add your name as a heading to the webpage. | Add an unordered list of your five favorite music artists. | Add an ordered list of your top five favorite films. | Add a hyperlink to your Facebook profile, or, meta.com.

Styling a page

Define a CSS rule using an element selector. | Define a CSS rule using an id selector. | Define a CSS rule using a class selector. | Define a CSS rule using a descendant selector.

Working with Bootstrap grid

Set up the Bootstrap container. | Display the Little Lemon logo in the top center of the webpage using Bootstrap. | Display the food menu in two columns using Bootstrap Grid.

Improve your Bio page with Bootstrap

Add a Bootstrap Grid to the page. | Set up the grid so that the content will be laid out correctly on both mobile and desktop. | Configure your photo to be responsive. | Change the Meta profile link to use a Bootstrap button style.

Working with bootstraps Components

Add a Badge component to the page to notify customers of the new falafel dish. | Add an Alert component to the page to notify customers that the restaurant will be closed on New Year's Day. | Add a Button component to the page with the text Order Online.

Building a Functional Programming

Task 1: Build a function-based console log message generator. | Task 2: Build another console log message generator. | Task 3: Run both the consoleStyler and the celebrateStyler functions. | Task 4: Insert a congratulatory and custom message.

Building an OOP

Task 1: Code a Person class. | Task 2: Code a Worker class. | Task 3: Code an intern object. | Task 4: Code a manager object.

Array and Object iteration

In this exercise, use the form....of the loop to iterate over an array and to iterate over an object's own properties.

Webpage Content Update

The aim of this exercise is to access the content of an element, specifically to use a button click to replace text.| Task 1: The example.com website | Task 2: Get h1 into a variable | Task 3: Code an array | Task 4: Write a click-handling function | Task 5: Add an event listener

HTML & CSS In-Depth | Create and test a form

Create a basic login form for the Little Lemon website. | The form will contain two fields: one for the username and another for the password. | Both fields are required fields and must have a minimum text length of | 2. The form will also contain a button to submit the form.

Create a complex form

You’ll create a table booking form for the Little Lemon website. The form will contain four fields: email address, date of booking, number of people, and a checkbox to confirm agreement with the cancellation policy. The form will also have a submit button.

Rate the media

You’ll create a web page for rating a video. The page will display a video player with playback controls. There will also be an HTML form for rating the video. The form will contain a slider element to rate video between 1 out of 5 and 5 out of 5.

Create a grid layout

You will be creating a grid layout commonly called the Holy Grail layout

Targeted CSS

You will practice using combination selectors to create a menu for the Little Lemon restaurant.

Transform and Transition property

To animate the letter boxes created on the webpage using the transform and transition properties inside CSS to add interactivity to the page.

Advanced React | Create a basic list component

The Little Lemon restaurant has decided to remove all desserts with high calories from their menu. | In this lab, you are going to implement a new list component, DessertsList, that will display a list of desserts with less than 500 calories, all sorted by calories, from low to high. | The data you have to work with has been provided to you inside the App.js file, as an array of objects. | Each object represents a dessert and has the following properties: name, calories, and createdAt. | The App component passes that information to the DessertsList component as a prop named data. | Each item from the list should display the name of the dessert and the number of calories, both separated by a dash character, i.e. Chocolate Mousse - 250 cal.

Create a Registration form

To create controlled components and forms in React. Now it's time to put that knowledge to use and create a registration form for Little Lemon Restaurant, where users are able to sign up.

Create a light-dark theme switcher

You've learned about React Context and how it allows you to define a global state without passing individual props down through each component. One of the most common use cases for Context is to define a theme for your application. In this exercise, you'll create a light-dark theme switcher.

Managing state within a component

This code lab's app shows a Gift Card page of the Little Lemon Restaurant web app, where a visitor initially has a Gift Card that they can use to have dinner for four.

Can you fetch data

You'll practice fetching some data from the random user. website's API

Create your Portfolio react

In this final lab, you are going to create a portfolio page for yourself. You will be using the skills you have learned in this course to create a page that showcases your work. The portfolio page will be a single page that will contain the following sections: A header with external links to social media accounts and internal links to other sections of the page | A landing section with an avatar picture and a short bio| A section to display your featured projects as cards in a grid fashion | A contact me section with a form to allow visitors to contact you |

UI & UX Principle | Grid and Constraints

create the responsive grid in Figma

crrate the grid for tablet and mobile

Following on from a previous video where you learned how to create a grid for a desktop in Figma, let's create tablet and phone grids. To start creating a new grid, press F on the keyboard to bring up the frame's menu on the right sidebar. Then open the tablet menu and select an iPad mini.

Design - Text hierarchy and grid

This straightforward exercise is an excellent way to improve your layout and typography skills. It employs a 12-column grid system that is widely used on the web and has been around for a long time.

Design a UI Button Components in Figma

You will design a UI button component in Figma. Components are reusable design elements. Think of them as building blocks. Components help give consistency to your designs and allow you to apply adjustments across multiple files and projects rapidly.

Front-End Capstone | Wireframing the project

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.