Skip to content
OverviewSolutions
22
Comments
15
Andy
@AndyAshley

All comments

  • f5rcbh•190
    @f5rcbhSubmitted over 2 years ago

    the only defficlty i,ve that to make js style remove and active anothor style still hard for me tbh

    using grid

    1
    Andy•520
    @AndyAshleyPosted over 2 years ago

    hey f5rcbh, Good job on completing the challenge! As for your question, there are a few ways to do something like this. you can define a const with your element in it like:

    const myElement = document.getElementById("my-id"); or const myElement = document.querySelector("my-class");

    then you can do something like myElement.classList.add("another-class"); or myElement.classList.remove("another-class");

    if you have a css class with a toggle you can also play with that.

    .my-class.active {
color: white;
}

    then you can do myElement.classList.toggle("active"); theres all sorts of ways you can select and toggle classes and styles, even data attributes.

    theres also stuff like myElement.style.display = "none"; to change a style directly.

    hope that helps a bit, sorry for the long crazy comment haha. Happy Coding!

    Marked as helpful
    1
  • Andy•520
    @AndyAshleyPosted over 2 years ago

    Hey Jennifer! Great job on the challenge! I did notice that when I click on the fetch button it actually throws 2 requests for some reason, and displays one really quick before updating to the next one. The slip # doesn't change either. You could try putting the entire data.slip in a const and then mapping the data with id and advice. Do your call for the entire data.slip and then store the data.slip.id in one const, and the data.slip.advice in another const, then just throw them in where they go like you did with {quote} . Hope that helps! Awesome job and happy coding!

    Marked as helpful
    0
  • Zack•30
    @eftpmcSubmitted over 2 years ago

    I am fairly new to html and css so I would love to know how my code looks.

    When resizing the window to a really small window, the height of the box increases but the text stays limited to its designated area. Is the image the reason that the box is becoming so long when the window is smaller?

    Any other feedback would also be welcome.

    Responsive QR Code Component

    1
    Andy•520
    @AndyAshleyPosted over 2 years ago

    Hey Zack! Good job on the challenge! I would suggest a few things for you. Using vw or vh on text isn't a great idea. It does scale, but it gets so tiny that no one could read it. Also if you made your body or main container have a display: flex with justify-content: center and align-items: center and remove position: absolute on the id="base" container, it wouldn't squish like that and it would also remain centered to the page.

    for the html errors, the lang one can be fixed in nextJS by adding this to your next.config.js:

    
