Skip to content
OverviewSolutions
4
Comments
7
Lucas Carlesso
@lucarle

All comments

  • Lucas Carlesso•140
    @lucarlePosted about 2 months ago

    Good solution, pretty close to the design. If I have to point just one thing out it would be using h3 for the table items, I don't understand why you did so. Anyway, good work! 👍️

    0
  • Lucas Carlesso•140
    @lucarlePosted 4 months ago

    I would understand if you had the card as a <article>, but why only the text?

    Overall it seems like you knew how to solve the challenge, and I found interesting the use of utility classes, but some of the values applied differ from the design. Was that a intentional choice, or did you not find them on Figma?

    Also, you didn't include the hover effect.

    Marked as helpful
    1
  • munizz-g•70
    @munizz-gSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Atualmente, o que mais me orgulho é estar aprendendo a escrever um código mais limpo

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

    A princípio o desafio foi bem simples de ser desenvolvido, sem muitos desafios.

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

    No momento em nenhum, porém estou aberto a sugestões de melhorias.

    Página de layout usando flexbox

    1
    Lucas Carlesso•140
    @lucarlePosted 5 months ago

    É considerado boa prática utilizar em ou rem para ajustar o tamanho da fonte

    Coder Coder tem um bom vídeo explicando esse assunto se estiver interessado

    Marked as helpful
    0
  • Ernie Hernandez•10
    @detanadedSubmitted over 1 year ago

    Hello! While I wasn't sure about adding in the original copy that was included in the files, I ended up moving them into a footer. My issue I came across with the footer was how to position it on the page. In this case I used position: absolute and bottom: 1px. When viewing this in dev tools mobile it looks great, however viewing the live site on my iPhone 13 the footer overlapped the container. What would be the best way to go about position a footer and ensuring its responsive? I'd like to not rely on Chrome dev tools

    CSS Flexbox

    2
    Lucas Carlesso•140
    @lucarlePosted over 1 year ago

    Hey, I just submit a solution dealing specifically with this problem: Centering the component to perfect match the design, without excluding the attribution and without using any "hacks". I hope you find it helpful, feel free to ask any subsequent questions.

    *I'm assuming you used position absolute so that the footer didn't interfere with the centering of the card, correct me if I wrong. If instead you wanted a sticky footer effect, I recommend you give a look in Kevin Powell Easy Sticky footer, MDN Layout cookbook Sticky footers and/or Every Layout The Cover.

    0
  • Indhumadhi Harikrishnan•10
    @indhuhari14Submitted over 1 year ago
    1. I had confusion on deciding the heading tags that should be used for the title, which I'm still usure of, Can someone answer that?
    2. I used 100vh for the viewport height. Can we use it? Is it best practice?
    3. Can we apply width to a image in html attribute or using CSS?

    HTML, CSS has been used

    2
    Lucas Carlesso•140
    @lucarlePosted over 1 year ago

    2A. There is a problem with your use of height: 100vh. Specifically, your container's content is spilling over when the viewport shrinks smaller than the content size. That is the main reason why you should be cautious of setting height and it's generally recommended to use min-height instead.

    Furthermore, there is also a minor issue with 100vh on mobile which you can learn about in The problems with viewport units

    Marked as helpful
    0
  • dav9go•150
    @dav9goSubmitted over 1 year ago

    I wonder if profesional developers always include all the accesibility options available or its not always necessary.

    QR code design with vanilla css

    4
    Lucas Carlesso•140
    @lucarlePosted over 1 year ago

    Not sure If I understand your question. Are you referring to semantic HTML? Or maybe ARIA attributes?

    1
  • Pang Zi Ying•10
    @PangdaySubmitted over 1 year ago

    Hi, I am unsure how to make the size of the body to look exactly like the design given for web & mobile (the 'light grey' area). It specified : mobile (375px), desktop (1440px), is that means I have to write 2 seperate codes to present them seperately? I abit confused on this part for the width and height of the background.

    Also, I found that the responsive function <meta name="viewport" content="width=device-width, initial-scale=1.0"> seems like not working when I inspect it through chrome > - <.

    My last question, for the margin for class="layout", I thought if I put margin: center, the whole white layout together with the QR code will move to the middle (with space on top bottom left right), but it didn't work in this way. Ended up, I've to use margin-top: 100px, only this able to put a space on top. Anyone knows what's wrong to my code?

    Anyone able to help me to look into my code, thanks alot !!

    QR Code Layout using HTML and CSS

    3
    Lucas Carlesso•140
    @lucarlePosted over 1 year ago

    You don't need to set the body/background width, by default any block element will fill the horizontal available space. For the height, you can use: "min-block-height: 100vh"

    Further reading/reference:

    Marked as helpful
    0