@jelenkoo10
Millz
@BrezusAll comments
- @Brezus
Awesome work dude i just finished this project too and to be able to click through the links you will need to use react routers Link here is a step by step guide
1 Import { Link } from react-router-dom 2 Wrap your border elements inside the Link eg <Link>Random Border</Link> 3 Add a to attribute on the Link tag/component eg <Link to={
/${Random Border}}>Random Border</Link> 4 Go to your Details file or component I assume you are using useEffect to fetch data of the country the user clicked on. 5 Your useEffect should have a dependency array which might be empty inside that array add the name of the country the user clicked on this way whenever the name changes the useEffect will re run and update the data I hope this is all clear to you and if not here are three videos which helped me out https://www.youtube.com/watch?v=RUFxmAjbNbg, https://www.youtube.com/watch?v=y_pr4lRoUto, https://www.youtube.com/watch?v=aZGzwEjZrXc&t=12sMarked as helpful - @itachi-13@Brezus
good clean code i expect nothing less from a fellow sharingan user
- @metehnay@Brezus
very good the accordion works great and the layout is good here are a few suggestions :
- Your .container class has a height of 100vh i would change that property to min-height: 100vh In your .container-md i noticed you are setting max and min heights generally it is considered bad practice setting heights because it can cause problems we were not expecting so instead let the content eg paragraphs, images or any htmls content to dictate the height of said container.
- On .container-md you also set min/max width those can be confusing and they are set to the same value in your code.. what i like to do is set a regular width eg. 'width:80% or width: 80vw' and under it put a max-width of 1000px so it never gets wider than 1000px.
- I would remove all the images in your .faq div and set them to be background images check out how to set background-images, how to position background images and how to chain more than one background image. Here are links that could help you out https://developer.mozilla.org/en-US/docs/Web/CSS/background-image, https://www.w3schools.com/css/css3_backgrounds.asp hope this helps
- @skyrunner360@Brezus
Hi Rishi a fellow newbie here i can answer some of your questions in the order you asked so.. 1 to make it mobile friendly you will have to learn about media queries also learn about max-width min-width and clamp those can all help in making designs for mobile 2 if you want responsive you have to use relative units like ems, rems, vh, vw or percents instead of pixels as pixels don't adjust on browser resize 3 do both colors have the same name if so you can change the name of either and use it wherever in the design you want also look up using ":root" it will help with the colors 4 the text styles are provided for us follow the url's or better yet watch a few tutorials on youtube to figure it out its a bit hard for me to explain since i too am also a beginner i hope this helps and happy coding partner!
Marked as helpful - @PolThm@Brezus
it looks good remember to set the background color and I'm not sure why but your design looks tall are you setting heights?
- @noyondey1@Brezus
Looking good look up media queries so you can make a better transition between mobile and desktop design this challenge really beat me up when i first did it like a week ago I'm going to redo it eventually but yea happy coding ps w3schools is the goat man they have a lot of lessons on media queires
- @edgarfb@Brezus
hey i had that problem to just set the image to display block and that will get rid of it
- @JFREUN@Brezus
hey im a beginner as well for the stats you could put them in a ul and make them list items and set the ul/containers display to flex and that should lay them beside each other or you can go on the individual ul li elements and set them to display:inline-block that will lay them down side by side and then you can set the margins/padding to increase the space they take up and as for the mobile design i follow this youtuber called kevin powell he advises that you do the mobile design first and then use media queries to change the width and other stuff of your design to accomodate wider screens
