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

Community feedback

• 

  Tiass•295

  @TiasstiassPosted about 3 years ago

  Good job! 👏

  Tested it on Safari iOS, looks neat! Few feedbacks:

  • Regarding the colored top border: You could make it a div or the best solution I think, is to use a ::before pseudo element,
  • Setting fixed heights is not considered good practice, the content should define the height of an element, be it the padding etc..,
  • Any reason behind the font-size: 50%, 62.5% makes sense but why 50%?
  • @import is being depreciated and Sass team is discouraging us to use it, look into @use and @forward,
  • You are using scss syntax not sass, consider renaming your folder.

  Excellent job overall, keep up the good work 💪

  Marked as helpful

  1

  ---

  

  darryncodes•6,370

  @darryncodesPosted about 3 years ago

  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 🤙

  0

  

  Tiass•295

  @TiasstiassPosted about 3 years ago

  @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 🙂

  0

  

  darryncodes•6,370

  @darryncodesPosted about 3 years ago

  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 🤙

  0
• 

  Harmanjot Singh•985

  @arkharman12Posted about 3 years ago

  Looks good! But why not import the <svg>s in <img> tags? Instead of putting them in the markup and then linking them.

  0

  ---

  

  darryncodes•6,370

  @darryncodesPosted about 3 years ago

  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.

  0

  

  Harmanjot Singh•985

  @arkharman12Posted about 3 years ago

  @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!

  0
• 

  darryncodes•6,370

  @darryncodesPosted about 3 years ago

  Thanks for the nudge in the right direction @mattstuddert 🎉

  0