Skip to content
OverviewSolutions
4
Comments
5
A_boo_bae
@Unifies

All comments

  • A_boo_bae•80
    @UnifiesPosted 2 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 3 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
    A_boo_bae•80
    @UnifiesPosted 3 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 3 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
    A_boo_bae•80
    @UnifiesPosted 3 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
  • A_boo_bae•80
    @UnifiesPosted 5 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 8 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
    A_boo_bae•80
    @UnifiesPosted 8 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