@lavollmer
@MrSeager
Submitted
What are you most proud of, and what would you do differently next time?
Its working
What challenges did you encounter, and how did you overcome them?
Gallery was challenging, I found out a "React Image Gallery" and work with that.
What specific areas of your project would you like help with?
"React Image Gallery" I couldn't fully customize it
@lavollmer
Posted
Hi!
Great job on your project - it looks very similiar to the design! A couple small things that may improve your project - 1. The website tab still uses the "React App" and react symbol. I would encourage changing that in your index.html to the Ecommerce page and frontend mentor symbol provided in the assets folder. 2. README - I would work on improving your README to include your process, your project notes and ways you want to continue to develop your skills. There is a README template provided in the Frontend Mentor folder with the project. 3. The other thing I would work on is your lightbox to display the images which is something you can work on in the future!
Otherwise, trying out your project live site - you were successfully able to add to the cart, your hover states were great and the design looked good! Keep up the good work!
@MesrouaDjamel
Submitted
@lavollmer
Posted
Hi!
Your project looks great and very similiar to the design. A suggestion would be to improve your README with more details related to the project, the challenges you faced, and resources you used to complete your project. Frontend Mentor provides a template README which you can work off to create something great! Otherwise, great job!
Marked as helpful
@MesrouaDjamel
Submitted
@lavollmer
Posted
Hi!
Your project looks really good and I love the flexbox styling you did! Just a few quick things - the Contact Form should be Contact Us. Also, I believe your background color doesn't match the style guide given. Otherwise, everything else looks great!
@mofada
Submitted
What are you most proud of, and what would you do differently next time?
I learn html tag details and summary, and in tailwind css , add open class with details
@lavollmer
Posted
Hi!
Your project looks identical to the design. Congrats! I liked that you added a footer with your author statement. Additionally, your tailwindcss spacing and styling looks very similiar to the design. You followed the font, colors and icons appropriately as well. It also looks like your open function works great too!
@MesrouaDjamel
Submitted
@lavollmer
Posted
Hi!
Great job on your project - it looks very similiar to the design! A few minor details I would touch on is the SUBMIT button to be colored orange and more rounded. Additionally, the color on the solution seems to be a little harder to view - I would update the the numbers color to be lighter. Otherwise, great job!
Marked as helpful
@WangaiJM
Submitted
What are you most proud of, and what would you do differently next time?
The first react-vite project
What challenges did you encounter, and how did you overcome them?
Unable to deploy to Netlify via Github. I deployed it manually in the end.
What specific areas of your project would you like help with?
I am curious, when creating @font-face, how does one use all the fonts from different folders provided by frontend mentor?
@lavollmer
Posted
Hi Wangai!
Good job on your first project!
Getting the fonts from frontend Mentor to work was a little challenging. I first used https://transfonter.org/ to change the files into the appropriate type - WOFF and WOFF2 files. You then import those files in your assets folder - you can label them whatever you like.
Once, that is complete, then you will have to import them into your tailwind css config file in your project like so within in the module.exports section -
theme: { extend: { fontFamily: { 'inter-regular': ['Inter-Regular', 'sans-serif'], 'inter-bold': ['Inter Bold', 'sans-serif'], 'inter-extra-bold': ['Inter ExtraBold', 'sans-serif'], } }, },
You will also need to import each file into your app.css file BEFORE your tailwind css utilities code within the file. This is an example of what it should look like for each font (you will need to have 3 of these - one for each font type):
@font-face { font-family: 'Inter-Regular'; src: url('./assets/font/Inter-Regular.woff2') format('woff2'), url('./assets/font/Inter-Regular.woff') format('woff'); font-weight: 100; font-style: normal; }
The url is the pathway to the font in your project. Change each url to match your path in your code. Hope this works! Thanks!
Marked as helpful
@RaulTindogan
Submitted
@lavollmer
Posted
Hey Raul!
Good job on your project! A couple of things I noticed that may improve your project. When I click into your project, the README is what was given for the project - I would recommend creating your own README and that way employers are able to learn more about your project. The colors are almost perfect - if you look at the design, you may notice the background is more "cream" than "white" as well the Navbar writing being more gray. Also, I would recommend doing more than 4 commits for the project as it's good to have many saves to be able to go back and look at the code. The copywriting is great and good job importing tailwind css. Thanks!
Marked as helpful
