Social Links Profile

Community feedback

• 

  tOnski86•240

  @tOnski86Posted 2 days ago

  I hope this is a joke because this looks close to the original!

  I just reviewed your code and here are my thoughts:

  I see that you have started using rem for some of your units. This is a great start for you to get really fluid designs. However, I was kinda wondering why you did not apply the same process for your container widths (you still used px).

  My suggestion here is to really understand what your rem size is. By default (I think) it's 16px. There is a trick to make it easier for you to think in rem - It's hard to calculate 1rem = 16px, 2rem = 32px and so on. So you might want to define:

  html {
    font-size: 62.5%
  }
  

  What this does

  This makes so that every time you use 1rem anywhere on your project, it now refers not to 16px, but 10px! So 1rem = 10px, 2rem = 20px and so on. Easier right?

  Other suggestions

  • In general, start with the overall layout when designing your element. As much as possible, start with the bigger designs, such as the card - and set the overall padding and margins of the element.
  • When moving to smaller components, such as the buttons, look for commonalities. For instance, the vertical spacing is equal among all the buttons - except for the last one. I would probably implement something like this:

  .your-list-selector:not(:last-child) {
    margin-bottom: value
  }
  

  This way, you are maintaining the integrity of your card styles without having to worry about how the smaller elements interfere with it.

  Hope these small suggestions make sense. If anything, feel free to reach out. Great job and keep going!

  Marked as helpful

  1

  ---

  

  Colt•90

  @Xerver8694Posted 2 days ago

  @tOnski86 Thanks so much for the input. I'm still getting used to using the rem instead of the px for CSS, so I guess I missed that one piece that you mentioned. This will definitely be helpful for my future projects. I seriously owe you one!

  1

  

  tOnski86•240

  @tOnski86Posted 2 days ago

  @Xerver8694 the trick I showed can be useful anywhere once you have the size of your rem defined.

  Hope you have fun!

  Marked as helpful

  1
• 

  kira7777•60

  @kira7777Posted 2 days ago

  Structure and Readability: Ensure the code is well-structured and easy to read, with consistent indentation and meaningful variable names.

  Modularity: Check if the code is modular, with reusable components and functions.

  Comments: Look for comments that explain complex logic or provide context for certain decisions.

  0