Hello Everyone

This is my first blog post. I've been creating pens since a few years ago. But now I have this need to write about new stuff that I learn.

That's why I had this idea: remake my old pens with a more proper HTML and CSS. Also I've been reading about accessibility lately, so I decided to improve my writing skills and practice HTML and CSS for UI components.

And the first pen that I choose is my most popular pen:

I wrote it a few years ago. Back in those days, I was starting to work as a UI Designer (who also writes their own HTML and CSS) and I didn't care much about semantic (My bad, Shame on me!). But now that I've received likes, comments and mentions on it, I choose it to begin this remake process. By the way I recently add to it a quick link to a new one, so if people find the old one they can easily go to a better example.

So I wanted to improve three things:

  • Semantic
  • Experience
  • Accessibility

I realized that my old pen was poorly written (Poor pen, I feel bad for him. But it was necessary :) ).

To improve Semantics I started by searching how to properly write a form in HTML. And I found a great reference of How to structure and HTML form on MDN. If you are about to start writing a form, and you don't know exactly how to do it. I recommend you to read more about it, before starting. Because forms are often used to catch a user's input, so that's important.

Then I made a simple but, in my opinion a better design to improve the Experience. As you are about to see, I added a submit button (What form does not have a submit button? Oh wait, mine doesn't... the old one :( ), I also included an SVG icon for each of the options (radio buttons) that represents each label. I took as a reference this Sara Soueidan's pen.

And last but not least, I'm still new in Accessibility on web. And I'm reading and understanding more about it. So if you have comments or feedback about it feel free to let me know.

So this is the new pen (Ta-da!):

Before I forget: I designed the icons too :). You can check them here.


5,130 2 36