Ghassen Ben Hamida• 140
@rbhgaston
Submitted
Guido Salazar
@GAOV13
All comments
- Guido Salazar• 190
@GAOV13
Posted
The solution includes semantic HTML and is responsive, great work! :). I like that you put hovers on the cards to make the design a little bit more interactive.
1 - wey song• 130
@teuthix
Submitted
What are you most proud of, and what would you do differently next time?
I am proud of how I got the site to look similar to the provided design. Next time I just hope to get there faster.
What challenges did you encounter, and how did you overcome them?
I spent a while unsure if I should be using grids or flexbox and kept restarting trying to figure out this site with grids. Ultimately I settled on flexbox though I'm not sure if this was the correct choice!
What specific areas of your project would you like help with?
Is it possible to do this with grids or was flexbox the right move? Also any help appreciated!
Guido Salazar• 190@GAOV13
Posted
Your solution looks a lot like the provided design, well done! :). To answer your question, you can use grids.
Think of a grid like a 2D matrix where you can choose how many positions of the matrix your item will use.
As an example, I did this in my solution:
.card-container { display: grid; place-content: center; grid-template-columns: repeat(3, 1fr); /* 3 equal columns / grid-template-rows: auto auto; / 2 auto rows / gap: 10px; / space between grid elements */ }
.card-container-item1 { grid-column: 1; grid-row: 1 / span 2; }
.card-container-item2 { grid-column: 2; grid-row: 1; }
.card-container-item3 { grid-column: 2; grid-row: 2; }
.card-container-item4 { grid-column: 3; grid-row: 1 / span 2; }
Marked as helpful
1 - errbrokko• 80
@errbrokko
Submitted
Guido Salazar• 190@GAOV13
Posted
The solution includes semantic HTML and looks good on different screen sizes. Congratulations! :)
1 - munizz-g• 70
@munizz-g
Submitted
Guido Salazar• 190@GAOV13
Posted
I like your solution. However, I would recommend trying to make the page responsive. Start with the mobile design and then use @media (min-width: value) for the desktop design.
Congrats :)
Marked as helpful
0 - Micah Sells• 100
@Micahtron
Submitted
What are you most proud of, and what would you do differently next time?
I was more selective in my markup and CSS style rules for this one. I treated it more as a self-contained widget with the assumption that other site-wide rules (resets, fonts, margins, etc.) were already in play. I also set up my root style variables to be more modular so if anyone wants to swap out the color palette for a different brand/theme it's super simple.
What challenges did you encounter, and how did you overcome them?
The CSS was done in a bit of a windshield wiper method, refactoring the styles and dependencies as I went. The only real challenges were getting the image to the right size (a lot of trial and error eyeballing), and centering the social link buttons without making every nested div a flexbox.
What specific areas of your project would you like help with?
I'm still trying to get easily responsive font proportions down pat. Ideally there would be one base font for the entire widget that all elements would base their font size off of. That way if this ever needs to resize for a different design layout it only takes one line of CSS to change it all.
If anybody knows of a simple and straightforward method of handling this I'd be very grateful to know what it is.
Guido Salazar• 190@GAOV13
Posted
The use of variables in CSS is a concept that I haven't used before. It was interesting reading the reasons why you have used them, and you have given me some ideas to use in future projects. Great work! :)
1 - carlos6abriel• 30
@carlos6abriel
Submitted
What are you most proud of, and what would you do differently next time?
I pride myself on not giving up and that's what I'll always do.
What challenges did you encounter, and how did you overcome them?
I managed to leave the the same as in the page preview. I first tried with , then with “width” and finally I remembered “ch”... with that I succeeded.
Guido Salazar• 190@GAOV13
Posted
Congratulations, great work! :)
0 - Vinícius Brust• 10
@Vinidesweb
Submitted
Guido Salazar• 190@GAOV13
Posted
I like your solution, well done! :) Maybe try to fit the solution to the device screen size. Also, separate the CSS from the HTML by creating a new file, this will help you in the future. When you start using scripts, do the same to keep everything more organized. Congrats!
0
