Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Using FlexBox, CSS variables and media query

@PequenoJoohn

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

The next time i use the sass library to organize and to improve structure, maybe used to ReactJS or NextJS, but i do no idea so if the better.

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

I encounter nothing

Community feedback

@R3ygoski

Posted

Olá Jonathan, parabéns por ter concluído esse projeto, ele ficou muito bem feito.

Gostaria de começar falando a respeito do Sass que você mencionou. Ali no texto você deu a entender que utilizou o Sass, mas quando abri seu projeto ele não tinha o Sass, acredito que você então estava dizendo que pretende usar ele no próximo desafio, correto?

Bom, sobre o Sass já adianto que ele ajuda bastante a organizar o projeto, eu particularmente quase não consigo fazer um projeto sem utilizar ele. Ele funciona muito bem tanto com Vanilla quanto com Frameworks JS, pois ele tem também algo levemente semelhante a componentização, que são os arquivos parciais, então, recomendo muito.

Já no final você fala que "não tem ideia se é bom", fiquei em duvida se é sobre usar Sass com React ou usar o Sass, bom eu irei supor que é sobre usar o Sass, os pré-processadores de CSS, tem bastante semelhanças entre si, mas sem duvida, o Sass é o que mais se destaca.

Agora uma dica relacionada ao projeto, sobre o seu HTML, ele está bem estruturado, mas ele está pouco semântico, e é bem importante deixar nosso HTML sempre semântico, isso porque ajuda não só no SEO quanto também na Acessibilidade. Algumas tags que podem ser alteradas:

  • <div class="preparation"> poderia ser um <article>
  • <div class="ingredients"> também poderia ser um <article>

E por aí vai.

E novamente, parabéns pelo seu projeto ele está bem feito, continue praticando e se aprimorando, caso algo que eu tenha dito, não tenha ficado claro, por favor, comente aqui embaixo que tentarei ajudar da melhor forma possível.

Marked as helpful

1

@PequenoJoohn

Posted

@R3ygoski Obrigado Bernardo pelo feedback. Primeiramente me desculpe pelo meu inglês, estou ainda aprendendo e como a plataforma é formada por maioria tentei deixar assim.

Bom, realmente por parte do SEO o meu código não teria muito impacto na web. Vou aderir as dicas que me apresentou.

1

@R3ygoski

Posted

Olá @PequenoJoohn, sobre seu inglês, não precisa pedir desculpas, está tudo bem, eu espero ter conseguido sanar suas duvidas.

E gostaria de fazer uma correção no meu comentário, eu não havia notado, mas eu recomendei usar <article>, já peço desculpas de antemão, pois o correto na verdade era <section>, isso porque, <article> são autoexplicativas e independentes do tema principal, ou seja funcionam em qualquer lugar. Já <section> não, elas servem para agrupar elementos com temas semelhantes, então já peço desculpa sobre esse meu erro. O correto era <section>.

E fico feliz que considerou minhas dicas, muito obrigado.

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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