Skip to content
OverviewSolutions
26
Comments
18
P
Aydan
@AydanKara

All comments

  • P
    Aydan•680
    @AydanKara

    Hi @mandrisic

    Your code is well-structured and makes good use of semantic HTML, which improves accessibility. I really liked the way you used aria-label and aria-live for screen readers.

    One improvement I’d suggest is to refactor the cart update logic into a function to reduce repetition.

    • Something like this:
    const updateCartDisplay = () => { /* logic here */ };

    This will reduce repetition and improve readability.

    Overall, you’ve done a fantastic job! The project is well-structured and functional. A few small changes will make it even better. Keep up the great work! 🚀

    Marked as helpful
  • zeegu•390
    @zeegu
    What are you most proud of, and what would you do differently next time?

    ❤Things I've tried

    • Made an animation where the hamburger menu changes to X
    • Switch to aria-expanded true, false considering accessibility
    • Added alt text to img considering accessibility
    • Used Boostrap to design layout and implement functionality
    • Scored 97% on Google PageSpeed Insights
    • Considered web accessibility
    • Responsive for Mobile, Tablet, Desktop devices

    Please let me know if there are any areas of improvement! Thanks :D

    News Homepage

    #accessibility#jquery#bootstrap
    1
    P
    Aydan•680
    @AydanKara

    Hi @zeegu

    ✅ Your project is well-structured and shows great attention to accessibility and performance. Scoring 97% on Google PageSpeed Insights is impressive!

    ✅ Clean Code Structure – Well-organized sections for the navbar, main content, and articles improve readability.

    ✅ Your use of aria-expanded and alt attributes is a nice touch.

    📌 Suggestions for Improvement:

    • Since Bootstrap 5 doesn’t need jQuery, you could replace your jQuery script with vanilla JavaScript for better performance and to remove unnecessary dependencies.
    • I noticed an extra <head> tag inside <body>, which might cause validation issues. This should be removed or replaced with <header>
    • You have a empty <article> tags at the end of the document. If not needed, remove them to keep the markup clean.

    Your layout and responsiveness are excellent. Just a few tweaks in JavaScript and accessibility, and this will be even stronger! Keep up the great work!

    Marked as helpful
  • Muhamad Rukhul Kirom•350
    @rukhulkirom
    What are you most proud of, and what would you do differently next time?

    I’m really proud of how the form validation is handled in this project. The JavaScript ensures a smooth user experience by providing real-time validation feedback, and the error handling feels intuitive. The toast notification for successful submissions adds a nice touch of interactivity, making the form feel polished and professional. Additionally, the UI design is clean and responsive, ensuring that it works well on different screen sizes.

    One improvement I would make is refactoring the validation logic to be more modular and reusable. Right now, the validateGroup function covers multiple input types, but breaking it into smaller functions for each type could make the code cleaner and easier to maintain. I would also consider using a form library or built-in HTML5 validation features for better scalability.

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

    Challenge:

    Initially, managing validation for different input types (text, email, radio, checkbox, textarea) in a single function became messy. Some errors didn’t display correctly, and real-time validation wasn’t working smoothly.

    Solution:

    I structured the validation logic to handle each input type separately within the validateGroup function. I also implemented event listeners (click and blur) to provide immediate feedback when users interact with or leave a field.

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

    1. Is my validation logic structured efficiently, or is there a better way to organize it?

    2. Would breaking down validateGroup into separate functions for each input type improve readability and maintainability?

    3. Are there additional ways to improve accessibility, particularly for screen reader users?

    4. Are there any optimizations I can apply to improve form performance, especially for handling validation?

    Contact Form

    #accessibility#pure-css#van-js
    1
    P
    Aydan•680
    @AydanKara

    Hi @rukhulkirom

    I will try to answer some of your questions.

    1. Validation Logic Structure & 2. Breaking Down validateGroup

    • Your validation logic is mostly clear but could be structured more efficiently. Instead of a switch statement inside validateGroup, consider breaking it down into separate functions for different input types.

    Why?

    • Breaking down validateGroup into separate functions improves readability and maintainability.
    • Each function handles one responsibility (Single Responsibility Principle).
    • Easier to extend if more validation types are added later.

    ✅ Try to create for each case seperate function:

    • validateRadio
    • validateCheckbox
    • validateEmail
    • validateText

    3. Accessibility Improvements

    Your form is already quite accessible. To make it even more accessible you can wrap the radio inputs in a fieldset and use a legend. This gives better context to screen readers.

    These tutorials from W3C Web Accessibility Initiative (WAI) provide best-practice guidance on implementing accessibility in different situations.

    As a final note, I can say your code is well-structured, functional, and user-friendly. Good use of CSS classes to handle errors and localStorage usage for toast messages is a nice touch!

  • jarthurofv•230
    @jarthurofv
    What are you most proud of, and what would you do differently next time?

    I think i worked better with divs and flexbox this time. I try to make it responsive without media queries.

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

    Any feedback is more than welcome, i'm always trying to improve. Thank you!

    recipe page

    1
    P
    Aydan•680
    @AydanKara

    Hey @jarthurofv,

    I just reviewed your HTML code, and I have to say it looks really clean and well-structured! Your HTML structure is well-organized, readable, and follows good coding practices. I can see you put a lot of effort into organizing the layout!

    I will try below to give detailed feedback focusing on semantic HTML, accessibility, and potential improvements.

    Strengths:

    ✅ The code uses semantic elements such as <h1>, <h2>, <h3>, <p>, <ul>, <ol>, and <table>, which improve both SEO and accessibility.

    ✅ The <strong> tags are used to highlight important parts of the recipe, which improves readability.

    Areas for improvement:

    🔹 Use <header> and <main> elements

    • Right now, all content is inside a <div class="container">. Instead, wrap the content in a <main> element to better indicate the page’s main content.

    Example Improvement:

    <body>
  <header>
    <h1>Simple Omelette Recipe</h1>
  </header>
  <main>
    <section>
      ...
    </section>
  </main>
