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
Watch video Creating a better todo app - the HTML and CSS online without registration, duration hours minute second in high quality. This video was added by user Kevin Powell 17 July 2019, don't forget to share it with your friends and acquaintances, it has been viewed on our site 87,19 once and liked it 2.3 thousand people.