Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
6
Comments
6

Charles7458

@Charles745880 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 four card feature page


    Charles7458•80
    Submitted 4 months ago

    1 comment
  • Responsive product page using media queries and JavaScript

    #sass/scss

    Charles7458•80
    Submitted 5 months ago

    Any suggestions are welcome. :)


    1 comment
  • Responsive recipe page


    Charles7458•80
    Submitted 5 months ago

    Any suggestions or correction would be helpful!


    1 comment
  • Social links page using HTML and CSS


    Charles7458•80
    Submitted 6 months ago

    I don't have any specific doubts. Feel free to suggest improvements or point the flaws in the code or design, so that I can improve myself. :)


    1 comment
  • Blog preview card solution


    Charles7458•80
    Submitted 6 months ago

    How do I make the font size reduce for mobile screen? I tried using rem instead of px. Is there another way?


    1 comment
  • qr-code component page using html and css


    Charles7458•80
    Submitted 6 months ago

    I don't know how to find the exact font-family. I just put whatever margin or padding to make it look exact, if there is a way to do that systematically, I want to know it.


    1 comment

Latest comments

  • Sanjeev•150
    @sanjv12
    Submitted 4 months ago

    Four Card Feature Section

    2
    Charles7458•80
    @Charles7458
    Posted 4 months ago

    Your solution is great. But in the team builder and calculator cards you have forgotten to add padding in the bottom, because the image hits the bottom of the card. Otherwise, great work, let's keep learning.

  • Mohamed Badr•80
    @Mohamed-Badr-Saad
    Submitted 5 months ago

    CSS Grid, CSS Flexbox, Mobile-first workflow , HTML5

    #sass/scss
    1
    Charles7458•80
    @Charles7458
    Posted 5 months ago

    When resizing, it's responsive only at 320px, it should be responsive at 375px too. And in the mobile site, the card is not centered vertically, some margin at the top can fix it.

    Only these 2 problems, besides that its great.

    And I learnt from your code that we can enter min-width while linking the stylesheet, thanks. Let's keep learning.

    Marked as helpful
  • DaniAe•60
    @DaniAe
    Submitted 5 months ago

    Recipe page solution

    1
    Charles7458•80
    @Charles7458
    Posted 5 months ago

    It looks great. Well done!

  • Rodel Advincula•120
    @brodel10
    Submitted 6 months ago

    Responsive social profile card using Flexbox and media queries

    1
    Charles7458•80
    @Charles7458
    Posted 6 months ago

    It looks the same as the design. Nice!

  • pruwt•20
    @pruwt
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    This challenge was much more seamless compared to the previous QR component. Approaching responsiveness by using simple fundamental principles, like not using px for elements except images, for instance, helped. I'm proud of improving on the responsiveness. It was much easier, which I guess is a sign of improvement.

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

    For challenges faced, even though there was an improvement with my approach to responsiveness, I think there's still much more work to do. For instance, units such as em and rem, even though I understand them, I must say it's a bit confusing. Additionally, thinking critically on when to use max width is something that's starting to make sense.

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

    I think trying to match the design as closely as possible is still in the works. I need help on the best way to handle the margins (mostly top and bottom) in this case (I didn't use auto in this case). That's pretty much it

    Blog preview component

    3
    Charles7458•80
    @Charles7458
    Posted 6 months ago

    Your project looks exactly the same as the design, but the card is not centered.

    I used this to center the card:

    body{min-height: 100vh;}

    But overall, good job.

  • Paucot Enzo•10
    @PaucotEnzo
    Submitted 6 months ago

    QR-Code component

    1
    Charles7458•80
    @Charles7458
    Posted 6 months ago

    The solution looks exactly as the design.

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