P
@CHBNDJSubmitted 8 months ago
What are you most proud of, and what would you do differently next time?
none
What challenges did you encounter, and how did you overcome them?none
What specific areas of your project would you like help with?none
P
Abdessalam Barka
@barka-devAll comments
- P@barka-devPosted 7 months ago
Great job on completing the challenge! There are just a few suggestions to help improve the implementation:
Semantic Elements: Consider using more semantic elements rather than relying on
<div>for structuring your component. For example, instead of using<div>to create the rating options, you could use<input type='radio'/>to enhance accessibility and clarity.Alignment: To improve the alignment of your component, you might want to use Flexbox to center the elements on the screen. A structure like this would work well:
.container { display: flex; justify-content: center; align-items: center; height: 100%; }This will ensure the component is centered both horizontally and vertically.
Active State Styling: I noticed that the active style is not being applied to the selected option until the mouse moves out. It would be great to have the active style update immediately upon selection to improve user interaction.
Keep the great work, and happy coding :)
Marked as helpful0 - P@roidzuhSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
React, Tailwind CSS, mobile-first approach
What challenges did you encounter, and how did you overcome them?none
What specific areas of your project would you like help with?Any feedback is welcome!
P@barka-devPosted 7 months agoGreat job on this project! It's very close to the design that was provided. I do have a few comments :
1- The hover effect on the buttons doesn't seem to be working as expected. 2- The progress bar color doesn't change when switching to dark mode. 3- In dark mode, after refreshing the page, the theme switcher resets to the left, even though the site remains in dark mode. This causes the switcher to function in reverse (switcher on the left = dark mode / switcher on the right = light mode).
Keep up the good work, and happy coding :)
Marked as helpful1 - P@sikulamartinSubmitted 7 months agoP@barka-devPosted 7 months ago
Great job on this project! There are just a couple of areas that could be improved to make it even better:
1- It would be great if you could handle the case when the number "0" is entered in the "Number of People" field, as it currently results in "NaN" or "Infinity" being displayed in the result.
2- Consider using more semantic HTML elements, especially in form controls, to enhance the accessibility of your page. For instance, using <input type="radio"/> for the tips might be more appropriate than using <button>.
Keep up the great work, and happy coding! 😊
Marked as helpful0 - P@fsahinbasSubmitted 7 months agoP@barka-devPosted 7 months ago
Great work on the project! Just a couple of things to improve: focus on aligning components and adjusting spacing between elements. Also, using semantic HTML elements like <article> and <section> instead of <div> is important for accessibility. These elements help screen readers and assistive technologies understand your content better, making your site more accessible to everyone. and last thing, i noticed that the small icon in the top right corner of the cards is missing in production. This might be due to an incorrect path. Try adding "./" before the icon path, like "url(./images/icon-work.svg)".
Keep up the good work, and happy coding!
Marked as helpful0 - @Cristal32Submitted 7 months agoP@barka-devPosted 7 months ago
Good job, and there are just a few more things to address to complete the project. for example:
1- The error message doesn't appear when the email is invalid, and the input field should change to red, as shown in the design. 2- The overall size of the component is larger than expected. 3- The corners should remain square (not rounded) on the mobile version.
Keep up the good work, and happy coding!
Marked as helpful0 - P@AdamullaOsasSubmitted 8 months agoP@barka-devPosted 8 months ago
Great job! It's very close to a perfect match. I do have a few suggestions: 1- Consider using more semantic HTML elements instead of relying heavily on <div>. 2- The image could use a bit more adjustment in terms of positioning to match what you have on the design. 3- The share icon doesn’t change its color when clicked, as shown in the provided design.
Keep up the good work, and happy coding!
1 - P@AdamullaOsasSubmitted 8 months agoWhat specific areas of your project would you like help with?
I have really need to fix my responsiveness, because between mobile and tablet view is a huge gap that could have been fixed
P@barka-devPosted 8 months agoGreat job on the project! but there are a few areas that could use some additional attention:
1- It would be beneficial to use more semantic HTML elements instead of relying only on divs to structure the different sections of your page. This will improve the accessibility and clarity of your code.
2- It looks like you've focused primarily on the desktop version, but it's important to ensure the project is responsive across all devices, including mobile and iPad. Please adjust your layouts according to the design specifications provided for those devices.
Keep up the great work, and happy coding! 😊
0 - P@innitmanSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
Using grid - it is getting more familiar
What challenges did you encounter, and how did you overcome them?This was more straightforward than the previous one for me, as grid template areas seems to help a lot
What specific areas of your project would you like help with?Anything you can comment on I'm grateful for, but nothing specific
P@barka-devPosted 8 months agoYou did a great job on the alignment in both the desktop and mobile versions. If you could just reduce the size of the cards to avoid the white space left on some of them and make everything consistent and centered on the page as you have on the design provided, that would be perfect. The same goes for the mobile version, as you need to reduce the font size to again match the design
1 - @BikramThapa0803Submitted 8 months agoWhat are you most proud of, and what would you do differently next time?
i will tey to make it more better.
What challenges did you encounter, and how did you overcome them?grid but ill make it with help of internet
What specific areas of your project would you like help with?grid box
P@barka-devPosted 8 months agoThe layout in general is good, but I have some comments about the project:
- Consider using more semantic HTML elements like <section> or <article> instead of <div>.
- The spacing around the elements does not match what is provided in the design.
- The size of the icons is not consistent with the rest of the content.
- There is no mobile version. Maybe you have not paid attention to the mobile version design given with the materials.
Keep going! :)
0 - P@newbieDesignDevSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I was able to do the project on my own without looking at others code. Able to troubleshoot on some areas.
What challenges did you encounter, and how did you overcome them?- The first challenge I have encountered in this project is how to change an image on different breakpoints.
- Was able to find a way to do it by googling on how to change an image when certain breakpoints are met.
I was having challenging time when I added the cart-svg which is taking up the parent containers height and width which is causing it to be overly stretched. When I googled the svg should have a specific height and width which it has. The problem that was occuring to me was my own fault. I had use in my CSS a selector of .preview-card img with 100% of width. When I found it out after almost half an hour It was just my own fault. I learned that using more specific class selector will help and using better CSS selector names specially when the time comes of designing for much bigger projects.
What specific areas of your project would you like help with?I think one of the areas I need to improve is to create a naming system for my CSS selectors.
P@barka-devPosted 8 months agoWell done! The overall design is very close to the provided design. However, you need to pay a bit more attention to the spacing between and around the elements to ensure it is consistent across all devices. Additionally, you could use more semantic elements; for example, consider using <section> instead of <div>.
Marked as helpful0 - @apekulSubmitted 8 months agoP@barka-devPosted 8 months ago
Well done on this one; it looks perfect! Maybe in the future, you should consider using more semantic HTML tags. For example, in your code, you could use <strong> instead of <span>, and in the 'Nutrition' section, you could use <table><tr><td> instead of <span><p><div>. This will save a lot of coding in both HTML and CSS.
Marked as helpful0 - @fl1pHoverSubmitted 8 months agoP@barka-devPosted 8 months ago
Well done on this project! It's almost identical to the provided design. However, I have one comment regarding the headings, which are a bit bolder than what is shown in the design. Additionally, in terms of HTML structure, I don't think it's a good approach to move from an h1 to an h3, skipping the h2.
Marked as helpful0 - @tris6Submitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I measured layout sizes in a photo editor to get exact number of pixels. Working with these measurements I was really happy with how similar the result came out.
Still getting used to how best structure CSS selectors.
What challenges did you encounter, and how did you overcome them?For the "Learning" badge, I struggled to align the background color box around the text. Originally I specified width in pixels to make it center around the word, but not good practice if the word length changes. I ctrl-spaced and discovered the fit-content property, which combined with padding, seems like a perfect solution.
What specific areas of your project would you like help with?Not sure if I could have systemized my class selectors better. Felt like I was having to fine-tune individual elements a lot.
P@barka-devPosted 8 months agoI really liked the result; it is very close to the provided design. However, I have one comment: When you decide to use heading tags, you should always start with <h1>, then <h2>, and so on, without skipping any levels. If your purpose is to achieve a specific text size, you should consider using CSS instead.
Marked as helpful0 - @YNayanSubmitted 8 months agoP@barka-devPosted 8 months ago
I recommend using semantic HTML elements instead of just <div> tag to build the component. that will improve your site accessibility and it will help you also to apply all your CSS styling without the need to use class attributes, which will make your code much cleaner example:
<main> <section> <img /> <article> <header> <h1></h1> </header> <p></p> </article> </section> </main>0
