Skip to content
OverviewSolutions
14
Comments
7
Zubair Abid
@ZubairAbid101

All comments

  • Ann Mukami•260
    @Kiunga1Submitted over 1 year ago

    ##First project. qr-code-component-main.

    Please tell me how I can improve. My biggest challenge was Layout and Positioning: especially positioning of the QR code component. I finally managed by following the CSS Flexbox guide.

    HTML5, CSS, FLEXBOX

    1
    Zubair Abid•280
    @ZubairAbid101Posted over 1 year ago

    Hello!!! 👋

    Congratulations on completing the challenge! 🎉

    There are some things that you can improve in the code,

    • Instead of using the <section> element, use the <main> element instead since the <section> element is preferably used when there are multiple sections on a single webpage. Since this is a simple design with only one component a <main> element will suffice.
    • Give the <body> element a min-height: 100vh. This will cause the align-item: center and justify-content: center to work properly making the component be at the center dynamically.
    • Another change that can be made is that for mobile layout don't give the <body> element a fixed width. Instead set the <section> element to a width relative to the viewport size by doing width: 90vw. Also don't specify the height of the <body> element as a fixed value instead let the component occupy as much height as it needs to.

    I hope you find this comment helpful! 🙂

    Did you know that there's a mark as helpful and an up-vote option? 🤔

    There's even a Follow button!!! 😁

    Happy Coding!!! 💻

    Marked as helpful
    1
  • Zubair Abid•280
    @ZubairAbid101Posted over 1 year ago

    Hello!!! 👋

    Congratulations on completing the challenge! 🎉

    There are some things that you can improve in the code,

    • I viewed your GitHub. It seems like your creating multiple projects in the same repository. GitHub does not work quite like a folder management entity. Simply put each project needs to be in a separate repository. You cannot simply put other repositories as sub folders of another repository. You CAN, but try not to.
    • The outer most <div> component is not necessary. You can simply remove it. The <main> element should be the direct child of the <body> element.
    • Try using JavaScript to dynamically change the src path for the <img> element using event handles. Your mobile design looks good.
    • To make the image responsive create a div element for the image in question. Give it a width property and then set the <img> element to width: 100% and height: 100%.

    I hope you find this comment helpful! 🙂

    Did you know that there's a mark as helpful and an up-vote option? 🤔

    There's even a Follow button!!! 😁

    Happy Coding!!! 💻

    Marked as helpful
    0
  • Zubair Abid•280
    @ZubairAbid101Posted over 1 year ago

    Hello!!! 👋

    Congratulations on completing the challenge! 🎉

    There are some things that you can improve in the code,

    • I noticed that you used the same styling for the <html> and the <body> element in your CSS file. I advise removing the <html> tag from your styling as this will not change the appearance of the design.
    • Try using the prescribed image given for each viewport. A simple way to do this is to create two <img> elements, one for the desktop and other for the mobile design. Set the display: none for the mobile design as default. Then using media queries set it to display: block for the mobile design at the appropriate size.
    • Instead of creating a single media query, try making separate media queries inside each individual element in your CSS file.
    • Try using min-height: 100vh on the <body> element. This will give you more control over how the document behaves provided the height gets larger than 100vh

    I hope you find this comment helpful! 🙂

    Did you know that there's a mark as helpful and an up-vote option? 🤔

    There's even a Follow button!!! 😁

    Happy Coding!!! 💻

    Marked as helpful
    1
  • Zubair Abid•280
    @ZubairAbid101Posted over 1 year ago

    Hello!!!

    Congratulations on completing the challenge!

    There are some things that you can improve in the code,

    • It seems that the <img> element does not appear for layouts between the desktop and mobile layout. I advise creating two <img> elements, one for desktop and the other for mobile design. Then set the display: none for the mobile <img> element. Using media queries set the display: block when the screen size is that for a mobile layout.
    • Try to use media queries within each element rather than creating a singular media query for all the elements.
    • Rather than using height: 100vh try using min-height: 100vh.
    • CSS Grid is a good way to format the layout so to speak but for single column or single row layouts try using display display: flex

    I hope you find this comment helpful!

    Did you know that there's a mark as helpful and an up-vote option?

    There's even a Follow button!!!

    Happy Coding!!!

    Marked as helpful
    1
  • Muskan singh•10
    @LifewithmuskanSubmitted over 1 year ago

    I'm new to web development ! Any feedback on how I can improve the code is very much appreciated!

    QR-code-component

    1
    Zubair Abid•280
    @ZubairAbid101Posted over 1 year ago

    Hello!!!

    Congratulations on completing the challenge!

    There are some things that you can improve in the code,

    • An efficient way to dynamically center elements is to use display: flex, justify-content: center, align-items:center.
    • Another way to do this is to assign the element in question a specific width and height value and then use margin: auto auto.
    • The background color for the body element is not correct. To keep the design as close as possible to the original use the style-guide.md file given to you.
    • You may notice that the font style for the design and that of your project do not match. Use Google Fonts and the <link> tag alongside the font-family CSS property to match the font style with the design.

    I hope you find this comment helpful!

    Did you know that there's a mark as helpful and an up-vote option?

    There's even a Follow button!!!

    Happy Coding!!!

    1
  • Marco Azzari•10
    @azzaripremSubmitted over 1 year ago

    Any question about best practices?

    Like I handled color using style tag and the rest in tailwind. Does it work?

    Github published website does not load images, do you know why?

    QR Code using Tailwind and some pure css

    1
    Zubair Abid•280
    @ZubairAbid101Posted over 1 year ago

    Hello!!!

    Congratulations on completing the challenge!

    There are some things that you can improve in the code,

    • To write custom styles I would recommend using a separate stylesheet dedicated to your CSS. To do this simply create a styles.css and then use a <link> tag to connect your HTML to the CSS stylesheet.
    • Another key feature is to use Semantic HTML. Though this project is short and does not necessarily require semantics it would be best practice to still implement it. To do this use HTML tags like <main>, <header>, <footer>, <section> to name a few.
    • I would also recommend using a custom README.md file on your GitHub as this would better help other developers in understanding the purpose of your code.

    I hope you find this comment helpful!

    Did you know that there's a mark as helpful and an up-vote option?

    There's even a Follow button!!!

    Happy Coding!!!

    0
  • Zubair Abid•280
    @ZubairAbid101Posted over 1 year ago

    Hello!!!

    Congratulations on completing the challenge!

    There are some things that you can improve in the code,

    • An efficient way to dynamically center elements is to use display: flex, justify-content: center, align-items:center.
    • Another way to do this is to assign the element in question a specific width and height value and then use margin: auto auto.

    I hope you find this comment helpful!

    Did you know that there's a mark as helpful and an up-vote option?

    There's even a Follow button!!!

    Happy Coding!!!

    Marked as helpful
    0