Okay, so today I started this “15 of 800” thing. Basically, it’s about picking one small task and sticking with it every day. I chose to improve my front-end skills. I want to get better at layouts, you know, making things look good and work well on different screen sizes.
The Start
First, I went to do my daily task. It is a simple prictice about the front-end skills from a study website, It is good for beginner.
Getting My Hands Dirty
So, I picked a simple design . The task seemed easy enough at first. A title, a paragraph, and a button. I started to write the code and I decided to create a basic HTML structure. Added a div for the container, an h1 for the title, a p for the paragraph, and a button. Piece of cake, right?
Hitting a Wall (and then climbing over it)
Then came the CSS. I wanted the title and paragraph to be nicely spaced, and the button to be centered underneath. I started playing around with margin and padding. Man, getting things to line up perfectly is trickier than it looks! I spent a good amount of time tweaking the numbers, moving things a few pixels this way and that way. Finally got it looking decent on my laptop screen.
Next step: responsiveness. I resized the browser window, and…yikes! Everything got squished. The button was all messed up. Okay, back to the CSS. I added some media queries to adjust the layout for smaller screens. This involved changing font sizes, adjusting margins, and making the button take up the full width.
Little by Little
After, and some other small adjustments, I finally got something that looked pretty good on both large and small screens. The layout changes and everything stays readable. Success!
End
The key is consistency. I have to keep this up, one small step at a time. Today was just about basic layout, but tomorrow I’ll tackle something else. It’s all about those small wins, day after day.