@thedanielkingSubmitted about 1 month ago
Hendrixx
@BeeAlmightyAll comments
- @BeeAlmightyPosted 27 days ago
Great work Daniel.
- I'd recommend the use of CSS transition property to make your hover effects or other transitions look smoother
Marked as helpful0 - @kamilkoziol5Submitted about 2 months ago@BeeAlmightyPosted about 1 month ago
Great work Kamil Kozioł! Honestly, i dont see how i could have improved your really good solution, but for semantics, we're told to avoid the use of divs as much as possible as they impair web assessibility and search Engine optimization.
0 - @osuulolaSubmitted about 1 month ago@BeeAlmightyPosted about 1 month ago
@osuulola Great attempt at this project. At least i can some good level of functionality on your javascript, however your css can be improved as well as your project looking as close as possible to the design. You can borrow a thing or two from my solution at least in the styling department but in general good try!
0 - @gabrieltrtlSubmitted 8 months ago@BeeAlmightyPosted about 2 months ago
@gabrieltrtl. Great work with your project. Honestly, i don't know of any way that i could improve your code, it's clean, concise and ideal. Good work!
0 - @7osny13Submitted about 2 months ago@BeeAlmightyPosted about 2 months ago
Hi OMAR HOSNY, Great attempt at the challenge given by frontend mentor. However there are certain things i think you need to work on.
- Your solution is not responsive as from screen sizes of 700px, the image is seen out of the container.
- Avoid the use of divs, as they affect Web accessibility and SEO and are not semantic as well instead use main, section, article, header, nav, footer e.t.c
- Then after the Thank you message it's impossible to get back to the homepage again. I think you omitted the javascript for that functionality. But in general, good attempt and i hope you get better at this. I am rooting for you. 👍🏾
Marked as helpful0 - @kunal90803Submitted 2 months agoWhat are you most proud of, and what would you do differently next time?
Trying JavaScript for the first Time.
What challenges did you encounter, and how did you overcome them?I am stuck in how to handle the screen size accordingly with js and css so i made temporary adjustment to reload the page at 800px.. I know that's not the good way of solving issues but am not able to solve it.
What specific areas of your project would you like help with?An not able to handle responsiveness perfectly as if share button is clicked on small screen it does not show the similar active design on larger screen when that change the screen size whit inspect feature.. It would be really helpful if somebody tell me how did they do that in their project.
@BeeAlmightyPosted about 2 months agoGreat work kunal90803, your solution is relatively close to the design given.I love how neat your code base is and how everything belongs where they belong. Honestly, i can't see much to correct here but:
- avoid using divs as much as possible as they interfere with web assessibilty such as screen readers and SEO.
- I think there are shorter ways to write the javascript you wrote but kudos to you because you said it's your first time and the code works as well. Great work!
Marked as helpful1 - @Sanniv2002Submitted about 1 year ago
- @GodinhoweversonSubmitted 3 months agoWhat challenges did you encounter, and how did you overcome them?
I encountered a challenge with CSS Grid. I'm not used to Grid, but I read some articles on https://css-tricks.com/ that helped me overcome this challenge.
@BeeAlmightyPosted 3 months agoHi Weverson Godinho, Great attempt at the design given by Frontend mentor, i love how bold your solution is and how neat your code is. However, i noticed some things that could be improved on:
- Avoid the use of divs and span and use more semantic HTML like nav, main, section, article as they help with web accessibility, screen readers and search engine optimization.
- Input CSS transition whenever you had a hover state like:
transition: background-color 0.2s ease-in-outon the parent element as it helps with smooth transitions to the pseudo state.
Marked as helpful0 - @Cesare94Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I used javascript quite fluently. I'm trying to improve in this aspect. I would have liked to use jquery to streamline the javascript code.
What challenges did you encounter, and how did you overcome them?I initially had difficulty managing variables in javascript. I overcame them with the use of class and id in html selectors.
What specific areas of your project would you like help with?I'm wondering if there is a faster and more intuitive way for lines of javascript code.
@BeeAlmightyPosted 3 months agoHi Cesare, good work trying to attempt this challenge to the best of your ability, however there are some things i'd like to point out about your final solution and your code as well:
- First of, the lack of semantic html with the use of divs , for web accessibility, it's best you use html elements like section, main, header, footer, article.
- Then, your solution especially with smaller screen is not similar to the design given, i think you use implement mobile-first workflow then scale up from there to larger screens. But regardless, great work!!
0 - P@christianb3llSubmitted 4 months ago
- @rafirachmawanSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
html is more interactive and structured
What challenges did you encounter, and how did you overcome them?maybe from structuring the html
What specific areas of your project would you like help with?From a structural perspective, is the HTML correct?
- P@shakthivel-rnSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I tried to use different types of css selectors and also used css grid
@BeeAlmightyPosted 4 months agoHello Ramesh, Great work on here. I love how organized your code is, covered the fundamentals as well as had some next level CSS in there which i applaud. However, there are a few things i felt you could have done differently:
- For semantics, it's best to avoid using div as much as possible, for web accessibility and screen readers it's best you use article, section, h1 - h6, main, header, footer. Regardless, Great work on here!!!
0 - P@litddommSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
Iam proud to complete yet another challenge.
What challenges did you encounter, and how did you overcome them?I had a problem align two vertical cards perfectly in the center but hopefully i solved my problem
What specific areas of your project would you like help with?i dont need any help so far.Thanks
@BeeAlmightyPosted 4 months agoHi lotddomm, Great work here! I love how you had your customized CSS styling before you began working on the project. However, here are some that i noticed that you could have done better:
- You could have used semantic HTML like main, footer, header, article, section instead of divs, it helps with web accessibilities and screen readers as well.
- Your layout definitely fit into all screen sizes from 320px to larger screens but i don't think your solution is so close to the design but hey! you might decide to freestyle, who knows 🤷🏾♂️.
0 - @Crystalis89Submitted 4 months agoWhat are you most proud of, and what would you do differently next time?
This was the first project I have used Picture element, responsive layout changing not just scaling, and starting from mobile size instead of desktop.
What challenges did you encounter, and how did you overcome them?Only thing that gave me issue was trying to have the mobile size both fill vertically while not having excess white space.
Eventually I gave up on having it do so for 100% body height in effort to match the image exactly as that resulted in way to much white space, I am guessing the issue is tied to the size of the mobile layout image coupled with scaling to fit in the small width.
@BeeAlmightyPosted 4 months agoHi Matt, Great work on this project! I love how close to the design your project is. However, i noticed some things i think you could have done better.
- The 'Add to cart button' still has the default border around it. you can get rid of that with
border: noneproperty. Also you can add CSS transitions to the button to make the transition smooth when you hover on the button with atransition: "transition area"(background-color) "transition-time"(0.2s) "transition effect"(ease-in-out). To change the cursor to pointercursor: pointer. - At some point, your image was not responsive with respect. I think was approach was good but it suggest using the display property to hide and display the image when the appropriate image comes on.
- I noticed you hardcoded the PERFUME text to add spaces between letters. A better approach would have been
letter spacing: 0.5rem
Overall, great work Matt!
0 - The 'Add to cart button' still has the default border around it. you can get rid of that with
- @GlitccSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I learned some new things. I learned how to edit code so that the site looks different for mobile devices.
@BeeAlmightyPosted 4 months agoHello Glitcc, Excellent work here. I love your attention to detail on this project. However, there are some things i'd like to point out.
- It's best practice to use semantic elements like main, header, section, article, footer etc and avoid using div all the time for screen-readers or search-engine-optimization. -In cases where two Css classes has the same css properties like in your
}0 - @GlitccSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I learned some new things. I learned how to edit code so that the site looks different for mobile devices.
@BeeAlmightyPosted 4 months agoHello Glitcc, Excellent work here. I love your attention to detail on this project. However, there are some things i'd like to point out.
- It's best practice to use semantic elements like main, header, section, article, footer etc and avoid using div all the time for screen-readers or search-engine-optimization. -In cases where two Css classes has the same css properties like in your
}0 - @nabinsth36Submitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I'm currently in the process of learning TailwindCSS, but I find myself struggling with confidence in my abilities. While I understand some of the concepts, I often second-guess my skills and worry about applying them correctly or efficiently in real projects.
@BeeAlmightyPosted 4 months ago- Great work! it was worth the try.
- I love how you expressed your concerns with your confidence when using Tailwind css, i have no experience with that but i'd like to express concerns with your attention to detail.
- Your project was quite dissimilar to the design given mainly in terms of styles like background-color, hover states, text color e.t.c. Besides that, i think it was worth the effort amd i hope you get feedback on your Tailwind CSS implementation.
Marked as helpful0 - @BledanITSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of the short time I've needed to complete the challenge, even though it is entry-level difficulty.
What challenges did you encounter, and how did you overcome them?Fine layout measuring difficulties, which allowed me anyway to improve my understanding of measurement units and when one should be used instead of another.
What specific areas of your project would you like help with?Fine layout measurements, I think it's still a bit imprecise...
@BeeAlmightyPosted 4 months agoI love how you didn't do the obvious with CSS Flexbox or Grid but i still think it would have been much more easier to handle especially when bigger projects come along but all together, Great work! Now answering the preset questions:
- Yes, i think your HTML is quite semantic.
- I think you used a mobile-first workflow as well.
- Your solution was slightly smaller than the design given but all together, Great work!
Marked as helpful0
