Please, whatever you eventually choose to do, make sure to continually reference this amazing website whenever you are implementing any interactable part.

https://cheatsheetseries.owasp.org/

It has cheat sheets for securely implementing everything from login forms, preventing common vulnerabilities (at least look at sheets for Top 10), forgoten password flows, storing passwprds and more.

From the top of my head, If you are building it from a scratch without a framework, you will definitely want to at least look into cheat sheets about input validation, injection prevention, password storage, session management, file upload and authorization with authentication.

They are not that long, and should prevent the most critical and common vulnerabilities you will probably have, where the prevention isn’t too difficult, once you know about it.

MDN offers webdev tutorials. While I’ve never tried their tutorials out, the MDN docs are really good and they’re my go to when I need to figure out how a specific brower-side API works.

First create the HTML DOM, then beautify with CSS, then script stuff with JS for functionality you can’t do with HTML and Backend.

And read up on HTML tags, please. There’s too much div-only crap already. And better go basic than fancy; fancy is more technical debt that blows up (or leaks your users passwords) along the road

Don’t listen to the naysayers, they never did a website from scratch. And the usual frameworks have gone complex to a point that learning them and adjusting them to your needs eats more time than creating a basic website from scratch, while your websites performance and accessibility tanks. Imagine, a button not working just because you blocked third-party scripts!