One day, I'll learn to use CSS preprocessors such as Sass or Less.
What specific areas of your project would you like help with?Rationality of deciding an optimal layout for every @media breakpoint
Great solution. I really like how responsive it is. My solution does not change layouts that much and not as often, between devices as yours does (mine has only a grid and a document flow layout). Also, you did a great job at recreating the design, it looks perfectly identical!
I’m particularly proud of how I utilized SCSS mixins to create reusable styles, such as flex layouts and centralizing the border color styles for each card. This approach significantly improved in reducing generated CSS code , allowing me to make layout changes efficiently across the project.
What challenges did you encounter, and how did you overcome them?I struggled with aligning elements in the desktop layout, especially when positioning elements like .super_container and .calc_container to stick to the left and right edges while keeping the middle elements centered. This alignment was difficult to achieve within a single flex container due to the varying content sizes, which made the elements misalign or fail to stretch evenly. To address this, I added wrappers (wrapper_super, merge_box, and wrapper_calc) around certain elements to create individual flex containers. This allowed me to control the alignment and distribution of each section separately. By combining justify-content: space-between with media queries, I was able to create a responsive desktop layout that aligned as desired.
What specific areas of your project would you like help with?While the current layout works, I feel there may be more efficient flexbox techniques or grid approaches to achieve the desired desktop layout without as many nested wrappers. Any guidance on optimizing complex responsive layouts with fewer containers would be helpful. I’d appreciate tips on maintaining equal height for flex children in a row without relying on fixed height or min-height. Sometimes, flex children with varying content height still misalign slightly on different screens, and I’m looking for more flexible ways to solve this.
Very nice layout! I actually used grid and didn't even think this challenge was possible using only flexbox...
Studying a new language (SASS) when I have just begun learning CSS and realize I still have a lot of ground to cover there, was really daunting at first. But after getting my feet wet in SASS, I realized that it is a more fully-encompassing version of CSS, and I can learn both languages and concepts at the same time.
What challenges did you encounter, and how did you overcome them?Setting up SASS for the first time, then reading about mixins and functions was a bit much at the beginning, but eventually eased up as I started to write it.
What specific areas of your project would you like help with?I need help learning to make more use of SASS in place of (and to create better) CSS.
All feedbacks are welcome. Feel free to share your thoughts.
I am proud of my accomplishment so far.
What challenges did you encounter, and how did you overcome them?Centering my Imagefile and making it round.
What specific areas of your project would you like help with?Making the hover effect cooler
