Tidy it up and take it home

01 / 03

Make each row a card

It already works, so all that is left is how it looks. Turning each li into a white card makes it feel like a real app.

list-style: none; drops the bullets, and background, border-radius and padding give you the card shape. You have met all of these in the HTML / CSS course.

#list {  list-style: none;  padding-left: 0;}#list li {  background: #ffffff;  border-radius: 8px;  padding: 12px;}

02 / 03

Text left, button right

Pushing the text and the button to opposite ends reads much better. That is display: flex; together with justify-content: space-between;.

space-between means "put all the spare room between them", so the first thing lands on the left edge and the last on the right.

#list li {  display: flex;  align-items: center;  justify-content: space-between;}

03 / 03

Take it with you

When you are happy with it, use Save to your device below the preview.

One file — tap it and it opens straight away. Start here if you just want to see it run
Three files (zip) — index.html, style.css and script.js as they are. Use this to keep going on a computer

From here it is your machine's turn. Open the zip in an editor and you carry on from the code you just wrote.