I made good progress by incorporating unfamiliar HTML elements to improve accessibility and my knowledge of semantic HTML. I also considered how I wanted users to interact with the UI, using that as a guide to test the app for tab accessibility.
Caio Azevedo
@justCaioDevAll comments
- @KellsworkSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
- @moonji-spoonjiSubmitted about 2 months agoWhat challenges did you encounter, and how did you overcome them?
I encountered the annoying challenge of styling the numeric list lol, I tried using media queries to fix the changing screen sizes greater than 1440px but it didn't work out well smh.
What specific areas of your project would you like help with?I'd like help with the styling and positioning of the numbered list. :)
@justCaioDevPosted about 2 months agoVery good! You can use te pseudo-element in css :maker to style the numbers in the list. Example: ol > li:marker {color: red};
Marked as helpful1 - @djohnson2024Submitted about 2 months agoWhat 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.
@justCaioDevPosted about 2 months agoIt 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!
Marked as helpful0 - @lucienelima8Submitted about 2 months agoWhat 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.
@justCaioDevPosted about 2 months agoFicou 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 helpful0 - @FranciscoMiSubmitted about 2 months agoWhat 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
@justCaioDevPosted about 2 months agoGreat 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.
0 - @thedanielkingSubmitted about 2 months agoWhat 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.
@justCaioDevPosted about 2 months agoNice 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 helpful0 - @A-karkaihSubmitted about 2 months agoWhat specific areas of your project would you like help with?
Your opinion and recommendations are always welcome and greatly appreciated.
@justCaioDevPosted about 2 months agoIt'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 helpful1 - @DevBytes-JSubmitted 2 months agoWhat 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
- @JordyMC86Submitted 2 months ago
- @WellingtonGuedesDevSubmitted about 2 months agoWhat 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.
- @Ramon-AlvezSubmitted 2 months agoWhat 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
- @Ralph-arch4Submitted about 2 months ago@justCaioDevPosted about 2 months ago
It's really great your solution! Congratulations!
- About the change color of the numbers or symbol of an list. I used the pseudo-element "::marker" in the css. For example, "ol > li::marker { color: #f2f2f2; }". Using this pseudo-element you can style the numbers or symbols of an list item.
- Now about the nutrition align. I used display flex, I placed each line inside a div, then I used display flex on that div and within the texts of each line I added "flex: 1;". This makes each element within the div occupy all available space, so they automatically align.
Sorry, my english is not perfect, but I hope I helped u.
0