Frontend Mentor | UmairFaiser's profile

Latest comments

Osariemen Precious Iyoha•30
@osariemeniyoha
Submitted 11 days ago
Responsive layout using grid
1
UmairFaiser•130
@UmairFaiser
Posted 11 days ago
Heh awesome work. Well done!!

But there are some changes you can make to look it very closer to the given design.

Layout Since here there is no complex two dimension layouts you can go with using flexbox you don't need to use a grid. How you can do this using a flexbox is;
```
body{
  display: flex;
}

.card{
  max-width: 300px; \* adjust as needed *\
  justify-content: center;
  align-items: center;
}
```
or else if you still want to use grid then you can do it this way;
```
body{
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  grid-template-columns: 1fr auto 1fr;
}

.card{
  grid-column: 2/3;
  grid-row: 2/3;
  justify-self: center;
  align-self: center;
}
```
fonts Also you haven't used the font they have specified font-family: "Figtree", sans-serif; you can do it in the css body like this;
```
body{
  font-family: "Figtree", sans-serif;
}
```
or create a variable like this and use it;
```
@font-face {
  font-family: "font-family here";
  src: url("font-path-here") format("woff2");
  font-weight: font-weight-here;
  font-style: normal;
```
to use this in the relevant section in css call the font-weight u declared above itll fetch that font;

Padding between image and card

you have margin-top: 10px; which adds a margin 10px to only top instead do margin: 10px; so paddings apply to all sides evenly.

overall your'e doing a good job keep it up!!
P
yarden biton•30
@Jordan1881
Submitted 12 days ago
What are you most proud of, and what would you do differently next time?
I'm most proud of keeping my code clean and organized, while making the layout fully responsive on both desktop and mobile. I also managed to use Flexbox and CSS Grid effectively, which helped me understand their differences better.
Next time, I would try to structure my CSS with more reusable classes and possibly use a methodology like BEM for even better scalability.
What challenges did you encounter, and how did you overcome them?
One of the main challenges was aligning the card perfectly in the center of the page while keeping it responsive. At first, I struggled with margins and padding, but I overcame this by using Flexbox properties like justify-content and align-items.
Another challenge was making sure the text size looked good on different screen sizes. I solved this by using relative units (rem, %) instead of fixed pixels.
What specific areas of your project would you like help with?
I would love feedback on how I can make my CSS more efficient and reusable.
Also, I’m curious if there are best practices for structuring small projects like this one, so the code remains clean and easy to maintain as projects grow.
Finally, any advice on improving accessibility (like ARIA attributes or semantic HTML) would be very helpful.
Responsive QR Code Component using Flexbox & CSS Grid
1
UmairFaiser•130
@UmairFaiser
Posted 12 days ago
heh awesome work!!Keep it up
nourhanreda1•10
@nourhanreda1
Submitted 14 days ago
Quick access to all my social media accounts
1
UmairFaiser•130
@UmairFaiser
Posted 13 days ago
Heh awesome work. Allahumma barik! But there are some adjustments you can do to get closer to the given design.

code reviews

1.Really like the fact that you've kept your code simple.

2.Avoid general namings for classes like class="parent" instead use meaningful namings, for example class="main-card" or something like this so anybody can understand your code. this is crucial when it comes to team work and collaborations.

3.For better accessability consider using semantic html <section>tags.

overall nicely done. Congrats!!
Marked as helpful
Maldak•120
@Maldak123
Submitted 2 months ago
What are you most proud of, and what would you do differently next time?
I'm most proud of successfully finishing this challenge after trying so many times. Beside this, I'm proud of refactoring the codebase when it became overwhelmingly complex, especially during the desktop responsiveness phase. Using AI to help restructure the HTML from multiple main elements to a single main with multiple sections significantly improved the project's maintainability and my understanding of efficient component organization. I'm also proud of implementing dynamic content loading from a .json file, which was a new technique for me.

Next time, I would definitely prioritize a more robust and scalable code structure from the very beginning. While starting mobile-first was effective, anticipating how the code would scale to larger viewports and planning the HTML/CSS architecture more thoroughly would have saved a lot of refactoring time and headaches. I would also dedicate more time to understanding and implementing smooth page transitions, rather than having to remove them due to conflicts.
What challenges did you encounter, and how did you overcome them?
One of the main challenges was managing code complexity as the project grew, particularly with Tailwind CSS. My initial organization became a hindrance during desktop responsiveness, leading to difficulty in reading and modifying the code. I overcame this by recognizing the problem early and actively seeking help from AI to refactor the code and establish better standards. This involved changing the fundamental page structure, which, despite some initial transition issues, ultimately led to a much cleaner and more manageable codebase.

Another challenge was achieving full responsiveness across mobile, tablet, and desktop viewports. The tablet responsiveness, in particular, presented unexpected difficulties. I tackled this through persistent iteration and debugging, even when the code felt chaotic. The dynamic loading of content via a .json file was also a new challenge, which I overcame by carefully planning how to parse and display the data.
What specific areas of your project would you like help with?
I would greatly appreciate feedback on best practices for managing state and content loading in Vanilla JavaScript applications, especially when dealing with multiple sections or "pages" within a single HTML file. While I implemented dynamic content loading and page switching, I'm curious if there are more idiomatic or efficient ways to handle this without relying on frameworks.

I would also like help in understanding and implementing smooth and conflict-free page transitions using CSS or Vanilla JavaScript. I had to remove transitions due to flickering issues caused by class conflicts, and I'd like to learn how to properly orchestrate these animations to avoid such problems in future projects. Any advice on debugging complex CSS interactions, especially with frameworks like Tailwind CSS, would also be invaluable.
Space Tourism Website with TailwindCSS
#tailwind-css#accessibility
1
UmairFaiser•130
@UmairFaiser
Posted 2 months ago
heh congrats also just created this check this out if it might help you learn the web to learn web development from basic to advance
P
Jeremie Iragi Barhabazi•120
@jeremie1207
Submitted 2 months ago
What are you most proud of, and what would you do differently next time?
To be able to completed the chalenge quickly.
What challenges did you encounter, and how did you overcome them?
this chalenge was easy.
Frontend-Mentor---QR-code-component
2
UmairFaiser•130
@UmairFaiser
Posted 2 months ago
hi buddy just created this check this out if it might help you learn the web to learn web development from basic to advance
P
Jeremie Iragi Barhabazi•120
@jeremie1207
Submitted 2 months ago
What are you most proud of, and what would you do differently next time?
To be able to completed the chalenge quickly.
What challenges did you encounter, and how did you overcome them?
this chalenge was easy.
Frontend-Mentor---QR-code-component
2
UmairFaiser•130
@UmairFaiser
Posted 2 months ago
hi buddy just created this check this out if it might help you learn the web to learn web development from basic to advance