FRONT-END WITH REACT.JS
Build modern web interfaces with React.
Course Overview
Week 1
Introduction to HTML and CSS
- Introduction to HTML (Structure, Tags, Elements)
- More HTML (Forms, Tables, Semantics)
- Introduction to CSS (Syntax, Selectors, Box Model)
- CSS Layout (Flexbox, Grid)
- CSS Positioning (Relative, Absolute, Fixed)
Week 2
Advanced CSS
- Responsive Design Principles
- Media Queries and Viewport Meta Tag
- CSS Preprocessors (e.g., Sass)
- CSS Frameworks (e.g., Bootstrap, Tailwind CSS)
- CSS Animations and Transitions
Week 3
JavaScript Fundamentals
- Introduction to JavaScript (Variables, Data Types, Operators)
- Control Flow (Conditionals, Loops)
- Functions and Scope
- Arrays and Objects
- DOM Manipulation (Selecting Elements, Manipulating Styles and Content)
Week 4
Intermediate JavaScript
- Events and Event Listeners
- Form Validation with JavaScript
- Asynchronous JavaScript (Callbacks, Promises)
- Introduction to ES6+ (Arrow Functions, Destructuring, Modules)
- Project: Build a To-Do List App
Week 5
Front-End Frameworks
- Introduction to React.js
- Components and Props in React
- State and Lifecycle Methods
- React Router (Client-Side Routing)
- Project: Building a Single Page Application (SPA) using React
Advanced React and State Management
- React Hooks (useState, useEffect, etc.)
- Context API for State Management
- Redux Fundamentals
- Redux Middleware (Thunk, Saga)
- Project: Enhance previous projects with Redux
Week 6
Projects
Project 1: Recipe Search and Display Web Application
Description
Develop a web application that allows users to search for recipes based on ingredients or keywords and display the results dynamically. The application should utilize HTML for structure, CSS for styling, JavaScript for interactivity, and API integration for fetching recipe data.
Requirements
Implement HTML forms for user input, allowing users to enter ingredients or keywords for recipe search. Use CSS for styling the application, including layout and responsive design principles to ensure compatibility across devices. Utilize JavaScript to handle user interactions, fetch recipe data from a public API such as Spoonacular or Edamam, and dynamically display the results on the webpage.
Deliverables
A functional recipe search and display web application deployed on a hosting platform like GitHub Pages or Netlify, along with source code and documentation explaining the project’s features, API integration, and deployment process.
Project 2: Online Quiz Application with React.js
Description
Create an online quiz application using React.js that allows users to take quizzes on various topics and receive immediate feedback on their answers. The application should incorporate React components, state management, and API integration for quiz data.
Requirements
Design React components for different aspects of the quiz application, including quiz questions, answer choices, and result feedback. Utilize React state to manage the current quiz state, including the question being displayed, user-selected answers, and quiz scores. Integrate a backend API or utilize local storage to store quiz data, including questions, answer choices, correct answers, and quiz categories. Implement functionalities such as displaying random quiz questions, validating user answers, calculating scores, and providing feedback based on quiz results.
Deliverables
A fully functional online quiz application built with React.js, deployed on a hosting platform like Vercel or Netlify, along with source code and documentation explaining the React components, state management, and API integration.
Upload Your Project to Get a Certificate
Submit your completed project to receive a certificate. Supported formats: .zip, .pdf, .docx.