Skip to content
Submitted 5 months ago

IGNORE SOLUTION COMPARISON AND GO STRAIGHT TO SITE!!

Matthew•40
@gmatt20
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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.

Community feedback

  • Oshu•630
    @oshudevPosted 5 months ago

    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
    0
    Matthew•40
    @gmatt20Posted 5 months ago

    @oshudev thank you very much! Your suggestions and solution are tremendously helpful and I am grateful for your help. Please come back when I post another solution! :)

    0
  • Shaleen Chowdhary•80
    @shaleenchowdharyPosted 5 months ago

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

    0
    Matthew•40
    @gmatt20Posted 5 months ago

    @shaleenchowdhary Preview the site, do not look at it from the design comparison

    0

Please log in to post a comment

Log in with GitHub

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