Skip to content
OverviewSolutions
26
Comments
18
P

Aydan

@AydanKaraGermany, Reutlingen680 points

Hi, I'm Aydan. I graduated Computer Science in the University of Ruse. My interests are in Front End Engineering, and I love to create beautiful and performant products with delightful user experiences. I hope "Frontend Mentor" will give me the opportunity to gain new knowledge and experience.

I’m currently learning...

- 🌱 I’m currently learning HTML, CSS, JavaScript, TypeScript, Angular, React...

Latest solutions

  • New Solution for News homepage

    #accessibility
    P
    Aydan•680
    Submitted 3 days ago

    I would appreciate feedback and support in any topics regarding the improvement of the project.

    0 comments

  • Accessible Contact Form

    #accessibility
    P
    Aydan•680
    Submitted 6 days ago

    🔹 Validation Performance: My form validation works well, but are there more efficient ways to structure it?

    🔹 Accessibility Improvements: How can i further improve keyboard navigation and screen reader support?

    🔹 Error Handling Best Practices: Are there better ways to manage error messages dynamically while keeping the code scalable?

    0 comments

  • FAQ accordion - HTML, CSS, JavaScript

    #accessibility
    P
    Aydan•680
    Submitted 10 days ago

    • Dynamic Height Calculation for Transitions: I would appreciate suggestions on how to implement a dynamic solution that calculates the actual height of the accordion content (using properties like scrollHeight) to create smoother and more adaptive transitions.

    • Code Refactoring: Feedback on structuring the JavaScript code in a more modular or scalable way would be beneficial. For instance, should I encapsulate the accordion behavior in a class or use a particular design pattern?

    • Cross-Browser Compatibility: Any insights or testing recommendations on ensuring that the CSS transitions and ARIA attributes work seamlessly across different browsers and devices would be valuable.

    1 comment

  • Interactive rating component

    #accessibility
    P
    Aydan•680
    Submitted 11 days ago

    I would love feedback on:

    • Animations and Transitions: Ideas for subtle enhancements that can make the component feel more dynamic.
    • Accessibility Best Practices: Suggestions for refining the ARIA roles and attributes, or other techniques to further improve the experience for screen reader users.
    • User Experience Enhancements: Insights on any additional interactive features or error-handling improvements that could further polish the component.
    1 comment

  • Frontend Quiz app with HTML, CSS, JavaScript

    #accessibility#fetch
    P
    Aydan•680
    Submitted 14 days ago

    ⚡ State Management: Are there better ways to manage and update quizData, currentQuiz, and userScore without using global variables?

    🚨 Error Handling: How can I improve error handling for cases where the quiz data fails to load or the user navigates incorrectly?

    🚀 Performance: Are there any areas where I could optimize my DOM manipulation for better performance?

    🧑‍💻 Unit Testing: What are the best strategies to write tests for key functions like loadCurrentQuestion() and submitAnswer()?

    0 comments

  • Password generator app

    #accessibility
    P
    Aydan•680
    Submitted 22 days ago

    🔍 Looking for feedback on:

    • Better password strength algorithms – Right now, we check only length. Could we analyze character diversity for a more accurate rating?
    • More accessible UI/UX – How can we improve screen reader support and keyboard navigation?
    • Code optimization – Are there better ways to handle event listeners and state management in plain JavaScript?
    0 comments
View more solutions

Latest comments

  • P
    Aydan•680
    @AydanKaraPosted 1 day ago

    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
    0
  • zeegu•350
    @zeeguSubmitted 4 days ago
    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
    @AydanKaraPosted 3 days ago

    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
    1
  • Muhamad Rukhul Kirom•330
    @rukhulkiromSubmitted 13 days ago
    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
    @AydanKaraPosted 6 days ago

    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!

    0
  • jarthurofv•160
    @jarthurofvSubmitted 9 days ago
    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
    @AydanKaraPosted 8 days ago

    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
    0
  • Craig Wolfe•190
    @craigwolfeSubmitted 10 days ago
    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
    @AydanKaraPosted 9 days ago

    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
    0
  • P
    Aydan•680
    @AydanKaraPosted 10 days ago

    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 😊

    0
View more comments