Skip to content
OverviewSolutions
22
Comments
14
Lord Robins
@ZenitsuAg

All comments

  • ciri-ryan•10
    @lilshebearySubmitted 7 months 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•550
    @ZenitsuAgPosted 7 months 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 :)

    0
  • Ivis1991•70
    @Ivis1991Submitted 7 months 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

    1
    Lord Robins•550
    @ZenitsuAgPosted 7 months 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 :)

    1
  • Lord Robins•550
    @ZenitsuAgPosted about 1 year 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
    1
  • Nayan Bhatt•980
    @freaky4wrldSubmitted about 1 year ago

    Huh... submitting after a while.... been working on some stuff!! Well in this project I tried to implement my fetch learning..... but I guess there's some issue with the API fetching itself it works fine on chrome, but on firefox it fetches the same response again and again..... So a bit of help there would be appreciated!!!

    Thanks for all your appreciation and advice, glad you made the effort to preview my project and point out areas of improvement..........

    Advice Generator with tailwind CSS and Vanilla JS

    1
    Lord Robins•550
    @ZenitsuAgPosted about 1 year 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
    2
  • Lord Robins•550
    @ZenitsuAgPosted over 1 year ago

    Thanks @0xAbdul

    0
  • Kritika•20
    @11Kritika11Submitted almost 2 years ago

    I try my best to make it responsive as i can, i guess everything is almost fine i just have a mini problem with button shadow.It would be great if any one can help me with that

    Responsive single page price grid

    1
    Lord Robins•550
    @ZenitsuAgPosted almost 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
    1
  • Lord Robins•550
    @ZenitsuAgPosted almost 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
    1
  • Lord Robins•550
    @ZenitsuAgPosted almost 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
    0
  • Dorian•140
    @dkirincSubmitted almost 2 years ago

    Greeting to all the Frontend mentor community,

    this is my first solution and I would want to ask few questions about your setup.

    1. If design is made in 1440px do you adjust your browser element inspector to that size and do your programming or just insert everything to a div class "container" with max width of 1440px

    2. I had a little problems with defining the height of my headings and paragraphs, is there some kind of a trick or something to get this problem solved easier

    3. Any comment to this deployment is welcome, I am starting something new so I am aware that errors while making are going to be normal

    HTML, CSS, Sass

    1
    Lord Robins•550
    @ZenitsuAgPosted almost 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
    0
  • Jai Joura•30
    @JAIJOURASubmitted almost 2 years ago

    Its my first challenge and I'm very Excited for the further challenges in future

    Basic HTML and CSS

    2
    Lord Robins•550
    @ZenitsuAgPosted almost 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
    0
  • Gus•60
    @angusgeeSubmitted almost 2 years ago

    Hey folks!

    • The main div.container has been pushed up above the centre of the screen by the attribution section. How can I center it, please? I can't see why the attribution section makes it take up so much space? Neither div.container nor div.attribution have any padding or margin...
    • Is the shadow correct on the main div?
    • Is the use of CSS Grid to center the main div, then CSS Flexbox to centre the child items, correct? Or is there any easier way to create this 'single page, single element, everything centred' layout?

    Appreciate you all! <3

    QR component using CSS and HTML

    3
    Lord Robins•550
    @ZenitsuAgPosted almost 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
    1
  • Lord Robins•550
    @ZenitsuAgPosted almost 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.
    1