With a diverse background in healthcare and technology, I bring a unique perspective to the world of frontend development. As I continue to grow in this field, I am excited to connect with fellow enthusiasts, share insights, and collaborate on exciting projects.
I’m currently learning...Hey, I'm Laura, diving into React.js & Tailwind CSS. Excited about building dynamic UIs with React's components & Tailwind's utility-first approach. Eager to connect & grow with the FM community!
I had a few areas of the projects I need help on.
I would like help with the query type error message displaying on the screen. Thank you!
I feel that my project turned out well! Thank you!
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
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!
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!
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!
I learn html tag details and summary, and in tailwind css , add open class with details
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!
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!
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?
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!
