Skip to content
OverviewSolutions
28
Comments
16
Deborah Robbiano
@debriks

All comments

  • Deborah Robbiano•600
    @debriksPosted about 2 years ago

    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! :)

    1
  • rymxoxo•60
    @rymxoxoSubmitted about 2 years ago

    Hello everyone , This is my first time here and my first time doing this challenge after attending an online course of html and css . And in order to enhance my skills I took this challenge and this is the final result. To be honest , I m not happy 100% of it , because, I was not able to copy and to clone perfectly the design. I have found difficulties to do the job perfectly and since there is no solution provided to the challenge , I find my self here to communicate with you on my code . your remarks are welcome

    Home Page Cloning

    3
    Deborah Robbiano•600
    @debriksPosted about 2 years ago
    This comment was deleted about 2 years ago
    0
  • Yonatan Afewerk Teshome•720
    @YehonatalSubmitted about 2 years ago

    First time using an API was a good exp had fun reading about it kinda works how it should i guess ill add more features to is a i learn more :) and suggestions are welcomed

    Advice generator app

    1
    Deborah Robbiano•600
    @debriksPosted about 2 years ago

    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
    0
  • Deborah Robbiano•600
    @debriksPosted about 2 years ago

    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
    0
  • Wr3nD•80
    @Wr3nDSubmitted about 2 years ago

    I think there is not enought information about height and stuff i think it should be , bcouse i would then more properly set height css options

    if you find anything in my code that could be written more efficiently , then let me know please !

    Advice generator made by tailwindCSS

    1
    Deborah Robbiano•600
    @debriksPosted about 2 years ago

    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
    1
  • Ninjagor•40
    @NinjagorSubmitted about 2 years ago

    This was an interesting challenge to complete! My submission is not quite fully responsive yet, but that will definitely be added soon.

    Feel free to let me know if there are any ways that I can improve my code!

    Advice Generator with HTML/SCSS/JS

    1
    Deborah Robbiano•600
    @debriksPosted about 2 years ago

    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
    0
  • Ahmed Zaki•60
    @Ahmed-Zaki20Submitted about 2 years ago

    I am progressing in my web development road. If you have any feedbacks, it would be precious for me.

    New Home page

    1
    Deborah Robbiano•600
    @debriksPosted about 2 years ago

    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
    1
  • Deborah Robbiano•600
    @debriksPosted about 2 years ago

    Hi Mohamed,

    Great solution! Just have some suggestions for you to improve it:

    • to center the box vertically, you can use a display: flex property on the body, like so: display: flex; align-items: center; min-height: calc(100vh - 1px);

    Giving an height to the body, then using the flex property align-items: centerwill center the box vertically on the page.

    • also I see you created a z-index class but with no z-index property in it. The z-index property is used to place element in front of each other but here, you don't need it. Here is a ressource on the z-index property and when you should use it: https://css-tricks.com/almanac/properties/z/z-index/

    • when changing the screen size, your image is repeating in its container, to avoid that, you can use the object-fit: cover flex property like so: width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; opacity: 0.7;

    • for the right effect on the image, you can use the css-property 'mix-blend-mode' as seen above.

    Hope you find these comments helpful.

    Happy coding :)

    Marked as helpful
    1
  • Deborah Robbiano•600
    @debriksPosted about 2 years ago

    Great solution! Your JS is clear as usual and is again helping me get started with this challenge! Thank you and keep up the good work ✨

    Marked as helpful
    1
  • Brian Jensen•470
    @brian-jensenSubmitted about 2 years ago

    Me discovering that the <meter> element exists: 😍🤩

    Me styling the <meter> element for uniform styles across 3 major browsers: 🫠💀

    HTML, CSS, & SVG Line Animation

    3
    Deborah Robbiano•600
    @debriksPosted about 2 years ago

    Amazing solution!! Congrats!

    2
  • Lucas 👾•104,340
    @correlucasSubmitted about 2 years ago

    👾 Hello, Frontend Mentor coding community. This is my solution for the Suite Landing Page

    I struggled a lot positioning the hero image and the heading decoration on this challenge, was really challenging place both elements between the mobile and tablet sizes. There's a lot of aspects to improve in my CSS writing, but I am happy with the result in this challenge.

    🎨 I added some custom features:

    • 👨‍🔬 Custom UI Design + Logo.
    • 🧚‍♀️ CSS Animations

    🍚Follow me in my journey to finish all HTML/CSS only challenges (Only 2 missing)! Gotta Catch ’Em All

    Ill be happy to hear any feedback and advice!

    Suite Landing Page VANILLA CSS (Custom Design + CSS Animations)

    6
    Deborah Robbiano•600
    @debriksPosted about 2 years ago

    Another amazing solution!! Congrats ✨

    Marked as helpful
    2
  • Deborah Robbiano•600
    @debriksPosted about 2 years ago

    Hi Adarsh,

    You're clearly better than I am at Javacript but I noticed that you have the same problem I had on your Advice Generator App and I wanted to share with you the fix I found on stackoverflow, maybe you will find it useful.

    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).

    I fixed this small issue by simply adding { cache: "no-cache" } to the API response like so:

    const response = await fetch(END_POINT, { cache: "no-cache" });

    Hope you will find this useful.

    Happy coding!!

    Marked as helpful
    1