Autoplay
Autocomplete
Previous Lesson
Complete and Continue
100 React.js Tailwind HTML CSS & JavaScript projects in 30 Days for Beginners
Introduction to the course
Introduction to the Course (5:47)
Environment Setup
Optional 4 Hours JavaScript Crash Course
New Lesson
I am NOT a Robot (Beginner project)
Project Intro (2:31)
Creating the User Interface (17:05)
Main code (28:30)
Stopwatch-Lap timer
Project Intro (1:59)
Stopwatch UI (10:13)
Stopwatch using JavaScript (28:39)
Expandable Search
Project Intro (1:47)
Project UI (11:14)
Expandable Search using JavaScript (4:08)
Digital Clock with interchangeable background img and focus section
Project introduction (2:39)
Creating the User Interface UI (10:13)
Clock.js (28:39)
Animated Navigation
Project Intro (1:47)
Navigation UI (24:29)
Animated navigation using JavaScript (22:52)
Simple Typewriter Text Effect
Project introduction (1:13)
Creating the User Interface UI (8:32)
Typewriter Effect using JavaScript (10:49)
Tabs Menu using data Attributes
Project Intro (1:47)
Tabs UI (13:17)
Tabs JS (13:33)
Login Form Validation
Project Intro (3:52)
Creating the User Interface UI (20:07)
Show/Hide Password (7:18)
Validating User Name and Password (9:55)
Show Error or Success (13:10)
Show/Hide forgot Username and Password and Validate it (11:58)
Tip Calculator
Project Intro (3:08)
Creating the User Interface UI (21:32)
Calculate the tip and the tip pro person and total amount to be paid (20:15)
Drag and Drop Cup Game - Find the Pea
Project Intro (1:55)
Project UI (15:30)
Hide the pea using JavaScript (26:15)
Upload Progress bar
Project Intro (1:54)
Progress bar UI (11:22)
Progress bar using JavaScript (16:23)
Text formatter
Project Intro (1:43)
Project UI (9:28)
Text JS (15:41)
Simple Task List with Animations
Project Intro (1:45)
Task List UI (11:49)
Add and Delete Task from the List using JavaScript (20:52)
Collapsible Accordion Tabs
Project Intro (1:17)
Project UI (12:10)
Project JS (8:32)
Vertical Timeline
Project Intro
Vertical Timeline Design
Vertical Timeline using JavaScript
Test your Might- JavaScript Quiz Application
Project Intro
Quiz UI
Quiz JS
Background image gallery carousel
Project Intro
Project UI
Image gallery using JavaScript
Simple Image carousel
Project Intro
Carousel UI
Carousel JS
Quote of the day-Random generator
Project Intro
Quote UI
Get Quote using JavaScript
Units Convertor
Project Intro
VS Screen
Units convertor using JavaScript
E-Commerce sales Promotion countdown timer
Project Intro
Website design
Countdown timer using JavaScript
Job Scout Website with Animated show hide buttons and text
Project Intro
Creating the websites UI
Animate buttons and text using JavaScript
Simple Project Manager
Project Intro
Project UI
Create project list items using JavaScript
Create a Form using only the DOM
Project Intro
Create the Form
Create a User
Random API Generator
Project intro
UI Design
Get Random API with JavaScript
Website with Dark Mode switch
Project Intro
Website Design
Dark Mode using JavaScript
Registry Form Validation using Regular Expression
Project Intro
Form UI
Form Validation using Regular Expression
Gaming Website with Expandable Cards
Project Intro
Project UI
Expandable Cards with JavaScript
Storyteller with Autocomplete Text
Project Intro
Project UI
Autocomplete Text using JavaScript
Project Code & Resources
Interchangeable Website Background Color
Intro
UI
Change Background Color using JavaScript
Advanced
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
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
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
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
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
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
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
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
P29-00-speech-synthesizer (0:44)
P29-01-speech-synthesizer-UI Structure and main component (3:58)
P29-02-speech-synthesizer-Speech Narrator UI Component (6:52)
P29-03-speech-synthesizer-Text splitter and Highlighted Text (7:03)
P29-04-speech-synthesizer-Start Pause and Rate (8:05)
React Project - Lazy Loading
P30-00-lazy-loading (1:46)
P30-01-lazy-loading-ui (6:13)
P30-02-lazy-loading-get post (6:09)
P30-03-lazy-loading-Implimante Lazy load (2:54)
P17-05-reponsive-nav-Open and Close the Navbar using React useState and useEffect
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock