Frontend Mentor | Atif Iqbal's profile

Latest comments

Elmar Chavez•540
@CodingWithJiro
Submitted about 1 month ago
What are you most proud of, and what would you do differently next time?
In this particular challenge I applied more accessibility features in my CSS (e.g. @media (prefers-reduced-motion: reduced) and @media (prefers-reduced-motion: no-preference)).

I also utilized Google Lighthouse which is an open-source, automated tool that helps us improve the quality of our web pages (i.e. audits for performance, accessibility, SEO, and more)

From this point forwards, I will responsibly add all my animations and transitions in the no-preference block and also include a Google Lighthouse Evaluation in my repository.
What challenges did you encounter, and how did you overcome them?
Well the challenges that was new to me here was making sure to add more accessibility in my CSS where I feel like I was lacking compared to my previous projects.

The solution I made was to read more about other media queries in CSS and also checking my website quality with Google Lighthouse for the first time.
What specific areas of your project would you like help with?
I would like to know more accessibility features in my CSS and also if there is someone who can help me get higher ratings in site performance which was only rated 85 in my Google Lighthouse Evaluation

P.S. I ran the evaluation again and I'm happy that the result turned out green.
HTML, CSS, Git, GitHub, Netlify, PerfectPixel, Lighthouse
#accessibility#bem#lighthouse
2
P
Atif Iqbal•3,320
@atif-dev
Posted about 1 month ago
Hi Elmar Chavez.

Your accessibility score is already good. I have checked your live preview by chrome: Inspect -> lighthouse. Three times, I got green circle of performance. Check again and update your lighthouse report of GitHub repo.
Michael Okorie•150
@Michael-Okorie
Submitted 2 months ago
What are you most proud of, and what would you do differently next time?
I’m proud of how clean and responsive the layout turned out. Implementing the share icon interaction with pure CSS and making sure the component looks great on all screen sizes felt like a real win. If I were to do it again, I’d take it a step further by building a React version with state management to practice component-based structure and interactivity.
What challenges did you encounter, and how did you overcome them?
One key challenge was properly positioning and styling the share icon tooltip across different screen sizes. It required careful use of position: absolute, media queries, and some creative problem-solving to keep it responsive and user-friendly. I iterated through several versions and tested frequently to make sure the layout held up on mobile and desktop.
What specific areas of your project would you like help with?
I’d love feedback on accessibility improvements, especially regarding ARIA usage and tab navigation. Also open to suggestions on refining the transition effects for the share tooltip and optimizing the CSS structure further for reusability.
Responsive Article Preview Card with Share Feature using Flexbox
#accessibility#pure-css
1
P
Atif Iqbal•3,320
@atif-dev
Posted 2 months ago
Congrats🎉 Michael Okorie on completing the challenge.

You can further improve your solution by considering following points:
- In share options(tooltip),small pointing arrow is missing. If you don't know how to make that arrow you can see this code and customize according to FEM design.
- Active state color on share icon(your #shareIcon) is missing for mobile and desktop view.
- For mobile view, make "SHARE" and social icons centered and bigger(see design and your solution).
Hope the feedback is valuable for you.
Marked as helpful
P
Kęstutis Eirošius•310
@eirosiuss
Submitted 3 months ago
Meet-landing-page
#accessibility
1
P
Atif Iqbal•3,320
@atif-dev
Posted 3 months ago
Congrats🎉 Kęstutis Eirošius on completing the challenge. You did good about responsiveness.

I would like to highlight following points:
- You have added #react by mistake.
- Apply border-radius on middle four images.
- Write something useful in README file of your repo.(frontendmentor has also provided a template of README in starter files)
free-care•120
@free-care
Submitted 3 months ago
Responsive Landing Page Using CSS Grid Layout
#accessibility#cube-css
1
P
Atif Iqbal•3,320
@atif-dev
Posted 3 months ago
Congrats🎉 on completing the challenge.

You can further improve by considering following points:
- Remove #react because your code doesn't include React structure.
- Remove following code for proper view of images, usernames and education levels.
```
.profile_info {
    display: grid
    gap: .1em;
    flex: 1;
}
```
- Use LT browser, check responsiveness for tabs and improve.
- Write something useful in README file of your code repo.
KrishnaPoddar1•400
@KrishnaPoddar1
Submitted over 1 year ago
What are you most proud of, and what would you do differently next time?
Utilization of a grid component for the very first time.

Would love to use it more.
What challenges did you encounter, and how did you overcome them?
The styling of the mobile side went fast and I was stuck styling the desktop view.

I faced challenges using grid as I had not structured the the card elements inside another container and tried making the whole container as grid making it congested. Later on I corrected it and the styling became easy. But then I faced the problem aligning the b2 and b3 elements. But putting them in a container made it easy.
What specific areas of your project would you like help with?
Any advice on the efficient utilization of grid would be helpful. Apart from that any other advice after looking at my code would help me a lot.

Thank you!!
Responsive Four Card template using HTML and CSS
#accessibility#semantic-ui
1
P
Atif Iqbal•3,320
@atif-dev
Posted 3 months ago
Congrats🎉 KrishnaPoddar1 on completing the challenge.
- See design or picture and adjust spaces of text and images accordingly.
- Consider using LT Browser to check responsivenesss for multiple devices and make responsive also for mid range devices like tablets.
Michael Okorie•150
@Michael-Okorie
Submitted 4 months ago
What are you most proud of, and what would you do differently next time?
I’m proud of how clean and responsive the design turned out across both mobile and desktop screens. I followed a mobile-first approach and used Flexbox to build the layout. If I were to do it again, I’d spend more time polishing the desktop view and maybe try using CSS Grid for more layout control.
What challenges did you encounter, and how did you overcome them?
One challenge I faced was aligning the image and content side-by-side properly on larger screens. There was extra whitespace at the bottom which took time to debug. I eventually solved it by reviewing how flex containers behave with height and object-fit. Also, getting the button icon and text centered perfectly took a bit of tweaking with Flexbox alignment properties.
What specific areas of your project would you like help with?
I’d love feedback on:
- How to improve the layout on large screens more efficiently.
- Best practices for responsive typography.
- Whether my use of Flexbox is optimal or if Grid would be better.
- Any improvements to the accessibility of the button or general layout.
Responsive product preview card using Flexbox
#accessibility#pure-css#bem
1
P
Atif Iqbal•3,320
@atif-dev
Posted 4 months ago
Hi Michael Okorie, congrats🎉 on completing the challenge.

You nicely completed the challenge.

I would like to highlight two points:
- To avoid accessibility issues, follow a semantic structure. Following is a sample structure of semantic layout:
```
<body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
```
- Since we tackle responsive design in challenges so it is preferred to use em unit for padding and margin and rem unit for font-size. For further info watch this video.
Hope you will find this Feedback Helpful.