@SkivaDevSubmitted about 1 year ago
Hello everybody 👋. I’m Fabrizio and this is my solution for this challenge. 🚀
🛠️ Built With:
- React JS. ⚛️
- TailwindCSS. 🎨
Any ideas for enhancing and minimizing unnecessary code are appreciated!
Thank you. 😊✌️
Nicki
@Nickil13All comments
- @Nickil13Posted about 1 year ago
Hey Fabrizio!
Great job on the challenge. Some tips:
1.Tailwind has its own scaling system. I would recommend using that when you can instead of using arbitrary values. This would make it more legible for others reading your code.
Understandably you are aiming to match the design so Tailwind paddings/font sizes won't line up for you in all cases.
An alternative would be seeing if these values already exist in Tailwind or defining these values in the theme of your Tailwind config to be reused and easier to read in your code. Ex. instead of
text-[.875rem]you can usetext-sm(which is the Tailwind equivalent).2.Take advantage of using react & having components. You could use a component for the tip percentage buttons or just map through a list of predefined values.
Marked as helpful1 - @indy-stackSubmitted about 1 year ago
The only challenging think that I found was using different images for mobile and desktop component.
I found it challenging because I'm still no aware of the best way to add images depending on media query. What I did was to put a div placeholder where the image goes and update the content with media query. However, later I encountered issues with the sizing of the image and I feel like I hard coded that part of the solution.
Please Let me know what is a better approach for adding dynamic images.
@Nickil13Posted about 1 year agoHey Indira!
A great way of handling dynamic images is using the <picture> HTML element. Within it, specify your default img and add sources with the images you want to have specific breakpoints for. Hope this helps!
Marked as helpful0 - @tylermaksSubmitted over 2 years ago
Hi all,
I'm excited to share my very first React App and Frontend Mentor Solution! I would love any feedback - especially related to my use of useState and props as I found this to be particularly challenging. I would also like to improve my knowledge on React and CSS best practices, so any suggestions would be much appreciated. Thanks so much!
-Tyler
@Nickil13Posted over 2 years agoHi Tyler!
Awesome work. As far as CSS goes, I would suggest having cursor:pointer on your rating circles and submit button so they look visibly clickable. I also noticed your star image is clipped off at the bottom. If you wrap the image in a div or span and add the circle class to that instead of your img it should solve that.
For React, I believe Container is typically a wrapper component not a component that stands on its own. I would suggest calling it InteractiveRating, or something similar to indicate the purpose of the component.
And for additional clarity, in
Containeryou could change the propratingNum={setSelector}tosetRatingNum={setSelector}.Marked as helpful0 - @DavidXploidzSubmitted over 2 years ago
if anyone knows how to avoid scrolling in a modal window let me know, please im using tailwind, that's the only problem i have
@Nickil13Posted over 2 years agoHey David!
To answer your question about the modal: Setting the document body to overflow:hidden when the modal is open makes it so you cannot scroll. Just make sure to remove that when it closes!
While looking at the modal, I noticed it doesn't close on link click or when clicking outside of the modal. I think these would improve the user experience.
I also had difficulties clicking the steps in the Technology Space Launch 001 Page. Instead of having your button
onClickset toe.target.value, you could set it toboton.name. This way even if you click the text it should give you the right value instead of undefined. Then you don't have to worry about someone clicking the number.for example:
onClick={e => {setValor(boton.name), setValue(index)}}0 - @Zinah-ZwayenSubmitted over 2 years ago
Hi, Please check my solution, my cards pop up when I hover on the buttons!! any advice? all feedbacks are welcome. Thanks
@Nickil13Posted over 2 years agoHey Zinah!
It looks to me like your cards are popping up on hover because of your button border going from the default (1px) to 3px on hover. Something you can do is adjust the button CSS so that it's transparent 3px before the hover so the size of the button remains the same between states.
Another thing I would suggest is using styling the generic button tag or making a class name for all buttons so you don't have to rewrite the same CSS for each button.
ex. <button class="btn button1">Learn More</button>
In the above example, btn could have adjustments that all the buttons have in common (border radius, border color, font-weight) and button1 can have things specific only to button 1.
2 - @clearhasSubmitted over 2 years ago
My first submission. Any advice is appreciated. I tweaked my first submission and now I will see how it worked. Thanks again for all the feedback.
@Nickil13Posted over 2 years agoNice work! Your code is organized and easy to read.
Some things you could do to improve:
-
You can use CSS custom properties instead of hardcoding variables like colours. Makes it easy if you wanted to change the colour, so you don't have to go through and change each one at a time.
-
Setting max-width on your paragraphs or container so the cards don't get too wide on larger screens.
Marked as helpful0 -
