Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
2
Comments
17

William Spanfelner

@Will-1-AmUnited Kingdom155 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Mobile first 3-column-preview-card-component-main


    William Spanfelner•155
    Submitted about 4 years ago

    3 comments
  • Responsive layout - a flex approach


    William Spanfelner•155
    Submitted over 4 years ago

    0 comments

Latest comments

  • Glen•45
    @chiptaylor
    Submitted about 4 years ago

    Mobile first workflow using CSS Grid and Flexbox

    2
    William Spanfelner•155
    @Will-1-Am
    Posted about 4 years ago

    Nice work on submitting this challenge, Glen.

    The html file has a "class" element that has been highlighted in the above report, but I think this was a typing error and it should be a "div" element?

    Check-out this pen (https://codepen.io/will-1-am-the-Iceman/pen/gOgBrVP) for a suggestion on how to center everything horizontally and vertically - you can see the html and css and test til your heart's content.

    The background-color set on ".btn" should be very-light-grey and not white as stated in the spec, but to be fair is very difficult to discern - I also got caught out on this one. 😅

    I really like the idea that the buttons don't loose their alignment with one another. As very small viewport width the button text does wrap to additional lines and this can be resolved by applying a min-width on the cards container.

    I hope this helps. Happy coding!

  • kj1999•20
    @kj1999
    Submitted about 4 years ago

    profile card component using css

    1
    William Spanfelner•155
    @Will-1-Am
    Posted about 4 years ago

    Hey Kiran, nice work on submitting this challenge project.

    You might consider using before and after pseudo elements to position the background images properly. It is definitely a bit tricky so check-out this pen (https://codepen.io/will-1-am-the-Iceman/pen/jOydXYZ?editors=1100) for an example that you can test. This will enable you to use a more declarative approach to the layout - eg specify the top left for the position of your background asset.

    Consider using other element types in place of the h2 elements for the stats section. A heading really only makes sense if it has child content, and the statistics just would be better tagged with something more meaningful and will make the html more intuitive for other developers.

    I hope this helps. Happy coding! 🤓

  • Elia Niubo Burgos•30
    @elianiubo
    Submitted about 4 years ago

    3 Card Column with HTML-CSS challenge

    3
    William Spanfelner•155
    @Will-1-Am
    Posted about 4 years ago

    Hey Elia, nice work on submitting your first challenge!

    Check-out this pen (https://codepen.io/will-1-am-the-Iceman/pen/gOgBrVP) for a suggestion on how to center everything horizontally and vertically - you can see the html and css and test til your heart's content. A border radius can be applied to a container wrapping the body contents to resolve the missing rounded corners.

    Hopefully, this will help you along on your coding journey.

  • Muskan2905•20
    @Muskan2905
    Submitted about 4 years ago

    3-Column-Card-Component using HTML and CSS

    2
    William Spanfelner•155
    @Will-1-Am
    Posted about 4 years ago

    Hey, nice work on submitting your second challenge!

    You might consider wrapping your body content in another container and using flex-box to . Check-out this pen (https://codepen.io/will-1-am-the-Iceman/pen/gOgBrVP) for a suggestion on how to center everything horizontally and vertically - you can see the html and css and test til your heart's content.

    Stopping the button text from wrapping to a second line could be done using a min-width on your card or col.

    Hopefully, this will help you along on your coding journey.

  • Rahul Kandari•10
    @RahulKandari-Github
    Submitted about 4 years ago

    3 column preview card using html and css

    1
    William Spanfelner•155
    @Will-1-Am
    Posted about 4 years ago

    Hey Rahul, nice work on submitting this challenge!

    You might consider wrapping your body content in another container and using flex-box to center everything horizontally and vertically. Check-out this pen (https://codepen.io/will-1-am-the-Iceman/pen/gOgBrVP) where you can see the html and css and test til your heart's content.

    While the specification doesn't actually supply links, it can be assumed that they will ultimately link somewhere and so the button elements should really be anchor elements. I also made this error 😅 but this resource helped to set me straight (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a).

    Stopping the button text from wrapping to a second line could be done using a min-width on your card or col.

    Hopefully, this will help you along on your coding journey.

  • Rhona•60
    @rhonall
    Submitted about 4 years ago

    Profile Card

    1
    William Spanfelner•155
    @Will-1-Am
    Posted about 4 years ago

    Hey Rhona, nice work on submitting your challenge project.

    You might consider different elements for the h2 tags you use for the numbers in the stats section of the card since they don't really make sense as headings - although I can see how one would reach for h2 as I chose it myself initially 😅.

    You make use of a lot of div elements in your html and it might be useful to replace some of them with more suitable elements (e.g. the challenge is to produce a component that is reusable, possibly in other projects - check out this link which helped me (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article).

    I hope this helps you along in your coding journey.

View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub