Creating a better todo app - the HTML and CSS

Подписаться 915 тыс.

Просмотров 86 тыс.

50% 1

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 RU-vid channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell

Опубликовано:

7 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 132

@WebDevSimplified 4 года назад

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 4 года назад

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 4 года назад

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 !

@man_vs_life 4 года назад

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

@zhjiyun 4 года назад

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.

@MotiviqueStudio 2 года назад

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

@thuhoang6603 2 года назад

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

@annbyrne668 4 года назад

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

@TomkinsOkello 4 года назад

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

@LorenHelgeson 4 года назад

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

@juliocodes 4 года назад

Thay design is looking extra crispy!

@kostiantynkarzhanov9216 Год назад

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

@raymondmichael4987 4 года назад

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 4 года назад

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

@WebDevSimplified 4 года назад

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

@raymondmichael4987 4 года назад

Web Dev Simplified, awesomely

@fuzzypumpkin7743 4 года назад

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 4 года назад

oh, i was thinking index db

@joshuatao7020 4 года назад

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

@groovebird812 4 года назад

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.

@DailyIntern 4 года назад

Thanks guys for the content

@yadneshkhode3091 3 года назад

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

@santiagopabloortiz6322 2 года назад

This video was really helpful!

@topsportscoverage9257 2 года назад

Thanks for this great video!

@kalidoss7234 4 года назад

Thanks Kevin

@fonncatalina6464 3 года назад

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

@SavingShredz 4 года назад

You're officially a CSS wizard

@KevinPowell 4 года назад

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

@enjoy... 4 года назад

Top... the legend ... Thank you

@The-narrow-gate 3 года назад

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.

@pathtonirvanapodcast 3 года назад

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?

@robr4501 4 года назад

what a master piece....

@KevinPowell 4 года назад

Thanks!

@namikazedevj46 2 года назад

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

@azus7090 4 года назад

Thanks!

@saudalghamdi5608 2 года назад

Appreciate your work Kevin

@thaynaralima6428 Год назад

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

@mirelmandrut8371 4 года назад

really really cool video ;)

@bikramchettri9405 4 года назад

Thank you

@sacrajah 3 года назад

thank you.

@tarekghosn3648 2 года назад

thank you

@sergiovaladez 2 года назад

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

@narahamashi 4 года назад

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

@FuzzyAnkles 2 года назад

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!

@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

@Patrick-iy1rb 4 года назад

Does Chrome have that toggle grid system like Firefox?

@josipbjezancevic5697 10 месяцев назад

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 10 месяцев назад

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

@josipbjezancevic5697 10 месяцев назад

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

@RedEyedJedi 4 года назад

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

@enjoy... 4 года назад

Yes

4 года назад

I use atom

@KevinPowell 4 года назад

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

@adeshas83 4 года назад

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

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

@shubhamsinghvi9338 3 года назад

Where can I get the Js tutorial for this project ?

@jaychaudhary8241 3 года назад

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

@b0red7 3 года назад

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

@kar98kthrowingknife75 3 года назад

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

@rahuljoshi8331 3 года назад

there's and extra at the end of your html

@charlesxavier77 4 года назад

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 !

@biancakhambatta3976 3 года назад

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 3 года назад

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

@zachcygan Год назад

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

@RandomUserOnTheInterWebs 4 года назад

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

@frankowusu5550 4 года назад

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.

@ltgaming1013 2 года назад

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

@pranitpokhrel470 4 года назад

I get unable to local resource error, any fix?

@amirabbas434 4 года назад

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

@ZackPyle 4 года назад

Is there any way for you to screen record at a higher resolution? RU-vid'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 4 года назад

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

@ZackPyle 4 года назад

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

@pieter-venter 4 года назад

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

@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

@Vapornator 4 года назад

Dude, decaffeinated! 😨 ☕

@hamzaijaz6850 3 года назад

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

@abishek07 4 года назад

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

@KevinPowell 4 года назад

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

@dhakalabhiyan 2 года назад

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

@thanikhurshid7403 3 года назад

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

@liamolsson8472 4 года назад

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 4 года назад

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

@liamolsson8472 4 года назад

@@KevinPowell thx it works now!

@squirrelwise 4 года назад

Love the shirt :)

@KevinPowell 4 года назад

Thanks!

@ayoubbelouadah7195 4 года назад

Do we need a database to store the tasks ?

@KevinPowell 4 года назад

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

@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

@ManuMarea 2 года назад

Can i collect hyperlinks ?

@blakemcdonald2511 4 года назад

What Html version are you using? Html5 or Html4?

@KevinPowell 4 года назад

html5 These days, no reason to use anything else.

@biju7832 4 года назад

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 4 года назад

What type of errors?

@biju7832 4 года назад

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

@josipbjezancevic5697 10 месяцев назад

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 5 месяцев назад

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

@robertwesterman6093 3 года назад

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 2 года назад

I did

@vipexcode3263 4 года назад

14:08 What is this?

@vishwajeetraj11 4 года назад

Did you make this responsive ?

@KevinPowell 4 года назад

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

@100XPercentX 4 года назад

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

@KevinPowell 4 года назад

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 4 года назад

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

@kodcx9654 4 года назад

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 4 года назад

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

@kodcx9654 4 года назад

@@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 3 года назад

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

@bitworker2 3 года назад

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

@jamesdemetros7501 2 года назад

@@bitworker2 thank you so much

@swastik7650 4 года назад

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

@erichobbs4042 4 года назад

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.

@Cattychin3870 4 года назад

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

@KevinPowell 4 года назад

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

@dv7551 3 года назад

17:00

@erinfleming4878 4 года назад

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 4 года назад

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

@KevinPowell 4 года назад

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

@Loche747 4 года назад

@@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 4 года назад

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

@uncleslo910 Месяц назад

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

@ghaith99000 3 года назад

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

@neongrid3807 3 года назад

"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.

@BristlyBright 4 года назад

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 4 года назад

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 4 года назад

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

@cwasonfauna 4 года назад

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

@KevinPowell 4 года назад

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.

@cwasonfauna 4 года назад

@@KevinPowell makes sense, thanks for your reply