Frontend Mentor | Nikolay Toshev's profile

Latest comments

Daniil Churikov•80
@ddosiaSubmitted 5 months ago
What specific areas of your project would you like help with?
I don't know how other people estimate text size and margins/paddings based on screenshots, are there any good tools for this? Using gimp currently.
Social links profile with tailwind css
#tailwind-css
1
Nikolay Toshev•310
@gilotinPosted 5 months ago
You don't have to measure anything from a picture. In a real project you will receive assignment with everyone in it. Spacing, letters, composition, etc. are created by the designer in Figma or Photoshop. Our job is to put them on a blank webpage and make them dynamic.

If you need additional information, ask freely.
Marked as helpful
0
DV-AN•100
@AV-DNSubmitted 5 months ago
What are you most proud of, and what would you do differently next time?
To see what I can improve and optimize in my code. This is one of my very first HTML & CSS projects, so... I think my CSS is quite disorganized; it gets confusing sometimes.
What challenges did you encounter, and how did you overcome them?
I encountered more responsiveness issues, like with my link buttons, some background sizes, etc.
What specific areas of your project would you like help with?
I learned more about size properties like px, em, rem, etc. I will try next time to focus more on responsive CSS; it's my biggest problem.
Social Media Links
1
Nikolay Toshev•310
@gilotinPosted 5 months ago
If we assume that this a website and this card is used to navigate you in the website, you shouldn't use target="_blank" . This is used for external links with some other attributes.

Suggesting you to not neglect HTML syntax, it's important. Don't use only divs.

About CSS I'm suggesting you to try Kevin Powell's videos on YouTube and maybe his free course for responsive layout. Learn About css specificity and name everything you are about to change with css, it's will be easier to maintain.
Marked as helpful
0
Mayen•440
@Mayen007Submitted 5 months ago
What are you most proud of, and what would you do differently next time?
What I’m most proud of:

I’m most proud of the overall user experience I was able to create. The form’s responsive design works seamlessly across both desktop and mobile views, and the client-side email validation ensures users get immediate feedback. The success message modal adds a nice touch, making the form feel interactive and polished. It was a rewarding challenge to ensure everything worked together smoothly, especially the transition from error to success states.

What I would do differently next time:

Next time, I’d focus more on improving the accessibility features, such as adding ARIA labels and ensuring the form is fully navigable with a keyboard. I would also like to explore more advanced form validation techniques, perhaps using a library to handle edge cases more efficiently. Finally, I would consider using a JavaScript framework like React for better code organization and scalability in larger projects.
What specific areas of your project would you like help with?
I’d like help with optimizing the performance of the form, particularly with regard to the JavaScript. While the form is functional, I’m sure there are more efficient ways to handle the event listeners and validation logic. I’d also appreciate feedback on improving the accessibility features, such as ensuring the modal and form are fully accessible for users with disabilities. Additionally, I’m interested in best practices for structuring the CSS to ensure scalability and maintainability as the project grows. Any tips or advice on improving these areas would be greatly appreciated!
Newsletter Signup Form
#accessibility#pure-css
1
Nikolay Toshev•310
@gilotinPosted 5 months ago
First and most important , don't pollute your code with comments, they are making the code unreadable and can distract you from the code. The code must be self-explanatory. Why I need explanation for .hidden ?

About css operations in your script. You can achieve the same effect without messing with the css directly in the script, just create the desired style in a class and apply it when needed with classList.add/remove, it will be cleaner.

/Edit: I just checked./

Overall after cleaning the comments , your code isn't that bad. You can move some logic in separate functions and make it more clear and readable.

Overall, good work.
Marked as helpful
0

Temesgen Adane•310

@temesgen-982Submitted 5 months ago

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

Making the javascript simpler

FAQ Accordion

Nikolay Toshev•310

@gilotinPosted 5 months ago

This is my solution. You can compare it to yours. I'm sure my code could be more robust, but I'm still learning too.

faqs.forEach((faq) =>
    faq.addEventListener("click", () => {
        const buttonImg = faq.querySelector("img");

        faq.classList.toggle("active");

        if (buttonImg.className == "closed") {
            buttonImg.src = "./assets/images/icon-minus.svg";
            buttonImg.className = "open";
        } else {
            buttonImg.src = "./assets/images/icon-plus.svg";
            buttonImg.className = "closed";
        }
    })
);

Marked as helpful

Zeke Achas•70
@zekeer21Submitted 6 months ago
What are you most proud of, and what would you do differently next time?
It's a bit of a challenge since the colors are not given and I have to experiment and test every possible colors. But it's worth the try.
What challenges did you encounter, and how did you overcome them?
Picking the right colors and the right sizes.
Social Link Profile Main
4
Nikolay Toshev•310
@gilotinPosted 6 months ago
For picking colors you can use color picker from browser devtools or from any website that provides one.

Your HTML is good , but you can improve non it with using section or article for one of the divs.

Aim for equal specificity in CSS, because in bigger projects this could cause a problem.

Overall good work !
Marked as helpful
0
cswin10•150
@cswin10Submitted 6 months ago
What are you most proud of, and what would you do differently next time?
I'm taking my time with the project more to try and get everything as close to the example as I can.
What challenges did you encounter, and how did you overcome them?
Having some issue with height and width and how they react to different websites
What specific areas of your project would you like help with?
Media queries are still something I'm struggling with a little bit
Blog preview project
1
Nikolay Toshev•310
@gilotinPosted 6 months ago
Having some issue with height and width and how they react to different websites:

There are good videos created by Kevin Powell (He also has a free course for dynamic layuot, it realy helped me for some of the problems you are experincing)

you can try to set max-width and work with percenteces with width.

Media queries are still something I'm struggling with a little bit:

For media querries you can just type @media (min-width: <wanted width>){}, this is working for screens, faxes etc.

About Semantics

I'm seeing you are using only divs and div.container could be section or aticle;

p.learning could be header;

Better to learn HTML semanticl will help you later in your jorney.

Happy coding
Marked as helpful
1