Trying to focus a bit more on looks... how is this? (Pomodoro Clock)

Basically the title. Throughout the course, I focused more on getting the projects done than making them look presentable, but I’m trying to change that. If you guys can look at this https://codepen.io/drewgill89/full/EEJKrN/ and give me some feedback, it would be much appreciated!

The buttons stick too close together, in different ways depending on screen size. How about this:

button {
  margin: 0.1em;
}

On mobile, everything becomes one column. It becomes a bit of a puzzle to tell what is what.

The checkboxes, on desktop, are tiny dots. I thought they were just decorations at first. And I’m not sure why, in editor view, they change positions.

The buttons could be much larger. The plus and minus signs could also be larger and/or replaced with images or icons so they will stand out more.

The colors are not something I want to look at. If in doubt, stay simple. I changed the background to white and text to black and it was already a totally different, and much better, experience.

1 Like

Thank you! It looks like I should also be testing all of my projects to see if they work on my phone as well.