This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities_
The main point of this challenge is not to change the HTML markup. So, I was started form the first point of my every day developers mindset. First of all I see the markup - there is nothing special. I decided to use codepen - it's very simple to use and give me many options to improve the initial markup.
After logged in, I set up the pen's settings. Choose the preprocessor and normalize scss.
After that I set up font and base styles in body (useful for case you don't want to reset styles on every element).
Because I was not allowed to change the HTML, I decided to write styles by selectors. For form's container I choose the flex positioning. Very easy and useful. And for the form I choose the grid positioning. In purpose not to duplicate styles for form's fields and button I write initial styles in one place and use the inheritance.
After that add some styles for hover and small animation.
Also I made a small js part for improve interactivity. There is no need to complex approaches. I coose the way to find parent element on document, and then search all his children (if needed) on parent, not on document.
Demo
Journey
This way helps me to create nice and adaptive form with minimum lines of code. And keeps it readable.
Top comments (0)