Learning JavaScript is new for me and I am proud that I could learn that.
What challenges did you encounter, and how did you overcome them?As JavaScript is new for me I encounter a few challenges in it.
What specific areas of your project would you like help with?I would like to get help in all new and old features to gain skills.
Hi, developer! Good job, congratulations!
Any feedback appreciated!
I have just a few suggestions for you:
Make sure to adjust the page proportions properly. For instance, on my laptop, some elements appeared off-screen or out of sync.
Consider adding some animations when the page loads. This will give you more practice with a feature that can be seen as a more advanced use of CSS.
Other than that, excellent work, and I wish you much success! 🚀
Me orgulho de ter tentado fazer ao máximo antes de tentar buscar ajuda, da próxima vez eu me organizaria melhor
What challenges did you encounter, and how did you overcome them?Encontrei muitos desafios no display grid que aprendi a pouco tempo, ainda estou pegando o jeito, e na hora de trabalhar a responsividade, com muita pesquisa consegui resolver.
What specific areas of your project would you like help with?Consegui resolver, mas travei muito na responsividade, estou com um pouco de dificuldade em deixar elementos com grid responsivo.
Luiz, parabéns pelo bom trabalho! Você se desenvolveu bem nesse desafio. Gostaria de te dar apenas algumas dicas, que também me ajudam a resolver esses desafios:
1. Flex e Grid: É bom entender bem a diferença entre essas duas formas de visualização. De acordo com o site W3Schools, o display: flex; é útil para layouts unidirecionais, ou seja, com linhas ou colunas. Neste desafio por exemplo, essa visualização serviria bem, porque na versão desktop o design é em linha e na versão mobile é em coluna. Já o display: grid; é próprio para layouts bidirecionais, com linhas e colunas, como em outros desafios aqui do Frontend Mentor. E é claro que o grid é mais difícil de desenvolver do que o flex. Então, entender essa diferença ajuda na hora de escolher qual usar, e poupa tempo e trabalho em projetos mais simples.
2. Unidades de medida absolutas vs relativas: Percebi que você costuma usar unidades de medidas absolutas, como px. Mas por questões de acessibilidade, é melhor usar unidades relativas, como rem. Se você usa o VS Code para escrever os códigos, pode baixar uma extensão que converte mais facilmente os valores entre as unidades de medidas. Se esse não for o caso, esta página do W3Schools pode ser de ajuda.
3. Variáveis: Você também pode usar var(--variáveis) no CSS para reutilizar valores que aparecem em vários lugares na página, como cores e fontes. Isso também poupa tempo e trabalho, e torna o código mais fácil de atualizar.
Reforço que você se saiu muito bem neste desafio. Espero que essas dicas possam ser de ajuda para que você aprimore ainda mais a qualidade do seu trabalho. Sucesso para você! 🚀
well the ability to understand grid area template
What challenges did you encounter, and how did you overcome them?decision between using grid column/row and grid area i overcomed it by using both
Nice job, congratulations
Acho que o maior desafio foi em relação a imagem na versão Desktop, tentar deixa-la do mesmo tamanho que a .right-content ao lado dela. As vezes dependendo do width definido para o .container a imagem ficava muito achatada. Então defini o .container como 100rem e mudei o tamanho da .right-content e da imagem a esquerda para 50%. Não sei se foi a melhor escolha, mas deu certo.
Eu utilizei o Chrome para visualizar o site enquanto estava desenvolvendo e tudo certo. Mas depois, quando fui fazer capturas de tela pelo Firefox para colocar no README, percebi um problema.
A imagem não fica com o mesmo tamanho da div .left-content ao lado. Se alguém souber explicar o motivo ficarei muito agradecido e farei as alterações necessárias. Estou aberto para dicas e criticas caso encontrem outros erros.
Bom trabalho, @CaioLopes5556.
Good job
Olá, desenvolvedor. Parabéns pelo bom trabalho. Sobre ele, eu tenho apenas algumas sugestões:
1. HTML:
Você usou muitas <div></div> na realização desse desafio, mas ele poderia ser concluído tranquilamente sem elas. Considere eliminar algumas dessas tags e/ou substitui-las por alguma tag mais semântica, se for o caso, como a tag <main></main>.
A <img/> está com o atributo alt="" vazio, o que é ruim em termos de acessibilidade. Considere utilizar uma descrição que ajude o usuário a entender o conteúdo da imagem quando ela não puder ser exibida, ou quando o usuário não puder enxergar a imagem por algum motivo.
Considere utilizar uma lista de links (<ul> <li> <a></a> </li> </ul>) em vez de vários <button></button> quando direcionar o usuário para outras páginas da internet. Antes de realizar esse desafio, eu pesquisei sobre o que era melhor fazer nesse caso, porque também pensei em usar botões. Mas aprendi com a pesquisa que botões são mais apropriados quando o usuário está interagindo dentro da mesma página, como quando ele está preenchendo algum formulário.
2. CSS:
Considere utilizar variáveis, estilos reutilizáveis e unidades de medida relativas para tornar seu código mais enxuto e fácil de entender, e a página mais responsiva.
Fazendo assim, você pode tornar sua resolução ainda melhor. Sucesso para você!
My Improvement
What challenges did you encounter, and how did you overcome them?Getting the card to fit fine in different displays
What specific areas of your project would you like help with?Media Queries and measurements
Hello, developer! Congratulations on completing another solution on Frontend Mentor! I'm here to help in any way I can.
1. About your solution: It looks great! You did an excellent job following the desktop design closely. Well done!
2. About your code: Both your HTML and CSS code look good. Since you mentioned needing help with @media queries and measurements, I have a few suggestions to share.
3. Measurements: For properties like font-size, margin, padding, width, and height, consider using a combination of relative and absolute units, such as em and rem. This helps your page scale more naturally. For instance, currently, your card gets smaller as the page size decreases, but it expands suddenly when hitting an @media query. A smoother, progressive resizing of the card would improve the experience. While %, vh, and vw work well for <html> and <body> measurements, it's better to avoid using them excessively in other tags.
4. @media queries: The transition of the card looks smoother between 1024px and 1023px compared to the jump between 768px and 767px. On a 768px screen, the card appears smaller, while on a 767px screen, it looks bigger. Ideally, the card should maintain a consistent appearance across all screen sizes. Your @media queries are placed correctly, but the use of relative measurements causes significant size changes depending on the screen size.
I hope you find these suggestions helpful! Wishing you lots of success in your next projects. 🚀
I am proud that I came back learn and remind myself HTML and CSS. Next time I would write better Readme files to help me review basic rules faster.
What challenges did you encounter, and how did you overcome them?No specific challenges.
What specific areas of your project would you like help with?Any suggestions for improvement are very welcomed.
Hi, developer! Congratulations on completing your first Frontend Mentor challenge! I'm here to help in any way I can.
1. About your HTML code: It looks great! You've used <main></main> and <section></section> tags, which means you're applying HTML semantic structure correctly. Amazing job!
2. Regarding your CSS code: (2.1) You've done an excellent job using reusable code, such as var(--name). That's a great practice! (2.2) However, you used quite a few @media queries, which makes the code look unnecessarily complex. For this challenge, one @media query would be enough to adjust the page appearance for two types of screens: a PC and a smartphone.
3. Finally, about the overall appearance of your web page: You could try to match the design more closely. For example, your solution appears larger than the design. As front-end developers, it's crucial to follow the provided design as closely as possible. This will elevate your work even further!
I hope these suggestions are helpful! Wishing you lots of success with your next projects. 🚀
Me orgulho em ver o resultado final, por ter consigo deixar o mais próximo possivel do desafio, na próxima vez irei deixar meu código mais clean.
What challenges did you encounter, and how did you overcome them?O que me deixou com dor de cabeça foi o modo responsivo, mas com algumas pesquisas e estudos sobre, consegui executar
What specific areas of your project would you like help with?nas marcações e estilizações de projetos
Bom trabalho, Rafael! Eu também sou iniciante, mas vou tentar te ajudar com o que eu puder.
1. Código enxuto
Para isso, você pode criar estilos reutilizáveis. Por exemplo, com o seguinte código é possível criar um estilo de texto que pode ser reutilizado facilmente:
:root {--fontetexto14: 500 14px/150% "Figtree";}
Esse código define, em uma só linha, o peso, o tamanho e a família da fonte, além da altura da linha. Qualquer parte da página que utilize esse mesmo estilo pode se beneficiar dessa var(--fontetexto14)
2. Responsividade
Tornar um código responsivo não precisa ser uma tarefa difícil. Você conseguiu fazer isso neste projeto, então parabéns! Só tenho uma sugestão sobre o seu código: definir limites de tamanho de tela no momento certo, para garantir que a página vai ficar amigável em todas as versões de tamanho.
3. Marcação e estilização
O HTML tem <tags/> específicas para a organização da estrutura de uma página web. Assim, em vez de usar, por exemplo, <div class="main"></div>, podemos usar <main></main>
Você pode dar uma olhada nessas tags neste link do site W3Schools.
Enfim, espero que tenha conseguido ajudar de alguma forma. Algo que me ajuda muito é estudar o código de outras pessoas aqui no Frontend Mentor. Foi assim que eu aprendi a centralizar verticalmente o conteúdo de uma página! No mais, sucesso para você!
Good job! I just have one suggestion: you could add some settings in your CSS code to make the card bigger or smaller depending on the user's screen size.
To understand html, css and creating a webpage which has good structure.
What challenges did you encounter, and how did you overcome them?I was struggling with layout and then learned about flexbox which helped to solve this challenge.
What specific areas of your project would you like help with?To check the structure and concepts which is used in this webpage.
I really liked your code! In fact, I learned from you how to vertically center content. One suggestion I have is to consider the HTML tags you used. For example, there are both specific and non-specific tags, each serving its own purpose. You could replace the <section> tag with a <main> tag (specific) and structure both the image and the text separately, each within a <div> tag (non-specific). But you did a good job!
