Zauri Khutsishvili• 680
@zauri-khutsishvili
Submitted
Is it better to use em instead of px in media queries?
And what's wrong with the report?
Lacey E
@laceeder
All comments
- Lacey E• 110
@laceeder
Posted
To answer your questions, using em or rem is more dynamic than px. I'm going back through my challenges and updating that part of my codes myself. I now use em for font-size and rem for the rest.
Your report has so many errors because your code is jumbled.
For the html, it should look like this:
<head> <body> <header> <main> <footer>(with proper indentation, of course)
you also need to put something in the quotations for the <a> tag. I usually do
<a href="#">content here</a>Also, before submitting solutions, remember to run your code through a validator. I use the HTML and CSS ones from w3c. HTML validator CSS validator
These will help prevent less errors on the report :) They also tell you what line the errors are on as well. Hope this was helpful and good luck on future challenges! :)
0 - Yous• 170
@yousra10
Submitted
Hi everyone,
I just completed this challenge. I use flexbox CSS. Here are where I had difficult in these challenge :
- Change the color on the social medias icon (Facebook, Twitter, Instagram) when we hover on icon. =>What I did is to download other icons social media in color cyan blue and I put them on CSS in background like this : `.social-media-ig a, .social-media-fb a, .social-media-tw a{ display: inline-block; margin:1rem; }
.social-media-fb a { background: url('images/facebook-square-custom.svg') no-repeat; }
.social-media-tw a{ background: url('images/twitter-custom.svg') no-repeat; }
.social-media-ig a{ background: url('images/instagram-custom.svg') no-repeat; }
.social-media-fb a:hover img, .social-media-tw a:hover img, .social-media-ig a:hover img { visibility: hidden; }
But I am not satisfied by the result because we see 2 icons one above the other.
-
On the footer, I didn't know how to put the FAQs, Privacy Policy, Press kit.. as it appears in the challenge. Here is my solution.. But I know, it's not perfect : ` <div class="links"> <img class="logo-C-bottom" src="images/logo.svg" alt="">
<div class="faqs"> <a class="hover-links" href="#">FAQs</a> <br> <a class="hover-links" href="#">Contact Us</a> </div> <div class="privacy"> <a class="hover-links" href="#">Privacy Policy</a> <br> <a class="hover-links" href="#">Press Kit</a> </div>
Your feedbacks and suggestions are welcome !! Thank you very much and happy coding !!
Best regards, Yous Ben
Lacey E• 110@laceeder
Posted
First, I'd suggest working on the spacing between elements. The way your design is now in the main area of the design and in the footer, everything looks cluttered. There's a reason the design is as "long" as it is, to even space everything out :)
With the icons, I used font awesome icons and just put them like this:
<a href="#"><i class="fa-brands fa-facebook-square fa-xl"></i>Then in the CSS when I styled the <a> tag, I used
.footer-content .social-media a:hoverand just put the color I needed to use ascolor: hsl(171, 66%, 44%);Same with the buttons (except for those I styled the button itself's background color, not the <a> tag) and the footer links. You shouldn't have to do all that extra code, so good thing you asked about it! It's an opportunity to learn!
With the footer links you'd do:
<a href="#">FAQs</a>and then style like this:.footer-content .links-nav a:hover { color: hsl(171, 66%, 44%); }And with font awesome icons, you can resize them by adding fa-2xs to fa-2xl to your i class code. They have a very helpful article on their website on it! Hope this helps and keep up the good work!
0 - Marit• 400
@Maritxx
Submitted
The main issues that I came across were regarding best practices. Specifically when to use headings (h2, h3, h4, etc) over paragraphs, spans, or divs when it's not a 'conventional' webpage with several clear sections.
Along with that, I am wondering if this was the best way of implementing the responsive design. I found myself preferring to work by creating the desktop layout first. Would this cause issues in general?
Would be happy with any feedback as I'm just starting out.
Lacey E• 110@laceeder
Posted
to address the issues in the report first: Report
- include a <main> tag after your body tag.
- images must have an alt text like this:
<img src="./image/example.png" alt="short img description" />..this is so someone with a screen reader can tell what the image is. Try to remember accessibility, it's very important.
now for YOUR questions! :)
With headings, go in numerical order. You can always go and change the font size in the CSS! :) So go from h1 to h6. For me, I use p tags when it's more than a blip of text. For this one, the only <p> would be the paragraph below the title name of the perfume because it's a block of text. I'm not entirely sure when to use <span>. Here's a good article I found here. Spans are inline, divs are block elements. So divs are for sections of your code, like the perfume title and description could be a div, then the price information could be another, and then your button would be another. I try to look at my design and see which areas I'll need to group together and think about how they'll need to be styled.
I highly recommend styling mobile first. It's hard to tell when it's a small design like this, but when you get to bigger projects, you'll run into the issue of it being more time-consuming to go from big to small versus small to big. It's easier, IMO, to expand my design rather than shrink it. When I've tried styling desktop first, I find myself going back and forth to fix things more often than I should be. Because when I style something for mobile, then the desktop style always changes. However, when I do mobile first, I rarely ever find myself going back and forth and doing double the work. The standard I learned it mobile-first, but I've seen some people prefer to do the opposite. I just recommend you do mobile first! :)
With your design, you did a great job! Your perfume title is a little large, and the paragraph doesn't line up like in the design file, but otherwise it looks great! Keep practicing and good luck on your future challenges! And don't be afraid to google information. I've found a lot of great resources that way :)
Marked as helpful
1 - Joel• 20
@Jjumba4
Submitted
Awaiting any feedback on how i can improve. Thanks in advance.
Lacey E• 110@laceeder
Posted
To get background images to show, you need to put ' ' in the parenthesis like this:
background-image:url('./images/background-image');also, why do you have 3 index.html files? You should only have one. I also believe your css file isn't linked properly in your html file. I use this:
<link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css">and refer to the style guide for font-weight. With this one, you should use 400 and 700 for normal and bold. So it should look like this:
font-weight: 400;Here is a good source for media queries from DEV.to, it's very helpful. In the style guide, they give you the 2 you'd need, mobile and desktop. You can choose to do tablet if you want to get more practice.
Hope this helps and good luck!
Marked as helpful
0 - Oluwatosin Abigail Daramola• 530
@Heph-zibah
Submitted
What I find difficult while building the project:
The responsiveness. I tried my best not to make my cards look too big bespecially on desktop but I don't know how to go about it.
Which areas of my code am I unsure of:
That will be the responsiveness.
I need documentations on grid. This should go a long way to boost my learning. This is like the first grid project I will do.
I await you helpful feedback please.
Lacey E• 110@laceeder
Posted
https://css-tricks.com/snippets/css/complete-guide-grid/
this helped me understand Grid when I worked on a project in the course I'm taking! It's very thorough and breaks it all down. There's also a lot of great youtube videos too.
Some tips: When you're writing your html, make sure to remember to write in a way that'll make sense to someone else looking at it. For instance, why use the graduates' last names? What does "bold-para" mean? And remember, it's best practice to use "-" and no spaces in your div classes and ids. Keep your names short, sweet, and to the point :)
You also must follow the style guide. This is why your desktop view looks big. The h1, h2, h3, h4 are all using default font sizes instead of setting your default font size to 13px like in the style guide. You also didn't call your font correctly when doing "font-family", so this also will affect the size and general appearance of your work because it's not inputting the font because it doesn't just know "Barlow", you have to say "Barlow Semi Condensed, sans serif" for it to work properly.
Also make sure to leave the <html lang="en"> at the top of your html document in that file, it gives an error for accessibility issues.
Other than that, everything else looks really great! You've done a great job! Keep learning and good luck! :) I was actually looking at your code for guidance on my own version of this challenge!
Marked as helpful
2 - Pratyusha Majumder• 280
@FloraBloomblue
Submitted
This was hard for me. I tried. However, I have got a few questions. It would be really kind of you guys if you help me with it.
-
The image in black and white and I have to use a color over it. so the image with black and white has shade of color on it. I saw the overlay method, linear gradient. . Finally I applied it but I think there is something wrong with my code. Mine is not coming similar to the original design.
-
I have done the overlaying thing, but when I am increasing the resolution, that overlay div changes position , so it's not fixed over the image.
-
Now coming back to the color thing, given is hsl format, linear gradient works better with rgba. So, I thought of converting hsl to rgb, but I was not satisfied, so kept hsl, and used opacity with it. But I still couldn't come close to the given picture in the design.
That's all , Thank you
Lacey E• 110@laceeder
Posted
I recommend practicing mobile-first coding. I've found it's a lot easier to set up HTML and do the CSS for that. Your indents are also off after the opening body tag. I find it helpful to add a space between my content just so I can better keep track of my indents and stuff :)
I also had a similar issue with my overlay, but my code is set up for mobile-first, so my recommendation may be a bit different. I would add another div class just for your images. So like this:
<main> <div class="card"> <div class="img-wrapper"> <img class="img1"> /> <img class="img2"> /> <div class="overlay"></div> </div> </div>for me, I then was able to target the "img" and "overlay" divs and using DevTools in Chrome to get the height and width of the "img-wrapper" section, I was able to shrink the overlay and position it where I needed it. At least in mobile view, I'm working on desktop view now :)
This is a tricky challenge and I hope this was at least semi-helpful! Keep it up! And remember: try to always practice mobile-first :)
Marked as helpful
0 -
