Creating a better todo app - the HTML and CSS

From the creator

Watch part 2 where Kyle adds the JavaScript to make this work over on Web Dev Simplified: https://youtu.be/W7FaYfuwu70 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-list-collab ///// 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: https://discord.gg/nTYCvrK 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: https://youtu.be/h24noHYsuGc --- Support me on Patreon: https://www.patreon.com/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: https://www.instagram.com/kevinpowell.co/ Twitter: https://twitter.com/

Published 2019-07-17 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.