Skip to content
OverviewSolutions
6
Comments
10
ohuttar
@ohuttar

All comments

  • ohuttar•160
    @ohuttarPosted over 1 year ago

    Hey Jordan,

    The syntax for adding opacity to hsl is hsl(x, y, z, opacity%) or hsl(x y z / opacity%).

    Hope this helps!

    1
  • Mariah Wear•20
    @mariahw4Submitted over 1 year ago

    This is my first submission of a project on this platform and I would welcome feedback!

    I found it difficult to adjust the size and placement of the circle element and would appreciate input or suggestions on how to do it more smoothly.

    I feel like I needed to create too many classes to properly get all the text sizes and colors and formatting done properly, so again would love feedback on ways to slim down my code.

    Thank you!!

    Responsive Result Summary Page using HTML and CSS

    3
    ohuttar•160
    @ohuttarPosted over 1 year ago

    Hello Mariah!

    I think I can give you a quick guide on how to deal with centering your content in an easier way. It's best to think from the top down. On your parent element, ".result-content", you can apply the following: "display: grid; justify-items: center;". This will center all of the direct children on the Y axis. That will allow you to remove your margin on the ".circle" and change your max-width to be just width.

    Take it one step at a time, starting from the outside (i.e. how many direct children of my body? how do I want them to be organized?) and then move your way down. You generally shouldn't need to be making micro-adjustments for the overall layout.

    Anyways, I think that you did a great job. Your solution looks very close to the original and it has the correct layout at both screen sizes.

    I hope my comment helps!

    Marked as helpful
    1
  • ohuttar•160
    @ohuttarPosted over 1 year ago

    Hello!

    In response to your question, you may need to add "min-height: 100vh" to your body.

    Hope this helps!

    0
  • Leonardo Henrique•10
    @SazakiiSubmitted over 1 year ago

    I'm still learning, but the only area that I find difficult and I am usure of, is the position, i'm still not sure of how it works, for example I just wanted to center all the items, but I not sure how I can do that, but that's it. Can someone guide me about best practices?

    Simple Resolution with css

    2
    ohuttar•160
    @ohuttarPosted over 1 year ago

    Hello!

    A pretty common way to center content in your body is by using grid. On your body you would write "min-height: 100vh; display: grid; place-items: center; ".

    Hope this helps!

    Marked as helpful
    2
  • Alvin•230
    @toolboxalSubmitted over 1 year ago

    First project on FEM. Have created this component using explicit width. Is this the way to go? Or should the content dictate the width? And working towards making in responsive in the future.

    QR Code Component - non responsive so far

    3
    ohuttar•160
    @ohuttarPosted over 1 year ago

    Hello,

    In regards to setting a width, I think there's no problem with it for this particular challenge. However, as the complexity of challenges increases and you need your solutions to be responsive on different devices, I find that allowing containers to grow/shrink with their content and using max-width/min-width is the way to go.

    Hope this helps!

    0
  • ohuttar•160
    @ohuttarPosted over 1 year ago

    Your solution looks great! It's working on both screen sizes. And I think your CSS makes sense to me.

    I would improve the HTML though. You're currently missing a <head> on your HTML and it is not very semantic or accessible. Check out this website https://www.a11yproject.com/posts/how-to-accessible-heading-structure/ if you want to learn more about this. Particularly, it is recommended to not use heading tags for styling, but rather to use them for structuring content.

    Anyways, I think you did a great job, and I hope my comment helps!

    0
  • Anja•20
    @anjafritzscheSubmitted over 1 year ago

    I added some notes in the read me file at GitHub. Just check them.

    Summary Score Component

    3
    ohuttar•160
    @ohuttarPosted over 1 year ago

    Hello Anja, I hope I can give some helpful feedback.

    I think the main issues you're experiencing come from using width/height on many of your elements, as well as setting width/height with percentages. You end up with overlapping/warping content because your sections are trying to conform to your percentages.

    It's counter-intuitive but you don't need to set width and height that much (especially height). The height of an element tends to automatically adjust to its inner content. And the width will adjust to its parent.

    In my opinion the main thing that needs a width and height set is the big circle that contains the total score. Beyond that, you may just need a simple max-width for the card container so that it doesn't grow too large. I believe this will help your solution behave more predictably and simply, as well as making it easier to make finer adjustments.

    I hope this helps, and nice job with your solution! BTW your CSS is very well-organized and easy to read.

    Marked as helpful
    1
  • raelynn-defalco•10
    @raelynn-defalcoSubmitted over 1 year ago

    Specifically for sizing and positioning the divs, is there a better, best-practice way I could have written those lines of code?

    This was my very first project that a tutorial wasn't telling me what to do step-by-step. My biggest challenge was figuring out the best-practice way to structure the CSS. I got the design looking the way I want, but I'm not sure if I did it in the best way possible. Please note, there is not responsiveness in this code as I have not gotten to that part in my lessons yet. Optimization is on the way!

    First Project Ever - QR Code Using Basic HTML and CSS

    2
    ohuttar•160
    @ohuttarPosted over 1 year ago

    Hello, I hope I can give some helpful comments.

    I think a lot of your positioning issues could have been solved by placing a padding and margin on your "content-wrapper". You could use pixels but I think it would be better for your future to switch to rem. 1rem=16px. So on your content-wrapper you would write: "margin: 1rem; padding: 1rem;" and you could delete all of the margins and widths you placed on the contents within the card, and delete the "width: 90%" on your image.

    From there add margin/padding to your description only as needed.This should make your styles easier to understand and adjust.

    The last tip I'd give is to center your card using grid. On your body I would delete the width, have your margin just say "0", and then write: "min-height: 100vh; display: grid; place-items: center;" ^The above code is a very common way of centering things.

    I think you did a really great job and it looks very close to the original!

    Marked as helpful
    1
  • Lucky Avbunufe•190
    @StanmancerSubmitted over 1 year ago

    Hello, I just completed the QR code component challenge. I have a few questions.

    • I set the 'main' container width to 350px instead of using min/max width, is it okay to do that?

    • is it okay to also upload the fonts and images i used in the code to github? if not, please specify other ways i can use them

    • how do i go about that rule of "Page should contain a level-one heading"?

    • does my code follow best practices? what are the best practices?

    Any additional feedback will be duly appreciated.

    Thanks.

    - Stanmancer (►__◄)

    html5 and css

    2
    ohuttar•160
    @ohuttarPosted over 1 year ago

    "Page should contain a level-one heading" just means you need an h1.

    It's recommended to include an h1 for the sake of accessibility. Using semantic HTML helps visually impaired users easily follow the page's contents. For example it could be confusing to hear that there's a secondary-level heading when they haven't heard a main heading.

    One solution would be to change your h2 heading to an h1. Another would be to make an h1, and style it to be hidden visually (so it can be read by a screen reader, but not interfere with the visual style).

    Marked as helpful
    2
  • ohuttar•160
    @ohuttarPosted over 1 year ago

    Nice solution! Your code is well-organized and easy to follow. I'm a beginner too so I can't offer a whole lot, but I did notice that your ".round" class looked more oval around the numbers. This is because you set the size of that class with padding. Since numbers are taller than they are wide, it makes an oval shape. If you set a width and height instead of padding, then they would be circles. I hope that helps!

    0