I don't know why my screenshot submition is broken... In my deploy and my localhost is normal the layout
Open to tips on how I can improve my react code. 😄
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.
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. :)
Very good! You can use te pseudo-element in css :maker to style the numbers in the list. Example: ol > li:marker {color: red};
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.
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!
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.
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!
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
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.
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.
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
