All comments

Yous•170
@yousra10Submitted over 2 years ago
Hi everyone,

I just completed this challenge. I use flexbox CSS. Here are where I had difficult in these challenge :
1. 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.
1. 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>
```
<div class="guide"> <a class="hover-links" href="#">Install Guide</a> </div>
Your feedbacks and suggestions are welcome !! Thank you very much and happy coding !!

Best regards, Yous Ben
Clipboard landing page
1
Lacey E•110
@laceederPosted over 2 years ago
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:hover and just put the color I needed to use as color: 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
@MaritxxSubmitted over 2 years ago
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.
Product preview card using Flexbox
2
Lacey E•110
@laceederPosted over 2 years ago
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
@Jjumba4Submitted over 2 years ago
Awaiting any feedback on how i can improve. Thanks in advance.
First project with HTML and CSS QR Component
1
Lacey E•110
@laceederPosted over 2 years ago
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•630
@Heph-zibahSubmitted over 2 years ago
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.
Responsive Testimonial Grid Section using HTML amd CSS Grid
2
Lacey E•110
@laceederPosted over 2 years ago
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
@FloraBloomblueSubmitted over 2 years ago
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.
1. 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.
2. 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.
3. 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
html, css
3
Lacey E•110
@laceederPosted over 2 years ago
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

Lacey E

All comments

Clipboard landing page

Product preview card using Flexbox

First project with HTML and CSS QR Component

Responsive Testimonial Grid Section using HTML amd CSS Grid

html, css