Skip to content
OverviewSolutions
25
Comments
8
Millz
@Brezus

All comments

  • Veljko Jelenković•200
    @jelenkoo10Submitted over 2 years ago

    I have successfully finished this project but I struggled with React a little bit, especially with the idea I had. So, one of the functionalities required says that users should be able to click through to the border countries on the detail page. I tried to manage that with React Router, but didn't quite know how to do that, so in the end I used conditional rendering to navigate between home and detail pages, and didn't use border countries as links to their detail pages. How would you solve this problem?

    Responsive page with API, built with Flexbox, Grid and theme toggler

    1
    Millz•530
    @BrezusPosted over 2 years ago

    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=12s

    Marked as helpful
    0
  • Millz•530
    @BrezusPosted over 2 years ago

    good clean code i expect nothing less from a fellow sharingan user

    0
  • Millz•530
    @BrezusPosted over 2 years ago

    very good the accordion works great and the layout is good here are a few suggestions :

    1. 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.
    2. 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.
    3. 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
    1
  • Rishi Mathur•10
    @skyrunner360Submitted over 3 years ago

    Hi, As you can see by my choice of challenge that I'm a newbie at CSS. This challenge is still incomplete. I cannot make it mobile friendly. Don't know how to make it responsive. Don't know why their are 2 primary colors in the style.md file of this challenge, if i'm supposed to use both of them then how? Don't know how to decorate text as given in the jpg. More help will be much appreciated.

    Huddle Using some Flexbox

    3
    Millz•530
    @BrezusPosted over 3 years ago

    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
    1
  • Millz•530
    @BrezusPosted over 3 years ago

    it looks good remember to set the background color and I'm not sure why but your design looks tall are you setting heights?

    1
  • Millz•530
    @BrezusPosted over 3 years ago

    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

    0
  • Millz•530
    @BrezusPosted over 3 years ago

    hey i had that problem to just set the image to display block and that will get rid of it

    1
  • JFREUN•20
    @JFREUNSubmitted over 3 years ago

    Hi there! :) I would love some feedback!

    I only just started learning CSS (loving it) and this project was quite the challenge for me. I think there are a couple of things I couldn't figure out.

    How do I make the image look more like the solution? I tried applying filters but I don't think I achieved the exact look.

    How do I space out the three stats evenly while keeping them in one line? Whenever I tried spacing them out more one always moved below.

    Also I don't really know how to create this site for mobile so sorry if it looks weird in different dimensions.

    Let me know anything I could improve!

    First HTML/CSS Challenge how do I get the right look for the image??

    2
    Millz•530
    @BrezusPosted over 3 years ago

    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

    0