Skip to content
OverviewSolutions
9
Comments
11

Wisdom

@Unifies230 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Wisdom•230
    @UnifiesPosted 4 months ago

    Hey @valonkraja, great work! Your solution looks amazing and replicates the challenge well - only touch up to consider -- the transparency on the paragraph sections for Kira and Jeanette makes it look lighter than it should be and somewhat hard to read being on a white background.

    Otherwise, this is good work, keep it up!

    0
  • Wisdom•230
    @UnifiesPosted 4 months ago

    Hi @Dadv-a11y, great work completing the challenge!

    Please check the style-guide.md file for this challenge in order to match colors and fonts and replicate the design as best as possible.

    Also, nice work on use of semantic elements and CSS variables!

    Keep it up, happy coding!

    0
  • Wisdom•230
    @UnifiesPosted 5 months ago

    Hi @vahid11koln, congrats on completing the challenge.

    It seems you're having a little trouble - the CSS for your solution is not being displayed properly because the CSS files are not correctly linked.

    Add a full stop "." before the slash "/" in the file paths - I had the exact same issue on this same challenge and this fixed it for me.

    So, instead of

    • <link rel="stylesheet" href="/css/img.css">
    • <link rel="stylesheet" href="/css/text.css">
    • <img class="image-omlette" src="/assets/images/image-omelette.jpeg" alt="omlette image">

    It should be:-

    • <link rel="stylesheet" href="./css/img.css">
    • <link rel="stylesheet" href="./css/text.css">
    • <img class="image-omlette" src="./assets/images/image-omelette.jpeg" alt="omlette image">

    Do let me know if it works for you too - I hope it does. It sucks to put in all the work and have a tiny dot bug ruin everything :)

    Marked as helpful
    0
  • P
    Gillian Oliveira•260
    @lia-oliveiraSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    It was very nice to center the card without using margin: 0 auto. Before starting a new project, I will look through all available resources before developing a solution, instead of relying only on the Figma files.

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

    The biggest challenge for me was the card shadow. I tried CSS documentation and some tutorials to understand how it works, but it only looked right after ChatGPT helped me get the transparency value that matched the example card.

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

    I've been researching accessibility, and I would really like to find materials created by people who use screen readers or have altered color perception. I’d also like to know how to test a page to ensure it meets accessibility requirements.

    QR Code Invitation Component Built with Semantic HTML5 and CSS Flexbox

    #accessibility#pure-css
    2
    Wisdom•230
    @UnifiesPosted 5 months ago

    Hey Gillian, you've done an amazing work on this challenge. Your solution looks excellent, your code structure superb, and your approach to the solution [researching additional helpful resources before embarking on the challenge] intelligent - overall, Kudos! You nailed it.

    A teeny update on the design - add some weight to the title's font, instead of normal font-weight, use instead font-weight: 700; to make the title bolder as is in the design.

    Some code optimization suggestions for your CSS:-

    For the challenges on here, it is probably not needed but using colors, font-weights, sizes etc. as variables would be a good practice. Like:

    :root {
    /* Colors */
    --White: hsl(0, 0%, 100%);
    --Slate-300: hsl(212, 45%, 89%);
    --Slate-500: hsl(216, 15%, 48%);
    --Slate-900: hsl(218, 44%, 22%);
    --attribution: hsl(228, 45%, 44%);
    /* Fonts */
    --fs-h1: 1rem;
    --fs-p: 0.85rem;
    --fw-400: 400;
    --fw-700: 700;
}

    and then you can use them for styling like font-weight: var(--fw-700);.

    Reason being: These things may change in a real project, so when it does all you have to do is change them from the root instead of searching in the whole css file/s.

    Avoid using hard coded values, like width: 320px; use instead max-width: 320px; or even better; use equivalent rem/em values instead for better responsiveness on all screen sizes.

    For accessibility, add an alt text to the QR Code Image - Imgs need to have meaningful alt text, except for the decorative imgs - as it is greatly useful to users who rely on screen readers.

    That's all from me - PS: let a pal know if you find a good resource that explains accessibility's best practices, I'm also on the lookout for one.

    Wish you luck, Happy coding!

    Marked as helpful
    1
  • Wisdom•230
    @UnifiesPosted 5 months ago

    Hello Youssef, congratulations on completing your first challenge on Frontend Mentor, especially with a tricky challenge like the Huddle Landing Page.

    Your solution differs considerably from the given design though, see below:-

    • The background image covers everything in the body - including the socials and attribution - so delete the static height [100vh] assigned to the body [which owns the background image] and allow the bg-image to scale automatically as body content increases/decreases.

    • The social icons should have some padding, border-radius and hover effect - the same hover effect that was used for the Register button should also be used on the social Icons to match the active state design

    • The hero image and hero copy content part of your solution spans across each other - the image looks huge and spans over to the copy's corner while the copy sits on top of the image making it hard to make out what is written.

    Instead, create a div that'll contain just the image's div and the content's div, such that:

    <div class="heroContainer>
      <div class="heroImage>
        <img src="">
      </div>
      <div class="heroContent>
        <h1> </h1>
        <p> </p>
        <button> </button>
      </div>
