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
@nicm42
All comments
- 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 - Felix Criollo• 575
@FelixCriollo
Submitted
Thanks for checking out this front-end coding challenge.
- The button Del have a bug help :3
- How could improve my code
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 - christopher II• 1,220
@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 - Marlon Passos• 940
@MarlonPassos-git
Submitted
I would like some help to check if my hamburger menu has any accessibility errors
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 - GabFerreira• 240
@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 - Taruna• 305
@Tiyana19
Submitted
Feel free to tell me the things that I need to improve. I'm a beginner frontend developer so your thoughts will teach me a lot.
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:
(with a small i on images, rather than Images). The bit in square brackets is the alt text.
Marked as helpful
1 - Dragosh Gheceanu• 140
@dragoshcode
Submitted
What is your opinion on my CSS code? What exactly would you improve in my macaroni code :D ? What suggestions you have as a whole? Thank you
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 - 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.jsnode-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 - Alif Panglima Nurda• 135
@blurrypxl
Submitted
Hi guys, I just finished this challenge. Please let me know if you have any suggestions, I'd really appreciate it :)
Thank you
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
