Did this using grid and flexbox

Community feedback

• 

  P

  Jacksen•350

  @jacksen30Posted about 1 year ago

  Hey @Mtalafa great work on keeping up the consistency on submitting solutions, the code for this looks super clean congratulations ! Getting to good to quick I wont have any feedback to give soon 😃

  Here are a couple of points to think about:

  CSS Variables Should Convey Purpose:

  Using meaningful names for CSS variables enhances code clarity, supports design flexibility, and improves collaboration by conveying purpose rather than just appearance. Names like --cyan don't indicate their use or adapt well to design changes. A context-based naming convention, such as --primary-background, is more intuitive and maintainable. This provides flexibility in Theming if you decide to change your design theme later, and the primary background color shifts from cyan to magenta, then the variable name --cyan no longer accurately represents its value, leading to potential confusion.

  I noticed an opportunity to slightly refactor the button styles and eliminate some redundancy:

  Redundant Styles: The background-color: var(--bright-yellow); in the button:hover selector is redundant since it is the same as the default button style. The transition property in the :hover state is also redundant, as transitions are typically defined on the base state and are automatically applied during the state change. So we can safely remove this.

  Transition Specification: While not strictly necessary, it's more efficient to specify which properties will transition rather than using transition: all 0.3s;. I've adjusted it to transition: background-color 0.3s, filter 0.3s; to target only the properties that change on hover.

  Original CSS

  button {
    color: var(--white);
    background-color: var(--bright-yellow);
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    border: none;
    border-radius: 5px;
    transition: all 0.3s;
  }
  
  button:hover {
    cursor: pointer;
    background-color: var(--bright-yellow);
    filter: brightness(90%);
    transition: all 0.3s;
  }
  

  Refactored To avoid redundency and to be more specific about the transition that takes place on a hover event

  button {
    color: var(--white);
    background-color: var(--bright-yellow);
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s, filter 0.3s;
  }
  
  button:hover {
    cursor: pointer;
    filter: brightness(90%);
  }
  

  These are crucial considerations. Admittedly, both in the past and during hurried moments now, I've occasionally overlooked these practices myself. Nonetheless, I wanted to share these insights with you, hoping to offer something valuable for your learning journey. It's unfortunate that there seems to be a current lack of advice or feedback on peoples solutions, but I'm here to support you in any way I can.

  Marked as helpful

  0