4 Card feature section - HTML, SCSS, Grid, @keyframes & mobile-first!

Hi @Tiasstiass thanks for taking time to feedback, I really appreciate it!

Here are my responses:

• why would a div or pseudo element be a better solution to border-top?
• thanks for the reminder with using height, something i'm aware of and i'm kinda okay with it in this project
• regarding font-size: 50% this is something i've picked up in a tutorial, i'm not sure if it's best practice but i find it is a massive help when using REM for responsive design (the rationale - font-size: 50%; // 1rem = 8px for small devices, font-size: 56.25%; // 1rem = 9px for medium devices and font-size: 62.5%; // 1rem = 10px for larger devices)
• really great feedback regarding @import being deprecated, i've updated my repo. I'm going to make sure i use @use going forward. It took me a little while to work out this was a helpful article
• i've updated the folder too, i didn't appreciate the difference between scss and sass syntax another solid bit of feedback

Thanks again, all the best 🤙

@darryncodes Thanks for appreciating the feedback and taking the time to reply as well,

• It wouldn't if it wasn't for the border-radius, you top-border is a little bit 'rounded' on the edges because of that.
• No big deal, we all let go off some of the best practices sometimes 😄
• I see, a nice way to have less media queries to deal with then, good idea!
• Glad you found it useful, make sure to use dart-sass as they're considered the official 'repo' and get all the updates first.

I really appreciated your work btw, have you started with Js or any frameworks yet? I am just about to submit a solution as well, let me know what you think about it, if you have time 🙂

Hi @Tiasstiass apologies for the late reply, it's been a busy month!

• ah i see your point about the 'rounded' edges, good call
• thanks for the heads up regarding dart-sass

I'm taking tentative baby steps with JS right now, i'm keen to get somewhat proficient by the end of the year! If you can recommend any useful challenges / resources / courses / top tips that'll help me learn i'd really appreciate that!

I'll check out your solution, take it easy 🤙

Thanks @arkharman12. Interesting observation. From what I know in-line svgs create fewer http requests speeding up page load times, you can animate them, control the styles in the image for example adding hover affects, they’re scalable so you don’t need multiple files for different breakpoints and they don’t lose clarity.

@darryncodes Of course! But in a small project like this one where loading times and performance is not an issue and we are not doing any complex interactivity I would prefer using the <img> tag. This way markup file looks much cleaner and easy to scan in my opinion!