IONIC - 3.8 Creation of a to do list (4)

Click here for more videos available on our youtube channel !

Now that the HTML layout of the to-do list is ready, we move on to the styling in home.page.scss. The goal here is to give the app a cleaner look, with neutral colors and a bit of breathing room around each element. Of course these values are not mandatory — feel free to adapt the colors and spacing to your own taste.

We start with ion-content and change its background-color to a slightly off-white, #f9f9f9, which gives the page a neutral background. We then target the .tasks class, the card around each task, and add a light padding: 10px plus a clean background-color: #fff so each task stands out clearly against the page.

Styling task titles, dates and empty state

For the .task-title class we set margin: 0 and padding: 0, switch the display to inline-block so the title sits nicely next to the checkbox, add a small margin-left: 14px to shift it from left to right, and use font-weight: bold with a font-size: 15px. The color is a light electric blue #3880ff to match Ionic's primary tone.

For the .task-date class we also use margin: 0 and padding: 0, a bold font-weight and a smaller font-size: 11px, which is enough for a secondary line. To push it slightly below the title, we add margin-top: 28px.

The empty-state block uses the .empty class. We give it padding: 10px, text-align: center to properly center the text, a margin-top: 50px so it sits in the middle of the screen, and a basic black font color. Looking at the result, the design is much better than at the start: the off-white background makes each white task card stand out clearly. We test it by inserting a task such as "eat a fruit", and everything displays nicely. The style stays intentionally basic to keep the focus on the structure, but you can play with brighter colors based on your personal taste. That is it for the to-do list project videos — in the next one we will go through a small quiz to review what we learned. See you soon.