module.exports = {
  i18n: {
    locales: ["en"],
    defaultLocale: "en",
  },
};

    then just make sure all your images have alt tags. :)

    you could also give the card container a max-width to prevent it from getting larger than intended. that way it can only get so big, but can scale smaller if needed.

    I hope that helps! feel free to ask me any questions if ya need to, Happy Coding!

    Marked as helpful
    0
  • Sara Dunlop•430
    @RiscloverSubmitted over 2 years ago

    After posting, I'm seeing that I'm getting an accessibility issue. It's complaining that I don't have even a single <h1></h1> element on my page. What should I do in this case? Because I feel like this app definitely doesn't call for an h1 element. None of the text says "h1 header" to me, and I really don't want to change one label just to satisfy the accessibility requirement.

    Also, I tried to set it as an empty element, but it didn't like that and generated an additional issue, so I changed it back.

    So yeah. What would you guys suggest? Thanks!

    Tip Calculator App

    3
    Andy•520
    @AndyAshleyPosted over 2 years ago

    After reading your issue with the H1 and looking at the code, I just realized I never added the Logo to mine.. I must have overlooked it lol! I did it like this: <h1>SPLI<br />TTER</h1> . Never even realized it until now. Maybe that will work for ya as well? lol. There are other ways to get around it though, like what Fazza mentioned.

    1
  • Adrianna Thomas•70
    @adrianna-thomasSubmitted over 2 years ago

    My solution matches the design at the 375px and 1440px viewpoints, but in between those screen sizes is it supposed to scale relative to the screen size?

    Should I have done the mobile view first?

    I tried to only use pixels for font size and border radius, should I have used pixels for the dimensions of the divs and containers?

    Four Card Feature Section Using Grid

    1
    Andy•520
    @AndyAshleyPosted over 2 years ago

    Hey Adrianna, Good job on the challenge! I do see what you're talking about after the mobile breakpoint where it kind of squishes together until it gets wider. What you could do is give your main container a max-width until a mid way breakpoint where the content has enough room to do its 4 way layout. That way it doesn't stretch out too far while its waiting for enough room fully expand.

    Also I noticed at your 400px breakpoint you put a . before your main selector making it look for a main class instead of the actual main tag. The centering gets thrown off above 1440px. That can be fixed by simply adding display: flex with a justify-content: center on the body.

    I don't think it really matters what units you choose for your sizing of elements as long as they're consistent. percentages can act in weird ways sometimes so I would stick with something like px, rem, or ch (with text). em can change based on the parent containers text size.

    Hope that helps! if you have any questions feel free to ask me here :) Good job and happy coding!

    Marked as helpful
    0
  • Marta•630
    @martam90Submitted over 2 years ago

    Hello,

    I do not know why share image does not show up when I want to share the link to my page for example on Facebook. Do you have any idea what might be wrong in my code?

    I will be glad for your answer feedback concerning my project. Thank you.

    Space travel project (Gatsby.js)

    2
    Andy•520
    @AndyAshleyPosted over 2 years ago

    Hey Marta! That loading animation is awesome! Great job on the site! As for your question, you could try adding your own image in an open graph image meta tag.

    <meta property="og:image" content="/link-to-my-image.png"/>

    You can find out more about it here open graph protocol .

    I do see you have an og:title and a twitter card on there, but I couldn't find an og:image when looking through the code. That might work for ya, hope it helps! Happy coding :)

    Marked as helpful
    1
  • Allyson S.•190
    @allyson-s-codeSubmitted over 2 years ago

    Hi! I would love any general feedback on this project. I would especially love feedback on:

    • The html- I tried to make it accessible by including form and label tags and this is my first time doing so.

    • Also, in order to keep my page from refreshing upon "click" of any of my button elements I had to add type="button" to my button elements and onclick="return false;" to my submit button. Are these appropriate solutions?

    • In order for me to get colors to look somewhat close I ended up having to use transparency. Since I am working with the jpegs only I wasn't sure if I missed something here.

    • And one last thing- does anyone have a trick for centering text within it's background? I feel like my text is slightly higher than center.

    Thanks so much!!!

    Interactive Rating Component using flexbox, js

    2
    Andy•520
    @AndyAshleyPosted over 2 years ago

    Hey Allyson, great job on the challenge! It looks/ works great! To keep your submit button from “submitting” or auto refreshing the page by default you can add a function to handle the click. A lot of people do something like a custom handleSubmit() function followed by a prevent default, or add an even listener tied to the button that prevents the default

    yourSelector.addEventListener(“click”, (e) => {e.preventDefault()
})

    Then they add what they want the button to do in an on click for handleSubmit() .

    I think I may have used some transparency in mine as well. But I’ve noticed the screenshots may have been taken in Firefox, and chrome can display things a bit different.

    As for centering the text within its background, if you’re using display: flex make sure the parent element has enough room(sometimes need to add a height or width) and use justify-content: center and align-items: center for most cases. Can also pull out the align-self or justify-self . Hope that helps! Great job and happy coding ! 😀

    Marked as helpful
    0
  • Andy•520
    @AndyAshleyPosted over 2 years ago

    Hey Kenzar, good job on the challenge! I found your issue with the image. When I go to inspect the page and add a . in front of your image path everything works fine :) .

    You have /images/image-qr-code.png . Just change it to ./images/image-qr-code.png , or remove the / altogether, and it will pop right up. It couldnt find the path within the folder hierarchy. Check out w3 Schools HTML File Paths

    You can also clear up the Accessibility issues by wrapping your content within the body in a <main> tag or other appropriate landmark tag. For the <h1> issue, throw your main header text into an <h1> instead of an <h2> tag. You can style this to reduce the font size if you need to. Happy coding and hope that helps!

    Marked as helpful
    0
  • 👾 Ekaterine Mitagvaria 👾•7,600
    @catherineisonlineSubmitted over 2 years ago

    Hello, Frontend Mentor community! This is my solution to the Fylo dark theme landing page.

    I appreciate all the feedback you left that helped me to improve this project. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.

    You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.

    Thank you

    Fylo dark theme landing page

    6
    Andy•520
    @AndyAshleyPosted over 2 years ago

    Awesome Job on the challenge! It looks/functions great! One thing you might want to do is add a max width on sections 2 and 3 after 1440px. On 2K screens and up the content inside looks a little farther apart. Everything else flows nicely and is spaced perfectly. Overall great job and happy coding!

    0
  • yoyo-ka•20
    @yoyo-kaSubmitted over 2 years ago

    My biggest problem: The hover at the round corners has a delay and I did not figure out why! Why?? (I use Chrome) Is there a other/better solution to center the SVGs? Is there a other/better solution to align the timer on the right side? (in general: two <p> in the same line but different alignments)

    Thank you in advance! :D

    Repository landing page using HTML and CSS

    1
    Andy•520
    @AndyAshleyPosted over 2 years ago

    Hey Yoyo-Ka. Great job on the challenge, it looks awesome! As for your question- with the layout of your code you could make the .layer class have a transparent background, and then hsl(178, 100%, 50%) on hover. Also the <time> tag you used isn't in the correct format, that's why its giving that error. I would just give it a regular class :) . Wrapping everything up in the body with a <main> tag will clear the other error of not having a landmark for your content. Hope that helps and happy coding!

    Marked as helpful
    0
  • Andy•520
    @AndyAshleyPosted over 2 years ago

    Hey Adenike, great job on the challenge! As for your question, I'm using a 2k screen (2560x1440), and when I view your page it has a scrollbar down. I see in your code that you have the body width set to 100% and a height commented out. Try using min-width: 100vw; and min-height: 100vh; to make it more responsive to displays, and then adjust your positioning of the content within the main. If you remove the background-size rules (auto and contain) from your body, it will also kick them into the right place and size on larger screens. hope this helped! Happy coding :)

    Marked as helpful
    1
  • Andy•520
    @AndyAshleyPosted over 2 years ago

    Looks good! I would decrease the padding of the card itself a little bit, and then increase the padding of your contents class to adjust- if you wanted to get it a little closer to the design. You could also add some padding-top to the attribute element for a little cleaner look :) Either way it looks great. Good job and happy coding!

    Marked as helpful
    1