Nic

@nicm42
England
575Points

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

Latest Solutions

Latest Comments

    • HTML
    • CSS

    Four Cards Front-end Webpage using HTML & CSS

    1
    Nic575 | Posted 26 days agocommented on Arjun's "Four card feature section" solution

    This looks like the design to me! I like how you've added comments to your CSS so it's clear what's going on.

    You can fix the three accessibility warnings in the report quite easily.

    The first one is complaining that you have h1 and h3, but no h2. You have to go in order, so you can't have an h3 until you've got an h2 and you can't have an h2 until you've had an h1. So if you change your h3s to h2s, then it'll be happy. The learn more link in the report explains more about this and why it's good to do.

    The other two are effectively complaining that you don't have a <main> tag. The easiest way to fix this is to change your div with class of 'all' to <main class="container all">. You might then want to change your section with an ID of main to a different ID to avoid confusion, but the accessibility report won't care (I think).

    1
    • HTML
    • CSS

    Order summary Component using HTML and CSS

    15
    Nic575 | Posted 26 days agocommented on Tinker's "Order summary component" solution

    This looks great. Your class naming and CSS organisation are good, so I could tell which each bit was referring to in the CSS without having to look at the HTML. I really like the focus states on the buttons.

    In your GitHub readme, the screenshot isn't showing. At the moment you have:

    (./Images/screencapture.png)
    

    What you want is something like:

    ![Desktop](./images/screencapture.png)
    

    (with a small i on images, rather than Images). The bit in square brackets is the alt text.

    1
    • HTML
    • CSS
    • JS

    'Blogr' Landing Page using CSS & tiny JavaScript

    3
    Nic575 | Posted 26 days agocommented on Dragosh Gheceanu's "Blogr landing page" solution

    I like your description of macaroni code :)

    I opened this, wondered why it had so much white space and then realised it's because all your images are missing. You need to upload those to GitHub, as it currently can't find them.

    Your Ubuntu font isn't showing up. It took me a while to spot it, but you've got an extra "-font" when you tell it the custom property to use: --ubuntu-font: "Ubuntu", sans-serif; font-family: var(--ubuntu-font-font);

    Some of your CSS is repeated. So for example, main-para-one and main-para-two have exactly the same code. What you can do is to give both those paragraphs a class of main-para, so then you'd have this:

    .main-para {
      font-size: 1.5rem;
      max-width: 48rem;
      color: hsl(207, 13%, 34%);
      margin-top: 3rem;
    }
    

    What I've found useful, to make the CSS code easier to read, is to space it out a bit more - so leave a blank line beneath each closing curly bracket (like you have after root). And then label each section so it's easy to see on skimming eg

    /**************** Header ****************/
    .header {
      /* Some styles go here */
    }
    
    .logo {
      /* Some more styles go here */
    }
    

    I don't know if you did it on purpose, but only your first dropdown menu works - because the JS is looking at the ID on the first one. If it looks at the class instead, then you can do all three. But that is a little more complicated, as the selector will get all of those lis and you have to loop through them to add/remove the active class when it's clicked.

    2
    • HTML
    • CSS
    • JS

    Time Tracking Dashboard (CSS Grid + Responsive)

    2
    Nic575 | Posted 26 days agocommented on Dainaa's "Time tracking dashboard" solution

    I opened this and saw the same ellipses as in the screenshot - I'm using Firefox. If I open the site in Chrome it looks fine. I think for some reason the browsers are interpreting the space differently, so Firefox is making the ellipses massive. Since Chrome told me they were taking up 21px width, I added max-width 21px to the ellipses in Firefox and then they looked fine.

    Edit: meant to say it looks good and the grid components look fine to me.

    1