Skip to content
OverviewSolutions
11
Comments
7

ManPP

@WhitezerD130 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

  • Testimonials Grid Section

    ManPP•130
    Submitted 6 months ago

    Everything as this community will point out.

    1 comment

  • Frontend Mentor: Four-Cards-Feature

    ManPP•130
    Submitted 6 months ago

    -When i used media-queries, the icons of two cards were out of place. I don't know why it occurred. So i have to adjust their top on the media queries like this

    .service-team-builder .img--service-icon , .service-calculator .img--service-icon { top: 5%; }

    -I need a bit help of naming convention on CSS selector which i tried to follow BEM (Block, Element, Modifier). I think what i used so far was not corrected.

    1 comment

  • Frontend Mentor : Product Preview Card

    ManPP•130
    Submitted 6 months ago

    From the challenges so here were the problems

    • I have a problem to figure out how to make equal width of the two sections equal. -I have tried to use flex-grow for each one and set flex-basis to 0 but it doesn't work. -The solution i've use, i don't think it's the best approach. -What's the best way to adjust width on the element according to my project. and should use rem or em. because no matter what it was inherit from their parent (in this case was html) -I saw the proper line-height settings here : https://www.joshwcomeau.com/css/custom-css-reset/ and i use this for my css rules
    • { line-height: calc(1em + 0.5rem); }

    But the line height of my h1 was overlap. so i adjust it manually after CSS reset. So i still don't clear how to use this rule properly.

    1 comment

  • Recipe-Page

    ManPP•130
    Submitted 6 months ago

    overall and list styles, marker, pseudo selectors

    2 comments

  • Social-Link-Profile

    ManPP•130
    Submitted 7 months ago

    1.Semantic tags 2.Width, Height adjustment 3.All of the missing parts i didn't notice

    1 comment

  • Basic HTML and CSS

    ManPP•130
    Submitted 7 months ago
    1 comment
View more solutions

Latest comments

  • JJ-codes-9•110
    @JJ-codes-9Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    This challenge helped me solidify my understanding of CSS Grid and how to structure content in a grid format.

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

    Optimizing the media query. Understanding how grid works and utilizing "span" for alternative layout options.

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

    Open to any feedback especially with media query.

    Testimonials Grid Section Solution

    1
    ManPP•130
    @WhitezerDPosted 6 months ago

    Good job man, keep going.

    0
  • ManPP•130
    @WhitezerDPosted 6 months ago

    -I think you should use more semantic tags in html than <div> elements. -It's better to styles from mobile or smaller screen first and add more later in a bigger sceen. -I notice that on the desktop screen, .two-card-section was not same size as the other container

    BTW nicely done, keep doing the good work.

    0
  • LonlySoft•170
    @LonlysoftSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Now it's time to dive into Responsivity and how to do it. This time I tried go into "mobile-first approach". And I heard your feedbacks in previous challenges. Now There are more max-width and max-height compared than before. There's still some in the code if you read it, but it's better than before;

    I used the initial value in width and height in the media query of the desktop and the overflow: hidden to make the image get cropped and yet maintain its non-round corners.

    Oh, and I also finally wrote my first `````` tag. Such a moment...

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

    I struggled with the SVG. I usually go and paste svgs icons as inline because my IDE randomly decides just not to load SVG files, there wasn't any issue with that, the problem was that it wasn't scaling properly. So I added a viewbox to the icon because there wasn't. Yet it wasn't scaled so after that I just used transform: scale(); and call it a day. I also changed the fill attribute to match text's color, but I think I could do it in CSS anyway even if it was in a separated file.

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

    Sometimes when the page is reloaded in desktop, the image is replaced by the mobile image. What is needed to make that replacement don't happen?

    Product preview

    1
    ManPP•130
    @WhitezerDPosted 6 months ago

    Hi, good work so far. -I notice that you didn't remove the <div class="attribution> at the bottom. -And for future projects you might considering use CSS reset which will help you overwrite default html margin, padding, box-sizing model and furthermore benefits. Here's the link : https://www.joshwcomeau.com/css/custom-css-reset/

    Marked as helpful
    0
  • ManPP•130
    @WhitezerDPosted 6 months ago

    Keep up the good work.

    1
  • MartianKiss•30
    @MartianKissSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    it went pretty well

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

    I encountered difficulties with managing my time between this project and other responsibilities

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

    I'm happy with how it turned out, although there's always room for improvement, so if you have any suggestions, feel free to share them.

    Social_Links_Profil

    1
    ManPP•130
    @WhitezerDPosted 7 months ago

    You should use div tag as least as necessaries because in semantic terms it mean nothing to screen readers who use assistive technology.

    Also i thought you shouldn't usr <br> at the button tags for this case. Flex will help you do all the job.

    0
  • muiruri3000•400
    @muiruri3000Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    ##learnt about align-self:flex-start to change width of a paragraph whose parent is a flexbox to not be full width

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

    specifying different width for svg adapted the parent div and it adjusted accordingly. don't know if this is right or not?

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

    using figma and bringing over the designs to use.

    blog review card using flexbox

    1
    ManPP•130
    @WhitezerDPosted 7 months ago

    It would be nicer if you set padding: 0, margin: 0 in css reset instead of html and body. Good job. From another newbie

    1
View more comments