Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blogpost, my second challenge

shaza-m 20

@shaza-m

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

Learnt about few css function's like box-shadow, finally managed to center div's correctly

What challenges did you encounter, and how did you overcome them?

.

What specific areas of your project would you like help with?

There is an issue with distance between paragraphs of text in the content div so it doesnt match the original 1:1 and I dont have any idea how to fix it, also hyperlink to "/" doesn't work in the github hosted site so the text "HTML & CSS foundations" isn't properly active when hovered with mouse.

Community feedback

P
Steven Stroud 9,320

@Stroudy

Posted

Hello again fellow coder, Fantastic effort on this! You’re really nailing it. Just a few things I noticed that could make it even better…

  • Avoid using id selectors for styling in CSS because they are too specific and hard to override, making your styles less flexible and maintainable. Instead, use class selectors (.), which are reusable and more manageable, allowing for better control over your styles and easier updates.

  • Here you have 3 containers all doing the same get rid of 2 and just leave the <main>,

  <main>
    <div id="container">
      <div class="box">
      </div>
    </div>
  </main>
  • Using a full modern CSS reset is beneficial because it removes default browser styling, creating a consistent starting point for your design across all browsers. It helps avoid unexpected layout issues and makes your styles more predictable, ensuring a uniform appearance on different devices and platforms, check out this site for a Full modern reset

  • Line height is usually unitless to scale proportionally with the font size, keeping text readable across different devices. Best practice is to use a unitless value like 1.5 for flexibility. Avoid using fixed units like px or %, as they don't adapt well to changes in font size or layout.

  • For future project, You could download and host your own fonts using @font-face improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable. Place to get .woff2 fonts

You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord