Frontend Mentor | Luqman (Luke)'s profile

All comments

@Soy-IbragSubmitted 3 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

Luqman (Luke)•180

@luqmanx1998Posted 3 months ago

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

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">.
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 !.
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•90

@anastDevSubmitted 5 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

Luqman (Luke)•180

@luqmanx1998Posted 5 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

@lynaIFRSubmitted 5 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

Luqman (Luke)•180

@luqmanx1998Posted 5 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.