Treehouse Project 3 - Online Registration Form

This is my third project for Treehouse Techdegree: Front End Developer. Here are my project notes so I can track my learning.

Notes n' Tweaks

• Transitions added for focus states and radio buttons.
• Added another dropdown and another set of radio buttons to make form have more options. Made the form float to 2 columns in largest screen size.
• Added media queries so the flow is: smaller phones -> larger phones/small tablets -> larger tablets/laptops -> larger desktops.
• Biggest challenge I gave myself was to match the custom dropdwon arrow/checkboxes/radio buttons in the mockup as closely as possible. This took a lot of time to research as well as trial and error testing on CodePen.
  • Custom Checkboxes: Happy with my solution for the most part, could not be animated tho. I think this is due to using Font Awesome with the "content" pseudo-element. I did learn a couple different ways I might execute this differently, and put animated checkboxes on my future "to try again" list.
  • Custom Radio Buttons: Again, very fiddly but happy with the solution I found. Lining them up so they don't shift visibly was the most difficult part, not sure it's perfect but good enough I think.
  • Custom Dropdown arrow: Figured out an initial but less than optimal solution that used pointerevents: none, but it wouldn't pass CSS validation, so I went back to research and ended up with a simpler solution.
• Design: Sticking to simple color schemes and styles for now. First attempt to use a background image, I think it worked out ok. My choice of Google font added.

Needs Work

• In the future I need to just start incorporating the "Exceeds" critera from the get-go. Adding them after I get the main criteria features laid in seems to result in a lot of re-working of the HTML organizational structure and CSS. Still practicing my workflow planning.
• Still working out pixels/ems/%s and how they best work in different scenarios

~Time to complete (10 days; week 1 - basic layout & research for custom form elements; week 2 - design elements, adding exceeds criterion, linting/refactoring)

-MM