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

Nick Williams

@nickfwilliamsChippenham320 points

I'm a Web and UX developer for Bristol Students' Union. I wear several hats - HTML, CSS & JS, user researcher and designer (Figma). My passion lies in making things look great through attention to detail and really listening to what people are asking for.

I’m currently learning...

HTML, CSS & Javascript

Latest solutions

  • Article Preview Component using BEM

    #bem#accessibility

    Nick Williams•320
    Submitted about 1 year ago

    0 comments
  • Responsive Recipe Page using CSS variables and CUBE

    #cube-css#accessibility

    Nick Williams•320
    Submitted about 1 year ago

    I'm curious to know how other people solved the problem of the margins on the image. My solution feels like a work around and I'm sure there's a way to apply universal padding to the wrapper and then just remove it from the image on the mobile view but leave it in place for everything else.


    0 comments
  • Advice Generator using SCSS and CSS variables

    #sass/scss

    Nick Williams•320
    Submitted about 1 year ago

    0 comments
  • Mobile first solution using JS and JSON data

    #bem

    Nick Williams•320
    Submitted over 1 year ago

    0 comments
  • Interactive rating component using Vanilla JS


    Nick Williams•320
    Submitted about 2 years ago

    0 comments
  • Mobile first product preview card component using flex


    Nick Williams•320
    Submitted about 3 years ago

    0 comments
View more solutions

Latest comments

  • Oliver Tejeda•350
    @ov3rst
    Submitted about 3 years ago

    Social proof section

    1
    Nick Williams•320
    @nickfwilliams
    Posted about 3 years ago

    Hi Oliver - this is looks great and is so close to being finished! I noticed two major things: 1) You don't appear to have included the background-image and 2) You don't have any backgrounds for the star review sections, so they're just kind of floating on the page. A faded background will really help them stand out more and provide a bit more structure. Otherwise, good job.

    Marked as helpful
  • OnSake•40
    @OnSake
    Submitted about 3 years ago

    NFT Card | HTML - CSS | Developer Mozilla - Font Awesome

    #accessibility#cube-css
    1
    Nick Williams•320
    @nickfwilliams
    Posted about 3 years ago

    Hi On Sake - You're definitely on the right track by using ::before and ::after. My tip would be to concentrate just on ::before - you only need one of these to make it work. You will also need to combine :hover with ::before to get the final effect working. If you're really stumped you can take a look at my solution but I'd really recommend trying on your own before looking elsewhere. Definitely do some Googling too - you're so close!

  • Nathasha•150
    @NathashaR1997
    Submitted about 3 years ago

    Responsive Landing page using flexbox

    2
    Nick Williams•320
    @nickfwilliams
    Posted about 3 years ago

    Hi Nathasha! This looks great, very similar to the final design. The major thing I noticed that looked out of place is your background image. It's currently too small for larger screens - the issue here seems to be that you've applied the url to the container div, rather than the background. Try swapping it over and see what happens. All the best!

  • KerimGurbaz•100
    @KerimGurbaz
    Submitted about 3 years ago

    Responsive landing page

    2
    Nick Williams•320
    @nickfwilliams
    Posted about 3 years ago

    Hi KerimGurbaz - nice job on getting the fonts working, the colours are mostly fine too! There are a few issues with the layout however, as it does't take-up the full screen and it isn't responsive (there's no mobile view). I'd suggest going back and starting again with a single container div with two sib-divs in it (one for the image, the other for the text). Once you get the mobile layout done, then I'd suggest looking up 'media queries' so your code and layout can adapt to a different screen size.

  • Pradeep•50
    @sunkulpradeep
    Submitted about 3 years ago

    Product

    1
    Nick Williams•320
    @nickfwilliams
    Posted about 3 years ago

    Hi Pradeep - just taken a look at your preview and whilst you've done a good job on matching up the colours and fonts, the overall structure of your HTML needs some tweaking. Currently, if you resize the window, then there are several elements that misalign. I'd start by using a single container div (apply flex to this container) and then divide that into two sub-divs - one for the image, the other for the text and button. Try that and see how you get on!

    Marked as helpful
  • Anette23•500
    @Anette23
    Submitted about 3 years ago

    Single price grid component

    1
    Nick Williams•320
    @nickfwilliams
    Posted about 3 years ago

    Hi Anette - this looks spot on to me! Both mobile and desktop layouts look good. Your solution is a little bit narrower on desktop but I honestly wouldn't worry about that, it's close enough to be sure. The onlt thing I noticed that would be worth tweaking is the colour on the 'per month'. It's seems darker than it should do currently which makes it really hard to read against the green.

    Marked as helpful
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

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