Design comparison
Community feedback
- @James-aldersonPosted about 2 years ago
Hi Bruno Ginél
I have created a pull request in your repository, you can review the changes and add the changes to your design.
Marked as helpful0 - @correlucasPosted over 2 years ago
👾Fala Bruno, tudo bem? Parabéns pelo desafio!
Acabei de dar uma olhada na sua solução e te posso dizer que os componentes não estão responsivos porque você usou várias vezes
width
o melhor jeito seria você substituir todas essas propriedades commax-width
pra deixá-lo responsivo permitindo o conteúdo se ajustar junto com o container.Agora pra ter o mesmo efeito de overlay roxo na foto, basta você colocar
mix-blend-mode: multiply;
no seletor da imagem pra fazer o mesmo efeito.Se você quiser ver a minha solução pra entender como eu montei a estrutura aqui está o link:
https://www.frontendmentor.io/solutions/stats-preview-card-vanilla-css-custom-design-text-animation-RfGBFlMpwK
👋 Espero ter ajudado e continue no foco!
Marked as helpful0 - @James-aldersonPosted over 2 years ago
Hi Bruno Ginél, I saw your design, It is a good design, but there are a few issues that you can fix to help improve your design.
As follows:
- Create a folder called 'assets' and put all the files related to the challenge inside it.
- Define your web fonts inside css, by doing this you have helped the HTML code to be seen better.
- Set the value of the 'lang' attribute to 'en', because the challenge you are designing is in English.
- Add "favicon" to your challenge.
- It is better to use the naming method 'BEM', because in this way you will have a neat code.
- Using the 'image' element, you can change the image according to the width or height of the resolution.
- Use 'custom propery' as it makes css coding easier.
- Use the "flexbox" method to centering element on the page.
- Design for mobile resolution.
- Add design screenshots.
- ...
These are tips to help improve your design, you can see all the changes in the commits section.
By the way, I have created a fork in your repository, you can add all the changes to your challenge.
If you are just starting to learn design, no problem. I also faced these kinds of problems at the beginning of my work. My suggestion is that before you start the new challenge, watch of the tutorial videos I'll link to below, as this will help you improve your design.
Do not forget to practice, because the more you practice, the better and faster you will design.
Happy coding
0
Please log in to post a comment
Log in with GitHubJoin 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