Skip to content
Submitted almost 2 years ago

QR CODE PROJECT

Hígor da Silva Flores•10
@dsfhigor
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

O projeto aparenta ser fácil até o momento de começar a codar, valeu o aprendizado.

Community feedback

  • Michel Moreira•300
    @michel-moreiraPosted almost 2 years ago

    Olá meu caro, espero que você esteja bem! Vou te falar algumas coisas que podem ser proveitosas!

    HTML:

    • Você usou uma div com a class "centered", você agora deve colocar essa div dentro de uma tag chamada <main></main> afim de tornar sua página mais semântica, isso é muito importante. A tag main significa 'principal' e ela se refere a parte principal de uma página, outras tags que você vai se deparar também são a header 'cabeçalho' e footer 'rodapé' essas são as três mais usadas, existem outras importantes também, depois você pesquisa mais Aqui para entender um pouco sobre semântica.

    • Na tag html lá no início (<html lang="pt-br">) talvez fosse melhor deixar assim: <html lang="en">.

    CSS:

    • Acredito que seria melhor definir uma width maior tipo 320px ou (max-width: 320px) para ficar mais largo.
    • Quando você baixou o desafio (uma pasta zipada) dentro dela veio algumas informações muito úteis se você ler vai notar um arquivo chamado 'style-guide.md' nele com instruções sobre fontes tamanho e estilos, cores, cores de fonte, etc... você pode se valer desses recursos.
    • Aconselho você aprender um pouco sobre shorthand, vai te ajudar muito a economizar linhas de código, por exemplo: ao invés de margin-top, margin-right, margin-bottom, margin-left... você usa apenas numa suposição o margin: 20px 20px 10px 8px (e a ordem é justamente essa cima, direita, baixo, esquerda).
    • Aconselho também você estudar a centralizar ou posicionar elementos usando o flexbox ou o grid (ou os dois até).

    Parabéns por dar esse passo e completar seu primeiro desafio!

    Continue assim e evolua, sucesso e grande abraço!

    Marked as helpful
    1
    Hígor da Silva Flores•10
    @dsfhigorPosted almost 2 years ago

    @michel-moreira Boa noite, muito obrigado pelo seu feedback fiz os ajustes necessários, é com a ajuda de pessoas iguais a você que conseguimos entender mais e progredir cada vez mais. Muito obrigado, sucesso e abraço.

    1
  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted almost 2 years ago

    Hello there 👋. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    I'm sorry for not writing the comments in your language :(

    CSS 🎨:

    • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here 📘.

    • Setting the width of the component with a percentage or a viewport unit will behave strangely on mobile devices or large screens. You should use a max-width of 320px or 20rem to make sure that the component will have a maximum width of 320px on any device, also remove the width property with a percentage value.

      .centered {
    /* display: inline-block; */
    /* vertical-align: middle; */
    text-align: center;
    /* width: 15%; */
    max-width: 320px;
    background: hsl(0, 0%, 100%);
    color: #000;
    border-radius: 5%;
    /* Delete this, in the next point I will help you center it. */
    /* margin-top: 13%; */
    /* margin-left: auto; */
    /* margin-right: auto; */
}

    • To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📘.

      body {
    font-family: "Family", Helvetica, Arial, sans-serif;
    background-color: hsl(212, 45%, 89%);
    text-align: center;
    font-size: 15px; /*Ure rem o em instead of px*/
    /* Center using grid: */ 
    min-height: 100vh;
    display: grid;
    place-content: center;
}

img {
    . . .
    /* height: 90%; */ /* The image not need a height*/
}

    I hope you find it useful! 😄 Above all, the solution you submitted is great!

    Happy coding!

    Marked as helpful
    1
    Hígor da Silva Flores•10
    @dsfhigorPosted almost 2 years ago

    @MelvinAguilar Thanks so much, for your help. I recently finished my college and I'm looking to improve myself more and more, your tips were of paramount importance as the experience of others that I will learn more and more. Não se preocupe com o idioma :)

    0
  • Abraham•270
    @AbeeujahPosted almost 2 years ago

    Hello there 👋. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    HTML:

    Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.

    Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.

    Always avoid skipping heading levels; Always start from <h1>, followed by <h2>, and so on up to <h6> (<h1>,<h2>,...,<h6>).

    Marked as helpful
    1
    Hígor da Silva Flores•10
    @dsfhigorPosted almost 2 years ago

    @Abeeujah Thanks so much for you help and tips. I recently finished my college and I'm looking to improve myself more and more

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord