Login & Signup with HTML, CSS, JavaScript (form validation)
Вставка
- Опубліковано 5 лют 2025
- This HTML, CSS and JavaScript practical project for beginners will teach you how to create a functioning form validation on the front-end for your Login and Signup page. Check if the password is longer than 8 characters, Firstname, Email and password are required and many more conditions for your own signup form. Learn how to create a responsive login form with modern hover effects and focus styles that work both on desktop and mobile devices.
Become a Member to Support our Channel:
👉 / @coding2go
*Check out our website for the source code*:
👉 www.coding2go.com
Get our HTML Udemy Course*:
👉 www.udemy.com/...
*Host your own website with Hostinger*:
👉 www.hostinger....
Use our code CODING2GO to get a 10% discount
Material and Downloads
background: www.pexels.com...
Person Icon: fonts.google.c...
Lock Icon: fonts.google.c...
Get the source code on our website: coding2go.com
*What You'll Learn*:
Create a signup and login form in html. Implement a firstname input, an email input, password input and repeat password input.
Learn about input types such as text, email, password
How to show a placeholder in an input
How to show a hint for a text field in HTML
How to prevent the submit event in a form
How to use preventDefault
How to create a HTML, CSS and JavaScript login and signup form
Create a responsive login and signup form
Modern form design css
Make a login form responsive with css
how to use media queries in css
hover transitions for input elements
How to use Google Material Icons from Google Fonts
How to add icons to your html code
How to import a Google Font
Use only free to use images from pexels
How to use event Listeners in JavaScript
use addEventListener on a form
javascript form submit event
prevent form submit event in javascript
Create form validation in javascript
validate a login form in javascript
javascript validate a sign up form
javascript validate a registration form
html, css, javascript user registration form
Create an Account website javascript
Key Points:
Create a Signup and Login form with HTML, CSS and JavaScript
Add Icons to your signup and login form
Style the website with CSS and make the form responsive
add form validation with javascript
create if conditions to check password security
check form input with javascript
prevent html form from submitting when errors occur javascript
Practical Project:
Create a modern Login and responsive Signup form design with HTML, CSS and JavaScript
Topics and tags:
HTML tutorial, CSS tutorial, CSS JavaScript Tutorial, Login and Signup, Login and Registration, JavaScript Form Validation, Validate Form, Check if input is correct, password security checks with javascript, javascript login, javascript sign up, responsive web design, responsive login page, media queries, css flexbox form, css flexbox input, css flexbox label, login with icon design, modern css login design, css form design, beginner Tutorial, HTML, CSS, JavaScript for beginners, Beginner Course, JavaScript practical project, Login Project JavaScript, Coding2GO JavaScript project, coding2go javascript tutorial for beginners, beginner friendly
Background Music
Track: "Scared Of The Glizzy"
Music provided by Slip.stream
Free Download/Stream: get.slip.strea...
Track: "Little Things"
Music provided by Slip.stream
Free Download/Stream: get.slip.strea...
Track: "One More Night"
Música fornecida por Slip.stream
Download grátis/Stream: get.slip.strea...
Hey guys 👋hope you like the project. We just created our new X (twitter) account. Follow us there x.com/codingtogo to get more tutorials, video summaries and tips & tricks that don't make it into the videos. You could be one of our first followers on X 😎
Done!
very much it was well detailed
sending you love from Ghana❤❤
Sir I am waiting from to months that you will make use full stack I need your JavaScript vadios for learning and so on reactjs ,models,mongodb,etc etc
Even tho i study FrontEnd technologies i am struggling developing projects on my own. You helped me get started, because i coded alongside with you and understood everything you explained. Thank you very much i am very excited for next ideas and projects!! You are a hero for all of us here struggling 💚😄
Thanks for the kind words, that's great to hear 💙
been doing signup login pages for years but never really stylied them like this. It looks awesome!
A star shining so bright fell from the sky. And that's Fabian bhai✨🤩
CREATE A CALCULATOR IN HTML, CSS, & JAVASCRIPT! (Step-by-Step Tutorial) || कैलकुलेटर कैसे बनाये : ua-cam.com/video/H9tK1xfv3rY/v-deo.html
I really love you sir 😭😭😭😭😭😭...
Your explanation is so clear and easy to understand .. please keep making videos like this 🙏🏻 😭 😭😭😭❤❤❤❤❤
Man this is brilliant continue brother:)
Great content, you explain it in an accessible way👍👍
this was awesome mn thx alot
I have learned CSS very well from your 10 mins video its really good 👌
I appreciate your efforts🙏
Thank you! Glad to hear that ✌️
Thank you so much for the great tutorial. I learned a lot. Wondering if you pair this video with a complete database to make it fully functional?
this came out awesome bro! 😎👍
Thanks ✌️
Thank you Thank you Thank you Thank you sooo sooo sooo much!!
you helped me aaaaa lot!!
Thank you so much fabian bro for html form making ❤❤❤❤❤❤😊😊😊😊
No problem 👍
love from Bangladesh❤
6:32 We can also use icon of email from Google Fonts as we used icon of user & password
thank you so much
Great work, thank you :)
Also very underrated
Hello, your coding skills are really impressive, especially with CSS and responsive design! and one more thing can u go little bit continue to higher level in Javascript
like creating lists for usernames, emails, password so on.. and ya for the login form, it should check if the email exists and allow users to log in if it does.
for signup, when someone signs up, it should notify them if the username or email is already taken.
for login, when someone tries to log in, it should clear previous attempts and show an error if they haven't signed up yet.
this is the backend job
Awesome video 😍😍, we want to watch your every video, and hope you will make more videos for us, as I saw your channel, you don't give us many videos here, but hope you will make more beautiful content for us from now on.
Thanks. Great tutorial
Hello could you make a video on java backend for login page also please
How can I use nodejs to in my webiste?
bro please make a hover effect that i hover than a text comming bottom to center please 🥺 btw i love your content keep growing ❤
hi what software did you use in coding
Looks good and i even attempted to follow and code a login page for my project. I have took time out to follow everything, up until the error part. My javascript seems to not do anything at all, the .incorrect class is not being activated when inputs are empty and no error message is showing and i cannot understand why
Never mind. I feel ssilly but i managed to get it to work, i simply missed a "-" symbol in one of my input id's and everything is working as you have shown!
This video is very helpful, would you create a video on scroll animation css please.
Sure, I will put it on the list. The list is getting long with that many video ideas 😅 but we will do our best to drop a video about that, since many people want a scroll animation tutorial.
@@coding2go Thank you sir.. ✨
I really love you from morocco ❤ i hope you next time to teach us how to make a easy darkmode please
Thanks 💙 Darkmode is a cool topic. I will put it on the list
@@coding2go thanks for understand
❤❤@@coding2go
@@coding2go😮😮😮
Hi, I'm currently facing a problem where the background-image isn't showing (9:13 step) when I apply it even though my CSS and HTML files have been linked properly and my fonts are working well. Also, my text wouldn't change to the colour that I've written in the CSS code. I checked every line carefully for each CSS line. If anyone out here can help me with this issue, I 'd really appreciate it. Thanks!
Make sure that the background image is in the same folder with the css and html. Also, check the spelling of the name of the image. Eg. background-image: url(background.jpg)
good
I want to open a new page after successfully logged in what to do ?
I created a LoggedIn.html file wherr it says You are successfully logged in
Sir i have a problem from many months that is....i have problem in understanding that in which div we have to give flex for example: i have 2 div a container and a logo div now i have to center a logo then to which of one div should be given flex box.....Its so confusing for.me pls Sir reply me and pls make more advance vids for css
Create a tutorial on parallax effect
Okay I will put it on the list
@@coding2go Thanks for reply.
Can someone send the whole code
hello, im a beginner and i want to know how i now can get a link for the login or SignUp button. I want to go to another page and i dont know how. Please help
In form we use action attribute to move next page after submitting values
👌👌👌👌💗
😊❤❤❤❤❤
can you do a full course on css.....
I am beginer but honestly i didn't understand the css code its look difficult for me
My Code is not working....it's not showing the error messages,,,someone help out
Me too
Hi there, i have probleme here if anybody has any idea i would very happy. I have issue with my project. On my computer the positions are super everything works properly but if i go on any other computer with the same browser same resolution even same model of computer the layout will look different. I have made this app only for offline use css html js has applyed.
Try learning about responsive design concepts ( media quarries) and search on bootstrap or tailwind
I always open chrome developer while coding and use responsive design keep checking for layout or structural issues. Keep your wrapper divs contained and ensure you check every time you use padding/margin this can cause structural issues
Hnmm!, Oh boy!
No boo-boo
can someone send the whole code
Hi there, i have probleme here if anybody has any idea i would very happy. I have issue with my project. On my computer the positions are super everything works properly but if i go on any other computer with the same browser same resolution even same model of computer the layout will look different. I have made this app only for offline use css html js has applyed.