</div>

    Then for CSS, give a display: flex; justify-content: space-between; to the heroContainer div and a flex basis of 50% and 45% to the image and content divs respectively. The remaining 5% becomes the gap between the two divs - this way nothing gets displayed over the other.

    PS: I'm sure there are a lot of ways to go about this, so use your findings too - just ensure the items look right in the respective position and size-wise.

    • There used to be a CSS styling for the attribution div, seems like you deleted it mistakenly - this changed up the attribution size and has it left aligned instead of center aligned.

    • Right now, the solution is not accurately responsive and hence doesn't look good on all screen sizes - consider changing fixed sizes to responsive sizes and inspect the result at all screen sizes to ensure it looks as should.

    Some code optimization suggestions for your CSS:-

    In order to create a clean, reusable code, it is recommended to create colors, fonts, and sizes as variables like so:

    :root {
    /* Colors */
    --White: hsl(0, 0%, 100%);
    --Slate-300: hsl(212, 45%, 89%);
    --Slate-500: hsl(216, 15%, 48%);
    --Slate-900: hsl(218, 44%, 22%);
    /* Fonts */
    --fs-h2: 0.95rem;
    --fs-p: 0.85rem;
    --fw-400: 400;
    --fw-700: 700;
}

    and then you can use them for styling like background-color: var(--Slate-300);.

    Reason being: These things may change in a real project, so when it does all you have to do is change them from the root instead of searching in the whole css file/s. --Slate-300 is a custom name, you can name it anything you want. But for readability giving it a meaningful name would be better.

    Avoid using hard coded values, like width: 825px; use max-width: 825px; instead, max-width: 20rem; would be even better. Em/rem units are better for responsiveness.

    Implementing above changes will have your solution replicating the given design as much as possible, which is the goal for the challenges. I hope you found this helpful - Happy coding!

    Marked as helpful
    0
  • Wisdom•230
    @UnifiesPosted 5 months ago

    Hi Mohamed, great work completing this Challenge!

    Here's some feedback for better code optimization and :-

    Keep an eye out for the accessibility report that's generated after you submit your solution - it gives us pointers on best practices that make our code accessible to all users such as including Semantic HTML in our code --> <nav>, <header>, <main><section></section></main>, <footer>. The 'Learn more' on each warning in the report gives further explanation on why and how we should use these.

    Great work replicating the design as exact as possible - paddings, margin, fonts, sizes. Thumbs up! The colors for the design on some elements look a tad bit off though [body background color, some li marker colors, and the headings]. Keep a close eye on the given design to see the differences such as the body bg-color actually being --Stone-100 and not --Stone-150.

    Marked as helpful
    0
View more comments