Fraser Watt

@fraserwatFraser Watt
London, United Kingdom
305Points

Data Analyst slowly making the transition to Web Development. Spent the last few years optimising SQL queries so I'm not used to making things look nice!

I'm currently learning...

CSS, JavaScript

Latest Solutions

  • Desktop design screenshot for the 3-column preview card component coding challenge
    • CSS
    • HTML

    3 Column Preview w/ Expanding Cards (JS)

    Fraser Watt305Submitted

    The HTML / CSS part didn't take me too long so I made the "Learn More" cards expand with a bit of (useless) extra info.

    Pretty straight forward on the mobile version, but on Desktop has growing cards, a little transition, etc. My problem here is the transition is quite jittery - any ideas on how to smoothen this all out whilst still keeping the growing cards?

    View Solution
  • Desktop design screenshot for the Social proof section coding challenge
    • HTML
    • CSS

    Social Proof: SASS + Grid + Flexbox

    Fraser Watt305Submitted

    I'm still looking for a way to get the footer to "flex" itself to the bottom of the page without messing up the positioning of my container. In the end I just got irritated with it and deleted it 😂 - any tips here v much appreciated!

    Also was wondering how you'd approach this if there were e.g. 4 or 5 reviews (or other times), so you couldn't just play with flex alignment. Any ideas?

    As ever, any ideas to simplify code, mistakes or weird habits I've picked up always welcome! 😎✌️

    View Solution
  • Desktop design screenshot for the Intro component with sign-up form coding challenge
    • HTML
    • CSS
    • JS

    Form validation with 3D button 👀

    Fraser Watt305Submitted

    Followed a tutorial to get a cool 3d button on this one, which I think turned out nicely!

    • I think I'm starting to get a better intuition around flexbox and (to a lesser extent) css grid, but any tips on any weird habits or inefficiencies I've picked up here v much appreciated.
    • As this form doesn't lead anywhere, I'm not sure if the whole thing is being set up properly? I guess in the "real world" you'd probably be using Hubspot or Mailchimp or something which adds another layer of complexity, but yeah any best practices here would be a real help!
    • Semi-related, the first time you hit the button it reloads, but subsequent times don't, because its got the # in the URL. Not sure what's going on here, are we able to just stop the form submitting without validation, or how does this work?

    Beyond this, any misc feedback v much appreciated! Happy Easter! 🐣

    View Solution
  • Desktop design screenshot for the Ping single column coming soon page coding challenge
    • HTML
    • CSS
    • JS

    My First JavaScript Project

    Fraser Watt305Submitted

    This was a tough one!! First time I'd worked JavaScript into a Solution on here, pleased with out that turned out! 😄

    The bit that really stumped me wasn't the JS, but working with CSS elements when there are more than one class. Took me a while to figure that out and I'm still not 100% sure on it, but got there in the end...

    There is still one bit that's a bit annoying, which is when the validation error message appears, because its not a hidden element anymore it pushes the image below down a tiny bit. Any ideas how to fix this?

    View Solution
  • Desktop design screenshot for the Huddle landing page with a single introductory section coding challenge
    • HTML
    • CSS

    Landing Page with Pure CSS Popup Form

    Fraser Watt305Submitted

    There's a few things I'm pretty pleased with myself for (popup form, hover animations), but also a few things I think could be done better:

    • As it started to get wider (but not wide enough for the grid to fill out that wide) I ended up with a lot of blank space. I'm not sure how much of this is inherent to the design (and what would be a likely screen resolution) and how much of it was shoddy formatting on my part. Any suggestions on how I could improve this?
    • The hover over the x to close the popup is on the whole width of that element, not just the cross. Likewise the whole element is a link to close it for the whole width of that part of the form. That's annoying, would like to work out how to fix this.
    • The popup form should be a little bit wider at higher widths I think but that kept messing up the formatting, with the container not really behaving responsively.

    Any pointers here (or anything else I've missed) v much appreciated! 👍

    View Solution
  • Desktop design screenshot for the Single price grid component coding challenge
    • HTML
    • CSS

    SASS based CSS Grid for

    Fraser Watt305Submitted

    The button I can't seem to get to not cut off the edge of the border-radius? Overflow is set to hidden, which seems to be the most common cause of this according to google. Any tips here v helpful!

    Also any pointers on things within the CSS I could simplify much appreciated, there's a few bits that feel like they could have had more elegant implementations.

    View Solution

Latest Comments

  • Fraser Watt has commented on Kent Hefley's "Profile Card Component using HTML and CSS" solution

    0

    Hey, this is really good!! 🎉

    The only changes I'd really make are that you don't really need the @media queries for the font size, would be fine to just keep the larger of the two.

    I'd also try and play around with padding/margin values (and getting rid of heigh properties where possible) to try and get it to the point where the profile div isn't dislodged at narrower screen widths.

  • Fraser Watt has commented on MuhammadSamir's "My second project with flex box" solution

    0

    Hey Muhammad, this is really cool - love the button animation! 😎

    The only changes I'd really make are experimenting with the box-shadow element to try and get the shadow around the box to match the original design, and aligning the indent on the "Join our community" heading with the rest of the text (it seems to start a bit after everything else, presumably a margin / padding issue on h2).

    If you wanted to get it really close to the design I'd probably also look at margin and line-height for the text in that "Why Us" box.

    Looking good, keep it. up!

  • Fraser Watt has commented on Bryan Loyd's "Huddle Landing Page // Mobile First" solution

    0

    Hey Bryan, this looks great! Few changes I'd probably make:

    • To simplify the whole thing you probably only need two grid columns, and have the social media stuff below the grid, .logo div above the grid. You can then proportion the fr values as you see fit.

    • Could probably bring the breakpoint for the desktop view in a bit earlier.

    Couple of aesthetic tweaks (bit of a bigger gap between .image div and content on the right hand columns, have the margin between the text and button more consistent), but I think you've got it there. 👍

  • Fraser Watt has commented on vNawar's "HTML and CSS solution" solution

    1

    Hey, congrats on your first challenge! 🎉

    There's a few things I think could make this a little more responsive.

    • instead of having the two background images in div's I reckon you'll have an easier time with it if you have them as background-image attributes of the body element, and do the positioning in vh and vw measures instead of percentages. You'll then be able to get rid of the @media queries there.

    • You'll want to do max-widths to stop things getting too wide, but generally you won't want to be dictating widths and heights, so its more flexible on different screen sizes. You should be able to sort most of this stuff out with margin and padding. When your total screen width approaches the width of the element, it should shrink (leaving a bit of a gap with margin).