Skip to content
OverviewSolutions
27
Comments
42
Jeuri Morel
@JeuriMorel

All comments

  • joenigiri•10
    @nrl-izahSubmitted about 1 year ago

    I am absolutely new to HTML and CSS so I find it quite overwhelming at first. Though I managed to complete it in 3 hours, I'm not quite sure if my solution is good. As a disclaimer, I think my solution can only be opened on a desktop browser (I'm not entirely sure).

    There's this particular part that I don't really understand:

    .attribution {
    font-size: 11px;
    text-align: center;
    position: absolute;
    bottom: 0;
    width: 99%;
    padding: 20px 0;
}

    It was supposed to put the text at the center bottom of the body but, if I put width: 100% It's not quite at the center.

    The HTML part is here:

    <div class="attribution">
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
        >Frontend Mentor</a
      >. Coded by <a href="#">Nurul Mohamad</a>.
</div>

    Also, any advice on how to learn HTML and CSS effectively is welcome!

    Building a QR Code design

    2
    Jeuri Morel•1,385
    @JeuriMorelPosted about 1 year ago

    The body element has a margin of 8px by default. This adds 16px to the width on top of the 100% of the attribution. Giving the body a margin of 0 fixes the issue you're having.

    The image isn't showing up when I view your site; check that you're properly linking it.

    Marked as helpful
    0
  • Alejandro Cañon•260
    @alecanonmSubmitted about 1 year ago

    Hello there!

    I managed to do this challenge applying all the best practices about css and mobile first i considered, and also i applied meaningful html semantic.

    Something that i found a little difficult was to change the filter to the images.

    if you want to leave me a feedback, any suggestions or advices i will be really grateful

    Greetings! 🚀🌱

    Responsive component with Mobile first, html and css

    1
    Jeuri Morel•1,385
    @JeuriMorelPosted about 1 year ago

    You might want to try adding mix-blend-mode: multiply; and changing the opacity to 75% to the images to get them looking closer to the design. By the way, you don't have to use filter if you want to change the opacity of something, opacity is its own property (where 0 = 0% and 1 = 100%)

    Marked as helpful
    2
  • Shaun Pour•630
    @ShaunPourSubmitted about 1 year ago

    I did mostly follow the design here but ran into two issues I could not solve. Firstly, no matter how much I tried to tweak the width, I could not get the "sign in" text at the top to go onto a single line. Second is the logo in the footer which did not want to become white regardless of what property I tried to use (fill, color and a few others were all tried but none worked).

    If you want to have a look and see if you can fix this then be my guest.

    Fylo Landing Page /w Two Column Layout

    1
    Jeuri Morel•1,385
    @JeuriMorelPosted about 1 year ago

    To prevent the Sign In text from wrapping, you can give your lis width: max-content;. If you want to learn more about how this works you can read the docs here.

    As for the img color, I don't think you can change the fill of an svg that is brought in as an img, you'd have to add the svg to the HTML. If there were only one thing in the image I would tell you to use a filter, for example: filter: invert(1); But that inverts the color for everything in it, including the logo.

    1
  • Jeuri Morel•1,385
    @JeuriMorelPosted about 1 year ago

    I personally like using clamp a lot as a way of handling responsive sizes. Don't know what widths the design calls for, but as an example I would give the card the following: width: clamp(320px, 20vw, 375px);. If you never used clamp before, the first value is the min-width, the third is the max-width, and the middle value is the preferred value. You can read more about it here. In my example it will calculate 20% of the screen width and assign that to the card, without going outside of the 320px and 375px range.

    Try not using margins as a way of centering items. You've already setup the body as a flexbox, but the reason the card isn't perfectly centered vertically is that the body isn't taking up the full height. To fix this give the body height: 100vh;

    Marked as helpful
    1
  • Jeuri Morel•1,385
    @JeuriMorelPosted about 1 year ago

    Clicking on a notification makes the counter go up indefinitely but I'm pretty sure that the counter is supposed to represent the number of unread notifications. So it should start with how many of the notifications are in the unread state and decrease by one whenever those notifications are marked as read.

    0
  • Jeuri Morel•1,385
    @JeuriMorelPosted about 1 year ago

    The easiest way to center an item is to make its parent a flex box, so I would give the body the following:

        display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;

    the min-height is so that it takes up the full screen. This will perfectly center the grid section once you remove the margin-top on it.

    The grid section appears to be too wide, so I would give it a max-width of something more pleasing and closer to the design, maybe 1200px or so.

    Marked as helpful
    0
  • Jeuri Morel•1,385
    @JeuriMorelPosted about 1 year ago

    It looks like you forgot to upload the image file.

    Marked as helpful
    1
  • Usman Awwal•60
    @USII-004Submitted about 1 year ago

    my age calculator app making sure to include result animation as the numbers count up to it's final value using js. Done rate the app in the comment section, constructive criticism are welcomed

    Age calculator using HTML, CSS and JavaScript

    1
    Jeuri Morel•1,385
    @JeuriMorelPosted about 1 year ago

    Your date calculation doesn't seem to work properly. For example, I imputed today's month and day from last year and while the year correctly stopped at 1, the month and day kept calculating into the thousands. Had to refresh the page to stop the numbers from continuously counting. Putting the year into negatives, single, or double digits also makes the calculator spin indefinitely. Also, while imputing invalid days and years prevents you from submitting, invalid months still trigger the calculator, which keeps going until you refresh the page.

    Marked as helpful
    0
  • Fabio Machida•30
    @fabiofmachidaSubmitted about 1 year ago

    Hi guys, creating the structure in HTML was relatively easy, where I had the most difficulty was making the application responsive, and I believe that my CSS code was not optimized, I would like if someone could give me tips on how to make the code more optimized. Thank you guys

    aplication, responsivo, mobile, desktop

    1
    Jeuri Morel•1,385
    @JeuriMorelPosted about 1 year ago

    Instead of trying to vertically center the card by giving it a margin top of Xpx, which will not be consistent due to screens of different sizes, make the body a flex container and then center things that way. First give it a height: 100vh; so that it takes up the whole screen, then give it:

        display: flex;
    justify-content: center;
    align-items: center;

    This will perfectly center the card horizontally and vertically, so no need for all those margin- X : auto;.

    I see all the bars (bar1, bar2, etc) share most of the same code except for color. Maybe you can give them an additional class of "bar" (or whatever name you like) and put the code that they all share there, and then use the class names that are specific to each for color. So for example your code could look like this:

    .bar {
    width: 280px;
    height: 56px;
    border-radius: 10px;
    position: relative;
    margin-left: 410px;
    margin-top: 29px;
}

