51 thoughts to “Coding a signup form with HTML and CSS”

  1. Great video for me to practice, I'm from the Caribbean by the way โœŒ๐Ÿฟ๐Ÿ‘๐Ÿฟ๐Ÿ‘๐Ÿฟ

  2. Hi love your videos, please come with complete website(like instagram.com/fb) building tutorial, with both front end (HTML,CSS, JS)and back end(PHP)

  3. i might as well quit doing html and css, ill never become as good as you are, i just have trouble learning it i thought if i tried ill be able to learn and become good at it but it turns out that its just not for me, ill just stick with the passions i have going for me atm and not change for a while.

  4. Thank you. Will there be a tutorial on how to make this form work? I mean – so that a user can enter his name and email and the admin would get it to his admin-owned email address?

  5. I learned that forms as well images are replaced items that dont allow with ::before and ::after =D

  6. It is my first time to hear about "placeholder" pseudo element. ๐Ÿ˜
    Keep going brother, You're Amazing. ๐Ÿ‘Œ

  7. Hearing from you every week is awsome. Thank you so much for sharing these stuff with us ,followers . Loves from Istanbul

  8. Super fun element. Great to see another video from you ๐Ÿ™‚ I always seem to 1up my CSS game with you.

  9. Nice way to code it

    We coded it differently but with the same basic result however mine is able to handle multiple sets in the same form which is why I coded the way I did.

    https://codepen.io/WiredElectronix/pen/eazewq

  10. Hi Kevin, I notice you use top and bottom padding on your buttons, which I used to do until I saw a talk on youtube about accessibility and the chap said to use line-height instead due to people bumping up the font size (ctrl +). Wish I could remember which talk to share it with you.

    Also, do you think a border on the input would work instead of having the extra html markup to support the pseudo element?

  11. Mine Attempt of creating the same form with slightly different approach. here is the link: https://codepen.io/SamiNoor/pen/eavVZw
    criticism and support are welcome ๐Ÿ˜‰

  12. that was a fun codealong, I wish I could better describe my learning, but it's so advanced for me it will take more time to settle.!!

  13. Hey there – rather than use (semantically empty) <div>s to contain your inputs, why not wrap them in <label>s? Better accessibility, no need for the ARIA attribute… Otherwise, all really nice.

  14. Css:
    `.page-form input{
    Border: 1px solid #eee;
    Border-left:10px solid;

    Border-radius:15px;
    Transition: border-color .5s ease-out;
    }
    .page-form input:optional{
    Border-left-color: grey;
    }
    .page form Input:required{
    /*changes color from red to green when form is written correctly */
    border-left-color: green;
    }
    .page-form Input:invalid{
    border-left-color: red; /*Can be any variation of color on all 3*/`

    If you're using something like bootstrap or materialize you might have to put !important on some of those rules

    A cool trick for forms is to take the
    Note my syntax might not be 100 because I'm writing on mobile instead of directly copying my working code, but .
    This trick below is pretty cool .
    /*makes forms rounded and makes shape at beginning of input that changes color , kind of like css drawing with borders*/
    Edit : add transition on
    `.page-form input {}`
    ————————-
    Css:
    `.page-form input{
    Border: 1px solid #eee;
    Border-left:10px solid;

    Border-radius:15px;
    Transition: border-color .5s ease-out;
    }
    .page-form input:optional{
    Border-left-color: grey;
    }
    .page form Input:required{
    /*changes color from red to green when form is written correctly */
    border-left-color: green;
    }
    .page-form Input:invalid{
    border-left-color: red; /*Can be any variation of color on all 3*/`

    If you're using something like bootstrap or materialize you might have to put !important on some of those rules

  15. Have been trying to design the best sign up / login forms over the last week.
    Have some pretty great designs now it's onto validation then DB and back end parts
    Cool we are working on the same thing, might have to hop back in the discord

  16. For reference to what I was posting
    https://alligator.io/css/styling-form-input-validity/

    Drawing borders on the left side of form inputs and making them change color

  17. Excellent video as always ๐Ÿ™‚
    I like how you seem to design your code in the videos like everyone else, dynamically and making changes (and some misses) as you go ๐Ÿ™‚
    Seems far less orchestrated in advance as many others out there.

    Question though, are you deliberately not using Live server in vscode so that we'll see more clearly each time you update the webpage, or do you rarely use it?
    As you know, using Live server, all you have to do is save the code and the webpage updates automatically.

  18. Hey Kevin, as allways late in my viewing your vids; but allway enjoying them. Could you, please, make a video explaining the aria attributes.

  19. hello Kevin, do you know if I can install Emmet extension in dreamweaver? Emmet is real so flow. Thanks.
    I installed vscode. makes me so happy work with it. Thanks.

  20. You're great Kevin. You always come up with new techniques to use. Special when it comes to css and how to code up different designs. Thanks, so much for your work. ๐Ÿ˜€

  21. I learned css for placeholder and last of type. Thanks for sharing knowledge. Waiting for next ๐Ÿ™‚

  22. That was a really nice video to watch, thank you @Kevin Powell

    After I added some colour to my background in the body{}, I could see the background colour through the gaps that appeared in the form.

    So to fix this, I added a white background to the form{}.

    body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    font-family: "PT Sans Narrow", sans-serif;
    background: linear-gradient(to left, #c2e59c, #64b3f4)
    }

    form{
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 30px rgba(0,0,0,0.2);
    border-radius: 20px;
    overflow: hidden;
    width: 80%;
    max-width: 300px;
    background: white;
    }

    I wonder if there was another way to fix this issue. Thank you for the great tutorial @Kevin

  23. Perhaps somebody can give me some advice here. I'm about to create a page for a journalistic project and I wonder how to include larger text phrases on it. Because until now for some precoded headlines or headlinestyles we can write it in html but imagine to have a whole report like about 20 pages… How to implement that without adding millions of <br> subsequently…
    Thanks a lot.

  24. Kevin, in chrome the form-input:focus::placeholder{} creates a highlight box around first name and email unlike that in firefox. any suggestions on how to correct that? thank you and you are amazing at this.

  25. Good video, learnt the techniques taught. One suggestions. It will be nice if you showcase the validation errors display part. there are so many ways to display validation errors. but like to see a elegant way of your choice for this form elements.
    great work. keep rocking.

  26. Just out of curiosity, since you are using VS Code why not use Live Server? It's much easier than having to refresh all the time.
    EDIT: Now that I look you have live server installed. I just don't know why are you refreshing all the time, shouldn't it do it automatically?

  27. funny that so much people don't know placeholder. Good to teach them ๐Ÿ˜‰
    I was more intrigued by the flex-grow in a form item and maybe an idea of adding in the media 550px a right border to the first item to clarify that there are two items.

Leave a Reply

Your email address will not be published. Required fields are marked *