Skip to content
Submitted about 1 month ago

First card design using a bit of flex to keep it simple.

drphizzle•30
@drphizzle
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social links profile
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

This is my first time designing a card as i only started web development late November 2024. At first i got stuck in the positioning of the necessary divs because i used mainly divs. Then i started with giving a specific width/height and that caused overlapping which made me to keep on increasing/decreasing the width/height. Until i realized that there was no mandatory need to set a specific width/height when building a container that will nest lots of contents.. Just allow it to keep expanding as you add more content. As a newbie, i never knew this before so i stand to be corrected for a better option. So next time, to save time, i would set any specific width/height.. will allow it expand to fit-content.

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

I encountered center positioning/aligning and also width/height value.

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

I would like a guidance for best practice of flex, positioning and width/height properties. Especially building div containers with children divs inside.

Community feedback

  • Shah Faisal•170
    @Shah-Faisal-cloudPosted about 1 month ago

    You can take guidance from this solution

    Marked as helpful
    0
  • Marzia Jalili•3,920
    @MarziaJaliliPosted about 1 month ago

    Awesome!

    Some tips?

    • First, you could use the <a> element for the links rather that <p> to specify that they are actually links. The is important for SEO purposes, man.

    The <a> element comes with some default style though. You can get rid of them by setting the code below:

    a {
  text-decoration: none;
  color: white; /* or anothor color */
}
    • Second, for a smoother color change of the links, you can use the transition property.

    Take the code below as an example:

    a {
  transition: background-color 0.5s, color 0.5s;
}

    This ensures that the colors will change after 500 milliseconds. Which makes it look even better.

    If you find any difficutlies, let me know.

    😁😁😁

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord