This week I built my first landing card UI using only HTML and CSS, and it taught me more than I expected about the basics. I started with a simple card containing a heading, a short paragraph, and a button, and tried to make it look clean on both a laptop and a phone screen.
The first lesson was structure. Using semantic HTML helped a lot: a main section for the page, a heading in the right order, and a real button element instead of a styled div. When the structure was clear, the CSS became much easier to write and to fix when something looked wrong.
For the styling, I learned how much small details matter. Flexbox helped me center the card, padding gave the text room to breathe, and a little border radius and shadow made the card feel separate from the background. I compared my layout ideas with a simple example to remind myself how a basic page is put together, then wrote my own version from scratch.
My biggest struggle was spacing. At first everything felt either too cramped or too far apart, so I slowed down and changed one value at a time. That simple habit made debugging much calmer. Next I want to practice responsive design and make the card adapt better to very small screens.
Top comments (0)