@kingskyro64Submitted 5 days ago
What specific areas of your project would you like help with?
Actually, all help and suggestions are welcome
Nikolay Toshev
@gilotinAll comments
- @gilotinPosted 5 days ago
-
Use more meaningful name to your classes, it important to know what they are named for.
-
You can wrap the card in article and div one and two replace with section (with meaningful names).
-
You can reduce .but margin to simulate the buttons from the design or use gap in the parent element, because you are using flex
0 -
- @ddosiaSubmitted 5 days agoWhat 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.
@gilotinPosted 5 days agoYou 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 helpful0 - @AV-DNSubmitted 5 days agoWhat 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.
@gilotinPosted 5 days 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 helpful0 - @Mayen007Submitted 5 days agoWhat 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!
@gilotinPosted 5 days 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 helpful0 - @temesgen-982Submitted 5 days agoWhat specific areas of your project would you like help with?
Making the javascript simpler
@gilotinPosted 5 days agoThis 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 helpful0 - @zekeer21Submitted 14 days agoWhat 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.
@gilotinPosted 14 days 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 helpful0 -
- @cswin10Submitted 17 days agoWhat 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
@gilotinPosted 17 days agoHaving 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 helpful1 - @Josefina-MayansSubmitted 24 days agoWhat are you most proud of, and what would you do differently next time?
Handling the mobile first approach by using Tailwind CSS in a smart way is something I am proud of. Also, the use of clean React components.
Next time, I would try some testing libraries just to practice TDD, and also try some other CSS approach like Styled Components or even libraries like Material UI.
What challenges did you encounter, and how did you overcome them?Probably the keyboard navigation was the most challenging since I had never done it, but I managed to overcome it with some help from my dear friend Google XD.
What specific areas of your project would you like help with?When not on a 1440px or 375px screen viewport size, items such as the background header image appear in a strange way. Also, there is some problems with visualizing some icons in the Vercel deployment.
If anyone has any comments, it would be much appreciated!
@gilotinPosted 24 days ago- Hello, about the background images, you can stack them with index-z and height , or :before , :after, that way you should fix your problem with the strange appearance
- About not loading the images, try debugging the image path. You are building the components with Vite ( I guess from the node directory). Check if Vite has specific folder structure, that might cause the problem (I'm not familiar with vite)
0 - @SiyaaanSubmitted 27 days agoWhat challenges did you encounter, and how did you overcome them?
I'm not confident on my understanding of em and rem.
What specific areas of your project would you like help with?I want to know if there are any more improvements specially on my use of units.
@gilotinPosted 27 days ago-
Pixels are fixed units and if you want everything to scale with your font you must use rem even in the border-box and radius. In your <body> you have font size if 16px this is unnecessary because this is default size. Rem are dependent to default font size , em is dependent to parent size. If you want to make something to scale specifically to it's parent you should use em. Overall your units are perfect as it is. But if someone wants to use accessibility options to force bigger font size, your border-box and radius won't scale.
-
I've noticed that you are trying to use BEM naming convention, but I think you don't know it perfectly. BEM - block , elements, modifier Is used that way block__element--modifier. Example: hero__header--red You write everytime modifier , you should provide more context to that modifier and latter in the code you are writing - Card__author__image, you can represent that as card, author__image or card__author-image . You can check here.
1 -
- @JacksonRuddSubmitted 27 days agoWhat are you most proud of, and what would you do differently next time?
I think this time I was closer in terms of small details like the 1.5 line lengths and box shadows etc.
What challenges did you encounter, and how did you overcome them?Issues Padding a Div
I had my Learning tag like this:
Learningand my css was adding paddinglike
.topic-tag { padding:1px }For some reason this added a margin of way more than
1px.I fixed this issue by getting rid of the
divLearningI still don't get why this happened.
Issues With Responsive Layout
I still don't understand how to make responsive UIs. The pixels specified in the markdown don't seem to actually match what looks good on my laptop. And right now I just set
max-widthandmin-width.@gilotinPosted 27 days agoHello, your card is looking great , I'll give you just little suggestions for better HTML semantics and try to explain me why you need documentation.
- You can use <section> or <article> for one of the div tags, because you are creating card that should have <h1> instead of topic tag. This is important for good accessibility and SEO.
- Please provide structured documentation (readme.md file) it's important for future projects when you are applying for jobs. The documentation example is provided in the materials. If you don't know Markdown you can check in YouTube for more info.
Marked as helpful1 - @FatherSwordSubmitted 27 days agoWhat are you most proud of, and what would you do differently next time?
I think I need to overcome the challenge of importing a font family next time, this time I just adapted a web-safe font so the work is not perfect.
What challenges did you encounter, and how did you overcome them?I encountered only a few small challenges.
@gilotinPosted 27 days agoHello, I'll try to provide some suggestions to improve your codding skills. Hope they will help you.
-
you should provide a proper documentation. If you don't know how, there is a guide in the challenge materials. If you don't know how to use Markdown you can check this crash course ; Documentation is needed in your future work and it's important to know how to write is property.
-
Don't use strong tag for bolding your text, you can find information about SEO in internet and try to learn how to use html tags before going forward with Dom manipulation and JavaScript. People are ignoring CSS and HTML, but they are crucial skills for all frontend developers. Instead you can use <span> tag to style the text or use <b> tag, but with span and one class you can style everything at once with css.
-
Use class names for everything you have to style and try to have same specificity. If you don't know what it is you can check this video
Happy codding.
Marked as helpful1 -
- @iamtushar11Submitted 27 days ago@gilotinPosted 27 days ago
Hello I'm going to give you some points how to improve your code and documentation.
- Documentation is important, but your documentation is messed up and Markdown doesn't work.
- In your HTML you are using list of elements with buttons. Buttons are used for submitting , triggering JavaScript etc. not for navigation. You can use here nav tag with list of anchors to navigate property and the semantics will be better.
- You should use class names and ID(when needed) to stylized your HTML , this is considered as best practice.
1
