Skip to content
OverviewSolutions
6
Comments
9

AB

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

Latest comments

  • P
    Prem Kumar•370
    @prem-kumart
    What are you most proud of, and what would you do differently next time?
    • Project time has drastically reduced compared to my first project on font-endmentor.
    What challenges did you encounter, and how did you overcome them?

    -I faced difficulty in arranging the desktop version grid.

    • Overcame the challenge by using ration(fr) grid instead of using px from Figma file.
    What specific areas of your project would you like help with?
    • How can I better structure my code and do it in less steps?

    feature-card-responsive-design

    1
    AB•60
    @rvupmo33

    Looks good!

  • AB•60
    @rvupmo33

    Looks good!

  • Jo_WithVision•90
    @Jo-with-vision
    What are you most proud of, and what would you do differently next time?

    I was glad to get a chance to use the picture element for this project, as it's a method I hadn't utilised before.

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

    I didn't have the design file, so my challenge was getting the max-width of the card correct. I seemed to have issues with whitespace under the image when making the content too tall - presumable because of the limitation of the project image size. I had to play around with the sizes until it was right.

    Product Preview Card

    1
    AB•60
    @rvupmo33

    Looks good!

  • P
    sharangb•160
    @sharangb
    What are you most proud of, and what would you do differently next time?

    I'm proud of producing a solution that is as close to the original design as possible.

    One thing I would do differently is that instead jumping into coding immediately, I would note down common styles and plan the approach better.

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

    I struggled with understanding how, when working on the mobile view, the list-items would overflow outside the parent's reduced width, where any other element's width would be self-corrected.

    Ultimately, it took a lot of inspection of the html elements to realize that the list item was inheriting its width from the parent, but would get pushed to the right by the list marker.

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

    I would like general feedback on my CSS, if I am accidentally using any anti-patterns (such as using the wrong size units).

    I would also like to know if I have made the right decisions with regard to html tags. Especially in the nutrition section, I went for a header-less table instead of a regular div grid, for which I had to write custom CSS just for the last column and last row. I did this because my understanding is that it helps accessibility, but I would like confirmation from a more experienced reviewer.

    Recipe Page - Beginner HTML, CSS project with basic responsiveness

    1
    AB•60
    @rvupmo33

    Looks really good!

  • Manish Kumar Rana•50
    @ManishKrRana
    What are you most proud of, and what would you do differently next time?

    It was quite easy.

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

    no challenges

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

    nothing

    Responsive Social Links

    2
    AB•60
    @rvupmo33

    Hi!

    Your project looks good.

    To improve it you could estimate size using your computers editing app. When you crop an image it will give you the height and width!

    Happy coding🎉

  • Julianna Messineo•290
    @mathematiCode
    What are you most proud of, and what would you do differently next time?

    I'm proud of quickly I was able to do this challenge compared to my other ones. It helped to go back and do this (one of the easier ones) before continuing the harder challenges I had started like the FAQ accordion.

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

    I couldn't figure out a great way to center the card on the verical axis. I ended up using margin-top: 5%; but I imagine there's another way to do this with flexbox. I tried this:

    body {
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
}

    but the card was still sticking to the top for some reason.

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

    I would love to know if there's a better way to have the card centered vertically than using margin-top.

    I also would like feedback on accessibility ways to make my CSS more efficient. One thing I was wondering was what to write for alt text for the authors profile picture. Would people using screen readers like me to describe the person in the profile picture or would that just be a nuisance? Is there a way to provide more information, like a description of the author, where people using screen readers can access it if they choose to but it's not in the way?

    Blog Preview Card with Flexbox

    2
    AB•60
    @rvupmo33

    Hi your card looks so good!

    The way I centered my card was by using: (though this isn't using flexbox)

    position: fixed; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%);

    The tutorial below shows you the code in action!

    CSS - How to center element using CSS transform property and translate function

    If you want a solution using flexbox: 4 Quickest Ways to Center Div with CSS

    Hope that helped :)

View more comments