Desafio Front-end Mentor #1 - QR code component - HTML/CSS

Neste vídeo vamos construir um componente QR Code em HTML e CSS. Se você gostou do vídeo, se inscreva no canal.

[moktheus]

Tamo junto cachorro, direto ao ponto sem enrolação! é os guris ✌️

[weed]

continua com esses desafios, são muito bons e é legal ver o jeito que outras pessoas fazem

[eupeterson]

Continua com os desafios mano tá me ajudando muito a ter uma base, recentemente comecei a estudar programação tou começando por html e css dps vou escolher alguma linguagem mas muito provavelmente vai ser JS pq pretendo ser front-end, fui testar meu nível de conhecimento pq já tou estudando a uma semana fiquei todo perdido pra centralizar a imagem do qr code mas é isso marcha !

[MaxReisdosSantos]

Fala Luis, muito bom o video! Podia só dar uma passada na parte de media query? Pq no desafio eles pedem que seja uma versão mobile (375px) e uma desktop (1440px) eu to tendo dificuldade de aplicar a responsividade entre esses dois valores.

[DevDavid]

Salvou demais, estava quebrando muito a cabeça para centralizar. Estou com grande dificuldade para massificar essa informação de centralizar os elementos.

[paulomarcelino]

Ajudou demais, não estava conseguindo usar o flexbox. Cara de vdd continue com esses vídeos.

[lcc]

Muito obrigado pela orientação. Peguei esse desafio pra fazer, mas travei. Fazer junto ajuda a ter prática.

[marciodaniloms]

ótimo vídeo. Bem elucidativo. Você pode informar qual extensão você usa no VSCode pra que as cores ficam dessa forma quando declaradas no CSS? Já utilizei ela, mas quando formatei, perdi e não lembro mais o nome.

[ejevaristo]

Tirando os pixEIS tudo certo. Muito bom o vídeo.

[leodm]

Muito obrigado. Iniciando na programação e essa resolução me ajudou bastante.

[robertdouglas]

Cara, muito bom! No meu aqui só a fonte que não deu certo, infelizmente. Nem colocando via :root, nem com font face, nem importanto.. Não entendi isso. Mas de resto, ficou tudo certo. Agradeço pela ajuda na centralização, pois, é um bate cabeça tentar fazer sem olhar de algum canto uma referencia kkkk'


Valeu!

[garotube]

por favor continua postando esses videos de desafios do frontmentor.... estou comecando a aprender programar agora e seus videos sinto que vao me ajudar muito a entender como encarar essees desafios e sabe o que fazer com o tempo estudando

[maxmilianosouza]

Muito bom seus videos !!! mais um inscrito

[dylanhakan]

Deu tudo certo, mas o meu Flex não funciona, ele colou no topo não desce para o centro

[Minorxable]

pq vc colocou uma div#card dentro de container ??

[segredosdosistema]

queria saber o porque no celular ele corta quando colocamos ele no horizontalmete queria entender isso. porque eu já tentei fazer de tudo mais infelizmente não conseguir uma solução para esse detalhe

[edimirk]

Olha vc tem boa explicação, agora vc não divulgou a proposta do curso, digo qual objetivo final e etapas em cada vídeo, qdo sai as aulas e tempo pra emcerrar

[Fida-Play]

po meu css ficou totalmente diferente. sou iniciante. se pode dar uma olhada aí pra ver se tá bom? * {

margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background-color: black;
}

.container {
background-color: #fff;
height: 497px;
width: 320px;
border: 1px solid transparent;
margin: 25% auto;
border-radius: 20px;
}

img {
width: 288px;
height: 288px;
margin: 16px;
border-radius: 10px;
}

.container-text,
.title > h2 {
font-family: "Outfit", sans-serif, Arial, Helvetica, sans-serif;
font-weight: 700;
font-size: 23px;
color: hsl(218, 44%, 22%);
text-align: center;
margin-left: 10px;
margin-right: 10px;
}

.paragraph {
font-family: "Outfit", sans-serif, Arial, Helvetica, sans-serif;
font-weight: 400;
font-size: 16px;
color: hsl(220, 15%, 55%);
margin-top: 1rem;
margin-left: 1rem;
margin-right: 1rem;
margin-bottom: 40px;
}

[pabloveniciusoliveira]

eu nao to conseguindo baixar as imagens no site

[vcnerdchannel]

O meu não centraliza na tela o decomento está igual