@zeenox-stack
Latest solutions
Article preview with JS
Submitted 11 months ago- Positioning in css : I'm still not very satisfied with my solution for handling the share component in desktop view. Is there a way to position it according to the center of the button without making it a child of the button ?
- Width of my image is not the same on Chrome and Firefox... How is that so and how can I make sure it stays coherent ?
- Adding the arrow on css : I like the result, but am not very sure of how it works exactly
- This SVG drove me nuts : how do you change its color and keep it in a separate file ? Fill attribute didn't work for me...
Latest comments
- @phucphan01866@Hamsolovski
Great, your design taught me a lot :)
- @samritbasnetWhat are you most proud of, and what would you do differently next time?
I am proud of successfully implementing a complex, responsive layout using CSS Grid and Flexbox. Creating a design that closely matches a given template while ensuring it's responsive across different screen sizes is a significant achievement. My attention to detail in styling elements, managing typography, and adding subtle design touches like background images and shadows demonstrates growing proficiency in CS
What challenges did you encounter, and how did you overcome them?One of the main challenges was implementing the complex grid layout, especially positioning the cards correctly across different screen sizes. I overcame this by breaking down the layout into smaller components and using CSS Grid's powerful positioning features .The main properties used for positioning grid items are: grid-column-start grid-column-end grid-row-start grid-row-end
@HamsolovskiVery good !
- P@dev-rome@Hamsolovski
Very nice !
- @Ywissam@Hamsolovski
Very nice !
- @AZZAM-K@Hamsolovski
Hello ! Few tips if you want :
- It is possible to style the bullet points of your lists using li::marker {} : you can change color, margin, and quite a lot of stuff.
- Avoid naming your variables with the value they contain : if one day you have to change a color, you'll end up either having a variable named yellow containing red, or renaming the variable in your entire file. If you can, name them after their role : title-colour, background-colour, etc.
Otherwise, you have the basics all right, but some elements of the original design are missing : padding, some text font and colors, the frame for preparation time, etc.
You're not very far :)
