Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
15
Comments
6
Luqman (Luke)
@luqmanx1998

All comments

  • Ashraful Islam•100
    @ashrafitachi
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I think I have to learn more about grid and responsive units

    What challenges did you encounter, and how did you overcome them?
    • Firstly, divs weren't taking proper size to fit the container fully. I have solved this problem by removing fit-content from height and width of .cards
    What specific areas of your project would you like help with?
    • Want help on making the solution more accurate to the design.
    • Responsive CSS
    • Grid layout adjustment

    Testomonial grid section

    1
    Luqman (Luke)•320
    @luqmanx1998
    Posted 3 months ago

    Hello there! First of all, good job! It's only when you push yourself that you're able to learn, so keep it up! I have a few suggestions regarding some of the problems that you faced on the desktop view.

    First of all, in order to center your container, in this case <main class="container">, you can add height: 100vh, display: grid and place-content: center to your body tag. Adding height: 100vh makes it so that your page takes up 100% of the viewport height, meaning it covers the entire screen, while adding grid and place-content: center centers everything.

    Secondly, your main container had too much padding, and I think the font-size was too big also. Because of this your content (the cards) were squished together and forced to take up new rows, adding to the height. Replace the padding: 300px 200px with padding-inline: 2rem and change font-size to 1rem. (You can play with the value, I found this one to look good)

    Lastly, in your desktop media query, @media (min-width: 1300px), in your card div, .card, you have multiple margins. There's no reason to do this because it only clutters your styling. Since you already have the gap property in your main container, you should use that to control the spacing in between your cards. If you remove the margins in the .card div, except margin: 0, (because you already have margins from your mobile view persisting), you'll find that everything looks better and more uniform.

    Nonetheless, you did great! Keep up the work and you'll be a master in no time ✅

    Marked as helpful
  • Synne Storm•470
    @synnestorm
    Submitted 3 months ago
    What specific areas of your project would you like help with?

    This is coded without javascript. Any feedback appreciated!

    Article Preview using HTML and CSS

    1
    Luqman (Luke)•320
    @luqmanx1998
    Posted 3 months ago

    Looks amazing ! Well done. You've got a very clean structure going on for your CSS. Nice usage of custom variables too.

    The only thing I think is worth mentioning right now is that you can consider using responsive units, (rem and em), since they improve things like accessibility (if a user decides to change the font size in the browser setting etc). This is abit nitpicky though because this is a small challenge and pixel perfection is easier with px. (Assuming you didn't know !)

    Lastly, I've noticed you've already done quite a few challenges on fe mentor with HTML & CSS. It seems you've already gotten a pretty strong grasp of the basics, so maybe you might want to try a framework like Tailwind ! It could be fun, and it's also an industry standard tool. Anyways keep up the great work ! It's amazing to see that kind of dedication ✅️

    Marked as helpful
  • Ikram Eddahby•10
    @ikramed
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that I managed to build the component from scratch using only HTML and CSS. It helped me better understand box model, alignment with Flexbox, and spacing techniques.

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

    Aligning the card in the center of the screen on all devices was tricky at first. I solved it by using Flexbox on the body and setting min-height: 100vh.

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

    I’d like feedback on the structure of my CSS file and if there’s a more efficient way to manage spacing and alignment without too much margin/padding.

    QR Code Component using HTML & CSS

    1
    Luqman (Luke)•320
    @luqmanx1998
    Posted 3 months ago

    Good job on your first challenge!

    I'm writing this on mobile and it looks good on my phone screen. I checked out your repo and it seems you didn't update the readme file. No biggie, but maybe in the future you might want to edit your readme and write out your thoughts similar to here! It'll make your repo look a lot better.

    In terms of your css structure, it looks good ! I'm not sure how far you are into your dev journey but at least you're starting off great on this platform! The only thing I can say is, going forward you might want to check out responsive units such as rem and em (if you didn't know this yet), it'll help with some consistency going forward. However using px for a small challenge like this one is also fine. Nonetheless keep it up and I hope you'll keep cookin!

  • Ibraghim•120
    @Soy-Ibrag
    Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    Hard to say what I'm most proud of but If I had to choose one thing It would be the way I used Flexbox, It has been one of my biggest struggles so far and I think I did a good Job.

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

    My biggest challenge was getting the dimensions and scales right for the different screen resolutions, the way I overcame this challenge was by simply inspecting the page and eyeballing the dimensions.

    What specific areas of your project would you like help with?
    • HTML structure;
    • CSS Flexbox;
    • CSS Paddings & Margins.

    Responsive QR Code challenge using HTML & CSS Flexbox

    2
    Luqman (Luke)•320
    @luqmanx1998
    Posted 9 months ago

    Hey there, great job on your first challenge ! It looks amazing, almost pixel perfect. Here are some suggestions :

    1. Although this is a very small card challenge, it might be a good idea practicing having descriptive class names ! For example, instead of using <div class="container">, you can try maybe using<div class="card">.

    2. I see that you've explicitly set your card's height and width. Perhaps instead of doing that, you should consider using max-height and max-width instead, as these properties allow your card to be responsive, so they can shrink and grow according to the screen size !.

    3. In your container div, there is actually no need to use display: flex and flex-direction: column. This is because both the h2 and p tag are block-level elements, meaning that they occupy the entire width of their container.

    Extra suggestions :

    Perhaps instead of defining margins for every element in your card, it might be easier to simply group them together by putting them in a div, for example, your h2 and p tag can go together in one div. After that, you can apply styling on this container, such as your margin-inline, and other margins. Also it might be a good idea to add padding to the card. This way you can define padding for all four corners of the card, and reduce the need to re-define margins repeatedly.

    Consider using rem and em units instead, as this also helps with responsiveness. Here's a video by Kevin Powell that's worth checking out on this !

    If you found this feedback helpful, feel free to leave me helpful remark and thumbs up ! Good luck on your next challenge !

    Marked as helpful
  • Ann•110
    @anastDev
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    What I’m Most Proud Of and What I’d Do Differently Next Time

    • I’m really proud of sticking with this project and not giving up, even when faced with new challenges. It felt great to see my persistence pay off and to realize that I’m starting to retain more from previous projects—there were a few things I didn’t need to look up this time!

    • Next time, I’d like to explore alternative methods and approaches to see if I can make my workflow even smoother. I’m also interested in experimenting with different design elements and seeing how they can enhance the overall project.

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

    For future projects, I want to:

    • Improve Responsive Design: Keep refining my ability to create layouts that work well on all devices.

    • Advance in CSS: Focus on mastering CSS animations, transitions, and grid layouts for more dynamic designs.

    • Enhance JavaScript Integration: Get better at combining JavaScript with CSS and HTML to add interactive elements and improve user experience.

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

    I’d appreciate any constructive criticism on how to improve my code, especially in making it more concise and well-structured.

    Responsive social links page - CSS Flexbox/Bootstrap/Hover-Focus State

    #bootstrap#accessibility
    2
    Luqman (Luke)•320
    @luqmanx1998
    Posted 11 months ago

    Hey there, I like your solution ! You have a good grasp on a lot of important CSS properties, and even using custom CSS variables, which is great. I'm also learning, but it's great to see someone else do their best ! Here's my feedback after looking at your code :

    • Perhaps in the future it's best not to explicitly set your container's height, as it could affect your card layout, as seen when in desktop mode, your card content is stretched out. In your .card container you had set height: 80vh. Because your content did not fill up the entire height, combined with the property you had set .card-body { flex: 1 1 auto; } caused your content to stretch out. If you remove both these properties the card collapses, and the layout looks more even !

    That being said, your card looks great, and let's keep improving :D

    Marked as helpful
  • Lyna•260
    @lynaIFR
    Submitted 11 months ago
    What specific areas of your project would you like help with?

    I found some difficulty with the size of the card, if anyone has suggestions, please share. If there is something that could be done better, I'll be happy to have your opinion on it.

    Product Preview Card using flexbox and a bit of media query

    1
    Luqman (Luke)•320
    @luqmanx1998
    Posted 11 months ago

    Hello ! That's really good imo ! You mentioned having some issues with the size of the card, I assume you meant the proportions of each side of your card, that the card-details side is bigger than your image side? If that's the case, I looked into your code, and I think for your desktop responsive media query, you could try this maybe:

    .card { display: grid; grid-template-columns: 1fr 1fr; }

    And perhaps you may want to remove the gap in your .card class too, if you choose to try this , so it looks uniform ! Grid flows in rows by default, so no need for flex-direction: row with this method either ! Have a great day :D.

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