Using CSS Flexbox to switch the flex direction when switching between desktop and mobile screen proved tricky with more complex layouts. The paddings and margins took some fettling to be perfected to work with flexbox and responsive layout design.
I can spot almost no differences between design and solution, very accurate. Well done! 👍
I implemented some of the advice given to me on my last few challeges, and i would like to know if i did better this time :).
What specific areas of your project would you like help with?The list elements. I took a very round about way to fix two things- one of them being changing the width of the bullet points. I used li:marker { width: 0.3rem; } but it did not change the size. the second thing was the space between the li and the text. For both the ol and the ul, I used the pseudo element ::before to make that space(and changing the size of the bullets), but it got much more complicated with the ol and the code got longer than I'd have wanted it to. If there's a better way to fix these, please tell me.
Is there a way to increase space between li elements without turning ul or ol into flex elements? I don't think gap: works without flex( I could be mistaken.)
This feels really good and accurate. The use of the :marker pseudo-selector is correct in my opinion, you can try to style the bullet by changing font size instead of width and see if the outcome is similar, but visually to me seems ok. to make space between bullets and the element i did just with padding left in the ul/ol and in li elements without the pseudo elements sure there are many other ways but in this case i thought it would be a good compromise. Don't know if there is a way to achieve the spacing needed automatically without flex, maybe with hard coded values and eye tuning; and yes gap is a property enabled by flex containers. Great job by the way, congrats!
Good job! I would take a look to the max-width of the card starting from mobile through desktop layout. According to the design the width grows until the tablet layout then shrinks again through desktop. Final note, you can consider to center vertically the card relative to the viewport and you're really good to go! congrats!
Very good overall! you can add a border around the card and higher line height and spacing through the content. Congrats!
I wanted to add the focus/challenge of using CSS variables as I had never used them before up until this point. Even though they are a little redundant on a smaller project, this felt like a great opportunity to learn it. I now have a much better understanding of how they work and can see their benefits on larger projects.
This was my first project that involved using a Figma file for reference. It was a little overwhelming at first but I have managed to grasp the basics of navigation, this became easier the longer I used it.
I would like to increase my understanding of Figma, particularly navigation. This will likely come through further practice in future projects. If anyone has any learning resources to help aid this I would appreciate it.
Any issues with my code or other feedback would be much appreciated!
