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
Not Found
Not Found
Oops! You need to be logged in to do that

All 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
  • Solution screenshot
    • HTML
    • CSS

    Order summary Component using HTML and CSS

    15
    Nic595 | Posted 8 months 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
  • Solution screenshot
    • HTML
    • CSS
    • JS

    'Blogr' Landing Page using CSS & tiny JavaScript

    3
    Nic595 | Posted 8 months 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
  • Solution screenshot
    • HTML
    • CSS
    • JS

    Time Tracking Dashboard (CSS Grid + Responsive)

    2
    Nic595 | Posted 8 months 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
  • Solution screenshot
    • HTML
    • CSS
    • JS

    Structured with Flex box!

    1
    Nic595 | Posted 10 months agocommented on SAMING's "Ping single column coming soon page" solution

    The trouble with the social media icons is that they're looking for a location on your computer:

    /node_modules/@fortawesome/fontawesome-free/js/brands.js
    

    node-modules isn't a location on your site. What you can do is to download the icons you need, put them in a folder - the images folder would do. And then refer to them in that location.

    0
  • Solution screenshot
    • HTML
    • CSS

    3-column preview card component solution

    2
    Nic595 | Posted 10 months agocommented on Megat's "3-column preview card component" solution

    This looks great. Your HTML and CSS are really clean and easy to read.

    The easiest way to get the elements side-by-side are by using Flexbox or Grid. They are hard to understand while you're learning them, but once you've got the hang of them, you'll find them so much easier than floats (or at least, I did). I recommend Wes Bos (https://wesbos.com/) - he has free Flexbox and Grid courses.

    You can also fix some of the accessibility issues. These can be really hard to get your head around. Pretty much all of your issues are complaining about the same thing.

    The <header> tag is only used once for your page header. Take the Frontend Mentor website for an example, the header would be the bar at the top with the logo and links.

    It then wants one heading tag per section. Those are h1, h2, h3, h4, h5, h6. If you were to change your divs for each column to a <section> tag, then change the <heading> tag to an <h1>, that should solve a lot of the accessibility issues FEM is complaining about.

    Talking about headings and headers is really confusing and I can understand why you thought the <header> tag was the right one to use for the header for each column. Reading more about semantic HTML should help you, but it's one of those things that can be a little confusing.

    1
  • Solution screenshot
    • HTML
    • CSS

    Stats preview card using HTML & CSS

    7
    Nic595 | Posted 10 months agocommented on Alif Panglima Nurda's "Stats preview card component" solution

    This looks great.

    I have a suggestion with the position: absolute on the body. Absolutely positioning something takes it out of the flow of the document. When it is essentially the document, it's a bit of a weird idea.

    What you can do is instead change it to position: relative. On its own, adding position: relative to an element effectively does nothing, but what it does mean is that any children within it that are absolutely positioned are then positioned relative to their relatively positioned parent, rather than the document.

    Once you do that, you also no longer need the left: 0 and right: 0 on the body.

    1
  • Solution screenshot
    • HTML
    • CSS

    Stats preview card with HTML and CSS

    6
    Nic595 | Posted 10 months agocommented on Fer's "Stats preview card component" solution

    Well done for completing this! I can see you've put a lot of thought into it.

    CSS can just be lengthy sometimes, but there are some things you can do to help.

    1. You don't need two media queries. If you took off your min-width: 650px one so all the styles currently in there are just general styles, then any styles that don't fit the max-width: 600px one will be shown. So if your browser width is 601px you'll see the general styles at the top, if your browser width is 600px, you'll see the mobile-specific styles at the bottom. This also solves the problem of not having any styles if your browser is between 601 and 649px.

    Basically, a media query will override any styles not specified above (and outside of) it. So if you have a background colour of red, then you have a max-width: 600px media query where you don't mention the background colour, it will be red no matter what size your browser is. But if you made the background colour green inside the max-width: 600px media query, then above 600px it will be red, below 600px it will be green.

    In your CSS your .attribution has a lot of the same styles regardless of whether it's on desktop or mobile. If you put those styles that are the same at the top, as general styles, then in your mobile media query, you just have to specify the styles that are different. That'll reduce the line count by quite a bit.

    1. You've also made your life a lot harder by repeating the HTML. You just need it once and then you can control how it looks on desktop/mobile with your CSS. So for example, .back-mobile includes all the styles that .back has, plus some extra ones, and the HTML the same, aside from the class name. So if you just have .back, then in your mobile media query, you add those extra styles to .back.

    I hope that makes sense - let me know if it doesn't and I will clarify/give more examples. It might help you to look at other people's solutions for this and see if you can understand how they did it - you can even download everything from their GitHub and change things to see how it all works.

    1
  • Solution screenshot
    • HTML
    • CSS
    • JS

    Mobile first using HTML, CSS, JS

    2
    Nic595 | Posted about 1 year agocommented on Charissa Ramirez's "Intro component with sign-up form" solution

    This looks great.

    There are debates on the internet about whether you should code mobile-first or desktop-first. Different people find different ways round easier to understand or mean writing less code. So you can do whatever approach you feel works for the thing you're coding.

    I looked at your background-image problem for a while trying to work out what's different between the mobile and desktop ones. Once I spotted it, it's obvious! The mobile one you have quotes around the url, which isn't on the mobile one, but that makes no difference. What does make a difference is that the desktop one has / at the start of the link, so it's trying to find it in https://chawissa.github.io/images/bg-intro-desktop.png - it's missing the signup-form folder in the link. If you get rid of the / the background image will show up.

    1
  • Solution screenshot
    • HTML
    • CSS

    ReactJS, Styled-Components

    4
    Nic595 | Posted about 1 year agocommented on omisc's "Social proof section" solution

    I looked at this because I'm just learning Styled Components and I found this really easy to read.

    0
  • Solution screenshot
    • HTML
    • CSS
    • JS

    Blogr-Landing-Page | Reponsive | HTML,CSS,JS

    4
    Nic595 | Posted about 1 year agocommented on Tejas's "Blogr landing page" solution

    Looking at this, I'm disappointed your class names aren't weirder - I thought they were quite logical!

    But I'm finding your CSS a bit odd - you have some mobile specific bits, some desktop specific bits and some tablet specific bits. And some navbar links changes only for specific sizes. It's generally easier to design for one size (either small or big) and then work up or down. That way you don't need so many media queries, and you also don't have to have ones that include min and max, as the bottom one takes precedence.

    1
  • Solution screenshot
    • HTML
    • CSS
    • JS

    Blogr

    5
    Nic595 | Posted about 1 year agocommented on Sam's "Blogr landing page" solution

    In your app.js you're looking at window resize to show and hide the menu button, but you can just do that in your CSS - so your hamburger menu will have display none on desktop but not in mobile.

    You're also making life hard for yourself by having styles for mobile and styles for desktop because you're then writing some of the same things twice. What you can do is to write all your styles for mobile or desktop, then use media queries to overwrite anything that changes for desktop/mobile. You can even write a mixin for that! If you haven't discovered Kevin Powell on YouTube yet, then he has some good Sass content

    1
  • Solution screenshot
    • HTML
    • CSS

    Mobile First CSS HTML CSS GRID FLEXBOX

    2
    Nic595 | Posted about 1 year agocommented on Ala Abd Elrahman's "Huddle landing page with alternating feature blocks" solution

    It looks good to me - I scrolled through your CSS and I could tell what each bit was from the class names.

    0
  • Solution screenshot
    • HTML
    • CSS
    • JS

    Solution using Flexbox

    7
    Nic595 | Posted about 1 year agocommented on Carmen Lopez's "Pod request access landing page" solution

    It looks great, and I like the way you've labelled your CSS for mobile, tablet and desktop.

    I'm not sure why you have the 15% width on the podcast icons, but it's making them look squished and they look much better if you take it off.

    0
  • Solution screenshot
    • HTML
    • CSS

    Flexbox, max-width and, pseudo classes for clean code

    2
    Nic595 | Posted about 1 year agocommented on Krista Calleja's "Profile card component" solution

    The div around your name and age currently has justify-content space-evenly. So it's evenly spacing them within that div. So you could make it narrower and it would move them both in. But it would be easier to set your justify-content to be center. That puts them both in the centre, right next to each other, so then you'd need a margin on the right of the name or left of the age to move them a bit further apart.

    0
  • Solution screenshot
    • HTML
    • CSS
    • JS

    First use of js in project

    1
    Nic595 | Posted about 1 year agocommented on Ayoub1Dev's "FAQ accordion card" solution

    This all looks great.

    There are different ways of doing loops, but there's nothing wrong with the for loop. And not all the others will work with querySelectorAll, because JS is fun like that. MDN's page about querySelectorAll gives an example of forEach (which is a loop but doesn't look like it) so if you wanted you could go down a rabbit hole looking that up and trying to understand it.

    There's a couple of other ways to make an accordion. One is to make each of them a checkbox, use CSS to hide the checkbox, and use JS to show the answers if the checkbox is checked. There are also the HTML tags details and summary, which will make an accordion without JS (but that's less useful if you want to practise your JS!)

    0
  • Solution screenshot
    • HTML
    • CSS
    • JS

    FAQ accordion card using css grid

    2
    Nic595 | Posted over 1 year agocommented on Saheed Shittu's "FAQ accordion card" solution

    I love the way you have the questions font size growing as it opens.

    One thing you could do is to think about at what point you want to change to the desktop view. Based on the design we know it should be the desktop view at 1440px, but is there space to switch to that view at a smaller width? For example, think about someone looking at this page on a tablet, would they like to see the mobile view or desktop view?

    There isn't a right answer, to this, by the way, it's quite subjective. So you might look at it and think it's fine as it is and that's ok.

    0