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

Поділитися
Вставка
  • Опубліковано 19 січ 2025

КОМЕНТАРІ • 155

  • @kris24_lawson
    @kris24_lawson 2 роки тому +213

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

    • @mtranchi
      @mtranchi 2 роки тому +10

      this one and the last one.

    • @kkomax7
      @kkomax7 2 роки тому +8

      Low attack setting on the mic software.

    • @SaurajitBhuyan
      @SaurajitBhuyan 2 роки тому

      Same for me as well

    • @neildocherty
      @neildocherty 2 роки тому +1

      Maybe a reupload with new audio is on the cards?

    • @guyeveraerts
      @guyeveraerts 2 роки тому +5

      Ok, i'm not the only one. Can stop searching of the problem was at my side 😀
      Greetz from Belgium

  • @theaviary238
    @theaviary238 2 роки тому +14

    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! ❤💯👍

  • @alfiartya23
    @alfiartya23 2 роки тому +2

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

  • @rasheedalsuwaidan1074
    @rasheedalsuwaidan1074 2 роки тому +2

    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.

  • @ex_pertsophia5876
    @ex_pertsophia5876 2 роки тому +28

    😁Hello Mrs Sophia is legit and her method works like magic I keep on earning every single week with her new strategy.

    • @kefasishaya1317
      @kefasishaya1317 2 роки тому

      Wow I' m just shock someone mentioned expert Mrs Sophia I thought I' m the only one trading with her

    • @kefasishaya1317
      @kefasishaya1317 2 роки тому

      She helped recovered what I lost trading on my self

    • @ruthadesina6890
      @ruthadesina6890 2 роки тому

      I think I'm blessed because if not I wouldn't have met someone who is as spectacular as expert Mrs Sophia

    • @ruthadesina6890
      @ruthadesina6890 2 роки тому

      I think that she is the best broker I ever seen

    • @joyben7974
      @joyben7974 2 роки тому

      She is real and trustworthy

  • @DeltaNrOne
    @DeltaNrOne 2 роки тому +7

    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!

    • @MrThebigcheese75
      @MrThebigcheese75 11 місяців тому

      Yes, only give the minimum info required for anything like this.

  • @driverjb09
    @driverjb09 2 роки тому +33

    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.

    • @peterschmid7507
      @peterschmid7507 2 роки тому +4

      you mean visibility: hidden?

    • @peterschmid7507
      @peterschmid7507 2 роки тому +2

      @@ajsyt he said display: hidden before, he changed it now, i was just correcting him

    • @viktor8050
      @viktor8050 2 роки тому +1

      Thats not how you write css, you should use a fixed height of the outer div, you shouldnt render things you dont use.

    • @alfiartya23
      @alfiartya23 2 роки тому

      thanks for this

  • @DimitarGegov
    @DimitarGegov 2 роки тому +1

    very good explained, Kyle. Another good one. Thanks

  • @Dev_Everything
    @Dev_Everything 2 роки тому +1

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

  • @edutainment9235
    @edutainment9235 2 роки тому +1

    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!

  • @Blentux
    @Blentux 2 роки тому

    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

  • @BarisPalabiyik
    @BarisPalabiyik 2 роки тому +2

    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.

  • @MinistryofJavaScript
    @MinistryofJavaScript 2 роки тому +2

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

  • @keithh7994
    @keithh7994 2 роки тому

    Always delivering the goods!

  • @user5214
    @user5214 2 роки тому

    Congrats on million!

  • @izzafiramdhani4486
    @izzafiramdhani4486 2 роки тому

    Your guitar looks so metal. 2 mil sub guitar playing reveal will be cool.

  • @Samurai6022
    @Samurai6022 2 роки тому

    Kyle, you are breathtaking!

  • @MashuStar
    @MashuStar 2 роки тому +7

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

    • @cheesegeezer5019
      @cheesegeezer5019 2 роки тому

      Thank god, i thought it was my headphones failing

  • @baneXXL
    @baneXXL 2 роки тому +2

    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..

    • @uneland
      @uneland 2 роки тому

      Just use Vercel dude, it’s just a matter of linking the git repo

    • @baneXXL
      @baneXXL 2 роки тому +1

      @@uneland what I couldn't do on git hub pages, I did on vercel.. thanks man :)

  • @eliyahutarab4862
    @eliyahutarab4862 2 роки тому +13

    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

  • @musinguziwebdev8525
    @musinguziwebdev8525 2 роки тому

    Love from Uganda 🇺🇬

  • @omaracelys3217
    @omaracelys3217 2 роки тому

    One of my favorites ! many Principles in This

  •  2 роки тому +11

    Keep accessibility in mind. I'm not sure the contrast with so much opacity would pass.

  • @mechlsd
    @mechlsd 2 роки тому +1

    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?

  • @victormog
    @victormog 2 роки тому +1

    Cool!
    But very annoying resizing when a validation message appears...

  • @mannixmd
    @mannixmd 2 роки тому +1

    You could put border: 1px solid transparent on input and then you can use border on focus

  • @shahfaisal3923
    @shahfaisal3923 2 роки тому

    It was a fantasitc video but there was some problem with your voice.
    Thanks for this beautiful tutorial.

  • @npx_riff_lift-g
    @npx_riff_lift-g 2 роки тому

    awesome video, as always :)

  • @youvegotmail9385
    @youvegotmail9385 2 роки тому

    This would take me all day. It takes this guy less than 20mins. lol. fml.

  • @regsar2717
    @regsar2717 2 роки тому +1

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

  • @blue_berry_pie64
    @blue_berry_pie64 2 роки тому

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

  • @abdirahmann
    @abdirahmann 2 роки тому +1

    idk if it me only but your audio kinda cuts randomly in the middle of the video and it mostly occurs when you are finishing a sentence you were saying!

  • @marcinzale
    @marcinzale 2 роки тому

    Excellent video. Thanks!

  • @andYGFX
    @andYGFX 2 роки тому

    As far as being able to do that from 0 is always a skill that might come in handy, I think since we got MUI, useForm, yup and more, then there's really no point in doing all the work itself. On the other hand, this tutorial is most likely not toward people that want the most efficent and easiest way, more for people still getting their skill in, so anyway - great video, man!

  • @raykhalifa
    @raykhalifa 2 роки тому +1

    Anybody that had the same background image issue, make sure the image file is inside your folder. I was stuck on that part for some time figuring it out. Still a beginner thats why, thanks

  • @Artorias2001
    @Artorias2001 2 роки тому +1

    U have some audio issues great vid

  • @msalam4248
    @msalam4248 2 роки тому

    so understandable....thanks a lot man

  • @chamod5895
    @chamod5895 2 роки тому +1

    I'm new to web dev and I just wanna know why you added those success and error messages because they're always on display if we choose them to. Is it for later js validation purposes or something? I just want to clear that doubt. Great content btw 🙌🏾

  • @landmanland
    @landmanland 2 роки тому +3

    A nice video tutorial. I guess the audio issues are already noticed by you. I have a slight remark regarding setting the font family on *, *::before and *::after. I would do it on :root to reduce the amount of forced font settings on each and every element, although in this case it’s probably not that noticeable.

  • @R3TT1CH
    @R3TT1CH 2 роки тому +1

    Is this a repost from 2012, or what exactly does "modern" imply here? Technically great as always, design wise anything but modern.

  • @souvik6752
    @souvik6752 2 роки тому

    Love from India❤❤

  • @fvdham
    @fvdham 2 роки тому +1

    Isn't the tag fieldset meant for what is now .input-group ?

  • @deatho0ne587
    @deatho0ne587 2 роки тому +1

    At 19:20 I have never been a fan of making the form get grow when adding a success or error message, then shrink when it is not there. Think I would rather change the opacity of the span for it.
    PS: As with the last video I watched your voice is breaking a bit, guessing your mic is getting old. But it was not as bad as last time.

  • @daqfu271
    @daqfu271 2 роки тому

    exactly what i'm lookng for !!!

  • @lesalmin
    @lesalmin 2 роки тому

    A long time ago I learned somewhere to add "margin: 0" and "padding: 0" to those basic settings in the beginning ? Is that still nowadays a good idea ?

  • @taison0072
    @taison0072 2 роки тому

    Hey kyle do you have any video for making very good looking glossy portfolio website.

  • @m.praneeth9086
    @m.praneeth9086 5 місяців тому +1

    hi, is it okay to use flex inside flex ?

  • @joja2174
    @joja2174 2 роки тому +1

    there is a cool lib called glass ui perfect for this job u guys should check it out

  • @Don-ii4vm
    @Don-ii4vm 2 роки тому +1

    2:28 How do you select all instances of specific word (ie email) in selected text and change to "Password"?

    • @vaibhavsaini1554
      @vaibhavsaini1554 2 роки тому +4

      In VS Code, you can place your cursor over any word, and keep pressing CTLR+D (CMD+D, for mac) to keep selecting the next instance of that word. The shortcut differs based on IDEs

    • @Don-ii4vm
      @Don-ii4vm 2 роки тому

      @@vaibhavsaini1554 Excellent.
      Thanks for the info.

    • @dancehalllyrics1303
      @dancehalllyrics1303 2 роки тому +1

      @@Don-ii4vm, and if you want to select all instances at once, simply press CTRL+SHIFT+L :)

  • @batboyshark
    @batboyshark 2 роки тому

    Kyle im still struggingly with CSS how did you ever get good at it?

  • @kevinpeeples726
    @kevinpeeples726 2 роки тому

    How do you get the hsl variable to accept the single variable? I can get the variable to work with rgba, but I can't seem to get hsl to work with it.

  • @milknei_beats
    @milknei_beats 2 роки тому

    Great video! What about js?(

  • @theodorealenas3171
    @theodorealenas3171 2 роки тому

    I use
    :root
    Instead of the asterisks to select everything in CSS. I set my fonts there. I know I'm behind but what's the difference?

    • @somrigostsaas
      @somrigostsaas 2 роки тому +1

      :root is equal to html, but has higher specificity.

  • @josephlivengood4508
    @josephlivengood4508 2 роки тому

    The short way of doing the center is to use grid and align-items center and this will put it center.

    • @somrigostsaas
      @somrigostsaas 2 роки тому

      I think what you meant to say was place-items: center

  • @madjedsolt5878
    @madjedsolt5878 2 роки тому

    Greetings from Algeria

  • @新人殺手東巴
    @新人殺手東巴 2 роки тому

    I am recently watching your videos and found very helpful for web development. Also, can anyone tell me how to rename a block of selected variables in together at 2:29. Thanks!🙏

  • @panawel2
    @panawel2 2 роки тому

    Hi, what's the name of the software you code in?

  • @hassaneoutouaya
    @hassaneoutouaya 2 роки тому

    Thank you!

  • @grantjordan7950
    @grantjordan7950 8 місяців тому

    I can't get the background image to display. Is the jpg you used stored locally? I downloaded an image and saved it in the same directory as the html and css files.
    Edit: when I typed style and enter to let vscode link the stylesheet it generated link to style.css not styles.css. seriously vscode?

  • @lathifashaik5521
    @lathifashaik5521 2 роки тому

    Is there any telepathy between us.... You always know what we want.... Thank you kyle

  • @saadaqmohamed2355
    @saadaqmohamed2355 2 роки тому

    thank you teacher

  • @berkayurun
    @berkayurun 2 роки тому

    Hi Kyle, I noticed that you usually don't do margin: 0; and padding: 0; inside the * selector. Is there any reason for not including these two resets inside *,*::before,*::after{} block?

  • @thatsinteresting8479
    @thatsinteresting8479 2 роки тому

    hey, thanks for the information can you do some video about fetch,Axios,or react Query

  • @xOWSLA
    @xOWSLA 2 роки тому

    I thought there is gonna be backend as well :D

  • @stephenoshaughnessy2279
    @stephenoshaughnessy2279 2 роки тому

    The coding went fine, but I found it a little disconcerting that the cursor would disappear when moved over the "input" boxes. So, I added the following to ".input-group input {cursor: s-resize}". Now, the cursor doesn't disappear.

  • @Moodboard39
    @Moodboard39 2 роки тому

    Once you get the hand of it. Built as many u want with different background or animated video ..

  • @zeroxiph
    @zeroxiph 2 роки тому

    How do I make the file explorer's files bigger like yours?

  • @eastraj6621
    @eastraj6621 2 роки тому

    thank you so much

  • @moinakhter2474
    @moinakhter2474 2 роки тому

    Hey can you make a video on something when we hover on image show the tag of person.As in facebook you may have seen that we we look at a picture of group and when we hover on specific image of a person facebook shows name of person that kind of.

  • @mahmudsiam778
    @mahmudsiam778 2 роки тому

    Please make a crash course on tailwind css.

  • @kingstalker
    @kingstalker 2 роки тому

    is it my sound or the video that seems it is glitching

  • @soloundevelopermas
    @soloundevelopermas 2 роки тому

    Hi Kyle can you please please make a video about web workers ?

  • @nebyuyonas1233
    @nebyuyonas1233 9 місяців тому

    Thank you

  • @mrvijaysingh9579
    @mrvijaysingh9579 2 роки тому

    KYLE we want tutorials on ANGULAR

  • @Ali-cw1nj
    @Ali-cw1nj 2 роки тому

    it is good but your code editor is not clearly visible

  • @maacpiash
    @maacpiash 2 роки тому

    Cool video, but there is something wrong with the audio recording. The voice seems to be fading sometimes.

  • @senrign
    @senrign 2 роки тому

    I believe audio has some problems or it might just be my system.

  • @roywastaken
    @roywastaken 2 роки тому

    you got some audio stuff going on dude
    otherwise great video

  • @mahmoudismaeil5014
    @mahmoudismaeil5014 2 роки тому +1

    there is a problem with the sound

  • @Reji82135
    @Reji82135 2 роки тому

    Hey, create a video on PWA the next big thing

  • @kimayapanash8998
    @kimayapanash8998 2 роки тому +1

    Dude there is some issue with your mic

  • @Fratilitau
    @Fratilitau 2 роки тому

    Audio was horrible...lots of cut offs probably from noise canceling but video was nice. Could have also gone into JS for the validation though.

  • @Solomonwo
    @Solomonwo 2 роки тому

    Nice

  • @be_b_50_ankitkumar_singh79
    @be_b_50_ankitkumar_singh79 2 роки тому

    What!!! 7 minutes and 400+ views already. Man this stuff competition is frightening 😰

  • @abhishekpratap05
    @abhishekpratap05 2 роки тому

    From the past couple of videos you are having some issue with the mic, or something going wrong while editing. Could not hear your voice properly, it's breaking

  • @widevader
    @widevader 2 роки тому

    Audio is a bit broken.

  • @Nodsaibot
    @Nodsaibot 2 роки тому

    blur the background too so its stained glass

  • @MarkGoren
    @MarkGoren 2 роки тому

    Great video but it sounds like your bleeping curse words through the entire video

  • @Philson
    @Philson 2 роки тому +1

    why not do it in react?

  • @dstutz
    @dstutz 2 роки тому

    I think there's something wrong with your mic setup, your past few videos have had weird audio dropouts every few seconds or so

  • @simplegametutorials1341
    @simplegametutorials1341 2 роки тому

    3:05

  • @sushmithareddy4722
    @sushmithareddy4722 2 роки тому

    Hi, could you please do a video on pdfmake , pdf-x to download a pdf in react.
    Please no tutorial on this. Please!!!!!!!!

  • @annguyenangthai4380
    @annguyenangthai4380 2 роки тому

    cool

  • @EranAriel
    @EranAriel 2 роки тому

    Not the best ui experience 😕 background image is too distracting

  • @cool_scatter
    @cool_scatter 2 роки тому

    Turn down the noise gate on your mic/recording software! Great video otherwise!

  • @mohammadesmilzadeh7245
    @mohammadesmilzadeh7245 2 роки тому

    Great , but your voice have issue

  • @nikulyt3166
    @nikulyt3166 2 роки тому

    Instead of this I will just paste text " if you want to login call me xxxxxx". Cause I don't have any site

  • @KennethFunk
    @KennethFunk 2 роки тому

    Your audio cuts in an out. It makes this video a real annoyance to watch.

  • @vincediaz7903
    @vincediaz7903 2 роки тому

    Crap.. i thought it was jordi

  • @Mustafa-du8ns
    @Mustafa-du8ns 2 роки тому

    It's useless