Skip to content
OverviewSolutions
4
Comments
4

Michaeldremy

@Michaeldremy40 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Recipe Page + CSS Flexbox

    Michaeldremy•40
    Submitted 4 months ago

    I used a media query and wrapped a div around the img tag in order to get the image to go across the screen. I applied padding to the wrapped div and then removed the padding when on a smaller screen. Please provide feedback if there is a better way.

    I am not super familiar with using local fonts and importing them using @font-face. I tried to reduce the reuse of font-family but creating a heading and subheading class with different colors, and font-family.

    Please provide any other feedback!

    1 comment

  • Social Links Profile Page - CSS Flexbox (Semantic HTML)

    Michaeldremy•40
    Submitted 4 months ago

    I am really looking to improve my Semantic HTML, please provide feedback.

    Provide any other feedback and I will take it into consideration, thanks!

    3 comments

  • CSS Flexbox + Figma Design - Blog Preview Card

    Michaeldremy•40
    Submitted 4 months ago

    I created a class called "card-container" and put it on the main HTML element. Would it be better to create a div or section and give it a class rather then adding that class on the main tag?

    I added the colors to the :root of the CSS file for reusability. What is the proper way to do it for font-family or font-weights?

    Basically how can I improve reusability using CSS variables?

    3 comments

  • HTML/CSS Flexbox + Figma Design

    Michaeldremy•40
    Submitted 4 months ago

    I would like to know if targeting the body for background color was correct or should I have made a container and wrapped my HTML in that container.

    How can I improve my class naming.

    Is there a way to streamline my CSS? (I kept the styles in the style tag intentionally)

    2 comments

Latest 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