@oppahero
Submitted
What are you most proud of, and what would you do differently next time?
👽 Hello! I'm María and this is my solution for this challenge✨
Build with:
What challenges did you encounter, and how did you overcome them?
Not today 😄
What specific areas of your project would you like help with?
Any recommendation is appreciated
Submitted
What are you most proud of, and what would you do differently next time?
👽 Hello! I'm María and this is my solution for this challenge✨
Build with:
What challenges did you encounter, and how did you overcome them?
Not today 😄
What specific areas of your project would you like help with?
Any recommendation is appreciated
Submitted
What are you most proud of, and what would you do differently next time?
👽 Hello! I'm María and this is my solution for this challenge✨
Build with:
What challenges did you encounter, and how did you overcome them?
Not today 😄
What specific areas of your project would you like help with?
Any recommendation is appreciated
Submitted
What are you most proud of, and what would you do differently next time?
Instead of using the media query to change the columns of the grid template, I want it to be a dynamic grid.
What challenges did you encounter, and how did you overcome them?
Initially I made a dynamic grid assigning it to the card grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) and it worked well
However, when I set max-width max-width: 600px; to the card it stopped working correctly
What specific areas of your project would you like help with?
How can I make a dynamic grid without using media queries grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) , but make the container have a maximum width
Submitted
What are you most proud of, and what would you do differently next time?
On this occasion I have tried a recommendation that I read on this platform about not giving a fixed width to the container and letting it adjust itself, even without using media queries. To do this, just indicate a max-width in rem unit.
What challenges did you encounter, and how did you overcome them?
The padding wasn't applied on the tr tags, so I ended up putting a cellpading on the table in the html.
What specific areas of your project would you like help with?
I would like to know if there is a better way to add padding to the tr
Any recommendation is appreciated.
Submitted
What are you most proud of, and what would you do differently next time?
Sometimes I think I already understand flexbox, and suddenly something happens to me that I don't understand because it behaves like that.
So I'll keep practicing :)
What challenges did you encounter, and how did you overcome them?
The card only took the minimum width, it seemed to ignore the maximum width.
The thing is that I fixed the problem, but I'm not really sure why it was behaving like that, it seems to me that it had something to do with the display flex on the main tag
What specific areas of your project would you like help with?
Any feedback is appreciated
Submitted
What are you most proud of, and what would you do differently next time?
For the next practices I will pay more attention to accessibility
What challenges did you encounter, and how did you overcome them?
It took me a bit to figure out why the span element (category) took up the entire width of the card body, when it's an inline element. But in the end I solved the problem, the display flex of the parent container was affecting it
What specific areas of your project would you like help with?
Any feedback is appreciated
Submitted
This time I had some problems with the curvy image as the background when the screen size changes. Finally I think I achieved it.
And in the container to indicate the email I have a problem that I didn't know how to fix. In this one I used absolute position to be able to place it in the middle of the beginning of the footer and I gave it a max-width
On desktop it looks good, it is centered and the container does not occupy the entire width of the viewport. But in mobile the width takes 100% of the viewport width, and i need this to have some margin
I would like to know how it could be done in these cases, thanks in advance.
Submitted
It took me some time to get the cards in a good position considering the size of the screen.
Built with:
Semantic HTML5 markup CSS custom properties Flexbox CSS Grid Mobile-first workflow React - JS library Next.js - React framework Formik Yup
Submitted
In this practice project, I had some trouble resizing images depending on the height of the container and applying opacity/blur on a container without affecting the elements inside them.
For example, on the team page I couldn't find a way to apply opacity to the background image
Feel free to give me any recommendations
Submitted
What are you most proud of, and what would you do differently next time?
Created with HTML and CSS. To align the card I used flexbox.
I'm proud that the final result is very close to the demo.
What challenges did you encounter, and how did you overcome them?
I had no problems this time, it was a good opportunity to practice the box model.
What specific areas of your project would you like help with?
HTML semantic and accessibility
feel free to give a feedback :)
