How to style form without changing the HTML markup.

Julia Kharlamova — Fri, 22 Mar 2024 05:51:10 +0000

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

CodePen demo

Journey

This way helps me to create nice and adaptive form with minimum lines of code. And keeps it readable.

The essence of { Fetch API JS } in 256 characters.

Julia Kharlamova — Thu, 21 Mar 2024 08:53:42 +0000

Fetch API in JS is a tool for data exchange with servers. It handles HTTP requests and responses, using promises for asynchronous operations. Simple yet powerful, it suits any application requiring server communication.

DEV Community: Julia Kharlamova

How to style form without changing the HTML markup.

Demo

Journey

The essence of { Fetch API JS } in 256 characters.