Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
27
Comments
8
BledanIT
@BledanIT

All comments

  • shahjghst•40
    @shahjghst
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    The thing I'm most proud of is getting the "main" container to center onto the center of the page. Next time I will remember to automatically set a minimum height to my body if I need to create something similar to this project again.

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

    My biggest challenges were using a flexbox to center the container onto the center of the page and spacing with margins and padding to make the container look exactly like the project page. I overcame the flexbox issue by setting a border around my container and playing around with flex-direction, align-items and justify content to see how I could get it to center while also messing around with the size of the body container. Margins and padding issues were resolved by looking at the figma file for exact spacing between the image and text and seeing what padding the container needed.

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

    -I want to know is there a better way of making the centered container as I created a container with reduced measurements (I set the width to 288px and 443px to the height and increased it by adding a padding 16 px 16px 40px 16px) and used padding to get the exact measurements I needed?

    -Was there a better way of centering my "main" container instead of using a flexbox?

    -Is my html semantically correct?

    -How do you go about getting the exact spacing that you needed between the sentences and the image?

    Desktop Solution using CSS Flexbox

    2
    BledanIT•370
    @BledanIT
    Posted 8 months ago

    Excellent rendition! I would reduce the heading’s font size. As for a way to center things I found a neat trick yesterday in another solution that involves creating a macroelement which gets display: grid and place-items: center

    Marked as helpful
  • Raza Siddique•200
    @razzasid
    Submitted 8 months ago

    testamonial grid section

    1
    BledanIT•370
    @BledanIT
    Posted 8 months ago

    Very nice! Only need things are increasing the overall size and font sizing. Very neat centering technique through grid body and place-items!

  • mehedihasan1179•150
    @mehedihasan1179
    Submitted 8 months ago

    Four card feature section

    1
    BledanIT•370
    @BledanIT
    Posted 8 months ago

    Very good, everyhting should be moved a bit upwards and the cards should be a bit larger.

  • Tushar Jetagi•240
    @TusharJetagi
    Submitted 8 months ago

    Product Preview Card

    2
    BledanIT•370
    @BledanIT
    Posted 8 months ago

    Very good attempt, some minor tweaks in sizes are needed, particularly font sizing and a bit less height for the card.

  • Chowder300•30
    @Chowder300
    Submitted 8 months ago

    Recipe Page using HTML and CSS

    1
    BledanIT•370
    @BledanIT
    Posted 8 months ago

    The thing that really stands out is the different font format used throughout the page. I think it's because the fonts are not imported, you can do it with two lines in the html head section. Look for the style guide delivered with the challenge for more informations.

  • P
    wiceldric75•340
    @wiceldric75
    Submitted 8 months ago

    Social links profile

    2
    BledanIT•370
    @BledanIT
    Posted 8 months ago

    Almost perfect! There is only a tiny difference in size for name and location text but the rest is spot-on!

  • Christian Dong•30
    @namdtfu
    Submitted 8 months ago

    blog-preview-card-main

    2
    BledanIT•370
    @BledanIT
    Posted 8 months ago

    Very good solution! The only two problems I notice are that the card itself is a tiny bit smaller than the intended design, as well as the "Learning" box.

    Marked as helpful
  • Obi-Etchu•30
    @Obi-Etchu
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I completed the task

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

    Hosting i researched

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

    I dont know yet

    QR code component

    1
    BledanIT•370
    @BledanIT
    Posted 8 months ago

    The code is very short and condensed, which is a plus since it reflects optimization and readability. However I'm seeing two problems:

    • The card is placed at the beginning of the pace, while the assignment shows it in the center. This can be done through CSS by adding to the card rules "position:absolute, top: 50%, left: 50%" and "transform: translateX(-50%) translateY(-50%)".
    • The text overflows beyond the card's borders. this might be doable by adding a CSS rule "max-height: fit-content" to the card.

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub