Skip to content
OverviewSolutions
19
Comments
21
P

Tuna Erten

@tunaertenFrankfurt430 points

I am a musician in an orchestra, but I have been interested in web development for a long time and I continue to work and improve myself in this direction. I started learning by taking courses on Udemy. I am new to using frontend mentor and I really like it.

I’m currently learning...

HTML CSS and JavaScript

Latest solutions

View more solutions

Latest comments

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

    This was a complex project but I got the design and functionality down, I think. I would probably try to make the JavaScript code more modular but otherwise I'm happy with what I did.

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

    The lightbox was the trickiest thing to do, but I succeeded after lots of trial and error.

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

    The icons which are supposed to turn orange on hover don't change for some reason. I would also like help with making the design more responsive.

    E-commerce product page

    2
    P
    Tuna Erten•430
    @tunaerten

    First of all, congratulations on completing the project! It's not an easy task. The first thing I noticed is that you haven't implemented the mobile view.

    -You should add this first, as your site cannot be used from any mobile device without it.

    -Unfortunately, the shopping cart cannot be emptied. Therefore, you could add a trash icon for this feature. .Additionally, you should add hover effects to the thumbnails and plus/minus icons.

    Happy coding!

  • P
    Tuna Erten•430
    @tunaerten

    Congratulations on completing this challenge!

    • Using ul and li for navigation elements is a more commonly practiced method.

    You can structure your navigation like this:

    <nav>
  <ul>
    <li>
      <a class="pad-ele">Home</a>
      <a class="pad-ele" href="#new">New</a>
      <a class="pad-ele">Popular</a>
      <a class="pad-ele">Trending</a>
      <a class="pad-left-ele" href="#category">Categories</a>
    </li>
  </ul>
</nav>
    • You can write this in a much simpler way using toggle like this.
    const toggleNav = () => {
    mob_nav.classList.toggle("active");
};

    In this way, when the button is clicked, the active class is added, and on the next click, the active class is removed.

    • You can also add it to the navigation or links you hover over.
    cursor:pointer
    • I would also recommend making a few additions from an accessibility perspective. You should definitely add ARIA attributes for screen reader compatibility, and the website should be navigable via keyboard. You can read the details here.
    Marked as helpful
  • P
    Mukarram Haq•440
    @MukarramHaq
    What are you most proud of, and what would you do differently next time?

    I was testing out to see if the form was accessible from a keyboard. I didn't add any JS as I wasn't really focused on that.

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

    Probably styling the form

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

    Any advice would be appreciated.

    Contact Form Main

    1
    P
    Tuna Erten•430
    @tunaerten

    First of all, congratulations on completing the challenge! Your code is quite clean and straightforward, which I really liked.

    • It seems you may have overlooked the fact that the assets folder already included files for the radio and checkbox buttons you could update those.
    • Additionally, there was a success message included; adding that would make the project feel more realistic.
    • Instead of using the required HTML attribute, you could also create custom error messages (you can find this in the README page). Best of luck! 👍
  • P
    Tuna Erten•430
    @tunaerten

    First of all, congratulations on completing the project! The design and functionality are almost identical to the provided example.

    • The first thing I noticed was that only the first accordion menu's minus icon changes when the menus are opened. I think you could fix this with a small code update.
    • Also, the project brief suggests implementing it without JavaScript, so you might consider using the details and summary semantic HTML elements for this. (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)
    • Additionally, using ARIA attributes would help specify the purpose of your HTML elements. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) Good luck! 👍
  • dinixtus•320
    @dinixtus
    What are you most proud of, and what would you do differently next time?

    I did very fast this challenge. I needed much more time for newbie exersices month ago.

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

    I solved problem with block layout with flex.

    Interactive rating component(HTML, CSS, JS)

    1
    P
    Tuna Erten•430
    @tunaerten

    First of all, congratulations on completing this challenge; you've done a good job. However, I have a few suggestions. 👍

    -Firstly, you could add cursor: pointer to the buttons and numbers to provide a more realistic experience for the user. -Currently, your code doesn't display which number the user has selected. You can fix this. Instead of making all the numbers buttons, you could use list items and apply event delegation on ul or ol to capture the value of the selected element.

    Wishing you success in your future projects.🙏

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

    First of all i'm proud that, I was able to finish this project. Then to have been able to manage the generation of new question with each click on the Next Question button. Finally, from now I will proceed by section and spend more of my time studying the model and how to proceed to code the elements.

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

    It was hard to injecting each question into the content and recovering the score, but I took a step back to carefully study the figma model then it was easier once I made a good cutting. The deployement on Vercel was an ordeal I had to spend more time there to finally migrate to Netlify. Because by documenting me on the net there was several comments like 'Vercel does not take into account the JavaScript module model etc..'

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

    I'm learning so any help or comment is welcome :)

    Frontend Quiz App

    2
    P
    Tuna Erten•430
    @tunaerten

    First of all, congratulations on completing the challenge! It was quite challenging for me as well. Your code is very clean and well-organized. I noticed that you have three different responsive sizes, but the tablet size doesn’t seem to be included—you might consider adding that. Other than that, I have no further comments; everything looks really good.

View more comments