3-column preview card component (HTML and Sass)

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hey there, Rosi !

  Well done on this challenge ! I think you did a great job in styling your solution and overall your solution looks great!
  It's responsive and I would suggest to use anchor tag instead of the button tag as the button tag is better for forms .

  Don't stop and keep doing solutions like this, hope this feedback helps. Happy coding

  Marked as helpful

  1

  ---

  

  Rosi•440

  @strosiPosted almost 3 years ago

  @PhoenixDev22 Thanks for the suggestion! I was really wondering which one to use :)

  0
• 

  ChristBM•290

  @ChristBMPosted almost 3 years ago

  Great job Rosi :). I would advise you use the BEM methodology in the classes and if you are working with Sass you can take advantage of nested classes using &, that allow you, for example: -if you have a div tag inside a main tag and the main tag have a class="father" then and following the BEM methodology your div tag class should be: class="father__son". To achieve this, you can nest your classes in the style.scss file: .father { sass code... &__son { sass code... } } Note: Is good practice having no more than 2 level nested classes. The @import in sass is deprecated, instead use @use and @forward.

  Marked as helpful

  1

  ---

  

  Rosi•440

  @strosiPosted almost 3 years ago

  @ChristBM thank you for the advices. I'll read about BEM. The @import is really deprecated and in that case I have to try another way to import fonts because @use and @forward don't want to work... :/

  0

  

  ChristBM•290

  @ChristBMPosted almost 3 years ago

  @strosi I recommend you to see this video on YouTube : https://www.youtube.com/watch?v=CR-a8upNjJ0 In essence, @use to avoid the global styles and the class overwrite. In Sass, we work by modules, a file with the name _module.scss is considered a module and the Sass compiler only take it if it has been 'imported' into a main.scss file. Then we need to use @use to bring _module.scss file into the main.scss file. The best example is when we have a _variables.scss with all colors and fonts variables of the page; in these cases, you need to bring to card_style.scss (for example) the _variables.scss file to use the colors and fonts. You can do like this:

  @use './variables' as *;
  

  The fonts will be imported inside the head tag. Google fonts bring you the code, and you only need to paste en your HTML. The code is similar to:

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap" rel="stylesheet">
  

  And then you can use the font family in your styles:

  font-family: 'Kumbh Sans', sans-serif;
  

  Marked as helpful

  1