Animated Login Form Using Only HTML & CSS

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

КОМЕНТАРІ • 2,1 тис.

  • @davipradaaaa
    @davipradaaaa 5 років тому +1688

    *Finally UA-cam recommends me something of quality.*

  • @ziskador
    @ziskador 6 років тому +2080

    Somehow, I understand more by watching this than watching slow tutorials

  • @Ultrasoulviver
    @Ultrasoulviver 5 років тому +17

    Watching you make this I learned more about css then my three years of college in computer programming. Needless to say you just earned yourself another subscriber.

    • @ElSpoon
      @ElSpoon 3 роки тому

      Then you shouldn’t have went to college if you can’t learn shit. I’ve taken one class of web development and learned 100x as much as you in two weeks.

  • @erikvberkel5490
    @erikvberkel5490 5 років тому +75

    Just learning HTML & CSS, after a few weeks I was like: meh.... Watching this and your other video's got me all excited again!

  • @Azem4144
    @Azem4144 4 роки тому +22

    Thanks. Seriously, the UA-cam recommend what I actually need literally now, when I'm rarely checking for this kind of things in UA-cam.
    Once again, thanks! I love how simple these are and easy to understand on what happens and where to fiddle.

    • @memequery
      @memequery 3 роки тому

      ua-cam.com/video/5bsExf9TVcE/v-deo.html

    • @_sirius_black_gaming_2207
      @_sirius_black_gaming_2207 3 роки тому

      i am a beginner ...can someone tell me where we have to write these code??? i am writing in notepad will it work?

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

      @@_sirius_black_gaming_2207 yes ofc

    • @Rp7gameryt
      @Rp7gameryt 3 місяці тому

      ​@@_sirius_black_gaming_2207
      Better to use Vs code bro

  • @TheCorvusCoraxx
    @TheCorvusCoraxx 6 років тому +345

    Please... Don't ever stop making videos.

  • @bastbo3225
    @bastbo3225 5 років тому +242

    *I have no clue what’s happening but it looks impressive.*

    • @paristar3079
      @paristar3079 4 роки тому +20

      I thought the same when I first came here, then I learnt HTML and CSS from W3School and now I can understand everything going in this video

    • @dotdotdot7440
      @dotdotdot7440 4 роки тому +10

      @@paristar3079 you don't "just" learn html and CSS. The basics? maybe, but not fully.

    • @jawad9757
      @jawad9757 4 роки тому +13

      @Valka they are languages, just not programming languages

    • @dotdotdot7440
      @dotdotdot7440 4 роки тому +1

      @Valka man said html isn't a language... im done 😂👍 good one

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

      @Valka but it's a language, you learn it. Doesn't matter mate.

  • @aabt7028
    @aabt7028 6 років тому +708

    Cool! The amazing part about coding is that no matter where you from - example: me, from Brazil - the language is the same, so, no matter what language you speak, we will understand each other in our codes! Nice code, bro!

    • @bafana_mhlamvu
      @bafana_mhlamvu 5 років тому +16

      Hello from South Africa :D ...

    • @shortly7770
      @shortly7770 5 років тому +21

      Me from India🇮🇳 but still using same language 🇧🇷❤😂😂

    • @pronone3
      @pronone3 5 років тому +6

      Israel ma friendss

    • @rafadydkiemmacha7543
      @rafadydkiemmacha7543 5 років тому +6

      From Poland with love ❤️

    • @Anna-dh2kg
      @Anna-dh2kg 5 років тому +9

      Hello from Algeria 🇩🇿🇩🇿

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

    Started my web programming course earlier this semester, but that class deals more with client/server applications and not so much the cosmetic side of html, we aren't even taught about CSS. But I love making my applications look as appealing as I can so these videos help a whole lot, and I genuinely enjoy doing CSS

  • @vusalhuseynli9896
    @vusalhuseynli9896 3 роки тому +6

    This video was the first one that I watched and used for my university project🚬. Now I am full stack web developer

  • @AdrianLopez-oi8lr
    @AdrianLopez-oi8lr 5 років тому +1513

    Software name: Atom
    Package installed: Preview HTML + Autosave on Change

  • @Anjalee100
    @Anjalee100 6 років тому +4

    Watched your first video 2 hours ago & I'm already on the third one. Will try all of these tricks hands-on when I get to office day after! Awesome videos! Short enough to keep the viewer engaged & long enough to explain the topic well.
    Keep up the good work! Thanks!

  • @JMTfan28
    @JMTfan28 6 років тому +10

    wow this is the first video that i've watched on your channel and definitely you got my subs! nice job

  • @saeedbaig4249
    @saeedbaig4249 5 років тому

    Just came across this channel. Great video! No needless introductions; short & straight to the point. And there's no need for talking, since the regular refreshing of the webpage makes it clear what each line of code is doing. I also appreciate how your titles are straightforward and tell us everything we need to use ("HTML & CSS" or "HTML & CSS & JQuey"). And of course, the actual content is beautiful! I didn't know how easy it was to create such a beautiful, dynamic login form with just vanilla HTML & CSS. Subbed!

    • @memequery
      @memequery 3 роки тому

      ua-cam.com/video/5bsExf9TVcE/v-deo.html

  • @AnonDe71
    @AnonDe71 5 років тому +8

    Finally I can see what changes I got with different lines of code! Thanks for a great video!

  • @kleptotrichy
    @kleptotrichy 6 років тому +4

    Omg. I understood more about forms than what i keep it up man !!!

  •  6 років тому +8

    We just learned CSS in school and this looks so simple and understandable suddenly, looks cool tho :D keep it up!

  • @teodoe7286
    @teodoe7286 5 років тому +4

    tbh !! short video+ important selectors+quick review ..... this is so amazing I really liked this lesson thanls alot !!! (:

  • @contrametheus
    @contrametheus 4 роки тому

    This is a great tutorial, because you are showing in real-time what is changing so we learn exactly what the different CSS parameters are doing.

  • @shadikaes
    @shadikaes 3 роки тому

    It looks very easy, but the fact is that this needs to be in our minds....
    Really thanks u

  • @simonhartl460
    @simonhartl460 6 років тому +14

    Great video. Started HTML and Javascript in fall. Those videos bring so much inspiration. Keep it up

    • @ShivamSharma-rq9ne
      @ShivamSharma-rq9ne 4 роки тому +2

      So it's been a year, how's it goin? 😆

    • @simonhartl460
      @simonhartl460 4 роки тому +1

      @@ShivamSharma-rq9ne very well actually. Webdesign is still a fun hobby for me. Thanks for asking.

    • @ShivamSharma-rq9ne
      @ShivamSharma-rq9ne 4 роки тому +1

      @@simonhartl460 wow great.
      Learnt javascript too?

  • @julianhenry907
    @julianhenry907 6 років тому +12

    hi guy, i'm a Frensh student and i would like to be a web developer and i just want to say thanks you to have posted this video :) make me dream again ^^!!!

    • @DarkCodeOnline
      @DarkCodeOnline  6 років тому +1

      welcome

    • @Thomas-ol6wt
      @Thomas-ol6wt 6 років тому

      Salut!

    • @julianhenry907
      @julianhenry907 6 років тому

      @@Thomas-ol6wt salut mec!

    • @Lustitiae
      @Lustitiae 6 років тому +2

      @@julianhenry907 I'm also a french student and actually I have a project and this helped thanks DarkCode ,
      Are you any good with PHP and MySQL ?

    • @baeoff
      @baeoff 6 років тому +1

      Bonjour ^^

  • @ggsaegina2945
    @ggsaegina2945 4 роки тому +7

    That is actually so good DAMN!!!

  • @hamasmughal3527
    @hamasmughal3527 3 роки тому

    Just started my web development journey and i gotta say this is awesome....... I am just waiting for the time when i will be capable of doing this on my own....... I am never going to give up

    • @memequery
      @memequery 3 роки тому

      ua-cam.com/video/5bsExf9TVcE/v-deo.html

  • @sarthakmatlotia4391
    @sarthakmatlotia4391 3 роки тому

    just started css and i can understand this..the way he made it easy thanks mate

  • @OMorningStar
    @OMorningStar 5 років тому +2

    Loving the saves that show updated changes, thank you.

    • @memequery
      @memequery 3 роки тому

      ua-cam.com/video/5bsExf9TVcE/v-deo.html

  • @pablonunez1173
    @pablonunez1173 6 років тому +5

    Hi I am from Spain and you videos are of many help.
    Thanks for you I can do different subjects in html.
    Please don't stop upload this type of video

  • @raylanmoreno
    @raylanmoreno 3 роки тому +10

    Lindo demais!
    estou praticando e estudando HTML e CSS, e estou gostando demais desses videos.

  • @keerthivasan1162
    @keerthivasan1162 3 роки тому

    After 3 years UA-cam recommend this quality thing 👍 thanks

  • @jesterlagbas2382
    @jesterlagbas2382 6 років тому +5

    That was the coolest! animation for login form ^_^

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

    2 things: you did not need to set border property to 0, you could just override it directly. second, there is lots of repetition of same properties for input fields. you could use them once and then override the ones you didn't want by specifying the type or you could use simple classes but its been 4 years, I"m sure you would have learned that long ago.

  • @ghosttrb
    @ghosttrb 5 років тому +13

    And thanks for using Atom, eyes friendly

  • @youranonymousyoutuber4051
    @youranonymousyoutuber4051 4 роки тому +1

    underrated as hell this channel man !!!

  • @nethees8155
    @nethees8155 4 роки тому

    This guy knows what he is doing. Keep it up

  • @nonstopcreations
    @nonstopcreations 6 років тому +339

    Cool .....keep it up 😃

    • @azcoding8706
      @azcoding8706 5 років тому +1

      ua-cam.com/video/q3eBhevkLRs/v-deo.html

    • @anjumalviya1638
      @anjumalviya1638 4 роки тому +1

      So im Your 100th like Hi!

    • @angelikagyurcsis1553
      @angelikagyurcsis1553 3 роки тому

      Not cool... just go to confighub and its the same
      theres a difference between original and skidded

    • @AnoopMasterCoder
      @AnoopMasterCoder 3 роки тому

      I am your 301th like

    • @memequery
      @memequery 3 роки тому

      ua-cam.com/video/5bsExf9TVcE/v-deo.html

  • @kadnick
    @kadnick 5 років тому +4

    This is a very beautiful design. Respect.

  • @unknownman6833
    @unknownman6833 6 років тому +43

    Oh my god. You're so great! Like

  • @wagris_
    @wagris_ 4 роки тому

    Thanks, I also create sign up form without you in 6min after watching this video
    But login form take 2hr to understand how all tags work thank you again

  • @abhisharma3926
    @abhisharma3926 3 роки тому

    Amazing just recommend by yt n start watching till end😘😘keep it up

  • @shubhamtarade
    @shubhamtarade 6 років тому +12

    Really cool. But it will be great if you try to explain what you are doing. You are really doing a fine design.

  • @nagahumanbeingzooofparticl8836
    @nagahumanbeingzooofparticl8836 6 років тому +4

    Looks Professional bro.. 👍

  • @keithhunt8
    @keithhunt8 6 років тому +9

    Very cool. Definitely gonna play around with thia. Thanks for sharing.

  • @rufat-hf4rh
    @rufat-hf4rh 4 роки тому

    My guy you saved me from struggling. God bless you

  • @GuitarsRgood7
    @GuitarsRgood7 4 роки тому +1

    These tutorials are great! I like how they're short and very useful

    • @memequery
      @memequery 3 роки тому

      ua-cam.com/video/5bsExf9TVcE/v-deo.html

  • @sorcmusah3414
    @sorcmusah3414 6 років тому +17

    Just i want , bro god lord i stay 4 hour trying to make this thanks dude

  • @nitishrawat98
    @nitishrawat98 6 років тому +39

    From which website u pic colora can u tell me?

  • @Akumalachen
    @Akumalachen 4 роки тому +8

    what's the idea behind:
    18:"border: 0;" and
    23:"border: 2px solid color;"?
    First you kill the border, just to add it again?

    • @Tecnologik87XL
      @Tecnologik87XL 4 роки тому

      You can remove the first border, it will look the same.

    • @stewartzayat7526
      @stewartzayat7526 4 роки тому

      @@Tecnologik87XL in other words, there is no point?

    • @Tecnologik87XL
      @Tecnologik87XL 4 роки тому

      @@stewartzayat7526 Yea, you use the first "border: 0" just to see how that look at the beginning. In CSS, if you write "border: 0" and then "border: 2px solid color", it gives priority to "border: 2px solid color" and ignores "border: 0"

  • @alexander6061
    @alexander6061 4 роки тому

    This might be old but is pure quality

  • @liamsmith9992
    @liamsmith9992 3 роки тому

    Wow, amazing end result! Nice job.

  • @fawzanfawzi9993
    @fawzanfawzi9993 5 років тому +6

    I don't know why youtube recommends me this but I'll keep this information for the future

  • @Lee14G
    @Lee14G 6 років тому +9

    Hey I learn so much from your videos! Thank you so much for making these AWESOME videos!

  • @chewbacca4403
    @chewbacca4403 6 років тому +47

    Hello Sir!
    First of all: Great great Video.
    My question:
    I know you use Atom, but what do you use for the LiveThing? :D

    • @DarkCodeOnline
      @DarkCodeOnline  6 років тому +25

      Install atom-html-priview

    • @fleecky7011
      @fleecky7011 5 років тому

      you can also install the package: atom-live-server

    • @sl4yeri
      @sl4yeri 5 років тому

      @@fleecky7011 yep its better

    • @tachnicalboss3536
      @tachnicalboss3536 4 роки тому

      ua-cam.com/channels/sXEZ8y_zSL2w6BcwCEDycg.html

    • @Bvngee
      @Bvngee 4 роки тому

      Lol I use Brackets code editor which also has a live preview function.

  • @cookorgetcooked
    @cookorgetcooked 3 роки тому

    Thanks man. I learned a lot this was my first day of Coding . Thanks

  • @danilchina3722
    @danilchina3722 4 роки тому

    Soo simple after one week of studing and amazing to do,thanx!!

  • @adilafridi2917
    @adilafridi2917 5 років тому +8

    369 dislikes. WTF.
    Whyyyyyyyyyyy.
    Keep it up sir. Great job

  • @yeasirarafat3564
    @yeasirarafat3564 4 роки тому +5

    You are a genius bro

  • @haydikod9295
    @haydikod9295 6 років тому +13

    Omg you have a great humour of css styles..... Give a heart please xD

  • @md.sabbirahmmed5899
    @md.sabbirahmmed5899 3 роки тому +1

    I think, this is best the video for creating Animated Login Form Using Only HTML & CSS...!

  • @progbro
    @progbro 3 роки тому +1

    It is so beautyful, man you're cool

  • @andreibodrei4533
    @andreibodrei4533 6 років тому +4

    Cool..from Moldova

  • @zillboy
    @zillboy 6 років тому +4

    cool music choice

  • @harrytarrant2851
    @harrytarrant2851 4 роки тому +3

    That's great! Never even thought about something like that... Could you code the login by js or will you need a backend for that?

    • @rusty7054
      @rusty7054 3 роки тому

      Late reply, but you would need a backend for security reasons.

  • @maisamhussaintoorie7119
    @maisamhussaintoorie7119 3 роки тому

    Really cool and outstanding
    Keep up the great work “dark code”.

  • @sujaljain4616
    @sujaljain4616 4 роки тому +1

    Superb video man.
    I loved it..

  • @杨开
    @杨开 4 роки тому +5

    4:31 for the focus effect in the input

  • @MohamedGamal-wi5ir
    @MohamedGamal-wi5ir 6 років тому +5

    Realy Your TUT Is Amazing
    Thank You Very Much

  • @DonckIT
    @DonckIT 5 років тому +6

    I try to do more and more using CSS, instead of writing some JavaScript code

  • @LGseeker
    @LGseeker 4 роки тому

    awesome video, pace, design, and simplicity

  • @GeekBastion
    @GeekBastion 3 роки тому

    great choice of music and great work mate

  • @indianathe3rd742
    @indianathe3rd742 4 роки тому +5

    I have liked, Subscribed all I have to do is to steal the code for myself

  • @Akbarix
    @Akbarix 6 років тому +7

    although want to know URL of the colors source?🙏🙏🙏🙏🙏

  • @tas_araf
    @tas_araf 5 років тому +5

    What platform do you code on

  • @Thigas0911
    @Thigas0911 4 роки тому

    *Finally, some good fucking vídeo on UA-cam.*

  • @robertzeurunkl8401
    @robertzeurunkl8401 4 роки тому

    TBH, the way you did this is the way all login forms are done. By this measure, all login forms are just HTML and CSS. I thought it was actually going to, you know, log someone in without javascript or a server side script. It works because a submit button on a form will automatically post back to itself if you don't supply some other "action". And the login part will be handled by the code in the page that this form is posted to. That said, I do like the styling you used.

  • @omarharzallah7643
    @omarharzallah7643 5 років тому +9

    The name of the program you are using is possible

  • @developertools95
    @developertools95 4 роки тому +71

    me : successfully prints "Hello World"
    I'm gonna hack Nasa now.

    • @ankithabhayan324
      @ankithabhayan324 4 роки тому +3

      I have seen this same comment on another video.
      The comment was uploaded 1 year ago.
      Don't copy others, it's not nice

    • @avaiiable
      @avaiiable 4 роки тому +1

      lmao yeah cringe

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

      @@ankithabhayan324 Bro, i saw this comment like 10 years ago, and it was copied. It's a classic

    • @ankithabhayan324
      @ankithabhayan324 4 роки тому +3

      Woah, then the other guy copied too

    • @K8URRedHawk
      @K8URRedHawk 4 роки тому

      @@ankithabhayan324 such bitches!

  • @ho0d631
    @ho0d631 5 років тому +4

    What's the app you're using .

  • @uktamnishonov4671
    @uktamnishonov4671 3 роки тому

    That's awesome bro keep going!👊👍

  • @henryomarm
    @henryomarm 4 роки тому

    you sir have just earned your self a new subscriber ... awesome video

  • @hamburghammer2855
    @hamburghammer2855 6 років тому +7

    It looks awsome!
    I was wundering if you can put your code to Github or something with a code preview?

  • @tatlonghari213
    @tatlonghari213 5 років тому +5

    What the program he used?

  • @liji2272
    @liji2272 4 роки тому +10

    1:27: The awesome website of the set of beautiful colors: flatuicolors.com/

  • @yamsol1911
    @yamsol1911 4 роки тому

    Wow bro! You're amazing!
    great job 🤘

  • @BrendyGo
    @BrendyGo 3 роки тому

    very nice content bruh, keep doing it !
    ur css is very very same with a bootstrap xD
    From Indo 🇮🇩

  • @noorulamin2652
    @noorulamin2652 5 років тому +8

    Can you create a beautiful calculator only html and css UI, not the operations.

  • @tanos.
    @tanos. 6 років тому +5

    Which editior/coder u use?

  • @harrypath6313
    @harrypath6313 6 років тому +5

    do the coding accompanied by EDM music, It's amazing

  • @claudimards
    @claudimards 4 роки тому

    Where can I explode the like button?! Top content 👏👏

  • @APersonOnMars
    @APersonOnMars 3 роки тому

    You deserve 1M subs. So I will be part of that project.

  • @Bajrang.707
    @Bajrang.707 6 років тому +15

    nice informative video, thanks for this.
    god bless you. :)

    • @azcoding8706
      @azcoding8706 5 років тому

      ua-cam.com/video/q3eBhevkLRs/v-deo.html

  • @muhammadriekihredaya6153
    @muhammadriekihredaya6153 6 років тому +5

    what application do you use

  • @masudprampank0313
    @masudprampank0313 6 років тому +6

    Share your script bro

    • @IStMl
      @IStMl 6 років тому

      or just read the description bro

    • @economix2238
      @economix2238 6 років тому

      @Sergio Hernández I think you got destroyed bro

    • @Bob-vr4nb
      @Bob-vr4nb 6 років тому

      bro....

  • @brohere1299
    @brohere1299 3 роки тому +1

    Bro this is quality content thanks a lot!

  • @jyotiranjanmohanty8905
    @jyotiranjanmohanty8905 3 роки тому

    These videos give me confidence to move on

  • @chubbyBunny94
    @chubbyBunny94 4 роки тому +4

    If your placeholder colour doesn't change, use the following:
    ::placeholder{
    color: white;
    }
    ::-moz-placeholder{
    color: white;
    }
    ::-webkit-input-placeholder{
    color: white;
    }

  • @filiperubin
    @filiperubin 4 роки тому

    I don't even program in CSS idk why I'm watching this but it looks awesome!

  • @soly_Razer
    @soly_Razer 3 роки тому

    Man for beginner like me that was very incredible so keep on amazing work

  • @NadieHimemori
    @NadieHimemori 3 роки тому

    It's quite awesome what you can do only with CSS and html, turning something boring into magic.

  • @josephkreifelsii3734
    @josephkreifelsii3734 3 роки тому

    That's sick. Can't wait to plug some code into it

  • @mohammadrezakarimi2400
    @mohammadrezakarimi2400 4 роки тому

    I even didn't understand how time elapsed!
    but in the end, I clicked on the subscribe button :)
    thanks.