Skip to content
Submitted 12 months ago

IGNORE SOLUTION COMPARISON AND GO STRAIGHT TO SITE!!

Matthew•40
@gmatt20
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I am proud of making general CSS style code for main, footer, and image. By declaring for 3 big elements in CSS, everything has been able to ideally be aligned (for the most part) and have a consistent font.

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

I had difficulties with CSS and styling as usual. My main issues were having everything aligned perfectly. I have used the div element multiple times which has helped. I am particularly concerned about CSS layout and aligning code. I have coded so that it is perfectly precise. This form of code is very particular, and I want to ideally make them general rather than specific.

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

I want to continue my layouts and aligning in CSS. Again, I want to improve my skills in CSS so I can make awesome looking websites! The looks is where I am difficulties at the moment.

Code

Please log in to post a comment

Log in

Community feedback

  • Oshu•760
    @oshudev

    Hello there 👋. Good job on completing the challenge !

    Here are my basic suggestion for you to improve on:

    • Create a basic css reset so that it's to work on styling. Here is an example:
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

    This snippet allows you to reset browser default for margin and padding. If you notice there is box-sizing that is included. The CSS box-sizing property allows us to include the padding and border in an element's total width and height. You can read more here if you are interested.

    • In terms of HTML structure, I suggest you group elements to create a well structured HTML semantic. You can check my solution to understand what i meant. It will be easy for you to layout and style webpage or components if know how to structure HTML properly.

    This section is css specific suggestions:

    • You should declare font-family in the body tag. It also should have a fallback font just in case your primary font don't work, e.g. font-family: 'Figtree', sans-serif.
    • If you want to define margin or padding to only left and right, you can use margin-inline or padding-inline. Similarly if you want to define margin or padding to only up and down, you can use margin-block or padding-block.
    • Instead of declaring margin or padding like this padding: 8px 15px 8px 15px;, you can rewrite it to padding: 8px 15px;.

    You can re-generate your screenshot to reflect the latest changes.

    I hope you find it useful! 😄

    Happy coding!

    Marked as helpful
  • Shaleen Chowdhary•80
    @shaleenchowdhary

    Matthew, it looks like the image isn't loading.

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