Skip to content
OverviewSolutions
1
Comments
1

Jamie

@Jamie09830 points

Software Engineer.

Latest solutions

  • Social Links Component

    #astro
    Jamie•30
    Submitted about 1 month ago

    I would like feedback on styling, more specifically, setting up the styles in the best way to create a common reusable style. I wasn't sure in some cases whether the style should be global or local, and then the question of how local came up.

    For example, styling the name, should the styling just be applied to that specific tag, those tags within that page or globally. If this challenge were a larger I would worry the styles might mismatch slightly in different places or get out of hand.

    1 comment

Latest comments

  • P
    Arne Witteler•90
    @arne-witteler
    What are you most proud of, and what would you do differently next time?

    I’m proud of the clean layout and responsive design. Next time, I’d optimize the structure earlier for mobile to avoid layout shifts later in the process.

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

    Somehow the main challenge was handling horizontal spacing on small screens. I resolved it by refining padding and using media queries effectively.

    What specific areas of your project would you like help with?

    I’d appreciate feedback on how to structure CSS more modularly and on best practices for accessibility in interactive elements like links and buttons.

    Responsive Social Links Card with Flexbox

    2
    Jamie•30
    @Jamie098

    One thing you could do to make the css more modular is to move the color definitions into a variables.css file and reference the colors using var().

    For example

    variables.css:

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

    usage: background-color: var(--color-grey-800);

    Marked as helpful