Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
7
Comments
8
P

usman frontend 360

@Tech-Badhead120 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

  • Responsive testimonial grid section


    P
    usman frontend 360•120
    Submitted about 2 months ago

    The bottom space on Daniel Clifford and Patrick Abrams is too much on the desktop version and i have tried severals ways to reduce it but it is still not working yet, hence why i need help in that area.


    1 comment
  • Responsive four card feature section


    P
    usman frontend 360•120
    Submitted about 2 months ago

    For this project, i cannot pinpoint areas where i need help but i am open and hoping for those constructive feedbacks from the community.


    1 comment
  • Responsive Product-preview-card component using flexbox


    P
    usman frontend 360•120
    Submitted 2 months ago

    1 comment
  • Responsive recipe page


    P
    usman frontend 360•120
    Submitted 2 months ago

    The row bottom border in the nutrition section


    2 comments
  • Responsive SocialLink Profile


    P
    usman frontend 360•120
    Submitted 3 months ago

    When i hover on the social-links link, the hover state moves the whole element and which i guess is not right


    2 comments
  • Responsive Blog Preview using HTML and CSS


    P
    usman frontend 360•120
    Submitted 4 months ago

    I tried to reduce the avatar image size but to no avail. my subconcious mind kept telling maybe it was because it's in SVG format. i am open to correction tho!


    1 comment
View more solutions

Latest comments

  • Richard Emmanuel Zaramson•130
    @Xaramson
    Submitted about 2 months ago

    Testimonial Grid section

    1
    P
    usman frontend 360•120
    @Tech-Badhead
    Posted about 2 months ago

    -The code is semantically structured and responsive.

    • Always look to apply the the font type given in the style-guide as opposed to the one you used. Typography is just as important as how responsiveness is.
    • You pushed all the files given in the starter file to your remote repository which i believe it's not suppose to be like that. What you should do is edit the readme template file to how you approach your project, then safe the changes and rename the readme-template to readme.md then delete orginal readme file. Go through the readme file thoroughly and everything i am saying will make sense.
  • Carlos Daniel•130
    @cadanieldev
    Submitted 4 months ago
    What specific areas of your project would you like help with?

    display grid

    Four Card Feature Section CSS/FlexBox and Grid

    1
    P
    usman frontend 360•120
    @Tech-Badhead
    Posted about 2 months ago
    • The code is responsive and the solution looks like the design.]
    • The code is not well structured semantically
    • i recommend using browser dev tools (like Chrome DevTools → Layout tab) to debug grid lines.
  • LIFONGHANG•80
    @LIFONGHANG
    Submitted 2 months ago

    Responsive product card

    2
    P
    usman frontend 360•120
    @Tech-Badhead
    Posted 2 months ago
    • The solution is close to the design but attention was not really on the detail which is highly essential in frontend development
    • For accessibility best practise, the solution is not semantically structured and semantic HTML thrives well in that aspect.
    • The solution does not really look good on various mobile devices, making apps look good on all screen sizes is one of the core fundamentals aspect of frontend development.
    • Always look to import the font type given in the style guide of your project, it looks negligible but typography is just as important as responsiveness.
    • You are doing awesome and one of the best way to get good is getting hands on building projects like this, keep going and improving along the way.
  • P
    usman frontend 360•120
    @Tech-Badhead
    Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of myself with the way i tackle things one after the other in completing the project.

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

    The problem i encountered was the border beneath the table row in the last section and to be honest, i overcome it through try by error!

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

    The row bottom border in the nutrition section

    Responsive recipe page

    2
    P
    usman frontend 360•120
    @Tech-Badhead
    Posted 2 months ago
    • The solution include semantic HTML
    • It is accessible however there will always be room for improvements. I cannot point what improvements could be made at the moment, hopefully when i up my level a bit.
    • The layout look good on a range of screen sizes but there still improvements to be made because i only set media queries for 576px. 1.e (max-width: 576px)!
    • The code is well structured, readable, and it would have been much better in terms of reusability if i had consider using the css custom properties for the colors used in the project.
    • The solution does not differ from the design.
  • P
    austin-jonas•70
    @austin-jonas
    Submitted 2 months ago

    A responsive recipe page built with HTML and CSS

    1
    P
    usman frontend 360•120
    @Tech-Badhead
    Posted 2 months ago

    Accessibility best practice: -Using semantic tags is a best practice for accessibility. i.e the main tag would have been better in place of the div tag.

    • The project does not look good on a range of mobile devices.
    • consider using rem, em, and % unit for sizing instead of pixels as it helps scale your work smoothly
    • The solution is close to the design for the desktop version
  • Luiz Felipe•80
    @Luizf-devdias
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Me orgulho de ter feito rápido e bem feito e saber que agora posso sair de novato e tentar projetos juniors.

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

    Dei uma travada no hover, pesquisei nos meus resumos e consegui resolver

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

    Em nenhuma consegui fazer o código bem semântico e organizado

    Perfil de Links Sociais feito com HTML e CSS usando flexbox.

    1
    P
    usman frontend 360•120
    @Tech-Badhead
    Posted 2 months ago

    I've got to be honest, i didn't see any area i can point out for him to improve instead i personally was the one that learnt off his project reading through his code. This are key things i noted from his work: -It is responsive -it is semantically structured -codebase is as tidy as already laid bed -so yeah onto the next! 👍

    Marked as helpful
View more comments
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

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