.bar1 {
    background: hsl(0, 14%, 95%);
}
.bar2 {
    background: hsl(38, 76%, 94%);
}
    0
  • Jeuri Morel•1,385
    @JeuriMorelPosted about 1 year ago

    On my screen the height: 45vh; on the main is making the card appear too short and has the button overlapping the Visual scorecard. Having the height work the way you have it means that content is lost when screen height isn't big enough.

    1
  • Jeuri Morel•1,385
    @JeuriMorelPosted about 1 year ago

    The <center> tag is no longer supported by HTML. It was used to center text, not to hold content. Try changing it to something like <main> for example. If you want to then center the content, give your main the following:

        display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;

    and give your body a height of 100vh so that it takes the full height of the screen.

    Remove the following from the card:

        max-width: 17%;
    margin-top: 160px;

    Be careful when setting max-width especially when it's to a small percentage like "17%". It can lead to content that is too narrow. Try to use more controlled values. I usually use clamp when I want to have fluid sizes with min and max values. An exampled would be width: clamp(300px, 25vw, 375px);

    Remove the hardcoded width on the img and give it a width of 100% to make it fluid and consistent when the card changes sizes. Then give it display: block;. It makes working with images easier and removes a little bit of extra white space under it.

    Marked as helpful
    2
  • Jeuri Morel•1,385
    @JeuriMorelPosted about 1 year ago

    Currently you have the images linking from a folder that doesn't exist so the images aren't showing up. Changing <img src="images/icon-luxury.svg" alt=""> to <img src="icon-luxury.svg" alt="">, for example, makes them appear.

    You forgot to change the color on the fonts and background, so right now it's not matching the design.

    0