@jenna1k
P
Houari Aouinti
@aouintihouariAll comments
- P@aouintihouari
Great job; the app seems to work correctly. However, you could have added some transition effect to make the user experience smoother, but well done. Keep practicing.
- @kaoutar-ouadihWhat are you most proud of, and what would you do differently next time?
I'm proud of completing this challenge!
What challenges did you encounter, and how did you overcome them?I struggled with making the filter and search work together, but in the end I figured it out.
What specific areas of your project would you like help with?Anything that can help me improve.
P@aouintihouariCongratulations! You did an excellent job. But there is room for improvement. For example, it would be preferable to use the startwith to filter the countries rather than looking for those that contain a particular letter when using the search bar to filter the results. Additionally, since console.logs are typically used for debugging, remember to clean them up before deploying your application. In the border countries, the full name of the country should be displayed, not just its abbreviation, and clicking on it should take you to the country's details. Additionally, adding a SkeletonLoader while the user waits for the data to be fetched from the JSON file enhances the user experience. Although the json file only provides the abbreviations, you can use the alpha2Code or alpha3Code to find the full name. Additionally, try using memoization to avoid needless recalculations of values in React. I realize this is possibly one of the trickiest parts of the challenge.
- @Djamel1133What are you most proud of, and what would you do differently next time?
Mobile first approach ....
What specific areas of your project would you like help with?Any feedback is welcome
P@aouintihouariWell done! Keep practicing and improving.
However, I've noticed that you've used the @import in your CSS file rather than linking them directly in your HTML. For a very small and simple project like this one, it's not a problem, but you should know that it's not a best practice. You should link the fonts directly in your HTML for better performance.
Linking fonts directly in the HTML <head> is better for performance due to a few key reasons:
-
Early Loading: The browser can start loading the font as soon as it encounters the <link> tag, reducing the time it takes for the font to be available for rendering.
-
CSS Parsing: When using @import, the CSS file must be fully loaded and parsed before the font can be requested, adding an extra step that can delay font availability.
-
Parallel Requests: Linking directly allows the browser to initiate multiple requests simultaneously, which can improve overall loading speed compared to the sequential nature of @import.
-
Reduced Render Blocking: Using a direct link can help avoid blocking rendering, allowing the page to display content faster.
Overall, these factors contribute to a smoother user experience and better performance metrics for your site.
Marked as helpful -
- P@danmlarsen
Mortgage repayment calculator using React & Tailwind
#react#tailwind-css#typescript#vite#framer-motionP@aouintihouariGreat job, honestly, I love and I love how smooth the interaction and the result display are. The only thing I could say is maybe when there's a switch in the mortgage type, it could have been better if the result changes automatically without having to click on the calculate button again. Also, maybe you could have added a comma-separated format for the mortgage amount input. But great design and job overall.
Marked as helpful - @WillAsampongP@aouintihouari
The images don't appear on the screen and the gallery takes more columns than it should, also there's no way to deselect an item by reducing it's value to zero, the only way to do that is using the remove icon in the cart, but once done the - and + icons are still apearing and the add to cart icon is removed, also even after removing the all the items from the cart, the cart doesn't show the empty cart icon as it should. I've just accomplished this challenge, you can take a look to my code if you need help to accomplish it.
- P@AdamullaOsasWhat are you most proud of, and what would you do differently next time?
I know I missed a few hover effect ;))
P@aouintihouariWell done, This is a great job, I'm not going to talk about the hover effect, as you're already aware about them, but maybe you should have increased the z-index of the switch mode component so that it's not partially covered with the timer's box-shadow. Good luck, and keep practicing.
- @thusmileyP@aouintihouari
Great job, congratulations, especially that you made it only using vanilla JS and Sass; the only functionality lacking is the slideshow; images should slide automatically when it's clicked. Also, it could be better if there were some smooth animations and if the content was injected automatically rather than having many pages.
- @chrisaidan96
- @dimitrisdrWhat are you most proud of, and what would you do differently next time?
I am very proud from bringing this project as close as the original one! Scrimbas course and Kevin Powel helped me understand a lot of things that wasn't clear to me before!
What challenges did you encounter, and how did you overcome them?Organizing my code was something that i got struggled with. The lesson that I followed gave me inspiration and new ways of organizing css html and js.
What specific areas of your project would you like help with?Accesibility is something that I need to study. I also think that asynchronous functions is something that I don't fully understand
P@aouintihouariWell done, only improvement maybe changing some font family for some parts in the content to adapt the original design, also the explore button should be clickale and lead to the destination page
Marked as helpful - P@35degreesWhat are you most proud of, and what would you do differently next time?
I wasn't that excited about using Tailwind but I'm so glad I did. It's a clean, efficient and sometimes fun way to write code. It makes container sizes so easy.
What challenges did you encounter, and how did you overcome them?Getting animations right was challenging but I like a few that I came up with, like the FAQ dropdown.
What specific areas of your project would you like help with?Any feedback is welcome to improve my skills.
P@aouintihouariGood job, but there are some room for improvements, For example, on mobile screen size, the text overlaps in the feature section, the email validation isn't implemented, some button background and border colors don't correspond to the the design you were asked to implement, and the hamburger navbar needs to cover everything, including the logo. But it is a good job. My comment is not meant to discourage you, but to push forward and make you take more things into consideration next time.
Marked as helpful - P@kadiryildiriP@aouintihouari
Good job; however, the left image should take more space than the right section, and the text and the title should also change when there is a click on the arrows. Not only the image, but you should also add some more animations and make it run more smoothly. Take a look at my implementation; maybe it can inspire you. I also personally think that there's no need to use a framework like Tailwind for such a small project.
Marked as helpful - @ajervin900What are you most proud of, and what would you do differently next time?
sdfsdf
What challenges did you encounter, and how did you overcome them?sdfsd
What specific areas of your project would you like help with?sdfsdf
P@aouintihouariThis is not the same project; this is not serious at all, you'll never get a good job as a programmer if you're not serious and professional.
- @janvi-chhirangP@aouintihouari
Well done, There are some minor improvements, like the text color that is different from the original text color, the font size, and the alignment of the the text at the bottom of the card, which can be easily fixed using flexbox, also you forgot to add the clock icon.
Marked as helpful - P@35degreesWhat are you most proud of, and what would you do differently next time?
I'm going to re-visit this in the future. I could only get it working without the CPU, I struggled with the logic and I need to move on to the next project.
P@aouintihouariI understand that you struggled with this project; I just finished it. You can take a look at my solution, as I just finished it.
- @karolbanatP@aouintihouari
Great job! I loved the effect with the numbers; the only issue is with the responsiveness for tablets and smartphone screen sizes.
- @TerezLP@aouintihouari
Good job! I loved the hamburger button icon change; however, there's still some room for some minor improvements; for example, in the design, the user should have a rounded border when hovered over, not an underline; also, there's no button to delete the items from the cart; also, the next and previous buttons are too low on smartphone screen size; but you nailed it overall. Great job.
- @CodewithWitcherP@aouintihouari
Good job, however the content is a little bit squashed in the screen, there should be more margins between sections and elements, also the button background color doesn't change when hovered over, and on smartphone screens it gets shifted to the left of the screen, also the close button should be on the left, and the last item in the news shouldn't have a line under it.
- @BarrickUARP@aouintihouari
The text appearing at the bottom of the form is ugly.
