Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions28Comments16

All comments

  • Deborah Robbiano• 600

    @debriks

    Posted

    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

    @rymxoxo

    Submitted

    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

    @debriks

    Posted

    This comment was deleted

    0
  • Yonatan Afewerk Teshome• 720

    @Yehonatal

    Submitted

    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

    @debriks

    Posted

    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

    @debriks

    Posted

    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

    @Wr3nD

    Submitted

    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

    #react#tailwind-css#axios

    1

    Deborah Robbiano• 600

    @debriks

    Posted

    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

    @Ninjagor

    Submitted

    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

    #sass/scss

    1

    Deborah Robbiano• 600

    @debriks

    Posted

    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-Zaki20

    Submitted

    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

    @debriks

    Posted

    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

    @debriks

    Posted

    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
  • Adarsh• 1,560

    @adram3l3ch

    Submitted

    Feedbacks will be appreciated :)

    Snap Intro Section

    #accessibility#bem

    1

    Deborah Robbiano• 600

    @debriks

    Posted

    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
  • P
    Brian Jensen• 470

    @brian-jensen

    Submitted

    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

    @debriks

    Posted

    Amazing solution!! Congrats!

    2
  • Lucas 👾• 104,560

    @correlucas

    Submitted

    👾 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

    @debriks

    Posted

    Another amazing solution!! Congrats ✨

    Marked as helpful

    2
  • Deborah Robbiano• 600

    @debriks

    Posted

    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
  • Deborah Robbiano• 600

    @debriks

    Posted

    Hi Esther!

    Great solution! Well done! I just noticed that you have to push twice the button to get a new advice, it takes a bit of delay. I think you can fix this small issue by simply adding { cache: "no-cache" } to the API response like so:

    const res = await fetch('https://api.adviceslip.com/advice', { cache: "no-cache" });

    Hope you will find this useful.

    Happy coding!!

    Marked as helpful

    1
  • Mohammed Zakaria Khan• 180

    @zaks276

    Submitted

    Hello Frontend Mentor community.

    I really enjoyed this challenge. I had difficulty connecting the frontend to the API but I managed to figure it out. However I do need more practise so if any of you know of any other cool API's I can play around with, please let me know. Also any other feedback on best practises regarding API calls will be appreciated.

    Responsive Advice Generator App

    #accessibility

    1

    Deborah Robbiano• 600

    @debriks

    Posted

    Hi Mohammed!

    Love your solution! The Javascript is clear and concise, well done! I just noticed that you have to push twice the button to get a new advice, it takes a bit of delay. I think you can fix this small issue by simply adding { cache: "no-cache" } to the API response like so:

    let res = await fetch('https://api.adviceslip.com/advice', { cache: "no-cache" });

    Hope you will find this useful.

    Happy coding!!

    Marked as helpful

    1
  • Deborah Robbiano• 600

    @debriks

    Posted

    Hi Sinka,

    Maybe you could try to place this code, just after your <main> element in the HTML code :

    <div class="card__banner"> <img src="images/image-equilibrium.jpg" alt="equilibrium" class="card__img" /> <div class="overlay"> <img src="images/icon-view.svg" alt="view" /> </div> </div>

    What is important here is to wrap your icon in a <div> element with a class of '.overlay'

    And then the CSS:

    .card .overlay { position: absolute; inset: 0; height: 100%; width: 100%; background-color: hsla(178deg, 100%, 50%, 0.5); visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.2s linear; }

    .card .overlay img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

    .card__banner:hover .overlay { opacity: 1; }

    Hope this helps!

    Happy coding!

    Marked as helpful

    2
  • Deborah Robbiano• 600

    @debriks

    Posted

    Oh Thank you so much Lucas!! Really grateful you took the time to look at it! 💫

    0