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
Not Found

All comments

  • Fizzify 20

    @Fizzify

    Submitted

    I am mostly just a beginner at CSS3 and I am trying to improve, could anyone tell me how you could make my code more similar to the design?

    Nic 595

    @nicm42

    Posted

    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
  • Nic 595

    @nicm42

    Posted

    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
  • @donchriscorleone

    Submitted

    Why I am having a scroll to the left and bottom? I position the background patter svg by absolute.

    Nic 595

    @nicm42

    Posted

    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
  • Nic 595

    @nicm42

    Posted

    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.

    Marked as helpful

    0
  • @Gab-Ferreira

    Submitted

    I had some problems with the price part, I don't know how to place the elements correctly. How can we see the smartphone view on pc ?? I didn't do the media queries because of that.

    Nic 595

    @nicm42

    Posted

    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
  • Nic 595

    @nicm42

    Posted

    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.

    Marked as helpful

    1
  • Nic 595

    @nicm42

    Posted

    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.

    Marked as helpful

    2
  • jackson 500

    @Jacksonishere

    Submitted

    Made the nav bar fixed and had it change color when scrolled outside the header using intersection observer. Shout out to kevin powell from youtube for that. Any feedback and criticism welcome.

    Nic 595

    @nicm42

    Posted

    I love that navbar, it's so cool!

    1
  • Dainaa 175

    @Dainaa

    Submitted

    Any help with how to ensure grid components resize similarly and don't outgrow each other is very welcome. Also - please look at the site at the vercel URL instead of in the screenshot, not sure why it's doing what it's doing to the ellipses in the screenshot, but it seems to all look alright in browsers :)

    Nic 595

    @nicm42

    Posted

    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.

    Marked as helpful

    1
  • SAMING 60

    @mingzkun

    Submitted

    FontAwesome for social media icons seemed fine when I run on my local but I have no idea why they disappear after I run production build.

    Nic 595

    @nicm42

    Posted

    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
  • Megat 40

    @MegatHilmi

    Submitted

    Hi, This is my second challenge. This challenge really important for me to train my skills to build a website even though it only applying basic HTML and basic CSS. In this project I wonder, do you have any other way to sort the element side by side by using CSS. For this project, I am using "float=left" properties. Thank you.

    Nic 595

    @nicm42

    Posted

    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.

    Marked as helpful

    1
  • Nic 595

    @nicm42

    Posted

    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
  • Fer 50

    @Numark12

    Submitted

    This is my first completed project. I would like to know some way to reduce lines of code in CSS (it was quite long for such a small page). Thanks!

    Este es el primer proyecto que finalizo. Quisiera saber si hay alguna manera de reducir las líneas de código de CSS (quedó bastante largo para una página tan chica). Gracias!

    Nic 595

    @nicm42

    Posted

    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.

    Marked as helpful

    1
  • @chawissa

    Submitted

    Hi! This is my second challenge. Still slower but getting better. :)

    My first try in mobile first approach. I find it easier as I still get confused with media queries. Is it advisable to use this workflow everytime or are there instances that I should not to?

    I don't understand why the desktop background image on the github pages not showing but it does when I open the liveserver.

    Any feedback is greatly appreciated so I can keep improving. Thanks.

    Nic 595

    @nicm42

    Posted

    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
  • Nic 595

    @nicm42

    Posted

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

    0
  • Nic 595

    @nicm42

    Posted

    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
  • Sam 20

    @iSamBa

    Submitted

    I am new to web development, and I really need your constructive feedback.

    Nic 595

    @nicm42

    Posted

    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
  • Nic 595

    @nicm42

    Posted

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

    0
  • @cllopezv

    Submitted

    Hi, this is my first challenge. I'm new to make things only by myself, I was so stuck in tutorial hell. Any feedback is welcome! ✨

    Nic 595

    @nicm42

    Posted

    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
  • Nic 595

    @nicm42

    Posted

    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
  • Nic 595

    @nicm42

    Posted

    Your code looks good to me - I'm really liking all your comments in it :)

    0
  • Ayoub1Dev 195

    @Ayoub1dev

    Submitted

    Any feedback on how to improve the js to make an accordion and also if there are other ways to make it.

    My aim in this project was to practice my CSS andHTML but most importantly learn JS. I dont care how small or big my design is as that is an easy fix and its the job of designers,, so long as i got no issues(0 yaaay!!) Im pretty happy.

    Thanks in advance for any feedback :}

    Nic 595

    @nicm42

    Posted

    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
  • Nic 595

    @nicm42

    Posted

    I love that Christmas theme, it looks amazing.

    1
  • Nic 595

    @nicm42

    Posted

    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