So I’ve been working on two different projects, the one I’ll be showing today is a to do list that’s not fully complete. Although it’s not complete I do really like what I’ve done with my CSS skills that I’ve taken more time to learn. This is what I’ve came up with as of right now.
It’s very pretty I think, simple and clean. The empty space is actually where all of the to do list tasks go. So how did I get my code to look like this? Let’s start with the base HTML. There’s not much, but it does a decent job for a task manager board.
Not too bad! The most important part of the structure is the div with the class of container. It holds the two other divs of “newtask” and “tasks” that hold the task manager and the empty space that will have tasks placed within it from the user. So now lets get into the CSS portion.
We start at the beginning, with the star attribute. It’s a technique called a CSS reset, different browsers use different default margins and padding causing the site to look different from Chrome to Firefox. The star means all elements, so we’re making sure whatever browser the user is using, the margin and padding will both be zero along with box-sizing set to border-box. The body tag I used something I haven't done before, which is using two different colors for the background of the web page, I picked a 135 degree angle and I chose linear-gradient and picked a red color mixed with a blue color, so on the top left of the screen is red while the lower right is blue but meeting in the middle is where they fade into one another.
The container holding the text box that thats going to have the user type in what they want to add to the to do list. Having the min-width to 500px, we can enlarge the box while enlarging the browser window. Keeping the position absolute so it doesn't move at all. With the new task I have the box shadow for a more pleasing look, with the background color within the box being white (#ffff).
Lastly I will be talking about the CSS I used for the add button.
The button is one of my favorite things to design because i wanted it to look really nice. We start with the float so that the button will always be on the right side of the text box. The font-family I chose was Times New Roman because of all the essays I had to write over the years, I used that font and no other. I then again used the linear-gradient of red and blue. Finally I gave the text color of white, no border and when you hover the button, your cursor becomes a pointer.
That’s pretty much it for now! Thank you so much for taking time out of your busy day to read this! I’m trying every week to become a better blogger when writing out my code and turning my code into english. Hope to see you again soon!