Amirhossein• 810
@amirhazizi
Submitted
any feedback are welcome :)
P
Shane Chaffe
@Chaffexd
All comments
- PShane Chaffe• 900
@Chaffexd
Posted
Hey!
Really good attempt at the project, it's very clean. Good use of Tailwind here to style it as well.
It's a well made out project, the only thing I have feedback on is the shopping cart. When you have a total it's just a number, you don't have a $ for the total amount in the shopping cart as one normally would!
Considering adding this to ensure the user knows this is the total to provide a good user experience!
Other than that, well done!
Marked as helpful
3 - Swagnik Das• 410
@swagthehooman
Submitted
What I found difficult for my approach was to style the radio buttons for theme type input. Please suggest a better way to do this through react.
PShane Chaffe• 900@Chaffexd
Posted
This is a really good attempt at the project!
I like the layout and clean transition between themes. I think the only suggestion I have is to make the theme settings have a hover effect, by that I mean cursor: pointer; so the user knows the interact with it.
Other than that I think this is a well-executed project!
Marked as helpful
0 - Marjan• 280
@MarjanZivkovic
Submitted
Had lots of fun building this small project. Feedback appreciated
PShane Chaffe• 900@Chaffexd
Posted
This is a well though out attempt at the project!
One piece of feedback I have is when you rotate through the quotes, the container size changes. Have you thought about maintaining a single container size so it doesn't change?
Also, it might be a cool idea to consider using Axios to perform your GET request to learn more technologies!
Nice job!
Marked as helpful
0 - Momin Riyadh• 370
@momin-riyadh
Submitted
Can I use Grid in Flexbox components?
PShane Chaffe• 900@Chaffexd
Posted
Hey Momin,
To answer your question about using grid in flex or vice-versa, yes you absolutely can. They work extremely well with each other actually!
I strongly recommend you taking a look at https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes so you can help bring your projects to life.
Good job!
Marked as helpful
1 - Kamil Wiater• 230
@WiaterKa
Submitted
Hello there!
Ufff... managed to deliver first project focused mainly on JS. Struggled with calculation logic but eventually I found solution :D
Any suggestions on improvement of the project are welcome.
Have a nice day and happy coding!
PShane Chaffe• 900@Chaffexd
Posted
Hey Kamil,
Firstly, well done on delivering your first JS focussed project!
Great start! Dealing with forms is a tough topic when it comes to JS, at least I think so.
I have some pointers you might want to improve on:
- NaN when the form is blank isn't a good user experience, you should validate there is input before submission like the design suggests, you should throw an error when the input is blank
- I was also able to submit the form when I accidently put a typo in and got the result: -17950 years 3 months 26 days My input was: 10 / 012/ 19972 which is of course incorrect.
This is what makes this task so difficult because there are so many areas to cover! Other than that, well done!
Marked as helpful
1 - Shchetkov Maksim• 470
@ArmsAndArrows
Submitted
It seemed easier before I started.
How to implement dropdown menu in one piece of code? It seems like buttons within are totally separated from accordion titles in desktop menu and totally together in mobile version. I'd like to keep DRY principles but this case kicked me off. Anyway this challenge is great.
PShane Chaffe• 900@Chaffexd
Posted
This is a really good implementation of the design! You copied it pretty much 1 for 1. Well done!
- One thing that initially confused me was that the nav bar menu items can't be dropped if you click the arrow, as a user that is what I am used to so it made sense for me to click there but it didn't work. Have you considered including that img as part of your p? Or maybe wrapping it all in a button <button><img /></button> for example so you have both pieces of markup available for the drop down?
Other than that, no feedback!
Marked as helpful
0 - Kévin Burle• 370
@kevinburle
Submitted
Hello everyone,
I wanted to make this product page as dynamic as possible so I added some features to the challenge:
1.Display one or more products dynamically 2.Modify the products data by the data.js file 3.Calculate the height of the cart dynamically according to the number of items 4.Open the cart after adding a product 5.Close the cart after a certain time after adding a product 6.Application works the same way with one or more products
to make it simple, the data of the products and the number of displayed products can be modified from the data.js file without changing the functionality.
Let me know your opinion!
PShane Chaffe• 900@Chaffexd
Posted
Hi,
This is a slick project! I really like it!
I have one piece of feedback that initially made me as a user happy, when I added the first shoe to the cart I saw the basket update and drop down, that was pretty neat. But when I done this for another shoe, I didn't see it. I.e. if you scroll down, you no longer see it - I think it would be super useful for the user to see either the navbar cart icon increment or that drop down window present when you scroll so the user can track their cart when they add. I think that makes for a positive user experience rather than scrolling back to the top to check again.
Other than that, kudos! Amazing use of vanilla JS!
Marked as helpful
1 - Anouer• 510
@AnouerMokrane
Submitted
Hello, this is my solution for age calculator app. any feedback, please?
PShane Chaffe• 900@Chaffexd
Posted
Hey!
This is a great take on the project! I love the instant feedback that you are providing from errors.
Have you considered preventing a user from submitting? Having NaN isn't the best user experience as not many people would actually understand what that means.
Other than that, it's pretty much spot on! Ah!
I found another bug, I entered my birthday and it told me that I am: 26 years 2 months 89 days
It should be: 26 years 2 months 25 days
Might be worth checking your algo for age input!
Marked as helpful
1 - sam• 60
@simonem-f
Submitted
My first React App 🙂 Feel free to give me any feedback or tip!
PShane Chaffe• 900@Chaffexd
Posted
Hey Sam!
Great project, really good use of a class component - I like the approach.
I have thing you need to change and that's the month counter, I understand why you have the +1 but it actually gives you the incorrect results. "mapMonthDays(date.getMonth() + 1" with the new Date() object, getMonth provides January as 0, so when you do the calculation it is actually adding a month to your age! I know I'm old but I'm not that old just yet haha.
Marked as helpful
0 - PShane Chaffe• 900
@Chaffexd
Posted
Hey Geo,
Solid attempt! I think there is room for improvement when it comes to validating the forms as well as the styling. Be sure to check out the designs that are given to you in the assets and images files as well as the readME docs, they will keep you on the right track!
Currently when a user hits submit, the year is only invalid but all 3 are actually. Think about adding the error to those fields too!
0 @FrostemanNeogard
Submitted
PShane Chaffe• 900@Chaffexd
Posted
Hey Liam!
This is a good solution! I like the hover affect you have on the die, it's a great way to let users know that it is interactable.
One thing I would recommend to make this slightly better would be to increase the height of the main container so it doesn't change sizes on every quote. Also another challenge to make this even better would be, did you think about using setInterval within useEffect to allow the quotes to randomly generate every 5 seconds for example? Would be a pretty good option if you wanted to add another layer of complexity to the app.
Marked as helpful
1- KirthGersenClone• 160
@KirthGersenClone
Submitted
When I put the site on netlify I saw that there was still a border around the read more button.
This was my first real test with grid, and I enjoyed it. There was one thing I could not accomplish, and that was to put the logo on the mobile version. It kept sliding left and right, when I opened or closed the menu. The code for the latter I found on W3Schools (very simple but it got the job done).
PShane Chaffe• 900@Chaffexd
Posted
Nicely done! I have a couple points of feedback to help the project be even better than it already is!
- Consider adding some margin to the top so the logo and whole header isn't touching the tool bar of the browser
- With the above point, it would make more sense to give you the ability to scroll a little bit
- Add a cursor: pointer; for the button so it seems like you can interact with it (you done this in the nav bar)
- Amazing use of grid!
Look forward to seeing more work :)
Marked as helpful
0 @Titre123
Submitted
One of the challenges I faced during this challenge was initalizing state with an api call fron geo.ipify.
PShane Chaffe• 900@Chaffexd
Posted
Hey Ola, good attempt at the project!
A couple pointers:
- The map doesn't generate my current location so I suspect without looking you aren't passing the current users long and lat into the map to generate an accurate response because it shows my IP and location from the IP API but doesn't populate this on the map.
- The search bar button isn't aligned in the search box properly
- The search function doesn't actually work as expected. It takes me to a blacked-out page and more or less bricks the screen meaning I have to close the tab and revisit to see a response.
I hope this helps!
0- Elena• 60
@ElenaKondrashova
Submitted
This is was indeed challenging and took a long time to finish and achieve responsiveness. I think responsiveness could be improved, but I haven't yet figured how.
Feedback is much appreciated :)
PShane Chaffe• 900@Chaffexd
Posted
Hey Elena, nice attempt at the project! It's virtually pixel-perfect almost. I like your use of semantic HTML to meet standards. I would suggest maybe running Lighthouse tests on projects like this to ensure you are meeting other best practices and this will help generate a score for how good your site is, I personally find this really useful for landing page projects like this as it is a real-life example!
I personally think you could make more use of grid or flex when laying out your items rather than relying solely on manually using a margin on everything.
Other than that, it looks really good! Good job!
0 - tony1610• 410
@tony1610
Submitted
Open to any suggestion to how improve in my code. Thanks
PShane Chaffe• 900@Chaffexd
Posted
Hey Tony!
You got it more or less spot on to the design, I like to see that.
I would recommend taking a look at the styles again to ensure you have complete circles whereas I currently see an oval shape.
Nice use of forEach in JavaScript. You could dynamically update the text using JavaScript as well and interpolating the script but the approach you have also works just fine. I would recommend taking a look at my solution if you wanted to explore more of what I meant.
Hope this helps!
Marked as helpful
0 - Nimesh• 70
@nimeshmohan
Submitted
I think I'm improving with every challenge. Please review this for me. Many thanks
PShane Chaffe• 900@Chaffexd
Posted
Hey Nimesh, great project! It looks good. You managed to get it to look extremely similar to the design!
My only feedback initially would be to use em/rem measurements instead of px where you can for responsiveness! This allows for a better experience rather than having fixed pixel widths/heights that might not work on different size screens.
Hope this helps!
Marked as helpful
1 - Nathaniel Joseph• 50
@bigNath500
Submitted
How do you'll think I did. Feel free to criticize.
PShane Chaffe• 900@Chaffexd
Posted
Hey Nathaniel, good job getting it basically pixel perfect! Great attempt at the challenge.
It looks the exact same so there isn't much to criticize, it's spot on. I would say maybe focus on the finer details which I think are missing like :hover attributes on the buttons, and changing the width of the second drop-down menu.
I hope this helps!
Marked as helpful
0 - Mateusz Kordyś• 30
@Mateusz-wink
Submitted
Hello I just started to check and improve my skills with frontendmentor.io. My first project is to build out QR code component and get it looking as close to the design as possible using only HTML + CSS. My questions are: -Will my project show up in center of page in both mobiles and PCs, because i didnt specify width for any of them. I just used some sort of margins, paddings and flexboxes. If not what should I change or i guess add to make it work as it was told in instruction. -What should I focus on, when starting such project? I started on creating divs, header, and paragraph and then adding styles using css, im newbie in that and would appreciate some advanced programmers opinions. Thanks!
PShane Chaffe• 900@Chaffexd
Posted
Hey Mateusz, a really good attempt at the challenge! Looks like you nailed it!
I would recommend a few things to answer your questions:
-
Personally, I wouldn't style the body with hard coded widths in px, it's better to use em/rem measurements for responsiveness. This article overs it pretty well (it's a short read): https://uxdesign.cc/why-designers-should-move-from-px-to-rem-and-how-to-do-that-in-figma-c0ea23e07a15
-
If you're concerned about something always being in the center, use flex! Flex is designed for positioning your divs. Instead of your margins, you could have just done: display: flex; justify-content: center; align-items: center; And then this way you've aligned items on the x and y axis without playing with margins.
To answer your question, the position of your element will remain the same since you've added those margins but it isn't the best approach. If you've got 15 mins: https://www.youtube.com/watch?v=fYq5PXgSsbE&ab_channel=WebDevSimplified Web Dev Simplified covers topics like flex and grid really well!
Look forward to seeing what you build next!
Marked as helpful
0 -
- Elaine• 11,420
@elaineleung
Submitted
This was a very straightforward landing page, but this took me a lot of time; it might even be the one project I've spent the most time on so far. The positioning of the elements was challenging as usual, but the most difficult and time-consuming task was trying to understand some of the design choices (such as having two very similar sans-serif fonts, and then where they get used in the text was not as apparent as I thought). Anyway, at least I now learned how I can position elements off the page and have it be responsive! I'm just glad it's over and we can all move on with life 😅
Very minimal animation here (or much of anything really) since I just wanted to focus on the important parts of the CSS, which is messier than usual as I wanted to try to structure it the way similar to what Kevin Powell did in his latest tutorial series. I also wanted to bring in some CUBE CSS since Kevin did that also. In short, a lot of experimenting, not too much organizing and therefore will clean up and refactor later.
As always, please feel free to let me know whether something isn't working the way it should. Thank you everyone!
PShane Chaffe• 900@Chaffexd
Posted
Hey Elaine! Another great project. It's clean, responsive and works well. One thing I noticed when I checked mobile view is that the dropdown doesn't show the li items as expected. You can check this here: https://snipboard.io/OBfs2U.jpg
That's the only thing I could notice but I noticed you said you'd refactor later on, good work!
Marked as helpful
1 - Radosław Lewicki• 10
@levy52
Submitted
I have a question. Have I used good practices?
PShane Chaffe• 900@Chaffexd
Posted
Hey Radosław, a few things to note:
- When visiting on a desktop, the object isn't a square and the image doesn't align with the right hand side.
- Maybe with your widths, try using a % value instead of vw/vh
- Consider changing hardcoded px values to em/rem for responsiveness
- Ensure the boxes match up with correct styles, the left side has a border-radius but the right-side does not.
- Using flex on your container could allow you to align-items centrally and then justify-content space-between for example for a cleaner layout similar to the project design.
Overall, not a bad attempt but some things to work on like all good projects :) I'd recommend checking the design as you build to ensure you are following the guideline!
I hope this helps!
0 - Elaine• 11,420
@elaineleung
Submitted
PShane Chaffe• 900@Chaffexd
Posted
Hey Elaine! Thanks for checking my project out, I thought I'd do the same as well! I really like your use of appearance: none; This is actually a great line. Nice use of also inserting the HTML with JavaScript.
Also, great addition of the disabled button until a selection has been made. Good job on getting this practically pixel perfect!
1
