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 a link to the remake, so if you find the old one, please go and see the new one.

For the remake, 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. Forms are used to catch user's input, so that's important.

Then I made a simplier, but (in my opinion) a better design to improve User Experience. As you are about to see, I added a submit button, included an SVG icon for each of the options (radio buttons) which represent 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!):

FYI: I designed the icons too. You can check them here.