Creating a better todo app - the HTML and CSS

In this video, I create the structure of a todo app, including setting up custom checkboxes, creating some fun little transitions, different use cases for custom properties, and setting it up using both grid and flexbox.

///// Timestamps /////
2:44 - start the html
12:41 - Start the css (setting up the layout with grid)
22:47 - customizing the inputs
25:57 - changing the order of the buttons with css
28:19 - styling the + buttons
31:25 - the todo list styles
36:51 - styling the custom checkboxes
48:11 - cross out animation
56:15 - delete buttons

#html #css

---

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

[WebDevSimplified]

Thank you so much for working with me on this project Kevin! It was a blast planning through and building a project with you, especially since you were able to make it look so good. I really hope everyone enjoys both videos and if you are coming here from my channel and you aren't already subscribed to Kevin, I highly recommend you do subscribe. His content is 100% quality!

[raymondmichael]

I like this type of cooperation between you guys. More power to you all.
Hopefully Kyle will add localstorage too to persist those data, that'll be awesomely great

Greetings from Tanzania 🇹🇿

[AnnieTaylorChen]

How nice, I love how you add the categories. And the details such as how the direction of "strike" line goes is awesome. I always appreciate those little details of animation, but they're not easy to achieve. Look forward to learning more!

[zhjiyun]

This video has so much things need to learn. I learned selector about element 1 + element 2, meanwhile went throw all the selectors. happy to learn something new.
thank you for the work.

[thuhoang]

Thank you so much for making this video! I am a beginner and this video has been very informative and easy to follow. I got to learn many new things through trying to recreate the todo app along with you making it. Please make more projects like this one!!!

[MotiviqueStudio]

First time I've followed one of your tutorials. Magnificent stuff.

[groovebird]

Very cool video. For the checkboxes you could nest the input and span tag inside the label. After that there is no need for adding an id and for attribute to connect the label and input.

[husrebel]

Thanks alot for your time kevin, this was a great insight on many css components. I also liked how you kept changing things around, it helped understand the elements we were styling more rather than following along to a fully pre-planned project most dev teachers do which wouldn't feel any different than copying and pasting the code. Great job !

[RedEyedJedi]

If you're not using visual studio code then you should be because it's awesome!!

[man_vs_life]

Here via WebDev Simplified. You have a good teaching style too - love that you show mistakes & fixes. Subbed.

[TomkinsOkello]

Hey Kevin, nice to do list app. The design looks good and also like the functionality of the app. Thank you.

[kostiantynkarzhanov]

Kevin, thank you very much for the great lesson! 💛

[fonncatalina]

Why Youtube only allow 1 like :( I should love this video and your kindness 3000 !

[LorenHelgeson]

Fantastic tutorial. Lots of new things to take for a spin!

[annbyrne]

This tutorial was exactly what I needed! Thank you!!

[FuzzyAnkles]

first of all nice video on todolist. really helps. i would just note that, when youre explaining things, please dont just say, i have video on this, it means i would need to go thru 5 videos of yours just to understand one simple concept, which you could mention briefly, becaue i dont wnat to stop video and watch vide on pseudoclases... if you know what i mean.. all in all great job! im learing a lot with you!

[namikazedevj]

why my placeholder color didnt change with just set the inherit color?
so I have to add ::placeholder to change it

[yadneshkhode]

Thank you I got to learn so many new things !!

[frankowusu]

Hello, next time please show us more of what you were doing as compared to the completed work. So that we can see the progression as you code.

[joshuatao]

Great job👍A big "thank you" to you, sir!🍎