Skip to content
OverviewSolutions
13
Comments
5
CHarvey820
@CHarvey820

All comments

  • CHarvey820•190
    @CHarvey820Posted 8 months ago

    Your desktop version looks good! If you want to get closer to the design, I would suggest turning the Gabrielle Essence Eau De Parfum text into an h1 and increasing the font size.

    The content on the mobile layout looks like it spills over outside of its container, changing to a max-width property would help combat that issue.

    .chanel .content {
    max-width: 100%;
  }

    Hardcoding the height of your .chanel to 450px causes your content to spill out from the bottom on small screens, since the content needs more space to grow vertically. If you change it to height: auto; the layout will adjust itself.

    0
  • Amna Nasir•80
    @amna1526Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    It was an easy challenge, I think I did well

    What challenges did you encounter, and how did you overcome them?

    Nothing was difficult for me in this one

    What specific areas of your project would you like help with?

    The picture in my live site isn't loading for me, while in VS code, it is loading just fine, is it being loaded for the viewers?

    Social Links Profile

    2
    CHarvey820•190
    @CHarvey820Posted 8 months ago

    Try changing your img source to be src="./assets/images/avatar-jessica.jpeg"

    The ./ tells your program to back outside of the current file to find the filepath you are looking for.

    Here is an article that explains filepaths in a bit greater detail.

    Marked as helpful
    0
  • N1Dovud•150
    @N1DovudSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Well, I was able to complete the project without any difficulty. Finally, I felt like I knew everything well.

    What challenges did you encounter, and how did you overcome them?

    Choosing how to cover the items, delegating them into containers caused me some confusion. Like I could create just one container for the author info part but at the end decided to divide it into 3 parts. I would love to get some advice on compartmentalizing the project correctly or reasonably.

    What specific areas of your project would you like help with?

    I think the design looks fun but I am not sure if I fully followed code writing conventions.

    Social Links

    1
    CHarvey820•190
    @CHarvey820Posted 8 months ago

    I think this is a fantastic solution, excellent work!

    If I were to change anything it would just be a few naming conventions and alt text.

    • Naming conventions should be used to make it as easy as possible for the developer to understand what sort of element it is referring to, while also being broad enough to cover the scope of the project's use cases. For example, your .hobbies class describes what the user wrote in this instance, but another user may write something different, it also does not inform a developer what that element is. Using phrases like "description" or "bio" in this instance would fill a larger use case, and be more useful to the developer. The #yellow-text id is also a bit misleading (in this instance the text is actually green!) and doesn't otherwise describe what that element is. Placing it inside your heading div makes it clear that this is another heading, but something like "location" would be more specific on what that header is used for.

    • Alt text is best used as a quite literal description of the image, so something like "avatar of author Jessica Randall" would help convey more information to users using screen readers.

    I think your code looks great overall, but going above and beyond to assist your fellow developers and users with accessibility needs will really make your projects shine!

    Marked as helpful
    1
  • CHarvey820•190
    @CHarvey820Posted 8 months ago

    This looks like a great start!

    • You can move your attribution lines just under your <section> so they don't show up in the actual component.
    </section>
<a class="link-2" href="https://www.frontendmentor.io/profile/yourusername">Challenge by Frontend Mentor</a><br>
<a class="link-2" href="">Coded by Boy Programmer</a>
</body>
</html>

    • Remember to use both align-items: center; and justify-content: center; to fully center a flexbox component.

    • Try viewing the solution on a larger screen if possible. It looks good in smaller screens, but a bit stretched on larger ones.

    • Change your .head-image to have max-width: 100%; so it does not overflow past its container. You can also remove the border from the image, as it isn't present in the solution.

    • The section in the solution does not have a hover state; instead, it is simply a static box-shadow. You can remove your section:hover entirely, and move your box shadow into your section selector. The box shadow also does not need the blur or spread radius values, instead you can try something like this: box-shadow: 8px 6px #000000;

    I hope this can give you a good start on some ways to improve your project. Happy coding!

    Marked as helpful
    0
  • alaina96•10
    @alaina96Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I'm happy I had enough knowledge to replicate the style of the page without needing assistance. I would spend more time learning flexbox so I don't have to redo part of the project.

    What challenges did you encounter, and how did you overcome them?

    I have no knowledge of flexbox positioning, so I had to look for help on discord.

    What specific areas of your project would you like help with?

    I am having issues with having my images show up on my github site. I need to figure out what I've done wrong.

    QR code component

    2
    CHarvey820•190
    @CHarvey820Posted 8 months ago

    I like the way you used percentages for the border-radius!

    0