</body>

    🔹 There's an instance where a <h1> is followed by a <h3> without an <h2> in between:

    <h1 class="omelette">Simple Omelette Recipe</h1>
...
<h3 class="preparation">Preparation time</h3>

    • Headings should follow a logical order (h1 → h2 → h3, etc.).

    • Skipping heading levels (e.g., jumping from <h1> to <h3>) can affect accessibility and document structure.

    • Screen readers and search engines rely on headings to understand the content hierarchy. A missing <h2> might make it harder to navigate.

    Here you can read more about of using heading elements.

    🔹 The <div class="separator"></div> element is non-semantic – If this is purely for styling purposes, consider using CSS instead (e.g., border-bottom or margin for spacing).

    🔹 Improve table structure The <table> currently has an empty <th></th> element, which is unnecessary. Also, adding a <caption> would make the table more meaningful for assistive technologies.

    Overall, your code is really well-organized and visually appealing. Just a few small tweaks can make it even better!

    If you want I can also give you Feedback on the CSS code.

    Please if you have any questions don't hesitate to ask.

    Marked as helpful
  • Craig Wolfe•190
    @craigwolfe
    What are you most proud of, and what would you do differently next time?

    The footer section in the mobile layout and using JavaScript to display the social media icons.

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

    I was unable to create the small triangle artifact under the social media icons in the desktop layout.

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

    The small triangle point on the social media icons in the desktop layout.

    Transform Your Room Responsive Flexbox CSS

    2
    P
    Aydan•680
    @AydanKara

    Great work @craigwolfe. It´s look amazing.

    For the small triangle point on the social media icons I used ::after pseudo-element to insert content after the content of an element.

    Here's what it would look like for you:

    .share-shape-container::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 12px solid transparent;
    border-top-color: #48556A;
    border-bottom: 0;
    margin-left: -12px;
    margin-bottom: -12px;
}

    You can also change the left positon at the .share-shape-container to center the container

    .share-shape-container {
    ...
    left: 225px;
}

    I hope you find these improvements useful. I wish you a pleasant day.

    Marked as helpful
  • P
    Aydan•680
    @AydanKara

    You did a pretty good job with the challenge @oliviorui.

    If you could implement a smooth transition for expanding and collapsing the FAQ sections, your project would look even better. This really enhances the user experience.

    🚀 You are on the right track, keep coding in the same spirit 😊

  • Olívio Rui Cumbe•220
    @oliviorui
    What are you most proud of, and what would you do differently next time?

    Gostei de da forma como apliquei acessibilidade à página.

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

    Não achei que a paleta de cores cobria todas as possibilidades, especificamente ao background da estrela e as notas, usei uma extensão para pegar a cor exacta (o ColorZilla).

    Interactive Rating Component

    #accessibility
    1
    P
    Aydan•680
    @AydanKara

    You did a great job @oliviorui.

    Using ColorZilla is super tricky.

    🚀 You are on the right track, keep coding in the same spirit 😊

  • Paulo Borges•120
    @Paulo-Borges
    What are you most proud of, and what would you do differently next time?

    De ter conseguido finalizar, não faria nada de diferente.

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

    Conhecer mais funcionalidades do CSS.

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

    No logotipo, que está no rodapé, pois era pra colocar na cor branca, mas não conseguir achar uma solução, pra fazer isso.

    Página responsiva, com CSS flexbox.

    #accessibility
    2
    P
    Aydan•680
    @AydanKara

    🔥 Grande esforço @Paulo-Borges

    Dei uma olhada rápida no seu projeto e posso dizer que parece muito bom.

    Para o SVG como arquivo externo e tag img, você pode alterar a cor com filter para simular mudanças de cor.

    Você pode usar este gerador css-color-filter-generator.

    Este gerador converte qualquer cor HEX ou RGB para uma propriedade filter.

    css-color-filter-generator é mantido por angel-rs.

    No seu caso, basta copiar o rgb(255, 255, 255) da cor branca e colocar no gerador.

    Você pode usar o filtro convertido assim:

    .fylo-address-title img {
    margin-bottom: 30px;
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7484%) hue-rotate(141deg) brightness(104%) contrast(104%);
}

    E você está pronto para ir 🚀

    Espero que isso ajude você. E não hesite em perguntar se tiver alguma dúvida.

  • Marcelo Prado•360
    @ItaloDev-Marcelo
    What specific areas of your project would you like help with?

    I would like to know how can I change the colour of a SVG image, when a hover the image change the colour I try to use the property Fill to change the colour but didn't work

    Responsivo com uso material UI

    #accessibility#material-ui#vite#react
    1
    P
    Aydan•680
    @AydanKara

    🔥 Great effort @ItaloDev-Marcelo

    I took a quick look at your project and I can say it looks pretty good.

    For the SVG as external file an img tag , you can't change its fill with CSS. Instead, use filter to simulate color changes.

    You can use this generator css-color-filter-generator.

    This generator convert any HEX or RGB color to a filter property.

    css-color-filter-generator is maintained by angel-rs.

    In your case just copie the --Lime-Green: rgb(49, 211, 92) color and put into generator.

    You can use the Converted filter like this:

    .icon:hover {
    filter: brightness(0) saturate(100%) invert(63%) sepia(64%) saturate(576%) hue-rotate(82deg) brightness(99%) contrast(79%);
}

    And you are ready to go 🚀

    I hope this helps you. And don't hesitate to ask if you have any questions.

    Marked as helpful
  • jarthurofv•230
    @jarthurofv
    What challenges did you encounter, and how did you overcome them?

    In the media querie i was having trouble having the main .container having some margin from the top. i ended up achieving it by creating another div.

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

    I dont like the media querie, theres a little bit of white between the top borders of the image and the container behind it.

    Product preview card component

    1
    P
    Aydan•680
    @AydanKara

    🔥 Great effort @jarthurofv

    I took a quick look at your project and I can say it looks pretty good.

    To avoid the white color between the upper borders of the image and the container behind it, you need to set the same border-radius for .container and .left img

    .container {
    ...
    border-radius: 20px; // 20 px as in .left img
}
    Marked as helpful
  • P
    Aydan•680
    @AydanKara

    Hi @Minamakhlouf

    I would like to congratulate you on the project. It looks pretty good.

    Maybe you should pay some attention to the design. Since you are a Pro member, use the figma design file that Front End Mentor provides for the project. The functionality works pretty well. The code is well-structured, maybe if you separate the components into separate folders it will be even more readable and clean.

    🚀 You are on the right track, keep coding in the same spirit 😊

  • Facundo Andrés De Los Rios•360
    @FacundoDLR
    What challenges did you encounter, and how did you overcome them?

    The most difficult thing in this challenge was writing the CSS codes for the checkbox type input and the range type slider, literally I spent almost two days looking for information on the internet to know how to customize both elements. I finally found some good resources on the internet that helped me solve these problems and I left the links in my github repository in case you are interested in reading

    password generator [With HTML, CSS, Js]

    #accessibility
    1
    P
    Aydan•680
    @AydanKara

    This is a well-executed solution @FacundoDLR with minor areas for improvement! 🚀

    ✅ Semantic HTML

    • The HTML structure is mostly semantic, using <header>, <main>, and <section>.
    • The use of <label> elements for inputs improves accessibility.
    • A minor issue: <spa> in <span class="output" id="password-length-value">8 </spa> should be corrected to <span>.

    ✅ Accessibility

    • aria-label attributes are used effectively, e.g., for the copy button and password field.
    • The password strength indicator uses aria-live="polite" to announce changes, which is great.
    • The range slider should use aria-valuenow, aria-valuemin, and aria-valuemax for better accessibility.
    • Consider using role="alert" for error messages (e.g., when no options are selected).
    • The checkboxes work well, but adding aria-describedby for further explanation could help.

    ✅ Responsiveness

    • The solution uses clamp() for font sizes, which ensures good scalability across screen sizes.
    • The layout adapts well due to the flexbox/grid approach.
    • However, the password field container might become too narrow on very small screens—adding min-width could improve usability.

    ✅ Code Structure & Readability

    • JavaScript is modular and well-structured.
    • The function updateStrength() correctly updates the UI, but it could be optimized to reduce DOM manipulations inside the loop.
    • The password generation logic ensures at least one character from each selected category, which is great.
    • The CSS variables (--color-neon-green, etc.) make the styling reusable and easy to maintain.

    Your solution is well-structured, accessible, and visually appealing! You've made great use of semantic HTML, ensuring clarity and readability. The responsiveness of the layout is solid, making it user-friendly across different screen sizes. Your JavaScript is clean and well-organized, with thoughtful handling of user interactions and feedback.

    Keep up the great work, and continue refining your skills—you're clearly on the right path to becoming a strong front-end developer. 🚀👏

  • P
    Aydan•680
    @AydanKara

    🔥 Great effort @FacundoDLR!

    This is a well-structured, responsive, and accessible project.

    ✔ Good use of CSS Grid & Flexbox for layout.

    ✔ Strong accessibility practices.

    ✔ JavaScript is modular and well-structured.

    ❗ Suggestions for Improvement

    1️⃣ Semantic HTML – Invisible Headings Issue

    • Headings like <h1>SPLI<br>TTER</h1> may not be the best choice for readability and SEO.
    • Instead of using <br> in <h1>, use CSS (letter-spacing) to achieve the split effect.
    • Add visually hidden <h2> elements to structure the form better for screen readers.

    Fix for screen readers:

    <h2 class="sr-only">Tip Calculator Form</h2>

    .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

    🎯 Benefit: Keeps sections organized while maintaining SEO and accessibility.

    --

    🚀 You are on the right track, keep coding in the same spirit 😊

  • P
    Bojan Lukic•260
    @bojanognjen
    What are you most proud of, and what would you do differently next time?

    I'm proud to have used an API for the first time. I'm encouraged to tackle other complex projects using API content.

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

    I was googling as many other developers to solve that.

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

    I think it would be better to recap responsive technique in developing HTML/CSS content.

    Time tracking dashboard

    #van-js#fetch
    1
    P
    Aydan•680
    @AydanKara

    🔥 Great effort @bojanognjen!

    The project is well-structured, API integration is well-done, and the layout is responsive. A few tweaks to semantic HTML, accessibility, and JS code structure would make this even better. 🚀

    1. Semantic HTML & Accessibility
    • Consider using semantic elements like <section>, <article>, or <header> instead of generic <div> elements to improve readability and accessibility.
    • The <span> elements used for buttons (Daily, Weekly, Monthly) should be actual buttons (<button>) for better accessibility and keyboard navigation.
    1. Layout & Responsiveness
    • The CSS grid system is well-implemented for different screen sizes.
    • You set padding-top: 5rem in body by default. Instead you can try to set padding like this:
    @media (max-width: 768px) {
    body {
        padding-block: 5rem;
    }
}

    This way the content will be centered better on desktop view.

    1. Code Quality & Readability
    • The color styling of active buttons (.span-first) should be handled using CSS classes instead of inline JavaScript changes to keep logic and styles separate.
    • Avoid deep DOM traversal:
    box.children[1].children[1].children[0].textContent = arrayObject.timeframes[key].current + 'hrs';

    This makes the code harder to maintain. Use querySelector with meaningful class names instead.

    I hope my feedbacks helps you. If you have any questions, don't hesitate to ask. I'd be happy if I can help you with anything.

  • Anwar Mestycer•440
    @AnwarMestycer
    What are you most proud of, and what would you do differently next time?

    Event handling with Javascript.

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

    building pixel perfect design and handling CSS from Javascript file was a bit challenging.

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

    I'm open for all your feedback, and you can also clone the project and make your contribution,

    news letter with sign-up (TailwindCSS)

    1
    P
    Aydan•680
    @AydanKara

    Hi @AnwarMestycer. Your project looks pretty good

    • If you want it to be pixel perfect, you can try figma.com. Just drag and drop desktop design image provided by Front End Mentor for the challenge.
    • Then you can check the box sizes, you can also check the font size. It's pretty easy and quick to pick up, it just takes a little practice.
    • You need a Figma account, but this is also quite easy if you have Gmail, for example.
  • Lucky Avbunufe•190
    @Stanmancer
    What are you most proud of, and what would you do differently next time?

    The functionality of the share button.

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

    i was confused as to how i would obtain the shape of the share-links box

    I used a basic clip path to get the triangle at the bottom of the share-links box. clip-path: polygon(0% 0%, 100% 0%, 50% 100%); and then positioned it to match the design.

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

    is there a better way i could have done/gotten the shape of the box??

    Article preview component

    2
    P
    Aydan•680
    @AydanKara

    is there a better way i could have done/gotten the shape of the box??

    Instead of adding a new element I used after pseudo-element to insert content after the content of an element.

    Here's what it would look like for you:

    div#share-box:after { content: ""; position: absolute; bottom: 0; left: 50%; border: 12px solid transparent; border-top-color: var(--clr-dark-grayish-blue); border-bottom: 0; margin-left: -12px; margin-bottom: -12px; }

    Marked as helpful
  • P
    Aydan•680
    @AydanKara

    Congratulations SHASHIDHAR. I would like to suggest some feedbacks to make your project look better. If you set at @media (max-width: 950px) width: 90% and margin: auto from class="part-container", this will center the container exactly. Also, the height would be better if it were 100%, so as not to overlap the container with the attribution class below.

    Another thing that will be useful for you is to set part 1, 2 and 3 flex-basis: 100% in @media (max-width: 950px). So the boxes will correctly take the padding: 50px 20px 40px 50px that you set on the parts class.

    You can also change some html tags to Improve Accessibility: You can change the <div> tag with class="part-container" to a <main> tag and a <div> of class="attribution" on the <footer> tag.

    I hope you find these improvements useful. I wish you a pleasant day.

  • P
    Aydan•680
    @AydanKara

    Great work Orton. It´s look amazing. Congratulations. To get sidebar to have dark backdrop, you can put "bg-black and the text-white" to first <div> from <nav>. I don't have much experience with tailwind css, but it can be done.

    Marked as helpful