Not Found
Not Found
Oops! You need to be logged in to do that
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Nic

@nicm42
England
595Points

I like problem solving and making things pretty. I also like red.

Latest Solutions

Latest Comments

  • Solution screenshot
    • HTML
    • CSS

    Order Component Using Flex

    1
    Nic595 | Posted 7 months agocommented on Fizzify's "Order summary component" solution

    This looks great for a beginner.

    I noticed in your html you have this:

    <h2>Order Summary</h1> I think you meant that to either be an h2 or a an h1.

    The Annual plan bit is a bit of a pain in the design. It's a good case for using Grid, because you can have the note and the Change link spanning two rows. If you don't know Grid, then I found Wes Bos's free course really helpful. If you want to stick to Flex, then you can make it as a row, then put the Annual Plan and price into a div and make that fix a Flex of direction column.

    To stop your card getting bigger when you do that, you can put a max-width on it. That'll make sure the card will never get any wider than that.

    The easiest way to get the Proceed to payment looking more like the design is to make it a button. That will automatically only make it as wide as the text. Then you can add padding to get it to the size you need. Then you can add the border-radius and box shadow.

    And then I think that pretty much gets you there. What you have is really close - and it looks alright. If I wasn't comparing it to the design I'd think it was fine.

    0
  • Solution screenshot
    • HTML
    • CSS
    • JS

    First time using Tailwindcss, js vanilla

    1
    Nic595 | Posted 7 months agocommented on Felix Criollo's "Calculator app" solution

    You'll kick yourself, but the Del button can be solved by removing the space on this line: screen.innerHTML = screenDel.join(" "); If you change it to screen.innerHTML = screenDel.join(""); then you won't be joining your array with a space between each item.

    1
  • Solution screenshot
    • HTML
    • CSS

    Mobile First using Flex

    2
    Nic595 | Posted 7 months agocommented on christopher II's "Profile card component" solution

    Even if you absolutely position things, if they go outside of the body, they'll still cause scrollbars. The easy way to get round it is to add overflow: hidden to the body.

    Also, you don't need to set your HTML to be a width of 100vw. By default it'll always fill the width. Whereas it'll only use as much height as it needs for the content.

    0
  • Solution screenshot
    • HTML
    • CSS
    • JS

    🍌 🍊 🍉🥤 making a healthy website with html sass and js

    1
    Nic595 | Posted 7 months agocommented on Marlon Passos's "Sunnyside agency landing page" solution

    The reports on here are pretty good at pointing out accessibility errors. You can also install add-ons in your browser that will run tests. I use aXe and Wave. I always manage to forget something and they'll remind me. Although they're not foolproof and won't catch everything.

    I really like the way the hamburger menu transitions from three lines to a cross.

    0
  • Solution screenshot
    • HTML
    • CSS

    Payment card for music listener

    2
    Nic595 | Posted 7 months agocommented on GabFerreira's "Order summary component" solution

    The links to the site and the code don't work, they just give page not found errors.

    To see the phone view on a computer depends a bit on which browser you're using, but it's broadly the same on all of them. If you open the dev tools (by pressing F12), then somewhere at the top will be an icon of a phone in front of a tablet. In Chrome it's the second from the left (after the arrow), in Firefox it's third from the right (before the three dots). If you click on the icon then it'll go into mobile view. You can choose from a set of phones or tablets, or choose the Responsive option, which lets you type in the width and height, or drag the view from the bottom right corner to whatever size you like.

    0