@justCaioDev
@djohnson2024
Submitted
What are you most proud of, and what would you do differently next time?
I just started html, css and I was proud I was able to get most of the project down. I am learning more by the day, and I will like to deploy more projects
What specific areas of your project would you like help with?
I need help on making it mobile, centering, and moving the elements because I use margin and padding but I know their is a different way.
@justCaioDev
Posted
It was very good, congratulations! Here are some tips: 1- To reset CSS, you can use box-sizing: border-box. This makes things much easier.
2- It’s not recommended to use a fixed width or height on the body. Instead, you can use width: 100% and height: 100vh. This helps with the responsiveness of your site.
3- Instead of trying to center elements using margin or padding, you can apply display: flex to the body, and then with align-items: center and justify-content: center, it will automatically center everything. This also helps with responsiveness.
Remember, whenever you need to align or center elements, always prioritize using display: flex.
To make a site mobile-friendly, you can search on YouTube for "Media query css." It's really easy to understand, and it will change your life once you learn it. Good luck with your studies!
@lucienelima8
Submitted
What are you most proud of, and what would you do differently next time?
Me orgulho do bom trabalho que fiz.
What challenges did you encounter, and how did you overcome them?
Desafio de posicionar a imagem no centro da tela.
@justCaioDev
Posted
Ficou muito bom, parabéns! Só tome cuidado com a tag <span>, ela não é uma tag semântica, ou seja, não possui um significado para os mecanismos de buscas que ranqueiam os sites (SEO). O correto ali seria utilizar uma tag <p>, que semanticamente informa que ali tem um paragrafo com informações importantes...
Você pode usar a tag <span> quando precisa estilizar alguma parte especifica dentro de um paragrafo ou título. Por exemplo: Um paragrafo com uma palavra em destaque com uma cor diferente do resto do texto.
Espero ter ajudado minimamente. De resto, ficou muito bom! 👍 Parabéns!
Marked as helpful
@FranciscoMi
Submitted
What are you most proud of, and what would you do differently next time?
I finally understood how media queries work to make a responsive design. Next time I will try flexbox and grid.
What challenges did you encounter, and how did you overcome them?
The most difficult challenge has been to get the image to come out of its edges. It's very easy with media queries when you understand how they are used.
What specific areas of your project would you like help with?
Would it be possible to get the responsive design and switch from desktop to mobile without using media queries? I would appreciate any feedback. Thanks
@justCaioDev
Posted
Great work! 👍
Just be careful with the font weight. Try learning about display flex. It helps a lot with responsiveness and your life will change after learning. Afterwards, I also recommend learning about display grid.
@thedanielking
Submitted
What are you most proud of, and what would you do differently next time?
I am proud of being able to come up with the "aspect-ratio" to make a circle. And also understood the linear-gradient very well.
What challenges did you encounter, and how did you overcome them?
I had the problems of creating a cirlce and background-gradient.
What specific areas of your project would you like help with?
IN the aspect of background-gradient.
@justCaioDev
Posted
Nice job! 👍
When you use linear-gradient you can set a direction of this gradient. example: background-image: linear-gradient(to top, var(--secondary-gradient-bg), var(--primary-gradient-bg));
You can use deg too ex.: 45deg or 180deg
Marked as helpful
@A-karkaih
Submitted
What specific areas of your project would you like help with?
Your opinion and recommendations are always welcome and greatly appreciated.
@justCaioDev
Posted
It's really nice your react aplication! 👍
You can use :marker in tailwind or css to style the list marker to make it more similar to the proposed design.
But it's very good, congratulations!
Marked as helpful
@valentyyyyn
Submitted
@justCaioDev
Posted
Good job! 👍
@DevBytes-J
Submitted
What are you most proud of, and what would you do differently next time?
That i was finally able to complete this after many trials and failure Try to be calm and not tensed
What challenges did you encounter, and how did you overcome them?
The first issue i had was the responsiveness on the mobile part .... it took me a while buh i was finally able to resolve it, i had to do some research Then i had another issue with the text alignment buh it didnt really take that much time handling like the responsiveness did
What specific areas of your project would you like help with?
Media Query
@justCaioDev
Posted
Great job! 👍
@JordyMC86
Submitted
@justCaioDev
Posted
Nice job! 👌
@WellingtonGuedesDev
Submitted
What are you most proud of, and what would you do differently next time?
I further consolidated my knowledge of CSS and semantic HTML concepts.
What challenges did you encounter, and how did you overcome them?
Overall, the biggest challenges were defining the correct sizes for the elements. Even with the design file in Figma, sometimes it feels like the content is turning out bigger than it should, and that throws me off a bit at times.
@justCaioDev
Posted
It's really cool! 👌
@Ramon-Alvez
Submitted
What are you most proud of, and what would you do differently next time?
The speed at which it was done
What challenges did you encounter, and how did you overcome them?
No problem
What specific areas of your project would you like help with?
Nothing in particular, but I'm open to tips :D
@justCaioDev
Posted
It's amazing!
Marked as helpful
@Ralph-arch4
Submitted
@justCaioDev
Posted
It's really great your solution! Congratulations!
Sorry, my english is not perfect, but I hope I helped u.
@brendowe
Submitted
@justCaioDev
Posted
Muito massa! Apenas uma dica. Cuidado ao usar uma width fixa no form... Seus inputs acabaram quebrando pra fora dele. Recomendo utilizar o max-width ou min-width nesses casos, pois ajuda muito na responsividade da página e na experiência do úsuario. Afinal, cada um tem uma tela de tamanho diferente e é muito agradável quando o site se ajusta ao seu monito/celular. Mas ficou muito fera! Parabéns.
