Skip to content
OverviewSolutions
26
Comments
7
filecc
@filecc

All comments

  • filecc•470
    @fileccPosted about 2 years ago

    🌈 Hi and congratulations on completing this challenge!

    I’ll try to answer your questions:

    1. Is my code optimal in terme of CSS class Vs. the fact I call many times 'display:grid' and 'display:flex' in different CSS Selector ?

    You can always create a class in you css like

    .flex{
      display: flex;
}

    and then use this new class directly in your HTML instead of writing every time. It’s the same if you use a framework like Boostrap or Tailwind.

    2.Should I use REM instead of px in the CSS file for better responsive results?

    You should always use REM instead of pixel. Above all for accessibility, so everyone looking at you website can still appreciate it even if they’re using a magnifying or something else to enlarge their zoom. Here’s a link from CSS Tricks.

    I hope you’ll find this helpful! Happy coding ✨ 🖥️ 🙌

    Marked as helpful
    1
  • filecc•470
    @fileccPosted about 2 years ago

    🌈 Hi and congratulations for completing a new challenge on Frontend Mentor!

    The 'some spacing' under the img is because of how image are displayed in HTML. Because of the fact that they are 'inline' element . Try writing in your css

    img {
    display: block;
}

    and tell me if it's all solved.

    I hope you'll find this helpful 👍 and happy coding! 🥰😁

    1
  • filecc•470
    @fileccPosted about 2 years ago

    🌈 Hi and congratulations for completing a new challenge on Frontend Mentor!

    I take a look at your code, here's something you could fix, if you want:

    1. Make sure that the paths for the CSS and image files are correct. If the files are located in a different folder, you may need to adjust the paths accordingly. I cannnot see the folder 'images' in your code, for the images.
    2. Check that the names of the CSS and image files match the names used in the code. The link in the HTML should be changed to <link rel="stylesheet" href="./style.css" />.

    I hope you'll find this helpful 👍 and happy coding! 🥰😁

    Marked as helpful
    0
  • filecc•470
    @fileccPosted about 2 years ago

    🌈 Hi and congratulations for completing a new challenge on Frontend Mentor!

    I take a look at your code, here's something you could fix, if you want:

    1. HTML heading should always increase one by one, on line 22 in your HTML file you use, correctly an H1, but after that on your line 35 you use an H4, instead you should write <h2>Rated 5 Stars in Reviews</h2>. If you need to decrease the size of the text, consider to target the <h2>elements in your CSS and writing something like h2 { font-size: 'some size of your choice'};
    2. You had write your path to the images with a backslash \, avoid doing this, use a pattern like this instead ```<img class="estrela" src="./images/icon-star.svg" alt="">````. It's more safe and it's correctly typed.
    3. Your <section> that start at line 60 lack of a heading. Consider put a hidden <h2>element that can described the section content, without being actually displayed.

    Hoperyou'll find this helpful 👍 and happy coding! 🥰😁

    Marked as helpful
    1
  • filecc•470
    @fileccPosted about 2 years ago

    Ehy, hi and congratulations for completing this challenge!

    It looks really great! My suggestion for the SVG color, via css are:

    • this codepen that need a color input in HEX and can produce a filter property for you, so you don’t need to insert the SVG in you html, you can simply import as an image and then target it in you cas with the property the codepen gave you.

    Hope it helps!!

    Cheers Fil :)

    0
  • filecc•470
    @fileccPosted over 2 years ago

    Benvenuto e complimenti per aver completato la tua prima challenge! 🎉 Ho notato che hai scritto P E R F U M E per ottenere l’effetto indicato nella challenge. Prova invece ad usare:

    
.perfume{
    font-size: 15px;
    color: hsl(228, 12%, 48%);
    text-transform: uppercase; // trasforma tutto il testo in maiuscolo
    letter-spacing: 20px; // aggiunge spazio tra le lettere
}

    e modificare ovviamente

    
<p class="perfume">perfume</p>

    avanti tutta 😁

    Marked as helpful
    0
  • filecc•470
    @fileccPosted over 2 years ago

    Hello Oak Soe and congratulations for completing this challenge! 🎉 If you don't know it yet, you should definitely check out Bootstrap and its classes, especially this page: https://getbootstrap.com/docs/5.2/utilities/flex/#enable-flex-behaviors

    Using flexbox, grid and card you will realize how easy it is to achieve the desired result. Keep going!

    0