Skip to content
OverviewSolutions
37
Comments
4

WFarré

@wfarre810 points

I started learning Front-end development a year and a half ago, I do really enjoy it. So, I enrolled an online school to learn to code better and find a job in that industry. I have been using frontendmentor for while, it helped me a lot to improve my skills.

Latest solutions

View more solutions

Latest comments

  • WFarré•810
    @wfarre

    Hello,

    Good job on your work.

    Regarding the buttons, I wrapped them inside a container with the position absolute. I place them at the bottom of the carousel. it works fine, you might need to work on the bootstrap file.

    Also, when I was checking on your carousel, I noticed that you wrote twice the Carousel component depending on the size of "window.innerWidth". I think it would be better practice to use the Carousel component once and make it responsive with your CSS.

    To finish, you got some errors, you cannot put a button inside an anchor tag.

    I hope my feedback was helpful.

    Marked as helpful
  • WFarré•810
    @wfarre

    Regarding the "border countries", I fetched the all countries one more and stocked the name and the abbreviation in an array of objects. (countryNames = [ {abbrev: FRA, name: France}, {abbrev:GER, name: Germany} ... ] ) To improve performance, on the home page, when I did the fetch of all data, I created my "countryNames" array and I stored it in the localStorage. Then, you access the country's details, if there is "countryNames", you can change use it, else, you have to fetch all the countries' data.

    I struggle with the API as well, the data were difficult to deal with. I recommend you to use design patterns, you can organize the data the way you want and put the logic to get the data in a different file. Design patterns are very useful to make your code stronger, if you change your API, you don't have to change all the logic in your main code. https://www.freecodecamp.org/news/javascript-design-patterns-explained/ Instead of writing "country.name.common", you can just write "country.name". It was very useful, for the the native name.

    To sum up (because I am not sure, it is super clear):

    • fetch all the countries one more time and create an array of object [{abbrev: FRA, name:France}]
    • try to learn design patterns (I think it was very helpful to organize the data)

    Regarding the design, to have more precise measures, you can use Gimp or photopea.

  • WFarré•810
    @wfarre

    In my case, I give my navbar a width of 96% and a padding left and right of 2%. I am not sure but maybe it's due to the fact you gave a width of 50% to you right side of the nav-bar. Regarding the flexbox for the navbar, I did a justify-content: flex-start and for the right-side, I used margin-left: auto to justify it on the right. https://www.youtube.com/watch?v=q08BbYNG8h0

  • WFarré•810
    @wfarre

    Regarding the font of the titles, they appear weirdly of Chrome. I managed to solve the problem by changing the font-weight to 400.

    Marked as helpful