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 T...
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: 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! www.kevinpowell.co/newsletter
I've been working on some courses! Find out more: www.kevinpowell.co/courses
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
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 KZbin channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell

[@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!

[@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!

[@husrebel494]

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 !

[@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.

[@man_vs_life]

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

[@MotiviqueStudio]

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

[@thuhoang6603]

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!!!

[@TomkinsOkello]

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

[@juliocodes]

Thay design is looking extra crispy!

[@LorenHelgeson]

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

[@annbyrne668]

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

[@raymondmichael4987]

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 🇹🇿

[@boggeshzahim3713]

Yeah I can't see this being actually useful without localstorage

[@WebDevSimplified]

That is exactly what I did! It is like you read my mind.

[@raymondmichael4987]

Web Dev Simplified, awesomely

[@fuzzypumpkin7743]

I'm currently working on something similar with saving to database, with user auth for an insane 12-app dashboard React project. Did local storage on my first to do list (actually first JS project at all) but the problem was that I wanted to access it on my computer and phone.

[@avneet12284]

oh, i was thinking index db

[@kostiantynkarzhanov9216]

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

[@DailyIntern]

Thanks guys for the content

[@groovebird812]

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.

[@santiagopabloortiz6322]

This video was really helpful!

[@yadneshkhode3091]

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

[@joshuatao7020]

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

[@topsportscoverage9257]

Thanks for this great video!

[@kalidoss7234]

Thanks Kevin

[@enjoy...]

Top... the legend ... Thank you

[@robr4501]

what a master piece....

[@KevinPowell]

Thanks!

[@mirelmandrut8371]

really really cool video ;)

[@azus7090]

Thanks!

[@fonncatalina6464]

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

[@bikramchettri9405]

Thank you

[@SavingShredz]

You're officially a CSS wizard

[@KevinPowell]

Haha, Thanks! I had a lot of fun with this one!

[@sacrajah]

thank you.

[@tarekghosn3648]

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!

[@namikazedevj46]

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

[@The-narrow-gate]

is 'front end' referring to the HTML and CSS like you are doing in this video? or does the front end usually incorporate the Javascript portion too? I'm in the middle of a code bootcamp so I'm still new to all this but I love this video.

[@narahamashi]

for checked label how about using text-decoration: line-through; you might lose that nice transition by the way awesome video!

[@RedEyedJedi]

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

[@enjoy...]

Yes

I use atom

[@KevinPowell]

Lot of other good ones out there, but yup, VS Code is pretty great😁

[@saudalghamdi5608]

Appreciate your work Kevin

[@squirrelwise]

Love the shirt :)

[@KevinPowell]

Thanks!

[@RandomUserOnTheInterWebs]

I was looking at my subscriptions and was so confused on how there were two videos on the same subject uploaded by two different KZbinrs at the same hour.

[@sergiovaladez]

Can this be used as a template project and bundle it with webpack? If so, what would be the proper way to do it?

[@frankowusu5550]

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.

[@pathtonirvanapodcast]

Hey Kevin, looking at your files on Git, I see you have a css file and a scss file, that look the same, are they? Can you explain?

[@anthonyyeo7239]

Love the tutorial video , I have learned so much since I started watching you, however when following along with this my grid did not respond the same as yours even though my code was the same as soon as i put eh the 1fr in the gap dissapeared on a small screen, no idea how to fix it. but other than that it turned out great.

[@Patrick-iy1rb]

Does Chrome have that toggle grid system like Firefox?

[@thaynaralima6428]

At the minute 3:30 can I use the tag section for all-tasks and todo-list instead of using div?

[@kar98kthrowingknife75]

Can someone please explain the initial css he has with the root selector? thanks!

[@jaychaudhary8241]

Can someone explain me the use of aria-label please? I am new but I want to learn this. Thanks in advance.

[@adeshas83]

Thanks....cant find the rem and em links you promised.....

[@rahuljoshi8331]

there's and extra at the end of your html

[@Vapornator]

Dude, decaffeinated! 😨 ☕

[@shubhamsinghvi9338]

Where can I get the Js tutorial for this project ?

[@pieter-venter]

See my comment on Kyle's video. Big thumbs up on the idea!

[@charlesxavier77]

Why don't do stuff like you do them in the real world? I mean I think most of us are where to learn stuff for the real world. Anyway, great tutorial. I really like the custom checkbox and the line that shoots out. Maybe you can do more stuff like this in the future :D !

[@Phiz787]

Is there anything wrong with doing all of these animations around 50 or 100 MS instead of your 250-300 ms? Will that lag out browsers running on slow/old hardware? I feel like yours is not snappy and would like to reduce it

[@zachcygan]

Does anybody know why when I try to make the grid nothing shfits? Timestamp 16:20, mine will not work. Help pls

[@josipbjezancevic5697]

Hello @KevinPowell... first of all, great, great work! I have one question though. This was bothering me a lot and I see it all the time everywhere. When you click on inputs, and the line transitions on the focus event (gets thicker at 3px), all the content below also shifts by these 3px. Is this the best practice, do we ignore that fact or there is a remedy for this kind of situation?

[@KevinPowell]

If you're using outline, it shouldn't have any impact on anything around it

[@josipbjezancevic5697]

@@KevinPowellthanks Kevin, I'm just watching you explaining that in the other video. :) Big thanks from the backend dev who wants to learn CSS :P

[@ZackPyle]

Is there any way for you to screen record at a higher resolution? KZbin's compression is damn ugly at 1080. If not, I've even heard from pro videographers that you can export 1080 content at 4k and upload to YT and their bitrate will be better even though it was just originally 1080 anyway. Thoughts?

[@KevinPowell]

It looks sharp for me 🤔 I'll look into it though.

[@ZackPyle]

@@KevinPowell For example, look at the compression in "Stuff I need to do" header and the ghosting above the underline for "new task name" placeholder

[@b0red7]

hi ... question ... how can you make a clone of notion or taskade.com ?

[@hamzaijaz6850]

my border-bottom is really long i couldnt find out why?

[@josipbjezancevic5697]

Chrome (Version 115.0.5790.170, MacOS) has difficulties with the placeholder font color, so I added this line to the original css selector: .new::placeholder { opacity: 0.4; // this was added color: inherit; }

[@leomac3464]

As did my Chrome on windows 11 Version 120.0.6099.130. Thanks for the workaround.

[@luisangelodelacruz]

ive been trying to find a tutorial on how to do a to do list with a reminder functionality and also a notification funcionality using HTML and CSS, but still cant find 1. nice vid tho

[@pranitpokhrel470]

I get unable to local resource error, any fix?

[@amirabbas434]

Can you record a video about how to get better in css... I suck at it... I mean..i do alot of things that can be done in less code... What should i do

[@ltgaming1013]

copied the code 1to1 and till the lines never appear when I pres on the done task :/

[@kodcx9654]

Great work here guys. I followed along, and one of the things that i noticed is IF you add more than like 3 lists, it will impact the positioning of the "delete stuff" buttons. Anyone else experiencing this?

[@KevinPowell]

Really? I did some testing to try and make sure I caught everything, but maybe I missed this? Where does it move to?

[@kodcx9654]

@@KevinPowell For me the buttons are at the very bottom of the screen, or they don't appear at all depending on the number of lists. When they don't appear they are hidden behind the new tasks box.

[@bitworker2]

Yes, i had the same problem. More than 3 lists hide the buttons, because wrong color. How can clear this problem?

[@bitworker2]

I found a solution: position:relative add to todo-list, not to todo-body. That works.

[@jamesdemetros7501]

@@bitworker2 thank you so much

[@thanikhurshid7403]

Custom checkbox is showing after text like "text *" instead of "* text". HELP!!

[@biancakhambatta3976]

hey, um, im really new to coding, so i was wondering what the code you've written is, right at the beginning before you've actually started the content of the video

[@KevinPowell]

It's a basic HTML5 boilerplate. If you look that up you should be able to find it :) Good luck in your journey!

[@ayoubbelouadah7195]

Do we need a database to store the tasks ?

[@KevinPowell]

Nope, Kyle used localStorage to do it, check out his video and you'll see 😁

[@sohansai3250]

hello sir can i know what u have been written in starting 2 or 3 lines of code plz

[@sohansai3250]

can i get a code of starting 7 lines of code plz...anyone plz

[@robertwesterman6093]

did anyone else have problems with the clear completed tasks and delete list buttons not being in the right place? mine are all the way at the bottom of the screen

[@trumanb4706]

I did

[@ManuMarea]

Can i collect hyperlinks ?

[@vipexcode3263]

14:08 What is this?

[@blakemcdonald2511]

What Html version are you using? Html5 or Html4?

[@KevinPowell]

html5 These days, no reason to use anything else.

[@dv7551]

17:00

[@swastik7650]

.todo-list{ grid-area: active; // not working can anyone say why? }

[@erichobbs4042]

Download the finished code from the GitHub link in the description, check it against your code. Most problems are down to a typo in your code. Also, use the same browser, i.e Firefox.

[@abishek07]

Hey Kevin. I am not able to animate ::after elements. How were you able to do that?

[@KevinPowell]

I've never had any issue with it.... 🤔

[@dhakalabhiyan]

It might be so because of nesting issue... I had the same problem before and when I did it without any nesting, it worked!

[@liamolsson8472]

i've got a problem at the 16:56 mark. Whenever I write " grid-area: tasks;" nothing happens. do you have any idea of what I have done wrong ?

[@KevinPowell]

I didn't have a 'tasks' grid area set up, I did it as grid-area: lists. That might be it?

[@liamolsson8472]

@@KevinPowell thx it works now!

[@Cattychin3870]

Very low resolution... Make the code screen clear.. Remaining! Appreciation 👌

[@KevinPowell]

It was recorded and uploaded at 1080... Strange that there was an issue

[@vishwajeetraj11]

Did you make this responsive ?

[@KevinPowell]

Nope, though it wouldn't require too much work. A media query that stacks the two should do it.

[@biju7832]

Any idea why when I try to do the 'Grid' piece of code it doesnt work for me and it gives me a bunch of errors ?

[@KevinPowell]

What type of errors?

[@biju7832]

@@KevinPowell semi-colon expected where its 'display: grid;' its telling me the : should be a ; even though I wrote down exactly what you have on yours.

[@100XPercentX]

what the heck is that localhost thing im seeing how do you get that? im just curious about that.

[@KevinPowell]

In this case I think I'm using Live Server, which is a VS Code extension (other editors have similar). I also have a video that looks at setting up Gulp with live refresh and a local server too :)

[@100XPercentX]

@@KevinPowell thank you so much. That cleared up a big piece of information I was curious about

[@erinfleming4878]

This was informative, but frustrating. The code that is done in the tutorial is slightly different than the code that is referenced in GitHub. Beware

[@Loche747]

Great videos! But why don't you try to speak a little bit faster?

[@KevinPowell]

I'm honestly not sure if you're being sarcastic or not, lol.

[@Loche747]

@@KevinPowell :)) Yes, I'm joking. But I want to tell you sincerely that you are the best in css and javascript coding on youtube! So thank you very much for sharing your knowledge with us.

[@KevinPowell]

@@Loche747 thanks so much for the kind words 😁 I know at times I do talk a bit fast though, sorry about that!

[@ghaith99000]

I came here to learn JavaScript , but unfortunately this video only covered html & CSS.

[@uncleslo910]

Please make better structured videos in future, if anybody with minimal means has to watch your videos in order to learn.

[@BristlyBright]

Wow, you talk tooooooooo fast! I really like your content and have learned a lot from you!!!!!!!!!! But you should breathe more. I need to play the video at lower speed, not to hear what you say, but to not be stressed out.

[@BristlyBright]

10 minutes in and I have to say that the pace is a way bit better. It was the intro of the video that was scary fast. Now it is ok! Thanks for the info with for="" in the label element! Very useful.

[@KevinPowell]

Glad to hear that I slowed down, haha. Sometimes when I start recording I'm a bit too excited, lol

[@saplingqwason]

why or how is this a "better " [edit]: to-do app?

[@KevinPowell]

Most cover the very basics of a single list that you can add and remove items from. We wanted to make something that went deeper, with the ability to also create seperate lists as well.

[@saplingqwason]

@@KevinPowell makes sense, thanks for your reply

[@neongrid3807]

"transform-origin"... where did this come from? My biggest concern with learning web development and in particular with HTML & CSS, is that these are easy to understand, but there are so many possibilities ...how on earth do you keep all this in mind and more importantly how to know what is best used for what and when? OK, experience is a great help, but I don't think that every regular developer is lucky enough to end up in a job where he can create and invent new and cool stuff most of the time... in order to be "up to date" with all these cool properties, animations, transitions, .... I heard some YT developers say that mostly (web-)developers end up in a repetitive job where they must maintain (a part) of some boring form or a button or a section of a boring website. So if there is some truth in this, I'm guessing that most developers keep doing web development as a hobby and this is when they learn these cool things.

[@mickylaz5949]

Believe me when I said you're very good at these things honestly speaking but isn't your styling way too much?

[@NERO-ez1mn]

sorry. but every time you say "NORMALLY I DON'T" it feels like we are learning bad habits of coding & it is so annoying.