Skip to content
OverviewSolutions
21
Comments
256
P
Atif Iqbal
@atif-dev

All comments

  • Michael Okorie•150
    @Michael-Okorie
    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

    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
    Atif Iqbal•3,320
    @atif-dev

    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)
  • P
    Atif Iqbal•3,320
    @atif-dev

    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
    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

    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
    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

    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.

  • Olexii Bulhakov•300
    @bulhakovolexii
    What are you most proud of, and what would you do differently next time?

    While working on this project, the most interesting part for me was customizing bullets and numbering in ordered and unordered lists. I had to use CSS counters. I had done something similar before, but a long time ago, so I had to consult the documentation to recall how it works.

    .instructions__list {
  counter-reset: item;
}

.instructions__list li::before {
  counter-increment: item;
  content: counter(item) ".";
}
    What challenges did you encounter, and how did you overcome them?

    I also tried to style the bullets using the ::marker pseudo-element, but unfortunately, it didn’t work as expected because it doesn’t support certain CSS properties, such as margin

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

    Additionally, while comparing the project with the references using the Pixel Perfect Chrome extension, I noticed that the mockups included in the project starter pack did not match the designs in Figma. Therefore, I decided to follow the Figma files instead of relying on the mockup images.

    Recipe page

    #sass/scss#bem
    1
    P
    Atif Iqbal•3,320
    @atif-dev

    Congrats🎉 on completing the challenge.

  • richiejpg•90
    @richie-sol
    What are you most proud of, and what would you do differently next time?

    I'm proud of being able to accomplish the task.

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

    I encountered a challenge getting a perfect circle for the profile image.

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

    No area for now

    Social Links

    #accessibility
    1
    P
    Atif Iqbal•3,320
    @atif-dev

    Hi richiejpg, congrats🎉 on completing the challenge.

    Following are some points you need to improve:

    • You have used #react while submitting the project but project structure doesn't include React.
    • Better use HTML semantic elements to avoid accessability issues. Following is a sample structure for HTML sematic elements:
    <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
    • Your image height is larger that's why you are not able to get proper circular image by using border-radius. Visit IO IMAGEONLINE and make your image circular.
    • Check responsiveness at LT browser and make page responsive.
    • You need to implement hover and focus states as mentioned in challenge.

    Hope you will find this Feedback Helpful.

  • Timony•190
    @Tori-Bemide
    What are you most proud of, and what would you do differently next time?

    I found it a lot easier to do compared to previous projects.

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

    I'm always looking for ways to improve so any opinion and advice is very helpful. Thanks

    Blog Preview Card with CSS Flexbox

    #accessibility
    1
    P
    Atif Iqbal•3,320
    @atif-dev

    Hi Timony, congrats🎉 on completing the challenge.

    Use html semantic elemnets to avoid accessibility issues. Following is structure for semantic elements:

    <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>

    Hope you will find this Feedback Helpful.

  • P
    Atif Iqbal•3,320
    @atif-dev

    Hi EwkaKonewka, congrats on completing the challenge.

    To avoid accessibility issue "All page content should be contained by landmarks" use code as :

    <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
    Marked as helpful
  • P
    Atif Iqbal•3,320
    @atif-dev

    Hi, congrats🎉 on completing the challenge. Better take care about following points.

    • When we open GitHub repository link, at right side you will find an About Section. There, also include a live preview link of your project. It is better for someone to check your preview project while interacting with code.
    • Include a README file in your GitHub project's solution and write about your working flow, findings, new learned things, useful resources, etc.
    • Have seen your project in my browser(1366 * 768), container looks big. I think if you will add margin top and margin bottom on container and will make the container little bit smalller(height wise) then view will look NICE. You can also check responsiveneess for different screen sizes using LT browser(Download: LT browser)

    (Have any questions🧪?reply to this comment😇)

    --Got any questions, REPLY--

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn , GitHub

    Marked as helpful
  • P
    Atif Iqbal•3,320
    @atif-dev

    Hi, congrats🎉 on completing the challenge. Better take care about following points.

    • For better preview and centered, modify your code as:
    1. Add min-height: 100vh; in body selector inside CSS.
    2. Remove all CSS code of main selector.
    3. Add margin-top: 1em; in .attribution selector.
    .container {
  display: flex;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 0.1rem solid #ebdddf;
  box-shadow: 0 0.2rem 1rem black;
  height: 25rem;
  max-width: 520px;
}
.left-side {
    background: url(images/image-product-desktop.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    width: 50%;
}
@media (max-width: 525px)
.container {
    display: flex;
    flex-direction: column;
    height: 39rem;
    width: 20rem;
}

@media (max-width: 525px)
.left-side {
    background: url(images/image-product-mobile.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
}
    • In README file of your GitHub project's solution remove already present content and write about your own working flow, findings, new learned things, useful resources, etc.

    --Got any questions, REPLY--

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝: Twitter , Instagram , LinkedIn , GitHub

  • P
    Atif Iqbal•3,320
    @atif-dev

    Hi, congrats🎉 on completing the challenge. Better take care about following points.

    • According to requirements, your "Try it free" button 'f' should be capitalized and set the hover effect that is required.
    • There should be a curved shape before footer. Check design/image file.
    • Footer social icons are not in round shape and there is no hover effect on them.
    • You need to fix Subscribe button position.
    • Email validation is not working.
    • In responsive mode it is better to center Subscribe button and footer content.
    • In README file of your GitHub project's solution remove already present content and write about your own working flow, findings, new learned things, useful resources, etc.
    • It is preferred to use em unit for margin and padding and rem unit for font-size. Watch here.

    --Got any questions, REPLY--

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn , GitHub

    Marked as helpful
  • P
    Atif Iqbal•3,320
    @atif-dev

    Hi, congrats🎉 on completing the challenge. Better take about following points:

    • You must be seeing Accessibility Issue, generated by FEM Report Generator. To avoid accessibility issue "All page content should be contained by landmarks" use code as :
    <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
    • Your preview page needs to be responsive for different screens. For a better preview, centered and responsive modify your code as follows:
    body {
    background-color: var(--dark-blue);
    display: grid;
    place-content: center;
    min-height: 100vh;
}

    @media screen and (min-width: 500px)
.container-card {
    /* margin: 25%; */
    /* max-width: 600px; */
    border-radius: 20px;
    box-shadow: 1px 7px 40px rgb(21, 30, 36);
}

    .container-card {
    background-color: var(--dark-grayish-blue);
    margin: 0em 1em;
    max-width: 600px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4rem 1rem 7rem 1rem;
    border-radius: 10px;
    box-shadow: 1px 3px 10px rgb(21, 30, 36);
}

    • If you are enough comfortable with CSS better learn about responsive units and responsiveness. For responsivness learning, take Conquering Responsive Layouts short course.

    • When we open GitHub repository link, at right side you will find an About Section. There, also include a description and live preview link of your project.

    • In README file of your GitHub project's solution remove already present content and write about your own working flow, findings, new learned things, useful resources, etc.

    --Got any questions, REPLY--

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn , GitHub

    Marked as helpful
  • P
    Atif Iqbal•3,320
    @atif-dev

    Hi, congrats🎉 on completing the challenge. Better take care about following points.

    • You must be seeing some accessibility issues generated by FEM Report Generator. To avoid accessibility issue "All page content should be contained by landmarks" use code as :
    <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
    • When we open GitHub repository link, at right side you will find an About Section. There, also include live preview link of your project. So that someone can see project live after opening code.
    • For better preview, centered and responsive card, modify code as:
    body {
  background: var(--very-dark-blue-main);
  font-family: var(--ff-Outfit);
  display: grid;
  place-content: center;
  min-height: 100vh;
}

    .container {
  color: var(--white);
  padding: .8em 1em;
  border-radius: 15px;
  background: var(--Very-dark-blue-card);
  width: 310px;
}

    .card-img {
  height: 280px;
  border-radius: 10px;
  background-image: url(./images/image-equilibrium.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

    Remove following blocks of code:

    @media (max-width: 378px) {
  .container {
    width: 90%;
  }
}
@media (max-width: 420px) {
  .container {
    width: 85%;
  }
}
@media (max-width: 688px) {
  .container {
    width: 50%;
  }
}
@media (max-width: 1024px) {
  .container {
    width: 35%;
  }
}
@media (max-width: 378px) {
  .card-img {
    height: 280px;
  }
}
@media (max-width: 420px) {
  .card-img {
    width: 100%;
    height: 290px;
  }
}

    --Got any questions, REPLY--

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn , GitHub

    Marked as helpful
  • P
    Atif Iqbal•3,320
    @atif-dev

    Hi, congrats🎉 on completing the challenge. Better take about following points:

    • When we open GitHub repository link, at right side you will find an About Section. There, also include brief description and live preview link of your project. It is better for someone to check your live project while interacting with code.
    • Include a README.md file in your GitHub project's solution and write about your working flow, findings, new learned things, useful resources, etc.
    • There are responsiveness issues in QR-code container. For a better preview, centered and appropriate responsiveness, modify code as:
    body {
  background-color: var(--LightGray);
  font-family: 'Outfit', sans-serif;
  display: flex;
  min-height: 95vh;
  justify-content: center;
  align-items: center;
}

    .flex-container {
  background-color: var(--MyWhite);
  border-radius: 6%;
  padding: .8em .1em;
  width: 275px;
}

    .contenedor_texto {
  border-radius: 10px;
  margin: 1% 7%;
  text-align: center;
}

    Remove following code:

    @media only screen and (max-width: 600px) {
  .flex-container {
    width: 80vw;
    margin: 20% auto;
    padding: 5% 1%;
  }
}

    (When you will be enough comfortable with CSS then better learn about responsiveness and responsiveness units. You can learn responsiveness units from a free short course Conquering Responsive Layouts).

    --Got any questions, REPLY--

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn , GitHub

  • P
    Atif Iqbal•3,320
    @atif-dev

    Hi, congrats🎉 on completing the challenge. Better take about following points:

    • You must be seeing some accessibility issues generated by FEM Report Generator. To avoid accessibility issue "All page content should be contained by landmarks" use code as :
    <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
    • Also work on responsiveness of <div class="bottom"></div> block
    • When we open GitHub repository link, at right side you will find an About Section. There, also include brief description and live preview link of your project. It is better for someone to check your live project while interacting with code.

    --Got any questions, REPLY--

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn , GitHub

  • P
    Atif Iqbal•3,320
    @atif-dev

    Hi, congrats🎉 on completing the challenge. Better take care about following points.

    • Testimonial horizontal scroll and vertical scroll don't look good. Make it according to design
    • When we click on testimonial button above text and images change.
    • <button id="get-started">Get Started</button> hover effect not good.
    • Click on email input field then click anywhere on screen you will see invalid email message. (Invalid email message should only appear on button click)
    • Responsiveness is also not good, you need to work on responsiveness.
    • You must be seeing some acceessibily issue in code after project submission. To avoid accessibility issue "All page content should be contained by landmarks" use code as :
    <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
    • When we open GitHub repository link, at right side you will find an About Section. There, also include live preview link of your project. It is better for someone to check your live project while interacting with code.

    --Got any questions, REPLY--

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn , GitHub

  • P
    Atif Iqbal•3,320
    @atif-dev

    Hi, congrats🎉 on completing the challenge. YOU DID WELL🌼😍. Better take care about following points📝.

    • When we open GitHub repository link, at right side you will find an About Section. There, also include project's description.
    • In README file of your GitHub project's solution remove already present content and write about your own working flow, findings, new learned things, useful resources, etc.
    • It is preferred to use em unit for margin and padding and rem for font-size. Watch Here. (and if you want to go further to understand responsive units, better explore Conquering Responsive Layouts short course).

    --Got any questions, REPLY?--

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn , GitHub

    Marked as helpful