Skip to content
OverviewSolutions
17
Comments
5

Lacey E

@laceederDFW, Texas110 points

Creator that loves to read, learn, travel, be outdoors, cook, sew, and spoil my cat. Also have a Bachelor's degree in Criminology.

Latest solutions

View more solutions

Latest comments

  • Lacey E•110
    @laceederPosted almost 3 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
  • Lacey E•110
    @laceederPosted almost 3 years ago

    to address the issues in the report first: Report

    1. include a <main> tag after your body tag.
    2. 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
  • Lacey E•110
    @laceederPosted almost 3 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
  • Lacey E•110
    @laceederPosted almost 3 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
  • Lacey E•110
    @laceederPosted almost 3 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