to do list image This is a topic that many people are looking for. khurak.net is a channel providing useful information about learning, life, digital marketing and online courses …. it will help you have an overview and solid multi-faceted knowledge . Today, khurak.net would like to introduce to you How to Program a Todo List Web Application: bootstrap, html, css . Following along are instructions in the video below:
“Youtube and welcome to another video in this video. I m going to show you you how to do a to do this app that looks similar to this one is the ui ux and the interface in the initial states. As you add to do list item. They will show up in this section right here if i inspect the application.
I can see that let me expand this as you can see there is a unordered list. But it s set up display set to none that s why you can see. But if i set the display. If i check the display properly now this is what the application should look once you start adding to do list items so so let s get started the first thing.
I m going to do i m going to actually let me leave the developers to open that a serious issue at work. And i m going to head over sublime and i m going to open a new file. And i m going to save it inside a folder code to do this i m going to call my file index dot html sorry for the sirens in the background and so i m going to type html. I m going to press tab.
And that s going to give me the basic html page. And i m going to inside the title on what to call to do this in next. I m going to since i m using answers. I m going to use bootstrap.
I m going to head over to get bootstrap calm and next. I m going to go over documentation in the documentation. I m going to actually it s right here says getting started. I m going to copy the bootstrap sitting here and i m going to add it into my project right underneath the title tag.
I m going to paste it and then i m going to save the document next. I m going to search for let me leave this always on top and then next. I want to search for forms and i m looking for something similar as some only one a an input box in a submit button so i m going to grab this form right here and i m going to modify. It and i m going to add it inside the body section.
I would properly indented there we go and i m going to open it into my browser see what it looks like let me inspect it okay so as you can see it takes the whole width of the page. So there are a few things that we started need to start doing and the first thing. I m going to do and why to create a div with class container and i m going to add the form. I m sure they want to also play a dear.
The classroom and i m going to put my form inside the road and i m going to probably indented and we re going to save it refresh the page and that looks better also to make it easier on my eyes. I m going to change the background color to something other than white. So i m going to say style and i m going to press tab and i m going to put my style right here i can always move it to a different file of course the style needs to go inside the head section so i m going to say buddy and then i m going to give you a background color. And i let me.
See my background color can i give this we select the body and think i do with this one and save it refresh in that s it okay so now i m going to start eliminating things from my form. That i don t actually need like for example. I don t need this whole section right here. I also don t need the labels.
So i m going to take down one answer. And i don t need this small section. We ll save refresh. And see what i got okay that looks better so.
What i want to do now. I want to add an h1 tag. And i m going to call this to do this and i m going to give you a class of tech center. And also display for will displayed one actually and then we set that save it in yep so in the body next thing.
I m going to do i m going to give it a color of white. There we go in the underneath the header. I m going to use a p type. And i m going to say welcome to my to do with this application.
And i m going to save it and i m going to add some classes to my vita for example. I want to make idli and i m going to say tax and also i m going to say that refresh. And i can still increase the size of this arm of this of this p tag of this text. But before i want to work on the on the input form for example.
I want so instead of this band being right here this button needs to go inside the arm or next to the hip. And fulfill so i m going to create right here is pam type and i m going to bring my button inside the span turn also i want to para class to my 4 in for example what to make a column take and i want to shatter so i want to say mx power. I m going to say that refresh the page and i got the right length. However i still need to bring this inside when next to next to the forum next to the input field so in order to do that i m going to change this this class from form groups to into good save it refresh.
And now i have the the submit button next to or inside the same the same intro group and that s how it looks. So now i m going to i start styling. It i m going to bring in more to the center of the page as well as i m going to give it a background in going to use a background overlay on top of the of an image on top of our background image to make it look better so i m going to go to inside and inside. My star point to add row for my h1 tag.
And i m going to say margin top. I would call it 1512 and let s see what the position is right now. So it might be a little bit too far down let me say something by 13 refresh. It s a little bit better also i want to increase the size of this text right here.
So i m going to add a font size rule to my body section of 15. Round say that and not the network. Okay since my pizza has a leap class. I m going to probably write the link class and i m going to add a font size of 2 when save a refresh.
And that looks better my can also bring this arm instead display to the cell display want to display so for the main title of the obligation that looks better. Let me add a margin bottom zero pixels okay. And that is starting to take form as you can see it already looks better. We already managed to add an input fill in the title.
So next. We are going to add the background with the transparent background overlay. So for that i m going to use this image. That i have which is an image of chicago downtown chicago in points.
You add it right here in the body section. I m going to cover this background color and i m going to say background. Image url open double quotations and i m going to save. It also i m going to say men type 100 h.
And let s say that nice. I m going to have background position. Just going to be sarah. I m going to say background cover background size cover in background repeat not repeat.
I m going to say that not going to the first page and i already have my background. Okay so next. We are going to add our overlay transparent background. And for that we are going to add another class right after the body tag.
So we re going to say there that hero and now we re going to bring everything inside our body and that we previously typed inside the body section. We re going to bring it inside the hero class. We re going to paste it there you want to indent this section right here. I think i think that s enough and so next.
I m going to go back into css and i m going to create the hero css rule and go to be a background color. So i m going to say i key ba in the three first numbers are going to be the color. So i m going to say some like three million three and then i m going to say 05. The fourth number is going to be the transparency level that i want for my color.
I m going to save it i m going to refresh it and i believe at least a comma here okay and so i can always change the the color. But i want the color to take the whole the whole page. So next. I m going to say man hi eh.
I mean with 100 v w. And top. I m going to say zero bottom 100. And finally i want to say position absolute.
I m going to say that i m going to refresh the page and now notice actually i believe this is bottom zero. And refresh. The page again yes and so notice how it looks better. I can always change.
The background overlay. The transparent background overlay choose a different background. Refresh. And yes looks a lot better.
So now. I m going to do the unordered list. The list items and am going to set it to display none so i m going to put that one right at the end of my form. So.
The form starts right here. Actually starts right here somewhere to put a bracket smart. Watch you wear another row and i m going to create a lot of this and i m going to add a couple list items. So i m going to say for the first one this is a to do list.
I think you need to save it actually i m going to copy a couple times. But to say that and i m going to refresh it and the knowledge they come all the way up here. And that is because i need you give it some of the properties of the form for example. I need to add my class of comp that will be eight eight rows.
You know in all different sizes for medium. Large and small extra small so in what is said to sell mx auto. What refresh that and that ll bring it i m rather than need the phone. So the next thing.
I wanted i want to remove the bullets from every single list item. I m going to go in add another rule. This one is going to be for nautilus and they stop. None.
Not sure that stop actually list lists stop by the way you don t have to know. This by memory you can always go online and search a specific room. And as you can see that bullets now were removed. I once you create some sort of separation given more margin at the border or a line between the the info field and the list items down at the bottom.
It makes it easier to separate one section of the application from the other one so i want to give it a margin top. So the order is three children and i m going to give it also a border to pixels solid white. Say that and it s already looking a lot better so for the for every list item. I want to also separate them with some sort of a border between a line in between them.
Also i want to add a checkbox in they say on this side right here so every time a list item gets done you can check it off. And maybe some sort of odd. I strike two to denoting that that item is already been completed so the next step is to create a rule for everything on this item in i would say border bottom one pixel. Solid you know how to make it white to say padding top.
05 wrap in poly bottom there s a 05. Wrap and you gonna save it let s see what i got okay so we started to look a lot. Better. So.
The only thing missing. These are the check boxes and set the unordered list to display none so it is it is hidden by default so i m going to add the check box right here inside everything on this item swamp went to head back into bootstrap this time. I m going to check box search for check boxes. And this one seems to be okay.
I just need the input for that check box. I want to copy right here. I m going to paste it inside lights. We list items say that go back into my to do list and refresh it and now notice that i have my checkbox here.
However it s getting to the left and i want to make it float to the right does the first thing. I m going to do a way to add. I m going to start styling my check box. I m going to say input input type equals checkbox in doubles a float right and let me save and refresh that in nice now have it push to the right so next.
I m going to give it a height in the width. Someone say hi and then said. 220 pixels. With most of the 20 pixels.
I m going to give the border of one pixel solid the initial solid and initially we ve said to wipe. Me to say that and refresh. It then looks a lot better. However still you know it s not completely centered very good and finally.
I m going to set display to none actually. It is not here. It is my not on this refresh. The page and they will not let it s gone.
Thank you for watching all the articles on the topic How to Program a Todo List Web Application: bootstrap, html, css . All shares of khurak.net are very good. We hope you are satisfied with the article. For any questions, please leave a comment below. Hopefully you guys support our website even more.
“In this section I go over how to make a todo list web application. User interface UI, UX design with html, css, and bootstrap. background image with transparent overlayngithub linknhttps://github.com/zentech/todoList”,
todo, list, web application, html, css, ui, ux, bootstrap, background image, transparent overlay