Skip to content
OverviewSolutions
6
Comments
9
Wisdom
@Unifies

All comments

  • Wisdom•180
    @UnifiesPosted 13 days 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
  • Gillian Oliveira•90
    @lia-oliveiraSubmitted 13 days 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

    2
    Wisdom•180
    @UnifiesPosted 13 days 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•180
    @UnifiesPosted 13 days 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•180
    @UnifiesPosted 16 days 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
  • Wisdom•180
    @UnifiesPosted 18 days ago

    Hi there, Guilherme. Great work completing this challenge!

    A couple updates for better code quality:-

    Include semantic HTML and a level one heading <h1> in your code - It is best practice to contain all content within distinct regions such as the <header>, <nav>, <main>, and <footer>. Here's a guide to the full doc that explains this.

    Consider changing up your code and adding this..

    .perfil{
   display: flex;
   flex-direction: column
   align-items: center;
}

    ..to properly center the container div. It start to look off and right-aligned from around 850px and the content just gets cropped out from 630px. From there on, it's not responsive.

    Consider above and add some code to make the solution responsive and fully visible on smaller screens. Example, using media query, add some code to change the width of the perfil container from a static 400px to 80-90% of the screen width and check on the content sizes to ensure they all fit as should within the updated width.

    In order to create a clean, reusable code though, 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.

    Ensure to check the style-guide.md file on all challenges, it includes the fonts, color, and weights to use in order to match the design. The colors on your solution look a tad bit different, although this doesn't affect your solution in any way as we were asked to edit copy and colors to our preferences - I just thought it a worthy mention if the difference in colors was not intentional.

    Marked as helpful
    0
  • Tee12thegreat•80
    @Tee12thegreatSubmitted 19 days ago
    What are you most proud of, and what would you do differently next time?

    how i could relate to my codeeasily and applying the things i learnt in the previous challenge

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

    i could not put shadows on my container. i lso couldnt align an object to the left. i managed to browse through the internet and get solutions

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

    aligning objects

    CSS flexbox put to use

    2
    Wisdom•180
    @UnifiesPosted 19 days ago

    Hi again, I promise I'm not stalking you lol - I just keep getting your solutions for peer review in this learning path.

    Nice work completing the project!

    Some feedback for you:-

    The alignment on your solution is off, it looks greatly different from the design. The content is supposed to align to the left, not center.

    There's an extra padding in the "Learning"'s padding - include display: flex; to the "box" div containing Learning and see if that works correcting the extra padding

    Tip: This challenge comes with a free Figma Design File and it greatly helps in getting the correct values for the widths, spaces, font sizes, font weights, border radius [practically every info you'll need to match the design exactly] and it fastens the coding process as there's less guess work or trial and errors.

    0
  • Tee12thegreat•80
    @Tee12thegreatSubmitted 20 days ago
    What are you most proud of, and what would you do differently next time?

    i was able to write most of the html code without looking at other work. i was impressed with the media queries in CSS and how my webpage fitted on my phone web. next time, i would give myself more time to play around with CSS

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

    i could not create the mobile version of the application. i then looked up for some solutions on the internet

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

    i would like more help in CSS, i still have a long way to go despite grasping the basics in theory

    Simple and responsive landing page using CSS

    2
    Wisdom•180
    @UnifiesPosted 19 days ago

    Hi there, Takomborerwa. Great work completing your first challenge on Frontend Mentor, your solution to the challenge looks good. Kudos on overcoming the challenge you had, because the layout & mobile view of your solution looks great and responsive on all active screen widths.

    A couple updates for better code quality:-

    Include semantic HTML and a level one heading in your code - It is best practice to contain all content within distinct regions such as the <header>, <nav>, <main>, and <footer>. Here's a guide to the full doc that explains this.

    Your solution differs slightly from the design because you have the <attribution> code in the QR Code Component. That is the part with the "Challenge by, Coded by", it's supposed to come underneath the solution OUTSIDE the white qr_code div but within the body inside the "attribution" div. This will of course mean you have to rewrite the stylings for the attribution section so that it looks as it should.

    Marked as helpful
    1
  • Wisdom•180
    @UnifiesPosted 22 days ago

    Hi Ebunoluwa, nice work!

    It seems though that you designed this without looking through the style guide. We are supposed to match the colors as much as possible but your chosen colors, background colors and fonts are different from what was given - please check the style guide for every challenge you work on in order to recreate the design as exact as possible.

    Given fonts and colors for this challenge were this:

    • The font family is the Outfit font - Family: Outfit. Grab the embed code for the font from this link and include in your HTML file.
    • White: hsl(0, 0%, 100%) [card container]
    • Slate 300: hsl(212, 45%, 89%) [body background color]
    • Slate 500: hsl(216, 15%, 48%) [color for light text]
    • Slate 900: hsl(218, 44%, 22%) [font color for bold text]
    • Weights: 400, 700

    -- Give a box shadow to the container div and some margin-bottom before the attributions for a cleaner result.

    In order to create a clean, reusable code though, 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.

    Other little code changes you might consider making:

    Delete the imported comments in the code that only tell you what to do and move the attribution styling to the external CSS file and delete that block of code from your HTML file

    These don't affect your code in any way but will be a good edit for a cleaner code.

    0
  • algoholic0•10
    @algoholic0Submitted 25 days ago
    What are you most proud of, and what would you do differently next time?

    html code

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

    css margin and shadows

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

    HTML

    QR CODE

    1
    Wisdom•180
    @UnifiesPosted 25 days ago

    Hi there, nice work!

    A few pointers though concerning your code:- Consider removing all the imported comments by Frontend Mentor that still exists in your code

    In order to match the preview as best as possible, give a border-radius to the OR Code image itself [not just the border enclosing the image]. Reduce the font-size for the texts in your code, the current result looks huge compared to what was given. Personally, I used font-size: 20px; for the title, and font-size: 14px; for the paragraph, but it is recommended to use responsive fonts instead [em, rem] and declare them as variables that can be reused. [See below]

    It should have given you a warning after you submitted, but ensure that all content on a page is contained within a landmark region - It is best practice to contain all content excepting skip links, within distinct regions such as the header, nav, main, and footer. So you should enclose all your code within the body tag in a <main></main> tag.

    The Readme.md file you pushed to Github is the same one from Frontend Mentor that only tells us how to approach our solution to the challenge, checkout the Readme-template.md file, update it with the correct information and rename to 'readme.md' after deleting the former one

    Here are some code optimization tips I got from a kind fellow on here:

    Avoid using hard coded values, like width: 275px; use max-width: 275px; instead, max-width: 20rem; would be even better. Em/rem units are better for responsiveness. I recommend you to check Kevin Powell's this video for better understanding.

    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 {
  /* Primary */
  --dark-cyan: hsl(158, 36%, 37%);
  --cream: hsl(30, 38%, 92%);
  /* Neutral */
  --very-dark-blue: hsl(212, 21%, 14%);
  --grayish-blue: hsl(228, 12%, 48%);
  --white: hsl(0, 0%, 100%);
  --fs-p: .875rem;
  --fw-500: 500;
  --fw-montserrat-700: 700;
}

    and then you can use them for styling like background-color: var(--cream);. 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. --cream is a custom name btw, you can name it anything you want. But for readability giving it a meaningful name would be better.

    Using a modern css reset for the future challenges will help you.

    0