Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
8
Comments
8
P
Prince Awuah Karikari
@PRINCEKK122

All comments

  • Joseph-1-Duro•370
    @Joseph-1-Duro
    Submitted 7 months ago

    Blog Card Preview

    1
    P
    Prince Awuah Karikari•170
    @PRINCEKK122
    Posted 6 months ago

    Solution looks good, but the a couple of pointers that I believe it will make the site look like that of the mockup.

    1. The font used does not match the one on the design. Your css import looks good, but you have to take a look into that again.

    2. The container too also lacks the box shadow.

  • P
    Lovro Peraić•390
    @loki-pepe
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Even though the project was so small and simple, I am proud of using semantic HTML elements, abandoning my previous habit of using generic div elements coupled with a myriad of classes.

    What challenges did you encounter, and how did you overcome them?
    • Image gap: At first the gap between the QR code image and the element below it baffled me, but setting the display property of the image to block solved the issue.
    • Horizontal and vertical centering: I was unsure what the best approach to this problem would be. I knew the desired alignment could be implemented with grid or flexbox, but considering the simple structure of the page I deemed neither of the two layout mechanisms were necessary and I opted for the following solution:
    body {
        position: relative;
    }
    
    main {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    What specific areas of your project would you like help with?
    • Sizing different to design: While the height of the heading content box in the design file was 52px, the height of the same content box in my generated page was 52.81px (using the same font, font size, line height and letter spacing as specified in the design file), which slightly shifted the content below the image. I thought it to be reasonable enough to ignore this difference, but I would like to know if this should be fixed and how.

    • Fixed height and width of main content: as the design file didn't call for dynamic sizing, I set the dimensions of the main element using height: 499px; and width: 320px;, as specified in the design file. Was this the right approach?

    Static QR Code Component

    1
    P
    Prince Awuah Karikari•170
    @PRINCEKK122
    Posted 7 months ago

    Great solution, and the projects looks great on all screen sizes.

  • Marcus Daniels•160
    @marjsky
    Submitted almost 2 years ago

    Workit landing page responsive design simple CSS

    #bem
    1
    P
    Prince Awuah Karikari•170
    @PRINCEKK122
    Posted almost 2 years ago

    Congrats on knocking this project off.

    I think you can enhance the site and take it to the next level, I saw that upon hovering the cursor on the learn more button in the hero section, the height the hero section increases a little bit, and when the mouse leaves that element, the height decreases.

    Also, I would suggest that you give the main section a max-width, as viewing the content in the main section becomes too long when viewed on a large viewport.

    I hope this helps, and once again, job well done.

    Marked as helpful
  • Matheus Fernandes•340
    @xtirian
    Submitted almost 2 years ago

    Portfolio made with tailwind, NextJS and React

    #typescript#tailwind-css
    1
    P
    Prince Awuah Karikari•170
    @PRINCEKK122
    Posted almost 2 years ago

    Congratulations on completing this project, however, I am unable to follow the links above to the live site, and I also tried following the link in your github repo, but both are showing error messages.

    Please rectify this problem, so we will be able to see the great work you have done.

    Cheers

    Marked as helpful
  • Matheus Fernandes•340
    @xtirian
    Submitted almost 2 years ago

    Responsive LP with HTML & SASS

    #sass/scss
    1
    P
    Prince Awuah Karikari•170
    @PRINCEKK122
    Posted almost 2 years ago

    Great work, what's next on your radar?

  • Matheus Fernandes•340
    @xtirian
    Submitted almost 2 years ago

    Responsive landing page using CSS ellipse shape

    1
    P
    Prince Awuah Karikari•170
    @PRINCEKK122
    Posted almost 2 years ago

    Congratulations on knocking this task off.

    I took a look at your site, and I saw the UI breaks, where the founder section goes under the services container on the tablet devices. I think you should take a closer look at this especially around the position: relative of this side of your code, more specifically with the z-index side. Also do well to look into min-height and max-height properties of the services container.

    .founderSect {
    display: flex;
    
    justify-content: center;
    position: relative;
    height: 40vh;
    max-height: 400px;
    }
    
    .image-founder {
    max-width: 281px;
    position: absolute;
    bottom: -55px;
    
    z-index: 1;
    
    margin-top: 50px;
    }
    

    And it seems we have completed the same projects together, which project are you taking up next? I am looking into doing more of the premium challenges, as I have realized that those a little bit challenging than the free ones.

    I hope I was of help with this review. Happy coding!

    Marked as helpful
  • Ali-software-development•20
    @Ali-software-development
    Submitted almost 2 years ago

    qr code

    2
    P
    Prince Awuah Karikari•170
    @PRINCEKK122
    Posted almost 2 years ago

    Congratulations on completing your first challenge.

    I saw a couple of things in your code that I would like to share with you.

    Firstly, although it accepted to mix HTML and CSS in your html file, it considered a bad practice as this violates the Separation of Concern in programming. To be specific, avoid at all cost styling in your HTML file and do this in your CSS file as you have done already in the stylesheet.css file. So cut the code in the body element's style attribute, and paste it in a ruleset in the CSS file.

    Also, I think your code is a little bit hard to read because it not formatted properly. A quick fix is by installing Prettier plug in, and turning on auto save feature if you are using VS code, to format your code properly.

    Also for the layouts, you can consider learning more about Flexbox and CSS Grid. You can learn about them on freecodecamp.org, as centering elements vertically with Display positioning and translate property is quite tricky.

  • Dor Shani•150
    @dors001
    Submitted about 2 years ago

    Responsive Landing Page using the basics of CSS and HTML

    2
    P
    Prince Awuah Karikari•170
    @PRINCEKK122
    Posted almost 2 years ago

    Congratulations on knocking off your first challenge here.

    As a quick note, we can view your code by pressing the View code button, so next time, I suggest you use this section to draw reviewers attention to some parts of your code.

    Marked as helpful
Frontend Mentor logo

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