Skip to content
OverviewSolutions
47
Comments
2
Bogdan Kim
@semperprimum

All comments

  • Bogdan Kim•780
    @semperprimumPosted over 1 year ago

    Heya there 🙌

    Some of the issues i noticed:

    JS:

    • Your JS code is too lengthy, it doesn't need to be 53 lines long :) In my opinion, a simple loop over all of the questions with a click listener is enough. You can check out my code to see what i mean. If you want to achieve the same behavior where it automatically closes all of the other questions, again, a second loop that just closes all of them is enough
    • I see the problem you described, some of the sections don't collapse when you click on them too fast. My guess is that the issue is in setTimeout() functions. Why have you added them in first place? Also, if you open and then close one section, you won't be able to open the same section again without toggling one of the other sections.

    CSS:

    • body's min-height is already at 100vh, so why don't we use 2 lines of grid to center the .container, instead of positioning it absolutely and using translate properties?
    body {
display: grid;
place-items: center;
}
    • You use pixels for everything in your CSS. Using relative units like rem in CSS is recommended over absolute units like pixels because rem allows for scalability and responsiveness, ensuring consistent and accessible designs across different devices and font size preferences. There are lots of articles and videos on the web that explain it in depth. Check them out :)
    • Your design switches to mobile at 1000px. Consider adding more breakpoints for a more fluid design. And use a max-width property so the card shrinks before going into a mobile version. For the mobile design, just set a margin for the component so it doesn't touch the borders of the screen and let it stretch. You can manage to get it done without using width properties.
    • Placing all media queries at the end of the document can make your code more organized and easier to read ;)

    HTML:

    • Questions and answers make more sense as a list (<ul>, <ol>), instead of multiple sections. You may also wrap answers with a <p> tag, instead of using a <div>.
    • All of the images in this challenge are decorative, they don't need an alt text. You should leave it empty. Go from this: <img src="..." alt="women and phone" class="desktop__image"> to this: <img src="..." alt="" class="desktop__image">

    Hope that you find this helpful! Happy coding!

    Marked as helpful
    0
  • Belly•300
    @Belly606Submitted over 1 year ago
    • I've Found Difficult with Two Images in The Background, So If You Have Any Advice to Make Them with Best Practice or Any Part of My Code Feel Free to Drop it And I Appreciate That So Much. Happ Coding ✨

    Profile Card Component

    1
    Bogdan Kim•780
    @semperprimumPosted over 1 year ago

    Heya there 🙌

    • Every image in this challenge except the profile picture is decorative, so you don't need to put alt text on it. Alt text on the profile picture should be more descriptive, something like alt="Profile picture of Victor Crest".
    • Regarding the background situation, you should use background properties instead of having two random images hanging in your HTML. Here's how i did it:
    body {
background-color: hsl(185, 75%, 39%);
background-image: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg");
background-position: right 42vw bottom 41vh, left 31vw top 47vh;
background-repeat: no-repeat, no-repeat;
}

    • In this example i used a background-color property to set an overall color for the background.

    • background-image adds two images for the background.

    • background-position positions both images. I used viewport units to move it. Using viewport units in this way allows the background image to adjust based on the size of the viewport. So, if the browser window is resized or viewed on different devices with varying screen sizes, the background image will still maintain a similar position relative to the element.

    • background-repeat: no-repeat means that the background image will only appear once and will not repeat horizontally or vertically.

    • The attribution part should be surrounded by a <footer> element. You also can use position: fixed on it and stick it to the bottom of the document.

    • To center the .card, you could've used grid or flex instead of positioning it absolutely, here's an example of using display: grid;:

    body {
min-height: 100vh;
display: grid;
place-items: center;
}
    • Instead of positioning a profile picture absolutely and throwing an 80px margin on .txt you could've used flexbox and negative margins. Here's the video that shows how it could be done.
    • I recommend using pixel units sparingly in your projects and instead use em and rem. There're a lot of articles and videos on the web explaining why you shouldn't use pixels. Definitely check them out.

    Here's my submission for this challenge. All of the things I talked about here could be found in my code.

    I hope you find this helpful 😁. Happy coding!

    Marked as helpful
    1