Example Curriculum
Introduction to the course
Available in
days
days
after you enroll
I am NOT a Robot (Beginner project)
Available in
days
days
after you enroll
Stopwatch-Lap timer
Available in
days
days
after you enroll
Expandable Search
Available in
days
days
after you enroll
Digital Clock with interchangeable background img and focus section
Available in
days
days
after you enroll
Animated Navigation
Available in
days
days
after you enroll
Simple Typewriter Text Effect
Available in
days
days
after you enroll
Tabs Menu using data Attributes
Available in
days
days
after you enroll
Login Form Validation
Available in
days
days
after you enroll
Tip Calculator
Available in
days
days
after you enroll
Drag and Drop Cup Game - Find the Pea
Available in
days
days
after you enroll
Upload Progress bar
Available in
days
days
after you enroll
Text formatter
Available in
days
days
after you enroll
Simple Task List with Animations
Available in
days
days
after you enroll
Collapsible Accordion Tabs
Available in
days
days
after you enroll
Vertical Timeline
Available in
days
days
after you enroll
Test your Might- JavaScript Quiz Application
Available in
days
days
after you enroll
Background image gallery carousel
Available in
days
days
after you enroll
Simple Image carousel
Available in
days
days
after you enroll
Quote of the day-Random generator
Available in
days
days
after you enroll
Units Convertor
Available in
days
days
after you enroll
E-Commerce sales Promotion countdown timer
Available in
days
days
after you enroll
Job Scout Website with Animated show hide buttons and text
Available in
days
days
after you enroll
Simple Project Manager
Available in
days
days
after you enroll
Create a Form using only the DOM
Available in
days
days
after you enroll
Random API Generator
Available in
days
days
after you enroll
Website with Dark Mode switch
Available in
days
days
after you enroll
Registry Form Validation using Regular Expression
Available in
days
days
after you enroll
Gaming Website with Expandable Cards
Available in
days
days
after you enroll
Storyteller with Autocomplete Text
Available in
days
days
after you enroll
Interchangeable Website Background Color
Available in
days
days
after you enroll
Advanced
Available in
days
days
after you enroll
- E02-01-Section overview (0:49)
- E02-02-Course structure (2:49)
- E02-03-Required software (8:35)
- E02-04-Folder structure & boilerplate (17:48)
- E02-05-Course resources and repository (6:37)
- E03-01-App presentation (2:45)
- E03-02-General setup and resources (2:09)
- E03-03-HTML markup and basic styles (11:48)
- E03-04-Add the World Map SVG using JavaScript (3:03)
- E03-05-Simple currencies convertor using JavaScript & exchange rate API (11:40)
- E03-06-Get the exchange rate from using the fetch API (8:26)
- E03-07-Get all countries from the World map (11:26)
- E03-08-Display the selected country-s currency and all conversion rates (9:57)
- E03-09-Add search functionality to the currency list (6:37)
- E03-10-Create CSS components structure (4:01)
- E03-11-CSS App variables (3:03)
- E03-12-Style the App container (6:07)
- E03-13-Style the World Map (3:26)
- E03-14-Style the simple currency convertor (6:26)
- E03-15-Style the world currencies convertor (6:46)
- E04-01-App presentation (2:42)
- E04-02-General setup and folder structure (1:12)
- E04-03-Create the HTML markup (4:10)
- E04-04-Create the CSS styles credit-score form (8:18)
- E04-05-DOM elements module and global variables (6:35)
- E04-06-Form submission & validation parameters (2:23)
- E04-07-Create a validation module (2:12)
- E04-08-Validate input value & type (4:09)
- E04-09-Create the alert component module (5:23)
- E04-10-Style and add the alert component to the DOM (5:36)
- E04-11-Check validation & Show the result (html only) (3:34)
- E04-12-Style the result (7:49)
- E04-13-Create the checkCreditScore function (7:46)
- E04-14-Remove the result and recheck the credit score (3:13)
- E04-15- Create the responsive design for mobile, tablet and desktop devices (3:03)
- E05-01-App presentation (3:11)
- E05-02-General setup and folder structure (2:58)
- E05-03-Create the HTML markup (5:56)
- E05-04-Create -style.css- and import -variables.css- files (3:20)
- E05-05-Create -global.css- style (9:40)
- E05-06-Create and Style the -form.css- file (13:55)
- E05-07-Create the main app.js and get DOM elements module with global variables (4:21)
- E05-08-Add event listener to the -calculate-button- & get the input values (2:35)
- E05-09-Validate input and add alert component (3:40)
- E05-10-Style and add the alert component to the DOM (4:53)
- E05-11-Display standard deduction based on status (3:35)
- E05-12-Calculate the income tax based on the tax brackets (9:33)
- E05-13-Style the result component (6:07)
- E05-14-Close results and reset all values (3:18)
- E06-01-App presentation (4:51)
- E06-02-General setup and folder structure (2:07)
- E06-03-Create the HTML markup (6:04)
- E06-04-Create -global.css- and -variables.css- style (7:56)
- E06-05-Style the -calculator-container.css- file (11:32)
- E06-06- Style global -btn.css- file (3:55)
- E06-07-Add onclick to the -calculateBtn- & get the input values (6:34)
- E06-08-Validate each individual input (7:01)
- E06-09-Create and Style the alert component in -alert.css- and -showAlert.js- (9:41)
- E06-10-Handle labels error and success with-handleLabel.js- (11:51)
- E06-11-Calculate and display retirement savings (8:03)
- E06-12-Get calculated values for the table (5:56)
- E06-13-Check for successful calculations of the retirement (3:50)
- E06-14- Display and style the table component (6:26)
- E06-15-Create and add a new row element (7:34)
- E06-16-Clear the input fields and hide the results (3:39)
- E06-17-Delete a row from the table (6:13)
- E07-01-App presentation (4:40)
- E07-02-General setup and folder structure (2:25)
- E07-03-Create the HTML markup (3:49)
- E07-04-Create short-news section (4:13)
- E07-05-Create stocks crypto and forex maps section (7:31)
- E07-06-Create detailed analytics section (5:10)
- E07-07-Style the side navigator (7:08)
- E07-08-Toggle maps and detaild chart (9:30)
- E08-01-App presentation (3:27)
- E08-02-General setup and folder structure (HTML, CSS, JS) (3:11)
- E08-03-Create the HTML markup for .app-container, .header and .inputs-container (8:54)
- E08-04-Create -main.css-, -variables.css- and the -app-container.css- (6:05)
- E08-05-Create and styles the -btn.css- components (5:32)
- E08-06-Style the -header-container.css- and -inputs-container.css- (6:17)
- E08-07-Create the HTML markup for the budget list (8:02)
- E08-08-Create and style -budget-list-header.css- and -budget-list-container.css- (12:36)
- E08-09-Get DOM elements and create global variables (2:25)
- E08-10-Manage the ADD button click event (5:25)
- E08-11-Calculate total the budget (5:23)
- E08-12-Calculate the total per category (10:29)
- E08-13-Create and Style the Alert components (16:50)
- E08-14-Update the budget list and add to category (8:54)
- E08-15-Remove elements form the budget list (3:39)
- E08-16-Edit elements from the budget list (5:29)
- E08-17-Save and load data from local storage (6:58)
- E08-18-Clear budget list when requested (2:51)
- E08-19-UPDATE - AUTO Save & Save data as Excel (svc) (2:01)
- E08-20-UPDATE - AUTO Save & Save data as Excel (svc) (10:41)
- E08-21-UPDATE - Save and Load new data from JSON files (7:35)
- E09-01-App presentation (3:20)
- E09-02-General setup and folder structure (HTML, CSS, JS) (2:45)
- E09-03-Create the HTML markup for .app-container, and .parameters-form (5:00)
- E09-04-Create -main.css-, -variables.css- and style the -app-container.css- (6:36)
- E09-05-Create and styles -form.css- (6:56)
- E09-06-Create the HTML markup for .goal-list and style it with -goal-list.css- (4:21)
- E09-07-Create the main app.js file and Get DOM elements (3:33)
- E09-08-Calculate and display the goal amount (5:27)
- E09-09-Calculate and display current savings (8:58)
- E09-10-Calculate and display monthly contribution (0:27)
- E09-11-Toggle interest rate input (2:21)
- E09-12-Calculate months with interest (11:32)
- E09-13-Bars style (6:31)
- E09-14-Form group validation (3:03)
- E10-01-App presentation (1:32)
- E10-02-General setup and folder structure (HTML, CSS, JS) (1:58)
- E10-03-Create the HTML markup for .app-container, and Loan conditions (7:42)
- E10-04-Create -style.css-, -variables.css- and style the -app-container.css- (5:04)
- E10-05-Create and styles -form.css-. (4:45)
- E10-06-Get DOM elements and manipulate input values (6:00)
- E10-07-Calculate loan -calculateLoan.js- - create a function that calculates the monthly payment, total payment, and total interest (9:43)
- E10-08-Display and style -results.js- (3:29)
- E10-09-Create and style Pie Chart (8:43)
- E11-01-App presentation (3:42)
- E11-02-General setup and folder structure (HTML, CSS, JS) (2:06)
- E11-03-Investment Container HTML Markup (5:14)
- E11-04-Style main App and add CSS variables (11:22)
- E11-05-Style the investment container (8:01)
- E11-06-Create HTML Markup and CSS Style for Adding Stoks (5:13)
- E11-07-Create Portfolio HTML Markup and CSS Style (9:15)
- E11-08-Create and Style the Portfolio analysis section (7:56)
- E11-09-Utility functions showAlert and formatNumbers (6:57)
- E11-10-Add Stocks to LocalStorage (10:40)
- E11-11-Display Stock Portfolio (15:56)
- E11-12-Edit and Delete Stocks from the Portfolio (8:46)
- E11-13-Add investment to list and dinsplay list (12:53)
- E11-14-Edit and Delete investments from the list (10:01)
- E11-15-Analyse Gain Loss Retunr (7:13)
- E11-16-Create and Show Custom Pie Chart (13:03)
- E11-17-Save Investment data to a CSV file (6:18)
- E12-01-App presentation (2:58)
- E12-02-General setup and folder structure (HTML, CSS, JS) (2:07)
- E12-03-HTML section structure and gerenal CSS style for the app (6:24)
- E12-04-Entries form HTML Markup and CSS Style (9:42)
- E12-05-Summary table HTML Markup and CSS Style (7:20)
- E12-06-Entries List HTML Markup and CSS Style (9:12)
- E12-07-Get DOM Elements and add event-listeners (4:42)
- E12-08-Change the input color when the user selects a type (2:57)
- E12-09-Add, delete and display antries in the list (11:19)
- E12-10-Display chart entries with colors and percentages (10:25)
- E12-11-Save load and clear all entries from the list (4:26)
- E12-12-Display only icons on Mobile devices (1:51)
- E12-13-Export to HTML and PDF (11:17)
React Project
Available in
days
days
after you enroll
- P01-01-e-signature-app-Create component and general styling (9:44)
- P01-00-e-signature-app (1:05)
- P01-02-e-signature-app-useState for name and date (6:08)
- P02-00-randomize-colors (0:49)
- P02-01-randomize-colors-use events and functions (12:20)
- P03-00-like-my-photo (0:40)
- P03-01-like-my-photo-Card design (5:23)
- P03-02-like-my-photo-Add React icons to the poject (7:16)
- P03-03-like-my-photo-useState to like on click and doubleClick (5:41)
- P04-00-tesimonials-app (0:55)
- P04-01-tesimonials-app-Button components (7:35)
- P04-02-tesimonials-app-useState and useEffect (11:20)
- P05-00-alerts (1:01)
- P05-01-alerts-create a alert component (7:15)
- P05-02-alerts-autoclose alert with delay (2:55)
- P06-00-temperature-controller (0:58)
- P06-01-temperature-controller-controller-desing (4:41)
- P06-02-temperature-controller-change-temperature using use state (3:28)
- P07-00-light-and-dark-mode (0:58)
- P07-01-light-and-dark-mode-create a blog component (6:11)
- P07-02-light-and-dark-mode-darkmode using useContext (14:08)
- P08-00-slide-to-unlock (0:30)
- P08-01-slide-to-unlock-Create the UI (9:00)
- P08-02-slide-to-unlock-Create Lock screen (4:57)
- P08-03-slide-to-unlock-creating the Lock screen state (4:06)
- P08-04-slide-to-unlock-Lock the screen (3:07)
- P08-05-slide-to-unlock-Toggle Lock and Unlock Screen (4:27)
- P09-00-sliderApp (0:41)
- P09-01-sliderApp-Create a slider Component (5:39)
- P09-02-sliderApp-useState hook to manipulate the Circle using the slider Component (8:23)
- P10-00-hidden-search-bar (0:47)
- P10-01-hidden-search-bar-Create the search component and genral styling.fcpxml (8:45)
- P10-02-hidden-search-bar-Show search bar (9:26)
- P10-03-hidden-search-bar-Auto focus on the input using useRef Hook (5:48)
- P11-00-magic-popup (0:50)
- P11-01-MagicPopup-Create a Popup component (9:12)
- P11-02-MagicPopup-Trigger a popup and close it (6:18)
- P11-03-MagicPopup-Time Triggered popup (6:44)
- P12-00-progras-bars (0:51)
- P12-01-progras-bars-Ui design and input oufocus with useRef and useEffect (5:49)
- P12-02-progras-bars-Create Progressbar component (7:23)
- P12-03-progras-bars-Add multiple Progressbars using map (4:17)
- P12-04-progras-bars-Manipulate the Progresbar data with useState (4:06)
- P12-05-progras-bars-Random Progresbar data with useEffect (2:21)
- P13-00-dialog-box (0:51)
- P13-01-dialog-box-DialogBox component UI design (6:26)
- P13-02-dialog-box-Hello DialogBox component (8:06)
- P13-03-dialog-box-Unsubscribe DialogBox component (6:52)
- P13-04-dialog-box-Baunce animation effect (5:22)
- httpswww.youtube.comwatchv=uEZpg0n7jcY (3:12)
- P14-01-filter-contacts-app-UI desing and Autofocus unsing useRef and useEffect (4:30)
- P14-03-filter-contacts-app-Contact component (7:49)
- P14-04-filter-contacts-app-Filer contacts (3:26)
- P15-00-simple-registration-form-validation (1:22)
- P15-01-simple-registration-form-validation-Form Ui (5:44)
- P15-02-simple-registration-form-validation-Handle inputs and Registrations (7:17)
- P15-03-simple-registration-form-validation-Input fields individual validation (3:21)
- P15-04-simple-registration-form-validation-Form Submission and Validation (5:16)
- P16-00-notes-app (1:42)
- P16-01-notes-app-Project UI design (3:51)
- P16-02-notes-app-Intall and use React Styled Components (9:13)
- P16-03-notes-app-Add New Note (6:22)
- P16-04-notes-app-Delete Note (2:11)
- P16-05-notes-app-Create Randon Note types (3:49)
- P17-00-reponsive-nav (0:54)
- P17-01-reponsive-nav-Create a nav component (3:33)
- P17-02-reponsive-nav-Create a Nav Item component (2:41)
- P17-03-reponsive-nav-Style the Nav using React Styled Components (6:21)
- P17-04-reponsive-nav-Show and Hide the navbar using React useState and useEffect (5:54)
- P17-05-reponsive-nav-Open and Close the Navbar using React useState and useEffect (3:58)
- P17-06-reponsive-nav-Show Active nav item and change page title using React useState and useEffect (4:39)
- P17-07-reponsive-nav-UPDATE - Adding pages to navigate to (11:22)
- P18-00-text-animation (1:56)
- P18-01-text-animation-Form UI style (3:58)
- P18-02-text-animation-Create a React FormGroup Component (4:54)
- P18-03-text-animation-Working with the form group component (1:41)
- P18-04-text-animation-Install and use AnimatedText component (8:06)
- P19-00-compound-interest-rate-calc (1:39)
- P19-01-compound-interest-rate-calc-UI Desing using FormGroup Components (6:29)
- P19-02-compound-interest-rate-calc-useState hook for values (3:33)
- P19-03-compound-interest-rate-calc-Create a component that calc the compoundet inretes (5:56)
- P19-04-compound-interest-rate-calc-Calc the compunded interest (3:47)
- P20-00-space-penguin (0:59)
- P20-01-space-penguin-Design the Space ENV (6:30)
- P20-02-space-penguin-Space ship component (3:47)
- P20-03-space-penguin-Earth and Moon Components (4:04)
- P20-04-space-penguin-Launch and Land the Ship (4:50)
- P20-05-space-penguin-Change the Space Ship in to a Penguin (4:16)
- P21-00-task-tracker (1:21)
- P21-01-task-tracker-Planing the components layout for the UI (2:49)
- P21-02-task-tracker-Taks tracker style using Styled components (9:16)
- P21-03-task-tracker-Input Task Component (7:30)
- P21-04-task-tracker-Create and Add a New Task (8:11)
- P21-05-task-tracker-Complete and Delete Task (7:13)
- P22-00-card-game-ui (0:48)
- P22-01-card-game-ui-Design the Start Menu (7:34)
- P22-02-card-game-ui-Create Units Card Component (16:02)
- Untitled (1:57)
- UntitleP14-00-filter-contacts-appd (1:35)
New section
Available in
days
days
after you enroll
- 26-00-mortgage-calculator (2:05)
- 27-00-course-store (1:23)
- P23-00-animated-login-form (0:49)
- P23-01-animated-login-form-UI plaing and Desing using Components (6:46)
- P23-02-animated-login-form-Login Container design using Styled Components (7:41)
- P23-03-animated-login-form-Amimate using Styled Components (14:17)
React Project - Phone book App
Available in
days
days
after you enroll
- P24-00-phone-book (1:18)
- P24-01-phone-book-Phone Book main UI (4:12)
- P24-02-phone-book-Create a Contact React Components (8:04)
- P24-03-phone-book-Create a Contact List React Components (4:55)
- P24-04-phone-book-Display all contacts from the Contacts Deta base (5:13)
- P24-05-phone-book-Create the Toggle Search and Filter Contacts Components (5:09)
- P24-06-phone-book-Sort Contact A-Z and Z-A (3:42)
- P24-07-phone-book-Search contact (4:08)
React Project - Expenses calculator
Available in
days
days
after you enroll
- P25-00-expenses-calculator (3:42)
- P25-01-expenses-calculator-Components Planing (7:42)
- P25-02-expenses-calculator-Create a Expenses Form Component (6:47)
- P25-03-expenses-calculator-Create a Expenses List Component (4:28)
- P25-04-expenses-calculator-Create a List Item Component (10:11)
- P25-05-expenses-calculator-Style the budget using Styled components (5:18)
- P25-06-expenses-calculator-Add state to all components (3:25)
- P25-07-expenses-calculator-Add budget using useState , useEffect and useRef (3:36)
- P25-08-expenses-calculator-Save and Load data from Local Storage (2:02)
- P25-09-expenses-calculator-Handle all input and submission (3:40)
- P25-10-expenses-calculator-Add uniqe Id (5:58)
- P25-11-expenses-calculator-Display all expenses (7:20)
- P25-12-expenses-calculator-Clear local storage and add new expenses (1:53)
- P25-13-expenses-calculator-Handle Clear all expenses from storage and UI (2:27)
- P25-14-expenses-calculator-Handle Delete one expense from storage and UI (3:00)
- P25-15-expenses-calculator-Handle Edit one expense from storage and UI (7:43)
- P25-16-expenses-calculator-Calculate the total expenses and economies (2:58)
- P25-17-expenses-calculator-Add Alerts (7:55)
React Project - Mortgage Calculator
Available in
days
days
after you enroll
- P26-01-mortgage-calculator-Main comoponent and Ui design (8:26)
- P26-02-mortgage-calculator-Add State to all comoponents (4:16)
- P26-03-mortgage-calculator-Calculate the Loan Amountpayments (3:09)
- P26-04-mortgage-calculator-Calculate monthly payments (4:50)
- P26-05-mortgage-calculator-Display monthly payments and Alerts (3:31)
React Project - Course Store
Available in
days
days
after you enroll
- P27-01-course-store-Project structure and UI design (4:50)
- P27-02-course-store-Create the Courses component (3:02)
- P27-03-course-store-Create a Course component and design (4:25)
- P27-04-course-store-Create a Deta Base for all Courses (6:24)
- P27-05-course-store-Currencies Deta Base and converter Buttons (5:10)
- P27-06-course-store-Covert the Currencies with the React useContext Hook (4:15)
- P27-07-course-store-Cahnge Course apeareance depending on its currency (3:02)
React Project - Authentication App
Available in
days
days
after you enroll
- P28-00-auth-app (0:52)
- P28-01-auth-app-Ui design (5:17)
- P28-02-auth-app-Form Wrapper and Shake animation (4:27)
- P28-03-auth-app-Authentication container (3:03)
- P28-04-auth-app-Authentication status using context (5:59)
- P28-05-auth-app-Authentication User name and password (5:21)
- P28-06-auth-app-Authentication Login Logout and Try agin (5:40)
React Project - Speech Synthesizer
Available in
days
days
after you enroll
React Project - Lazy Loading
Available in
days
days
after you enroll
Check your inbox to confirm your subscription
10+ HTML CSS and JS Financial Web Apps - Front-End Web Dev
30+ React Projects, Learn React JS by Building 30+ Web Apps
30 HTML CSS & JavaScript projects in 30 Days for Beginners
30 More
30 more Unique projects