Blue pill, red pill (HTML/CSS)

Project Feedback
#1

Hello. I am trying to become better at HTML and CSS so I build this CodePen.

So:

  1. How would you refactor the code —especially the positioning of the two elements—.

  2. Is the shadow of the pills ok when I hover them? If not, how could I make them more realistic?

  3. What other tips would you give me —like articles to read or how to position better etc.—?

Thank you for your time. :beers:

#2

Here’s my thoughts:

  • you have some lines of repeating code (the properties that are the same for both pills), so I’d give them a class="pill pill-1", and put all the repeating properties in the .pill class
  • instead of border-radius:50%, I’d give that a really high px value (like 1000px), that way they look more like actual pills
  • if you put the transition:0.5s into the .pill selector instead of .pill:hover, they’ll also smoothly move back when you stop hovering
  • I wouldn’t use float, that’s kind of outdated CSS. Instead, set the .pills class to display:flex with justify-content:space-between or space-around
  • to make them look even more realistic, you could apply a linear or radial gradient instead of a uniform background-color

That’s pretty much it. As for articles to read, I’d recommend to just keep building little projects and look things up as they occur. Generally, a good resource for CSS: https://css-tricks.com/

2 Likes
#3

Thank you very much. :beers: