Skip to content

Latest commit

 

History

4 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 

Repository files navigation

Front-End Developer Basics – Meta Professional Certificate Project

Welcome to my Front-End Developer Basics repository! This project is a culmination of my learning journey while completing the Meta Front-End Developer Professional Certificate on Coursera, which was part of the Cerebrum Hub's online reskilling program. I spent six months honing my skills and building a variety of web applications from scratch.

Throughout the course, I learned core front-end technologies such as HTML, CSS, JavaScript, and React. This repository showcases various projects and challenges I completed to strengthen my understanding and gain hands-on experience in front-end development.

Key Features and Components

The App.js file houses the core of my learning and demonstrates how I implemented various concepts during the course. Here’s a breakdown of some of the key components and functionalities:

React Player:

Integrated a video player (ReactPlayer) to display media content.

Routing:

Used React Router (Routes, Route, Link) for navigation between different pages like the homepage, "About Me" section, and blog.

State Management:

Managed state using React's useState to build features like a To-Do List with dynamic behavior.

Custom and Controlled Components:

ControlledForm: A custom form to handle user input using controlled components. FeedbackForm: A form to collect feedback from users. SignUp: A simple sign-up form to demonstrate form handling in React.

Hooks:

useEffect: Managed side effects in React, such as fetching data or running certain actions when the component mounts or updates. Custom Hook: Created a custom hook to handle repeated logic across different components.

Theme Context:

Implemented theme toggling using a context provider (ThemeContext) to switch between light and dark themes dynamically.

UI Interactions:

Search: A search bar to filter through items. Popup: A popup feature to display additional information or warnings. Cursor: Custom cursor effect for improved user experience. Live Orders: Display live orders, making it a real-time dynamic application. Goals: A section to track and display personal or professional goals. Additionally, the project also integrates features like Goal tracking, Gift Cards, and an interactive To-Do List with the ability to reverse order items dynamically.

Technologies Used:

React

React Router

useState

useEffect

Custom Hooks

CSS/SCSS

JavaScript

HTML

Project Purpose

This project not only helped me consolidate my knowledge of front-end development principles but also gave me a platform to implement real-world applications and practices like routing, state management, API integration, and building reusable components. By working on various features and functionalities, I was able to enhance my problem-solving abilities and improve my code efficiency.

Feel free to explore the repository and see the work I've done, including the implementation of different components and features that are part of my learning process.

About

Everything I learned in Meta Front-End Developer Professional Certificate on Coursera

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

Packages

Used by

Contributors

Languages