ASMR Programming - Modern Login Form Design - No Talking (Only HTML CSS)

SdĂ­let
VloĆŸit
  • čas pƙidĂĄn 25. 07. 2024
  • In this video we show you how to code a modern and responsive login form using HTML and CSS. This is also a mobile-friendly login form. You can even create a registration form and password reset form using this login form. This form design will add elegance to your website :)
    While coding this login form, jquery and pure javascript are not used. Enjoy watching.
    🟱 Free Bootstrap Admin Dashboard Template
    Download: cakeadmin.com/
    đŸ’» Monitor ViewSonic 21 Inch Full HD 1080p (My Second Screen)
    amzn.to/3FFdTPJ
    🟱 Join this channel to enjoy the privileges
    / @codeminton
    🟣 Source code
    github.com/codeminton/purple-...
    Table of Contents
    00:00 Work files
    00:19 Html structure
    06:27 CSS codes
    24:26 Responsive
    25:34 Result
    🟠 Playlists you might be interested in
    â–ș Only HTML, CSS and JS coding → bit.ly/3BFQDyU
    â–ș Login page ui designs → bit.ly/3RvK0Eu
    â–ș HTML/CSS button designs → bit.ly/3DftmER
    â–ș Game coding → bit.ly/3PgGY4U

Komentáƙe • 340

  • @Codeminton
    @Codeminton  Pƙed rokem +102

    Did you like this video? Please don't forget to subscribe to my channel for more videos 😊

    • @86_magical30
      @86_magical30 Pƙed rokem +3

      Could you please make this a series

    • @super1374
      @super1374 Pƙed rokem

      Alguien me puede explicar por qué siempre usan div???

    • @sideralUY
      @sideralUY Pƙed rokem +1

      loved the video. already liked and subscribed. greetings from U(rugua)Y

    • @Codeminton
      @Codeminton  Pƙed rokem

      @@sideralUY Hello. Thank you.

    • @samazad6509
      @samazad6509 Pƙed rokem +1

      It was very good, keep it up buddy ; We are waiting for more videos

  • @dew3968
    @dew3968 Pƙed rokem +185

    This is so beautiful, readable and understandable, yet so elegant! As a beginner, I absolutely love it! Keep it going man! +1 sub

  • @lucymendozarex38
    @lucymendozarex38 Pƙed rokem +2

    AMAZING tutorial! One of the most comprehensive tutorials I've seen for anytNice tutorialng. Thanks so much!

  • @mdsohelrana8690
    @mdsohelrana8690 Pƙed rokem +52

    Omg, you explained it very simply! It's really easy to understand. Thank you so much! I've always wanted to learn these.

    • @harulams
      @harulams Pƙed 6 měsĂ­ci

      Explain? He didn’t talk a shit 😂

  • @Xanar
    @Xanar Pƙed rokem +4

    My first login-page used to be tables and some css I grabbed somewhere. Took me a while to get used to div-containers but it makes things so much easier.

  • @mindblower113
    @mindblower113 Pƙed rokem +11

    Make more content like this man, I loved this ❀❀

  • @kemalsoydere4296
    @kemalsoydere4296 Pƙed rokem +1

    That's really nice.
    Well done !

  • @gaurattimothy3519
    @gaurattimothy3519 Pƙed rokem +1

    TNice tutorials is exactly what I needed to understand the UI. Great tutorial!

  • @squadrythm7856
    @squadrythm7856 Pƙed rokem

    great thanks for that! Very clear and articulate!

  • @drgothmania
    @drgothmania Pƙed rokem

    You made it so clear. Thanks a lot!

  • @areskain6083
    @areskain6083 Pƙed rokem

    Very helpful, and surprisingly therapeutic

  • @ThiagomizukiC
    @ThiagomizukiC Pƙed rokem

    so clean, good job

  • @adamrosariorodriguez
    @adamrosariorodriguez Pƙed rokem

    Thanks for the tutorial. I did it step by step with you.

  • @sandeepvanam1207
    @sandeepvanam1207 Pƙed rokem

    + 1 subscriber thanks for the walk through...loved it 💯

  • @le3lux
    @le3lux Pƙed rokem

    I never watched something like that before but it was awesome!

  • @meep9683
    @meep9683 Pƙed rokem +2

    the keyboard sounds phenomenal

  • @user-rc3fd4iv6o
    @user-rc3fd4iv6o Pƙed rokem

    Hey man, It works great and without any problems.

  • @tubecoder4750
    @tubecoder4750 Pƙed rokem

    Love the sound from your keyboard bruh!

  • @pauljohn3898
    @pauljohn3898 Pƙed rokem

    beatifully done!

  • @zema6433
    @zema6433 Pƙed rokem +1

    By far the best tutorial i found to tNice tutorials in a short ti

  • @ASMRCODEHARMONY
    @ASMRCODEHARMONY Pƙed 6 měsĂ­ci

    AMAZING tutorial!

  • @tonikrug6378
    @tonikrug6378 Pƙed rokem

    TNice tutorials was so detailed! Great video for beginners. Thank you!

  • @Lamesawebproducciones
    @Lamesawebproducciones Pƙed rokem

    The best soft soft tutorial ever!

    • @LilYet
      @LilYet Pƙed rokem

      bro wtf is soft soft

  • @JavawithEgimoro
    @JavawithEgimoro Pƙed 10 měsĂ­ci

    I see a greater potential here with ASMR coding I'm just new in the game!

  • @youtuberaven1830
    @youtuberaven1830 Pƙed rokem

    makes complete sense. Only a couple other tNice tutorialngs I need to find out before I can actually make it work, but you’ve got more in depth

  • @askalon7817
    @askalon7817 Pƙed rokem

    Just what I was looking for

  • @lucholaqs3832
    @lucholaqs3832 Pƙed rokem

    so much. Can’t wait to start making soft.

  • @moingauthe7914
    @moingauthe7914 Pƙed rokem

    It did work thank you :)

  • @hillaryangelicaalvonsosima6420

    I just wanna give you a huge thanks for you cause tNice tutorials is the most helpful video I've had in a wNice tutorialle and it really helped so keep up the

  • @RealWorldMen
    @RealWorldMen Pƙed rokem

    You're great man. Thank you!

  • @gothnate
    @gothnate Pƙed rokem

    Twenty-two seconds int the video and I just learned about html:5 in VS Code! How did I not know about this sooner?!

  • @ui_vibes
    @ui_vibes Pƙed rokem

    Great content, very useful

  • @JimmyMoCapaldi
    @JimmyMoCapaldi Pƙed rokem

    Hey Mike, thanks for the video. I am considering purchasing soft softs for the first ti. Do you have the personal version or the

  • @TaylorVal
    @TaylorVal Pƙed rokem

    Clicked on the video intending to only watch a few minutes. Here I am 25 minutes later. You got my sub buddy

  • @user-zs3by6wq2p
    @user-zs3by6wq2p Pƙed rokem +1

    This was great 👍👌

  • @muhammedshaltoot9665
    @muhammedshaltoot9665 Pƙed rokem

    Sooooooo beautiful 1+ sub I like when you put source code

  • @maryrosepragas916
    @maryrosepragas916 Pƙed rokem

    Yay! thank you very much for making tNice tutorials video! Very helpful!

  • @meryemtahiri6807
    @meryemtahiri6807 Pƙed rokem

    great work 😍

  • @CLASHSARADR722
    @CLASHSARADR722 Pƙed 9 měsĂ­ci

    love you
    for source code

  • @vanquoctrinh1934
    @vanquoctrinh1934 Pƙed rokem

    Worked, thx

  • @TheNilliz85
    @TheNilliz85 Pƙed rokem

    Might be the best coding video i've ever seen

  • @JonnieR
    @JonnieR Pƙed rokem

    Waaah, this is so much fun to watch even though I dont understand majority of the codes XD

  • @emrecanturk3819
    @emrecanturk3819 Pƙed rokem

    I've been playing on garageband for a couple weeks and just got the trial of softs. I was worried there wouldn't be any clear tutorials, but

  • @andrescoral8731
    @andrescoral8731 Pƙed rokem

    MIL Gracias por compartir conocimiento/un saludo desde Colombia;

  • @DURR.
    @DURR. Pƙed rokem +5

    Hi and wow, You can learn a lot just by watching these videos, thanks it helps me understand how to program better :D By the way, may I know what keyboard you are using?

    • @Codeminton
      @Codeminton  Pƙed rokem +1

      Thanks ;))))
      Keyboard FK11 compact

  • @likekaira
    @likekaira Pƙed rokem

    Amazing advice wow

  • @The_Anime_Fenix
    @The_Anime_Fenix Pƙed rokem

    That keyboard sound so good

  • @hasibalfuad9652
    @hasibalfuad9652 Pƙed rokem +1

    Could you please tell me what extension did you use here for abbreviation?

  • @ryanyusuf3620
    @ryanyusuf3620 Pƙed rokem

    Thank you, very productive 17mins of learning. TNice tutorials program is super intimidating from soone who doesn't even play an instrunt.

  • @Angeal98
    @Angeal98 Pƙed rokem

    I recommend css property
    all: unset;
    it allows to ditch all default browser styling for an input.

  • @Naomi-bc8ve
    @Naomi-bc8ve Pƙed rokem

    it's so cooool 😍

  • @emanuelmamani3444
    @emanuelmamani3444 Pƙed rokem

    very good tutorial

  • @Ashfaq_Bodla
    @Ashfaq_Bodla Pƙed rokem

    Thanks man, I got the good habit of wanting to learn everytNice tutorialng before I start sotNice tutorialng (wNice tutorialch is impossible) tNice tutorials quick guide is what I

  • @gauravey1722
    @gauravey1722 Pƙed rokem

    thank you so much

  • @mayankbisht674
    @mayankbisht674 Pƙed rokem

    we need more of this 🙏

    • @Codeminton
      @Codeminton  Pƙed rokem

      Thanks for the comment mate. I am trying to produce more content in line with your requests.

  • @mnk2869
    @mnk2869 Pƙed rokem

    all the different elents together in a language that is universal. I've seen plenty of DAW tutorials being new, but tNice tutorials is by far the best so

  • @TheMaP142
    @TheMaP142 Pƙed rokem

    TNice tutorials is so fun editing in it I just saw half of your tutorial and couldn't stop PLAYING WITH ITT dont worry I ca bac k after it

  • @general_boiii
    @general_boiii Pƙed rokem

    Omg so good , i sub XD

  • @shubananshubo5662
    @shubananshubo5662 Pƙed rokem +1

    thanks helpful vid

  • @user-tu3wf5ms5w
    @user-tu3wf5ms5w Pƙed rokem

    I am a student preparing for a developer
    This video is like a light shining in a dark cave, I finally stopped crying in a cave, thanks to you
    - Sent by a Korean student

  • @dargass_
    @dargass_ Pƙed rokem

    Nice bro!

  • @ASMRcode1
    @ASMRcode1 Pƙed 3 měsĂ­ci

    Nice video 💯

  • @sertater
    @sertater Pƙed rokem

    homie didn't speak a single word and i stilled learned more here than in class

  • @emaneezechiel4164
    @emaneezechiel4164 Pƙed rokem

    Sir, I love your approach... keep it up, please... New Subscriber

  • @asmrprogrammer
    @asmrprogrammer Pƙed rokem

    Nice video👍

  • @MopDa
    @MopDa Pƙed rokem

    My ears had pleasure, my eyes was struggling with all that backspace action

  • @rafaelpeguero8941
    @rafaelpeguero8941 Pƙed rokem

    Man for real

  • @bakarmenyalas
    @bakarmenyalas Pƙed rokem

    Thanks.

  • @imjokerinurlife3002
    @imjokerinurlife3002 Pƙed rokem +1

    what`s name extension to use "import" in css? my project trouble after import "reset.css"

  • @zilepub
    @zilepub Pƙed rokem

    thank u

  • @yeralmuzika
    @yeralmuzika Pƙed rokem +9

    How long have you been coding if you don't mind me asking? How do you not look back at the html while using css- or do you use multiple monitors? Just curious is all.

    • @SeantheSkater96
      @SeantheSkater96 Pƙed rokem +1

      I doubt he's coming up with the code on the fly - he'll be copying code he wrote previously from another monitor.

    • @PrudentialViews
      @PrudentialViews Pƙed rokem

      @@SeantheSkater96 How do you know?

    • @SeantheSkater96
      @SeantheSkater96 Pƙed rokem

      @@PrudentialViews Because unless this person is an absolute programming savant, this is not how software development actually goes for 99.999999999% of the population.

  • @Donkleo
    @Donkleo Pƙed rokem

    Love the content!! What shortcuts were you using ?

    • @Codeminton
      @Codeminton  Pƙed rokem

      Thanks. i am using phpstorm shortcuts

  • @overdrive112
    @overdrive112 Pƙed rokem +1

    Nice video, learned a lot from it. I also added an animation for the gradient background so it changes color and switches angles. With
    Body {
    animation: gradient ease infinite
    }
    I set it to 11s and you can adjust the moving angles with keyframes. Easier than I thought :D

  • @marcossilva9063
    @marcossilva9063 Pƙed rokem

    making your own soft using what you’ve learned.

  • @moonspace1
    @moonspace1 Pƙed rokem +3

    Good job bro 👌

  • @shutinyanks
    @shutinyanks Pƙed rokem

    how do you get the prompt to start a new file and give it a name? All i get is new untitled file its a pita to go in and save and rename each time.

  • @nigarsalmanzade68
    @nigarsalmanzade68 Pƙed rokem

    i hope your successful as well

  • @i_reversal9329
    @i_reversal9329 Pƙed rokem

    Hey, can you tell me what packages you use?

  • @nguyendanghuu4562
    @nguyendanghuu4562 Pƙed rokem

    I find myself sitting through tNice tutorials video allthough I know all of it, just becuase you're so good at explaining haha

  • @memeisntlive9054
    @memeisntlive9054 Pƙed rokem

    What kind of tNice tutorialrd party plug ins an tutorial do you use??

  • @drillig
    @drillig Pƙed rokem +3

    What is the name of his keyboard? 😀

  • @twitch.sae7
    @twitch.sae7 Pƙed rokem

    To download soft soft is the download free or do u have to pay for it?

  • @matosyury
    @matosyury Pƙed rokem

    What plugins do you use?

  • @boom506
    @boom506 Pƙed rokem

    Hey dude, i loved the video, can you tell me what keyboard are you using? It sounds lovely.

  • @shahi0078
    @shahi0078 Pƙed rokem

    sotNice tutorialng either - I assu that works with Edison too) and I never thought about after that. Now, at tNice tutorials mont, I am inspired! I am

  • @whiteshadow8959
    @whiteshadow8959 Pƙed rokem +1

    hello , very usefull video , by the way what keyboard do you use?I will be very gratefull if you answer me).

  • @FalseCheated
    @FalseCheated Pƙed rokem

    i tried this before and use a little of your code and for me the white background with z index and tge white background its not long enough and i have 0 errors
    also all my text is messed up with 0 errors again and copied your code

  • @rucikkoo
    @rucikkoo Pƙed rokem +1

    What the keyboard you using?

  • @heroesstars6378
    @heroesstars6378 Pƙed rokem +1

    Which keyboard do you use?

  • @TomasMisura
    @TomasMisura Pƙed rokem

    nice tutorial. Only the naming convention is overcomplicated

  • @raph_lgrnd
    @raph_lgrnd Pƙed rokem

    How can i add small logo "eye" on the right to the password

  • @mcsegador1569
    @mcsegador1569 Pƙed 7 měsĂ­ci

    Where did you get the inage5

  • @user-uh4gj7jl9o
    @user-uh4gj7jl9o Pƙed rokem

    I'm trying to learn even though I only have fruity edition instead of the producer edition

  • @m.anang_faqih
    @m.anang_faqih Pƙed rokem

    Honestly, a very useful tutorial to break the ice going into tNice tutorials software

  • @SiddharthVyas
    @SiddharthVyas Pƙed rokem

    This just makes me want to imagine how tough is to make apple’s website !

  • @logixmusic8314
    @logixmusic8314 Pƙed rokem

    Dive in!!

  • @user-lu1mu5xo4l
    @user-lu1mu5xo4l Pƙed rokem

    Whenever i use the GMS and put it in the soft, it holds out the note forever! please help, i am very confused

  • @siaratech6837
    @siaratech6837 Pƙed rokem

    nice

  • @kayasa3640
    @kayasa3640 Pƙed rokem

    Wow

  • @allahimmuse
    @allahimmuse Pƙed rokem

    nice video