odin-project-notes/projects/sign-up-form

From the web itself:

Introduction

This project is intended to give you a chance to flex some of the new items you’ve been absorbing over the past few lessons. This time it’s a sign-up form for an imaginary service. Assignment Step 1: Set up and planning

Set up your git repository (refer to past projects if you need a refresher).
Set up your HTML and CSS files with some dummy content, just to make sure you have everything linked correctly.
Download a full-resolution copy of the design file, and get a general idea for how you’re going to need to lay things out in your HTML document.

Step 2: Gather assets

The design has a large background-image, so go find and download an image you want to use for that section. The one in the design can be found on unsplash.com, but feel free to select your own. Be sure to credit the creator of your image!
Pick an external font for the ‘logo’ section. We’ve used Norse Bold, but you can use any font you like.
For the image-sidebar, we’ve used this Odin logo.

Step 3: Some tips!

How you attack this project is mostly up to you, but it is wise to begin by scaffolding out the structure of the page, and then tackle the various sections one by one.
The area behind the “ODIN” logo is a div that has a dark, but semi-transparent background color. This enhances the readability of the text against the busy background image.
The color we’ve chosen for the ‘Create Account’ button is similar to tones found in the background image. Specifically, it is #596D48.
The inputs, by default have a very light border (#E5E7EB), but we’ve included 2 variations. For starters, the password inputs should have a red border if they contain an invalid password. This can be handled with the :invalid pseudo-class you’ve learned in the previous lesson.
The other variation is the selected input, which should have a blue border and subtle box-shadow. This can be done with the :focus pseudo-class you’ve learned about in an earlier lesson.
Do not worry about making your project look nice on mobile. Responsive design isn’t covered until later in the curriculum.
Validating that the password fields match each other requires JavaScript. Using JavaScript to validate forms is covered in a future lesson. For now, just validate each field separately.

---

My own notes:

• Some ideas after looking at the design file:
  • Use width and no margin nor padding for the two big areas of the screen.
  • The Odin text on the left panel can be placed with a relative + top setting.
  • Same with the small picture caption at the bottom.
  • Easy peasy stuff on the right panel, just play a bit with divs. One background div, and then three divs for the three areas.
• On the font:
  • I'm going to pick something funky just cause I can
• I'll make the form validation on JS just because.
• I'll make this look good on mobile as well, just because.