abm-software

Latest comments

• 

  Prajul Jaggi•40

  @PrajulJaggi577

  Submitted 11 months ago

  

  Social Links Profile

  1

  10
  

  P

  abm-software•50

  @abm-software

  Posted 11 months ago

  👍 What’s Great:

  Clean Structure: Your HTML is organized with clear sections for the avatar, title, description, and links. Flexbox Usage: You’re using Flexbox to center elements, which is a solid approach for alignment. CSS Variables: Good use of CSS variables for consistent color management.

  🔧 Areas to Improve:

  1.CSS Variable Naming: • Use lowercase and hyphens: It’s a common convention for readability. • Example:

  :root {
      --green: hsl(75, 94%, 57%);
      --white: hsl(0, 0%, 100%);
      --grey-700: hsl(0, 0%, 20%);
      --grey-800: hsl(0, 0%, 12%);
      --grey-900: hsl(0, 0%, 8%);
  }
  

  2.CSS Syntax: • Avoid Nested Selectors: The &:hover syntax is for preprocessors like SCSS, not plain CSS. • Fix Hover Styles:

  .link:hover {
      background-color: var(--green);
      color: var(--grey-700);
  }
  

  1

  Marked as helpful
• 

  DanniJK1•10

  @DanniJK1

  Submitted 11 months ago

  What are you most proud of, and what would you do differently next time?

  I am most proud of how close my final solution looked in comparison to the initial challenge design.

  What challenges did you encounter, and how did you overcome them?

  I encountered the challenge of not knowing how to properly use CSS in some cases to make the elements look or behave a certain way. I overcame this by using websites like w3schools.com to look up some aspects of CSS.

  

  QR Code Challenge using HTML and CSS

  1

  20
  

  P

  abm-software•50

  @abm-software

  Posted 11 months ago

  Looks good! Tips to improve:

  1. Try to focus more on semantic tags, read about them and understand how to use them properly
  2. Proper naming for classes/ids to describe what is the component you are working on, like "card-container, card__qr-code, card__description". With such approach it would be much easier to understand which part of component you are working on the bigger project.
  3. You used ids to style components, which bring incosistency. While styling your components use classes. I would suggest to use ids for some specific cases when you want to style exact component, not a group of, and also for javascript manipulation.

  0