Creating a better todo app - the HTML and CSS
Watch part 2 where Kyle adds the JavaScript to make this work over on Web Dev Simplified: • How to Code A Better To-Do List - Tut...
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.
Find the code here: https://github.com/kevin-powell/todo-...
///// 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
---
Come and hangout, ask questions, suggest ideas, and meet some awesome people over in The Community: / discord
I have a newsletter! https://www.kevinpowell.co/newsletter
I've been working on some courses! Find out more: https://www.kevinpowell.co/courses
---
My Code Editor: VS Code - https://code.visualstudio.com/
How my browser refreshes when I save: • How to automatically refresh your bro...
---
Support me on Patreon: / kevinpowell
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.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
On this page of the site you can watch the video online Creating a better todo app - the HTML and CSS with a duration of hours minute second in good quality, which was uploaded by the user Kevin Powell 17 July 2019, share the link with friends and acquaintances, this video has already been watched 87,191 times on youtube and it was liked by 2.3 thousand viewers. Enjoy your viewing!
