Build 4 Custom Alert Components using HTML CSS and JavaScript
In this web development tutorial I will teach you how to create 4 custom window alerts using HTML CSS and JS.
This is a excellent project for you to add to your web development portfolio.
🎱 Code for this Video:
https://norbertbm.com/build-4-custom-...
-----------------------------------------------------------------------------
Get 30 days of SkillShare premium for FREE:
https://www.skillshare.com/r/profile/...
-------------------------------------------------------------------------------------------------
Timestamps:
00:00 - Introduction.
00:33 - Project overview.
03:12 - Project setup.
04:37 - Create custom buttons using HTML and CSS.
09:41 - Build a general Alert component in HTML .
11:48 - Styling a general Alert component.
13:21 - Animate an Alert using CSS @keyframes .
19:23 - Create custom alert classes using CSS
29:47 - Adding click events to the buttons using JavaScript forEach method.
33:29 - Create a generic alert component in JavaScript.
38:06 - Remove the alert component from the DOM using the remove() method.
40:14 - Remove the alert component using a timed function.
42:47 - Create custom alert types (Success, Info, Caution, Danger) using JavaScript object.
45:00 - Condition different alert types using if statements.
48:15 - Part 2 submission form with alerts
51:55 - Styling the submission form using CSS
59:11 - Form validation with custom alert popup message
👨🏫 Check out my Website for more tutorials and Udemy Course👨🏫 :
https://volere.life/web-development/w...
-------------------------------------------------------------------------------------------------
💖 Support The Channel by becoming a patreon!
https://www.patreon.com/user?u=49022497
Crash Courses Videos:
CSS Flexbox in 10 min: • CSS Flexbox in 10 min
CSS Grid Crash Course : • CSS Grid Crash Course | CSS Grid Tutorial ...
HTML Crash Course: • HTML Crash Course for Beginners
CSS Crash Course: • CSS Crash Course for BEGINNERS
SASS Crash Course: • SASS Crash Course for Absolute Beginner
-------------------------------------------------------------------------------------------------
Video Playlist:
Complete JavaScript Array Methods Series:
• Complete JavaScript Array Methods Series
Regular Expressions:
• JavaScript Form Validation using Regular E...
Learn JavaScript by creating a Game:
• Learn JavaScript
Create a Responsive Website:
• Responsive Website
-------------------------------------------------------------------------------------------------
FOLLOW ON SOCIAL MEDIA:
linkedin.com/in/dipl-eng-menyhart-norbert-523687169
/ nbmenyhart
/ menyhart_b_. .
#css #javascript #norbertbmwebdevelopment
On this page of the site you can watch the video online Build 4 Custom Alert Components using HTML CSS and JavaScript with a duration of hours minute second in good quality, which was uploaded by the user Learn Web Dev with Norbert 20 October 2021, share the link with friends and acquaintances, this video has already been watched 2,658 times on youtube and it was liked by 30 viewers. Enjoy your viewing!
