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-dev
All comments
- PAbdessalam Barka• 430
@barka-dev
Posted
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 helpful
0 - PRoid Zuhdianto• 260
@roidzuh
Submitted
What 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!
PAbdessalam Barka• 430@barka-dev
Posted
Great 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 helpful
1 What are you most proud of, and what would you do differently next time?
How are you guys? In this challenge I confess that I saw things that I hadn't styled until then, such as the checked button or even the input range (it took some work) but here we are in fits and starts.
What challenges did you encounter, and how did you overcome them?
I had a lot of difficulty working with the inputs, until then I hadn't seen this type of stylization so I had to watch a lot of videos, but I think it turned out well for a difficult solution.
What specific areas of your project would you like help with?
Any feedback, but I mainly want to improve my lines of code as tips to improve the readability of my functions.
PAbdessalam Barka• 430@barka-dev
Posted
Great job on this project! I do have a few suggestions for improvement:
=>Design: 1- The hover effect isn't working on the range slider and checkboxes. It would be good to fix this for a better user experience. 2- When you select the checkboxes, the check icon doesn't show up. Making sure it appears would help avoid confusion.
=>Logic: 1- The generated password doesn't always match the options(character types) selected. It might be helpful to use regex to check if the password includes all chosen options before showing it on the screen. 2- The "strength" level can be a bit unclear since it seems to be based primarily on the Character Length, rather than considering the complexity of the characters used. Also, the strength level and color related to it show up before clicking "generate" which could be confusing.
Keep the great work, and happy coding :)
Marked as helpful
0- PMartin Šikula• 380
@sikulamartin
Submitted
PAbdessalam Barka• 430@barka-dev
Posted
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 helpful
0 - PFatih ŞAHİNBAŞ• 470
@fsahinbas
Submitted
PAbdessalam Barka• 430@barka-dev
Posted
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 helpful
0 - Meryem El Karati• 150
@Cristal32
Submitted
PAbdessalam Barka• 430@barka-dev
Posted
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 helpful
0 - PAdamullaOsas• 370
@AdamullaOsas
Submitted
PAbdessalam Barka• 430@barka-dev
Posted
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 - PAdamullaOsas• 370
@AdamullaOsas
Submitted
What 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
PAbdessalam Barka• 430@barka-dev
Posted
Great 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 What 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
PAbdessalam Barka• 430@barka-dev
Posted
You 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- Bikram Thapa• 80
@BikramThapa0803
Submitted
What 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
PAbdessalam Barka• 430@barka-dev
Posted
The 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 What 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.
PAbdessalam Barka• 430@barka-dev
Posted
Well 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 helpful
0- Adam• 200
@apekul
Submitted
PAbdessalam Barka• 430@barka-dev
Posted
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 helpful
0
