@irene-panis
@KezzerDF
Submitted
What are you most proud of, and what would you do differently next time?
Try a different way to lay it out.
What challenges did you encounter, and how did you overcome them?
Figuring out the grid areas.
What specific areas of your project would you like help with?
Better use of classes to be able to reuse.
@irene-panis
Posted
looks good!
@Isabela-Fernanda
Submitted
What are you most proud of, and what would you do differently next time?
PT
Neste projeto, quando estava fazendo a parte do desktop, percebi que se eu mantivesse o design fornecido para mobile até a transição para desktop, a visualização em telas maiores que 700px não ia ficar boa. Então eu fiz duas @media(min-width) para aumentar a responsividade e melhorar a visualização em diferentes tamanhos de tela.
EN
In this project, when I was doing the desktop part, I realized that if I kept the design provided for mobile until the transition to desktop, the visualization on screens larger than 700px would not be good. So I did two @media(min-width) to increase responsiveness and improve viewing on different screen sizes.
What challenges did you encounter, and how did you overcome them?
PT
Foi um pequeno desafio fazer a estilização do design para desktop, pois precisava de algumas propriedades de CSS ligadas ao grid que eu não conhecia, mas dei uma pesquisada e consegui fazer.
EN
It was a little challenge to style the design for the desktop, as it needed some CSS properties linked to the grid that I didn't know, but I did some research and managed to do it.
What specific areas of your project would you like help with?
PT
Eu gostaria de receber feedbacks sobre a responsividade, se ela ficou legal e se teria algum ponto em que melhorar. Feedbacks sobre qualquer outros pontos que possam ser melhorados também serão bem-vindos.
EN
I would like to receive feedback on the responsiveness, if it was good and if there was any point to improve. Feedback on any other points that could be improved will also be welcome.
@irene-panis
Posted
i like the use of the two media queries -- for what it's worth i also used media query to achieve the mobile design. would love to know if theres a way to achieve the mobile design without it
@MelissaZhuu
Submitted
What are you most proud of, and what would you do differently next time?
I am proud of learning SASS for the first time and completing a project with it. Next time, I want to try to learn some frameworks like Bootstrap or Tailwind CSS.
What challenges did you encounter, and how did you overcome them?
I encountered many troubles with formatting/positioning. First, I learned that HTML text tags like and have default margins that always mess up my spacing ever so slightly and it drives me crazy. So now, I start with margin: 0; for my text selectors to avoid mysterious spacing issues. Second, I don't know why it's so difficult to center text in a div. Text-align: center apparently only centers it horizontally, but I spent a long time struggling to center it vertically as well. I tried with relative and absolute positioning which required translating Y 50%?!?! and then when the text is finally vertically aligned, setting the position to absolute meant that it was no longer listening to text-align: center. There were also suggestions for using vertical-align: middle, but apparently it only applies to inline and inline-block elements and it doesn't work for block elements. Finally, in the end, I just used flexbox's justify-content and align-items to center it.
What specific areas of your project would you like help with?
As mentioned above in challenges faced, I'm not sure what's the best way to deal with these spacing issues. Am I supposed to always select all text elements and give them margin: 0 to avoid random spacing issues? Or is there a simple way to cancel these defaults? Also, how do people vertically center text elements in a div? I think it's pretty common to want to horizontally and vertically center something in a div, so I'm not sure why it was so difficult. Is flexbox the way to go? It feels a little weird, almost overkill, using flexbox for a simple div with only one text element, but that's the only method that has worked for me in this project. Any alternative suggestions would be helpful! Thanks.
@irene-panis
Posted
design looks great!
as for your questions, yes, usually when i want to center something i just use flexbox. based on what i've read from other devs as well, i wanna say this is pretty much the way to go.
regarding the wonky default margins (which i agree are a pain), i'd look into css resets. i've had A (more) Modern CSS Reset recommended to me by the people in this community, which essentially helps clean up / "sand down" a bunch of the default css styles, including margins. before using resets though, i used to hit my stylesheets with the ol' * { margin: 0; padding: 0; } so it's really up to you.
Marked as helpful
@ShymaaRagab
Submitted
What are you most proud of, and what would you do differently next time?
.
What challenges did you encounter, and how did you overcome them?
.
What specific areas of your project would you like help with?
.
@irene-panis
Posted
for implementing the mobile design, try making the card flex-direction: column on mobile width and look into the <picture> element to use different photos on different screen sizes, this will place the mobile design photo at the top of the card with the data underneath when you're on mobile!
Marked as helpful
@HNunes22
Submitted
What are you most proud of, and what would you do differently next time?
Me orgulhei de conseguir fazer a reponsividade, e na próxima espero ter mais organização
What challenges did you encounter, and how did you overcome them?
Em questão de organização, eu peguei meus cadernos, e tambem usei ChatGPT pra tirar duvidas
@irene-panis
Posted
you seem to have it set so that on wide screens (min width 1444px) the body is 1440px, but that makes it so that there's a bunch of empty space on the right on a wider monitor (for example my screen width is 1920, so there's about 500px of empty space to the right). i would avoid setting the width of body entirely, allow it to take up the entire screen so your card can actually be centered. good job!
@wilmerandres25
Submitted
What are you most proud of, and what would you do differently next time?
Using CSS Flexbox, CSS nesting styling and accessibilities features.
What challenges did you encounter, and how did you overcome them?
Nothing new so far.
What specific areas of your project would you like help with?
Accessibilities features for the moment.
@irene-panis
Posted
the css nesting is something i'm not familiar with, really interesting! one thing i noticed is that the font seems to default to arial on your live site, so i think the inter isn't coming through for some reason
@Abdulazeez-20
Submitted
What are you most proud of, and what would you do differently next time?
It was easy to implement
What challenges did you encounter, and how did you overcome them?
I didn't encounter any challenges
What specific areas of your project would you like help with?
the exact width and high of the card
@irene-panis
Posted
the figma design helps with exact dimensions!
