Submitted 6 months ago

Vscode, plugin liveServer, FlexBox, javascript

Alex Oliveira•190

@alexboliveira

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

O Projeto me pareceu bem simples, portando eu tentei utilizar um pouco mais o Javascript na qual sei que preciso melhorar nessa skill. Acredito que se eu utiliza-se apenas html e css puro o projeto seria mais rápido e com menos linha de código.

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

Bom, eu nunca utilizei o figma e me deparei com algumas dificuldades iniciais sobre como funciona, principalmente questão da altura de uma tag. Consumiu um a boa parte do meu tempo pra tentar entender como funciona, mas acredito que num próximo projeto será mais fácil de utiliza-lo.

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

A parte de semântica do html tenho um pouco de dificuldade, visto que o html5 teve algumas mudanças, acho que fiquei um pouco pra trás.

Community feedback

Alex Oliveira•190
@alexboliveiraPosted 6 months ago
opa valeu pelo feedback, gostei muito das dicas e com certeza irei aplicar nos próximos projetos. Em relação a questão do react, a principio, eu não me inspirei nele não, na realidade eu vi na internet a possibilidade de fazer chamadas de arquivos javascripts externos e logo pensei em como agrupa-los de uma forma que eu possa futuramente reutilizar esses arquivos que eu chamei de módulos. Logo ficou igual ao conceito do react, rssrs.

Nesse link abaixo eu utilizei dois módulos e repeti eles duas vezes na visualização da pagina e o reaproveitamento de código funcionou legalzinho

https://alexboliveira.github.io/utilizando2modulos.io/

T+
0
Bernardo Poggioni•5,280
@R3ygoskiPosted 6 months ago
Olá Alex, parabéns pela conclusão do projeto e por ter usado uma forma alternativa de fazer esse projeto, eu sinceramente achei bem interessante essa ideia de usar classes para fazer a renderização do seu projeto.

Pelo que percebi, parece que você se baseou no React para fazer ele não foi? Tanto que uma curiosidade, fazer projetos assim não é muito "SEO-Friendly", então caso vá fazer um projeto que você quer que seja bem Rankeado pelo SEO, evite utilizar esse método, e isso vale até mesmo pro React.

Bom, aqui no Frontend Mentor, você não precisa fazer os projetos em uma ordem específica, você pode pular para os projetos de nível 2, os projetos Juniors, que a maioria deles utiliza JS, então se quiser praticar especificamente JS, recomendo que dê uma olhadas naqueles projetos, pois eles ajudarão muito a praticar JS.

Sobre HTML semântico, sei como se sente, realmente tende a ser confuso no início, mas com a prática você começa a pegar o jeito com eles, no seu projeto por exemplo, sua <div id="app">, poderia ser alterada para uma tag <main>, ou sua <section id = 'cardQrCode'> se tornar uma tag <main>, mas caso você opte por transformar a <div> em uma <main>, então eu sugiro que troque a <section> para uma <article>.

A tag <main> serve para delimitar o conteúdo principal da página, sempre depois do <body> é recomendado utilizar essa tag, já sobre o <article>, ele serve para indicar um conteúdo que é autoexplicativo e independente do resto da página, e esse card é isso.

Ainda sobre essa parte de acessibilidade, notei que na sua tag <img/> você não utilizou o atributo alt, utilizar ele é muito importante para ajudar pessoas com deficiência visual a visualizar a página de forma correta, tanto que o leitor de tela lê o conteúdo do atributo alt, e quando você não quiser passar um alt, você pode adicionar ele e deixar o valor vazio, dessa forma: alt="", mas no caso desse projeto em específico, era sim necessário passar um texto alt.

E novamente parabéns pela conclusão do projeto, e por ter escolhido um jeito diferente de de fazer ele, caso algo que eu tenha dito tenha deixado alguma duvida, por favor, pergunte abaixo que tentarei ajudar da melhor forma possível.

Edit: Havia esquecido de mencionar, mas notei também que tem trechos no seu JS que não estão fazendo nada, como por exemplo: const alturaTela = window.innerHeight;, como eles não fazem nada o mais correto seria removê-los.
0

Please log in to post a comment

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