Skip to content

enterstudio/form

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Matty-Project-3-WebForm

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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published