Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions27Comments42

All comments

  • joenigiri• 10

    @nrl-izah

    Submitted

    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

    P
    Jeuri Morel• 1,405

    @JeuriMorel

    Posted

    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• 200

    @alecanonm

    Submitted

    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

    #bem

    1

    P
    Jeuri Morel• 1,405

    @JeuriMorel

    Posted

    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
  • P
    Shaun Pour• 630

    @DarkPhoenixNinja92

    Submitted

    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

    P
    Jeuri Morel• 1,405

    @JeuriMorel

    Posted

    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
  • P
    Jeuri Morel• 1,405

    @JeuriMorel

    Posted

    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
  • P
    Jeuri Morel• 1,405

    @JeuriMorel

    Posted

    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
  • P
    Jeuri Morel• 1,405

    @JeuriMorel

    Posted

    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
  • P
    Jeuri Morel• 1,405

    @JeuriMorel

    Posted

    It looks like you forgot to upload the image file.

    Marked as helpful

    1
  • Usman Awwal• 60

    @USII-004

    Submitted

    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

    #animation

    1

    P
    Jeuri Morel• 1,405

    @JeuriMorel

    Posted

    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

    @fabiofmachida

    Submitted

    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

    P
    Jeuri Morel• 1,405

    @JeuriMorel

    Posted

    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
  • P
    Jeuri Morel• 1,405

    @JeuriMorel

    Posted

    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
  • P
    Jeuri Morel• 1,405

    @JeuriMorel

    Posted

    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
  • P
    Jeuri Morel• 1,405

    @JeuriMorel

    Posted

    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
  • Jewlius X• 30

    @jewlias

    Submitted

    Completed my second challenge to solidify my knowledge on CSS Box Model after covering the basics on The Odin Project. So far, everything seems to be making sense and coming out as wished.

    QR card component

    #accessibility

    1

    P
    Jeuri Morel• 1,405

    @JeuriMorel

    Posted

    Looks great! Is there a reason for not centering the card on small screens? I see you're only giving the body full height on screens above a certain size, so I assume it's not a mistake.

    Avoid using pixels for font sizes. Here's an article on how to create responsive and accessible font sizes.

    0
  • P
    Jeuri Morel• 1,405

    @JeuriMorel

    Posted

    Remove the / from

    body{
    background-image: url(/Screenshot\ 2023-10-01\ 105219.png);
}

    in your CSS and

    <link rel="stylesheet" href="/style.css">
<img src="/image-qr-code.png" alt="" height="300px">

    from your HTML to properly link everything. Right now only the base HTML is showing.

    Marked as helpful

    0
  • Ale• 10

    @estrelicia

    Submitted

    This is my first challenge. Any feedback is appreciated. Thanks!

    QR code component

    2

    P
    Jeuri Morel• 1,405

    @JeuriMorel

    Posted

    You should avoid using px for fonts. Here's a detailed article showing you how to create responsive and accessible typography.

    Marked as helpful

    1
  • Rebecca Padgett• 1,580

    @bccpadge

    Submitted

    Hey everyone,

    This my solution to Base Apparel Coming Soon Page using HTML, CSS & JavaScript. The only issue I had doing the project is placing the bg-pattern-desktop.svg on desktop. All feedback is welcome and greatly appreciated.

    Thanks,

    Rebecca

    Responsive landing page using CSS Flexbox

    #accessibility#bem#lighthouse

    1

    P
    Jeuri Morel• 1,405

    @JeuriMorel

    Posted

    I've got a few suggestions for changes to your CSS that should fix some of the img issues, like the stretching that occurs when resizing window and should keep the img ratio intact.

    I would replace all the style declarations on .showcase img with a simple height: 100%; and change the max-width: 100%; on the img, picture, svg selector with width: 100%;. A side effect of this is that the logo image will end up being too large at certain sizes, so select it and give it a width: auto;

    In the media query for .container I would add a few declarations so it ends up looking like this:

    @media (min-width: 75em)
.container {
    flex-direction: row;
    height: 100vh;
    overflow: hidden;
    align-items: center;
}

    I would then remove the media query for the .showcase img.

    This isn't necessary, but I would change the breakpoint for all current media queries from 75em to something like 50em because as it currently is you're using the mobile image at relatively large screen sizes with makes it really blurry.

    Adding the following query will line up the top of the image with the top of the page to keep the face properly in view.

    @media (min-width: 75em)
