Skip to content
OverviewSolutions
28
Comments
15

Deborah Robbiano

@debriks600 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Deborah Robbiano•600
    @debriks

    Hi there!

    There are other issues than responsivity in your solution but to answer your specific question about how to make a website responsive, you have to use media queries.

    Here are 2 resource on the subject: https://css-tricks.com/a-complete-guide-to-css-media-queries/ https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries

    Hope this helps.

    Happy coding! :)

  • Deborah Robbiano•600
    @debriks

    Hi Yonatan!

    Your solution looks good! I just have one little suggestion to improve it. In your app, you have to push twice the button to get a new advice, it takes a bit of delay. It is because of the cache (there's actually a note about it on the API website : Advice is cached for 2 seconds. Any repeat-request within 2 seconds will return the same piece of advice).

    This small issue can be fixed by simply adding { cache: "no-cache" } to the API response so in your case, just adding it in your main.js file like this (line 10):

    const file = fetch(testURL, { cache: "no-cache" })

    Hope you find this helpful.

    Happy coding :)

    Marked as helpful
  • Deborah Robbiano•600
    @debriks

    Hi Akinrinlola!

    Just a small suggestion on your solution : it is best practice to create a separate style.css file to add the styles to your HTML document to keep things clear (even more important to function like that if you collaborate in a team).

    To do that, you should create a style.css(you can actually call it the way you want but this is a convention) in the root folder (or in a css folder) and then link in the <head>of your html file like so: <link rel="stylesheet" href="/style.css" />

    Also the fonts are not displaying correctly and this si because this line of code should be changed : ` font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Arial Rounded MT', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;``

    to simply this: font-family: 'Outfit', sans-serif;

    Hope you find this helpful.

    Happy coding! :)

    Marked as helpful
  • Deborah Robbiano•600
    @debriks

    Hi!

    Great solution! I just have one little suggestion to improve it. In your app, you have to push twice the button to get a new advice, it takes a bit of delay. It is because of the cache (there's actually a note about it on the API website : Advice is cached for 2 seconds. Any repeat-request within 2 seconds will return the same piece of advice).

    This small issue can be fixed by simply adding { cache: "no-cache" } to the API response so in your case, just adding it in your main.js file like this (line 10):

    axios.get("https://api.adviceslip.com/advice", { cache: "no-cache" })

    Hope you find this helpful.

    Happy coding :)

    Marked as helpful
  • Deborah Robbiano•600
    @debriks

    Hi Ninjagor,

    Great solution! Congrats

    Just have one little suggestion to improve it. In your app, you have to push twice the button to get a new advice, it takes a bit of delay. It is because of the cache (there's actually a note about it on the API website : Advice is cached for 2 seconds. Any repeat-request within 2 seconds will return the same piece of advice).

    This small issue can be fixed by simply adding { cache: "no-cache" } to the API response like so (line 5 of your main.js file):

    `fetch("https://api.adviceslip.com/advice", { cache: "no-cache" });`

    Hope you find this helpful.

    Happy coding :)

    Marked as helpful
  • Deborah Robbiano•600
    @debriks

    Hi Ahmed,

    Great solution! Well done. :)

    I just have a few suggestions to improve it:

    • it's always good to make your images display: block and width: 100%, it makes them easier to work with and it will help avoiding them from being deformed on small screens.

    • another way to deal with the footer articles is by using display: grid instead of display: flex so that you can set the width of each column like so: display: grid; grid-template-columns: 1fr 2fr; Here's a good ressource on the subject: https://css-tricks.com/snippets/css/complete-guide-grid/

    • a good way to deal with the hero area is by using the css property grid-template-areas, where you just tell css what html element will be placed in each column and each row of your grid. Here's a example: grid-template-areas: "header header header" "hero hero aside" "hero hero aside" "footer footer footer";. Here's a ressource on the subject: https://css-tricks.com/almanac/properties/g/grid-template-areas/

    • for accessibility purposes, img tags should always have a altattribute (ex: alt="top laptops 2022" : https://css-tricks.com/some-things-about-alt-text/

    Hope you find these comments helpful.

    Keep up the good work! :)

    Marked as helpful
View more comments