Blog preview card using only HTML, CSS

Community feedback

• 

  P

  Katrien Schuermans•1,420

  @katrien-s

  Posted 6 months ago

  Honestly, no matter which screensize I look at your project, it's all messed up. When I look at your code, I have tons of questionmarks and 'why did you do it like this?' popping up. It's very hard to find a where to start giving you feedback.

  • You centered the .main-card using position:absolute. You could do that, if you know how positioning works. But it is also one of the hardest things to learn as a beginner so it's advised to use it as least as possible. Tip: The fastest way to center vertically & horizontally with CSS

  • A lot of your elements have a transform which you've used to put them in position. You could do this a lot more simple using padding on your main-card.

  • If you declare the font-family on your body, there is no need to declare it anywhere else again, unless the item has a different font-family.

  • When writing HTML, id's are most commonly used for when you need access to that element in JavaScript. For CSS, use classes

  Difference Between IDs and Classes While classes and IDs may seem similar at first glance, they have distinct purposes and use cases:

  Classes: Classes are designed to group multiple elements together. They allow you to apply shared styles or behaviors to various elements throughout your webpage.

  IDs: IDs, are used to uniquely identify individual elements. They provide a way to target specific elements for styling or manipulation.

  We've all been here, messing up and being a bit clueless. We only learn by making mistakes. So surely don't give up, because coding is fun.

  Have a few more lessons and try again. One of the better online tutors is Kevin Powell and he just released an HTML & CSS for Absolute Beginners

  02