picture.showcase {
    align-self: flex-start;
}

    You can play around with the breakpoint numbers to something that looks good to you.

    Marked as helpful

    2
  • P
    Jeuri Morel• 1,405

    @JeuriMorel

    Posted

    Give your body a min-height: 100vh; so that it takes up the full height of the screen. This way the content will be centered. The way you currently have it it's only as big as its content.

    Also, you have no padding or margin preventing the cards from touching the edges which is rarely good. If you look at the designs you can see that there's space between the cards and the sides of the screen.

    Looks like you forgot to add box shadows to the cards. If you are unsure on how to do so, check out the docs here.

    Marked as helpful

    1
  • Ahmad Hassan• 310

    @Ahmadhassan0

    Submitted

    You can look at my code and If you have any type of feedback on how can I improve my code quality I'll be very happy to look at your feedback😊

    3 Column Preview Card Component

    2

    P
    Jeuri Morel• 1,405

    @JeuriMorel

    Posted

    One general tip is to add cursor: pointer; to your buttons and/or links. It's a small change, but leads to better user experience.

    Also, don't just check what the site looks like on mobile and at full screen widths. Look at how it functions on medium sizes as well. Your solution's layout starts to break down in the 500px-900px range. The cards get all squished up and sometimes you even lose content, like the button, because it gets so narrow.

    Marked as helpful

    2
  • CeB-old• 50

    @CeB-old

    Submitted

    I didn't have the figma file so I try to be close as possible from the screenshot. If you have one picture/screenshot but you don't have a figma file or something like this. How you can find the size of the police or the padding size, etc? If you have some tips for me, thank you.

    Flexbox + breackpoint at 375px

    3

    P
    Jeuri Morel• 1,405

    @JeuriMorel

    Posted

    I have a few suggestions on how you can improve the solution and make it responsive. As it currently is it only looks good at large screen widths.

    First thing I would do is add height: 100%; to both the html and body tags. This ensures that the site takes up the full height of the screen and gets rid of a lot of potential issues.

    Second, an easier way to center the card is to add the following to the body:

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

    and then remove the following from the section:

         margin: auto; 
     position: absolute; 
     top: 50%; 
     left: 50%; 
     transform: translate(-50%,-50%);

    Replace width: 20%; with something like max-width: 375px;. On small screens the card is really narrow. Read up on how to use clamp() here. It's one way to handle responsiveness.

    Marked as helpful

    0
  • Mohamed Ragheb• 80

    @mohamed-fm

    Submitted

    Please feel free to provide any feedback or suggestions on how I can improve. Your comments are greatly appreciated.

    Four-card-feature-section

    2

    P
    Jeuri Morel• 1,405

    @JeuriMorel

    Posted

    Great job Mohamed. Looks like you forgot to check what the site looks like on mid-sized screens. It looks great on both mobile and full screen, but the layout breaks between the widths 650px and 980px.

    Marked as helpful

    0
  • Denise Zitting• 30

    @dzitting

    Submitted

    This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

    I started first with reviewing the design and deciding how the HTML might be structured for the desired outcome. Then I broke the design down into different elements/tags. Starting first with the container that wraps around the entire card. Then I added a figure to hold the img. I broke the text apart from the img by separating it in a div. Once the HTML structure was complete, I moved into the styling and started centering the elements. At this point I needed to resize the image/figure, and align the text.

    After this was complete, I moved focus to adding in the last details with border-radius and a drop-shadow filter. I adjust the text colors and added the background-color.

    • Semantic HTML5 markup
    • CSS custom properties
    • Flexbox

    I utilized margin: 0 auto; through this challenge, as I didn't want to cause a major shift to the elements when using display: flex.

    I am most proud of the following CSS, due to the fact, I am used to creating percentages that allow for easier responsive design. However, in this challenge the object was not supposed to resize based on mobile/desktop. The width was set to a hard number and that maintains throughout the resizing.

    div.container {
    background-color: aliceblue;
    width: 325px;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 20px;
    padding: 10px;
    filter: drop-shadow(0 0 15px #0000003e);
}

    QR Code Component using HTML/CSS

    #bem

    1

    P
    Jeuri Morel• 1,405

    @JeuriMorel

    Posted

    Hey Denise, nice job with this one. You said that you used margin: 0 auto; instead of display: flex; because of shifting elements. Did you try adding the following along with display: flex; to the body?

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

    It perfectly centers the card with no shifting issues. If you do this there's no need for padding-top: 50px; on the body or the margin on the card.

    Also, try linking directly to the solution for easier access.

    1
  • P
    Jeuri Morel• 1,405

    @JeuriMorel

    Posted

    Hey Moses,

    Try adding display: block; to your image tags to remove the little bit of space under them. On the mobile version of your solution the overlay creates a small border under the image because of this extra space.

    I see that you are using the desktop version of the image even on mobile. You have display: none; on the mobile image, but never use it.

    Marked as helpful

    0
  • Rebecca Padgett• 1,580

    @bccpadge

    Submitted

    Hello everyone,

    Hope all is well.

    This is my solution to the Article preview component. In this project, I made sure the tooltip is accessible by using aria attributes [aria-expanded="true"] and [aria-expanded="false"] and when you press somewhere else like the card for example the tooltip will close. Additionally, you can press the ESC to hide the tooltip and pressing TAB on the button a dotted outline will appear.

    Any other feedback would be welcome and greatly appreciated.

    You can connect with me via Github and Linkedin.

    Article preview component using HTML, CSS & JavaScript

    #accessibility#bem#lighthouse

    1

    P
    Jeuri Morel• 1,405

    @JeuriMorel

    Posted

    You did a good job with this one, Rebecca, nicely done.

    I've run into two issues with the tooltip. The first is that its placement looks to be relative to the viewport and not the button which feels a little awkward as where it appears onscreen is rather inconsistent. The second is that since it has a lower z-index than the button, when the two overlap the button covers part of the tooltip. By default the button is covering the RE in SHARE when I open it while viewing the page on my laptop at fullscreen.

    Marked as helpful

    0
  • P
    Fabian• 150

    @slowjo

    Submitted

    Unexpected extra space below images

    I have noticed this in another project as well, there seems to sometimes be a few pixels extra space below images (more than you specify using margins and padding). For example, the qr image here is originally 576 x 576. But when it gets constrained here to a container with a width of 288px, it's height in the browser is 292px. I just took 4px off the bottom margin to take this into account, is there a more generally applicable way to deal with this?

    QR Code Component

    1

    P
    Jeuri Morel• 1,405

    @JeuriMorel

    Posted

    The most common ways to solve that issue, as far as I know, is to add either of the following to your images:

    • display: block;
    • vertical-align: middle; (I think any value here works.)

    Great job on the solution by the way.

    Marked as helpful

    0