How To Build A Modern Login Screen With Error/Success States

One of the most common designs you will see is a login form that floats over the top of a background image or solid background color. In this video I will show you how to create exactly that as well as how to show error and success states for the various inputs on the login form.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:48 - HTML
03:13 - Background CSS
05:25 - Card CSS
11:53 - Form CSS

#LoginForm #WDS #CSS

[kris_lawson]

Hey Kyle, I think there’s some audio issues as your voice was muting occasionally. Great video by the way!

[theaviary]

You can code, yes, but you also have an amazing talent for taking information and conveying it in a way that makes us easily understand it. That is a rare talent. Thanks for all the videos! ❤💯👍

[rasheedalsuwaidan]

The variable trick for the Alpha value was amazing, thank you for that. Now I got to find a way to use it for every thing, not just the colors.

[alfiartya]

that border and box-shadow tips is really helpful, thanks for this information Kyle!

[MinistryofJavaScript]

As always great content, we are also following your footsteps to share the knowledge we possess.

[DeltaNrOne]

Just a tip for people who want to use this form.

Never let a hacker know they have the right username and just the wrong password!

This could be a very nice registration form however!

[Blentux]

Would've needed this video back in May/June, but I managed to make it myself, but now I can learn how to do it properly (in a technical way) :D

[driverjb]

Great video. You might consider adding visibility: hidden instead of display: none for your error/success messages so that the form doesn't change size when they appear/disappear just like your choice to use box-shadow instead of border.

Thanks @peter schmid I corrected my comment.

[DimitarGegov]

very good explained, Kyle. Another good one. Thanks

[regsar]

Man you are just amazing thank you so much for sharing your knowledge ✌️

[omaracelys]

One of my favorites ! many Principles in This

[blue_berry_pie]

very satisfied with this css style and html :> thank you

[edutainment]

Agree with the audio, but wow what a great video. Would have loved more about the error handling. That part went so fast.. lol #anotherwinnervideo Thank you!

[baneXXL]

Thank you for all your selfless work, the videos are great, and ez to follow. Keep em coming. I suggest a video on various ways to build and deploy a react app on cloud..

[Dev_Everything]

Stop, collaborate and listen. Ice is back with a brand new login

[mechlsd]

Thank you for taking the time to demostrate this.
May i ask you build on this with a register link.
Then using the same style you do a create an account form?

[BarisPalabiyik]

Hey Kyle, (I just realized that the 300 comments starts like this lol) I would like you to check T3 stack and develop a fullstack application on it, something like a todo app with full CRUD capabilities is very very easy with those tools and will help people to do fullstack apps with ease. I believe you'll love it too. Cheers.

[gabriel_luzz]

Hey Kyle, just wanted to let you know you made me overcome my fear of JavaScript. Today I can already build with nodejs thanks to you

[MashuStar]

The audio keeps cutting out in this video whenever you get too quiet

[eliyahutarab]

Hey Kyle love your videos, can you please make a video of how to do authentication with Google sign in /signup etc if possible with the MERN stack? thank you