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-alert-popup-components-using-html-css-and-javascript/
-----------------------------------------------------------------------------
Get 30 days of SkillShare premium for FREE:
https://www.skillshare.com/r/profile/Norbert-Menyhart/978425906

-------------------------------------------------------------------------------------------------
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/web-dev-courses/

-------------------------------------------------------------------------------------------------

? Support The Channel by becoming a patreon!
https://www.patreon.com/user?u=49022497

Crash Courses Videos:

CSS Flexbox in 10 min:https://youtu.be/GOlJd-V2-Jc
CSS Grid Crash Course : https://youtu.be/eQqX7iFlxLo
HTML Crash Course: https://youtu.be/BN3EYLySqG8
CSS Crash Course: https://youtu.be/KovMJI1nNX8
SASS Crash Course: https://youtu.be/hm5OUuZwp7A

-------------------------------------------------------------------------------------------------
Video Playlist:

Complete JavaScript Array Methods Series:
https://youtube.com/playlist?list=PL1XOgHNZBUvKDBcAjjwJoW3JQ7ZR1PK87

Regular Expressions:
https://youtube.com/playlist?list=PL1XOgHNZBUvL1vC0cXn2RnhOvrfoVVv2_

Learn JavaScript by creating a Game:
https://youtube.com/playlist?list=PL1XOgHNZBUvIBPUMbkQzzRAhr5T9Oa17j

Create a Responsive Website:
https://youtube.com/playlist?list=PL1XOgHNZBUvJACxBbSMNUROkMd_hdb6Vx

-------------------------------------------------------------------------------------------------
FOLLOW ON SOCIAL MEDIA:

linkedin.com/in/dipl-eng-menyhart-norbert-523687169

https://twitter.com/NBMenyhart

https://www.instagram.com/menyhart_b_...

#css #javascript #norbertbmwebdevelopment