ฝัง
- เผยแพร่เมื่อ 7 ก.ย. 2024
- 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...
![🎤 ไปกันต่อออ! จับฉลากร้องเพลง x P’ #XXSIVK [EP.2] (1/2) เพลงของใครจึ้งสุดน้าา 💓🎤 #MXFRUIT](http://i.ytimg.com/vi/mLI_K0sAS4o/mqdefault.jpg)
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
A star shining so bright fell from the sky. And that's Fabian bhai✨🤩
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 💙
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.
I really love you sir 😭😭😭😭😭😭...
Your explanation is so clear and easy to understand .. please keep making videos like this 🙏🏻 😭 😭😭😭❤❤❤❤❤
I have learned CSS very well from your 10 mins video its really good 👌
I appreciate your efforts🙏
Thank you! Glad to hear that ✌️
Great content, you explain it in an accessible way👍👍
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.
this came out awesome bro! 😎👍
Thanks ✌️
Great work, thank you :)
Also very underrated
Thank you so much fabian bro for html form making ❤❤❤❤❤❤😊😊😊😊
No problem 👍
Man this is brilliant continue brother:)
love from Bangladesh❤
Thanks. Great tutorial
bro please make a hover effect that i hover than a text comming bottom to center please 🥺 btw i love your content keep growing ❤
good
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 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.
Hello could you make a video on java backend for login page also please
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
can you do a full course on css.....
👌👌👌👌💗
😊❤❤❤❤❤
Create a tutorial on parallax effect
Okay I will put it on the list
@@coding2go Thanks for reply.
I am beginer but honestly i didn't understand the css code its look difficult for me
CREATE A CALCULATOR IN HTML, CSS, & JAVASCRIPT! (Step-by-Step Tutorial) || कैलकुलेटर कैसे बनाये : th-cam.com/video/H9tK1xfv3rY/w-d-xo.html
No boo-boo
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.