Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
24
Comments
14
Lord Robins
@ZenitsuAg

All comments

  • ciri-ryan•10
    @lilshebeary
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    That I could replicate it, maybe use Bootstrap or SASS nextime.

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

    could be more responsive, in the style page information it was confused about the web page width size and when I went to add a @media, it got weird

    What specific areas of your project would you like help with?
    1. How to make it responsive and adhere closer to the style page.
    2. If I should do anything differently.
    3. If someone could explain why align items never seems to get implemented to move content to the center of the screen

    QR Code Challenge #1 Html CSS

    1
    Lord Robins•610
    @ZenitsuAg
    Posted over 1 year ago

    Hi @lilshebeary, you've done a great job!! I see that your struggling a bit with centering your content at the center of the screen. All you have to do is add this code to your css file

    * {
      margin: 0;
      padding 0;
      box-sizing: border-box;
    } /* This is the best reset */
    
    html {
      height: 100%;
    }
    
    body {
      min-height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    

    This code will fix the problem you're facing. Here, we are setting the height of the page to 100%, and the min-height of the body to that same 100%. Doing it like this will make body equal to the entire viewport (the whole page) and it can actually center your content the way you want.

    You don't need to stress yourself too much about anything, your work is great! Feel free to ask any questions tho.

    Happy Coding :)

  • Ivis1991•70
    @Ivis1991
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    Responsive page operation for selected screens

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

    In the case of the image, I would have liked to be able to use tailwind to round the edges instead of specifying them directly using the CSS

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

    Frontend Mentor - QR code component solution

    #tailwind-css
    1
    Lord Robins•610
    @ZenitsuAg
    Posted over 1 year ago

    Hi Ivis, the work you've done is really amazing fr. I like it. Maybe we can collabo on something in the future who knows :)

    To round the edges of the image in Tailwind, did you try adding rounded-[5%] class to your img tag? Or adding the image to your tailwind.config.js file?

    Other things I noticed

    • Your favicon is missing, you can fix this by adding <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png"> to your code.
    • And you didn't also use the Outfit font as per the style guide, you can do so by adding this @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap'); to the top of your index.css and then add the class to your html file.

    You did a really great job. Have a great day. Happy Coding :)

  • riddler5000•70
    @riddler5000
    Submitted almost 2 years ago

    my second project with vs code I hope u like it

    1
    Lord Robins•610
    @ZenitsuAg
    Posted almost 2 years ago

    Hi Riddler, you've done a great job, but there are a few things you can improve on

    • It's better to have your CSS and HTML in separate different files.
    • You also forgot to include the images folder that's why the images aren't showing
    • You have to wrap your code in a landmark tag like main, footer, for accessibility reasons
    • Your code is also not responsive, you didn't work on the mobile view so the user-experience on smaller devices is not really great.
    • You can update the font-family with this in your CSS:
    // Import the font from google
    @import url(https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@400&display=swap);
    @import url(https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;700;900&display=swap)
    
    body {
        font-family: "Lexend Deca", monospace;
    }
    
    h1 {
        font-family: "Big Shoulders Display", serif;
    }
    
    • And finally, add some hover effect to the button with:
    button:hover {
        background-color: *some color*
    }
    

    Overall you did great!! Keep up the good work.

    Happy Coding :)

    Marked as helpful
  • Nayan Bhatt•1,000
    @freaky4wrld
    Submitted almost 2 years ago

    Advice Generator with tailwind CSS and Vanilla JS

    #accessibility#animation#tailwind-css#fetch
    1
    Lord Robins•610
    @ZenitsuAg
    Posted almost 2 years ago

    Hello Nayan, how you doing today? Your code is amazing!! I like the animation, looks great, you can fix the issue you're facing in firefox with the piece of code.

    • On line 8 of your script.js, you have this:
    fetch('https://api.adviceslip.com/advice')
    

    Update it to this

    fetch('https://api.adviceslip.com/advice', { method: 'GET', mode: 'cors', cache: 'no-cache' })
    

    The browser will stop retaining the old advice and give a new advice each time you ask.

    • It'll be better if all your code is inside a landmark tag like main footer, you did this but you left out the button's div.

    • You can also center your content with

    <body class="...other-classes flex justify-center items-center">
    
    • The node_modules folder is not necessary in your repo, so you can remove it.

    And that's all.

    Happy Coding :)

    Marked as helpful
  • Lord Robins•610
    @ZenitsuAg
    Submitted over 2 years ago

    Interactive rating component main

    #accessibility
    2
    Lord Robins•610
    @ZenitsuAg
    Posted over 2 years ago

    Thanks @0xAbdul

  • Kritika•20
    @11Kritika11
    Submitted over 2 years ago

    Responsive single page price grid

    #bootstrap
    1
    Lord Robins•610
    @ZenitsuAg
    Posted over 2 years ago

    Hi Kritika, you've done a great job and your code is responsive. Some tips to help you improve your code.

    • It's better to wrap the entire code in a main tag for accessibility purposes
    • Also, the entire code cover the entire screen so we can't really see the body tag. We can change this by setting a width value maybe to 80% or something else, depends on you.
    • Heading tags should also increase in a logical order, that is h2 after h1, h3 after h2 like that. This is because of screen readers to make the page easy to navigate. You can read more about it here.
    • Then you can center it using CSS Flexbox with this code body {display: flex; justify-content: center; align-items: center} and that's it.
    • For the button shadow, you can solve that by using the box-shadow property. So something like box-shadow: 0px 6px rgba(0, 0, 0, 0.2) should do it, but feel free to edit it as you want. -Also in the "Why us" section, you should use a separate p tags for each item.
    • In your CSS where you called body, h1, h2 etc to remove the margins is okay but preferably you can use the universal selector to do it. Like this
    * {
    margin: 0;
    }
    

    Overall you did really well.

    Happy Coding :)

    Marked as helpful
  • Jude Savio•10
    @JudeSavio
    Submitted over 2 years ago

    Responsive QR component using Flex

    1
    Lord Robins•610
    @ZenitsuAg
    Posted over 2 years ago

    Hello Jude, you've done pretty well. Here are some tips to help you improve your code.

    • Your image didn't load because you didn't upload the image folder to your repo.
    • It's usually better to wrap the entire code inside a main tag for accessibility purposes.
    • Also, I see that you aligned the h1 and the p elements in the HTML file , it's much better to do all that in CSS using the text-align property and you can just set it to center
    • And I really don't know how but you're missing the HTML boilerplate in your code. I mean
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    

    this stuff. This is a very important component of any modern website today.

    Overall, you've done a great job.

    Happy Coding :)

    Marked as helpful
  • Sebastian•60
    @Guldspjutet
    Submitted over 2 years ago

    Single price grid component

    1
    Lord Robins•610
    @ZenitsuAg
    Posted over 2 years ago

    Hi, Sebastian, how are you doing, you've done a great job. You code is neat and readable, but there are a few things that you can improve.

    • Your HTML file has too much space, like you don't have to leave three or four lines before you write something else
    • In your HTML file, it's better to wrap your entire code in a main tag for accessibility purposes.
    • It also seems like you forgot to add the hover effect for the button.

    Overall, you done really well.

    Happy Coding :)

    Marked as helpful
  • Dorian•140
    @dkirinc
    Submitted over 2 years ago

    HTML, CSS, Sass

    #sass/scss
    1
    Lord Robins•610
    @ZenitsuAg
    Posted over 2 years ago

    Hi Dorlan, you've done a really great job. Here are so tips to help you improve your code

    • If the design is made at 1440px then all you have to do is to set the max-width property of the main element to 1440px.
    • Also its better to wrap the entire code in a main tag.
    • Heading tags should also increase in a logical order, that is h2 after h1, h3 after h2 like that. This is because of screen readers to make the page easy to navigate. You can read more about it here.
    • And as for defining the height of heading, paragraphs etc I also struggle with that, sometimes I just use a ruler to get it right. But we can consult @AdrianoEscarabote for more insights.
    Marked as helpful
  • Jai Joura•30
    @JAIJOURA
    Submitted over 2 years ago

    Basic HTML and CSS

    2
    Lord Robins•610
    @ZenitsuAg
    Posted over 2 years ago

    Hello Jal, you code is really amazing, neat and also readable. Here are some tips to help you improve your code.

    • It's better to wrap the entire code within a main tag.
    • It's also better to use max-width and max-height properties instead of width and height for responsive purposes.

    Happy Coding

    Marked as helpful
  • Gus•60
    @angusgee
    Submitted over 2 years ago

    QR component using CSS and HTML

    3
    Lord Robins•610
    @ZenitsuAg
    Posted over 2 years ago

    Hi MaltaWebDev, you've done an amazing job. Here are some tips to help you improve your code.

    • In the subheading class, it's better to add a h1 tag to wrap the text.
    • In the img tag, width=300 not 300px. But for responsive images in future, you can set the width to 100% or the max-width to 100% and it will scale down as automatically and it won't overflow the allocated space.
    • For the centering issue, you just add body {display: flex; justify-content: center; align-items: center;}
    • If the attribution div is causing you issues, you can just say position: absolute; bottom: 0

    So you may not really need to use CSS grid to center your code. Also, if you like the shadow, you can leave it but it's not really part of the original design.

    Happy Coding :)

    Marked as helpful
  • Juwon Bowofola•30
    @CodeGod36
    Submitted over 2 years ago

    VS code as the IDE

    3
    Lord Robins•610
    @ZenitsuAg
    Posted over 2 years ago

    Hello Juwon, how are you, you have done amazing work

    @denielden has said it all, I'll just like to add a few things.

    • It's much better to create a different CSS file for the styling.
    • For the text, I see that you're trying to get the font by add src property, that's not how it works. For you to get the desired font, you have to import it from Google fonts. In this case it would be @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap'); if you add this to your CSS file or within the style tag, and in the body tag add font-family: "Outfit", Serif ; that's all.
    • For your Img tag, it's best to add an alt value.
    • And I don't think that you can add more than one value for the font-weight property.
  • Sankalp Sharma•60
    @sankalp414
    Submitted over 2 years ago

    Responsive qr-code-component

    3
    Lord Robins•610
    @ZenitsuAg
    Posted over 2 years ago

    Hello Sankalp, you have done a great job. Here are a few tips that can help you to improve your code.

    • It's better to create a CSS file and link it in the head of your HTML as opposed to styling in the HTML file.
    • It's better to wrap your entire code in a main tag
    • In the .card class, the font-family should be within quotation marks " " i.e font-family: "Outfit", serif; the serif is the fallback font.
    • You should also add the alt value for the img tag.
    • Also, in this scenario, I don't think that there's need for the word-spacing property.
    • Finally, if you want to center your work (which is already in the main tag) you can use flex. body{display: flex; justify-content: center; align-items: center}

    I hope this is not too much.

    Happy Coding :)

    Marked as helpful
  • Saulius K.•560
    @TH3RIV
    Submitted over 2 years ago

    Triple Column Preview Card

    #bootstrap
    1
    Lord Robins•610
    @ZenitsuAg
    Posted over 2 years ago

    Hello Saulius, your work looks great!! As for the centering issue, all you have to is add

    body { display: flex; justify-content: center; align-items: center; }

    and that's it.

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub