Looking to hire developers?
@Nickil13
@SkivaDev
Submitted
Hello everybody š. Iām Fabrizio and this is my solution for this challenge. š
š ļø Built With:
Any ideas for enhancing and minimizing unnecessary code are appreciated!
Thank you. šāļø
@Nickil13
Posted
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 use text-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 helpful
@indy-stack
Submitted
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.
@Nickil13
Posted
Hey 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 helpful
@tylermaks
Submitted
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
@Nickil13
Posted
Hi 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 Container you could change the prop ratingNum={setSelector} to setRatingNum={setSelector}.
Marked as helpful
@DavidXploidz
Submitted
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
@Nickil13
Posted
Hey 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 onClick set to e.target.value, you could set it to boton.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)}}
@Zinah-Zwayen
Submitted
Hi, Please check my solution, my cards pop up when I hover on the buttons!! any advice? all feedbacks are welcome. Thanks
@Nickil13
Posted
Hey 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.
@clearhas
Submitted
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.
@Nickil13
Posted
Nice 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 helpful
