Skip to content
OverviewSolutions
4
Comments
4
Michaeldremy
@Michaeldremy

All comments

  • kevinyuri•190
    @kevinyuriSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that I applied some concepts about class naming conventions and css better structures with variables and the scope of css.

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

    I had some issues centering the dot of the ul,ol with the text. I hope to see how other users approach this situation.

    Recipe Page

    1
    Michaeldremy•40
    @MichaeldremyPosted 4 months ago

    Looks awesome! I am unable to view the code, the Github goes to a 404 page.

    1
  • Michaeldremy•40
    @MichaeldremyPosted 4 months ago

    There are few things that look to be incorrect.

    • The size of the profile is too large, I would recommend between 50 to 80 px.
    • The spacing of the name and address and the quote are not matching the preview that Frontend Mentor gives, look more closely at the spacing of those elements
    • The text that reads "GitHub, Frontend Mentor" etc... Are not considered input fields but rather appear as clickable buttons. You can do the following to appear as buttons.
    <ul>
  <li>GitHub</li>
  <li>Frontend Mentor</li>
  <li>LinkedIn</li>
  <li>Twitter</li>
  <li>Instagram</li>
</ul>

    Now the CSS

    .card ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.card ul li {
  list-style: none;
  font-weight: 600;
  background-color: hsl(0, 0%, 20%);
  width: 100%;
  text-align: center;
  padding: 15px 0;
  border-radius: 10px;
  font-size: 14px;
}

    I would recommend reading up on Semantic HTML, I know it helped me out a lot.

    1
  • Michaeldremy•40
    @MichaeldremyPosted 4 months ago

    Looks awesome, great work! I like the BEM CSS naming!

    0
  • Michaeldremy•40
    @MichaeldremyPosted 4 months ago

    Several pieces of feedback here:

    1. Try to avoid adding padding to images it will cutoff the rounded corners.
    2. The padding within the card is off instead of a default 10px padding I would recommend analyzing the padding around the entire card first. For example top, left, and right are 16px (Figma Design has this) and the bottom is a padding of 40px resulting in padding: 16px 16px 40px 16px
    0