Skip to content
OverviewSolutions
26
Comments
7
filecc
@filecc

All comments

  • Nelvonba•10
    @NelvonbaSubmitted over 1 year ago

    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 ?

    There is another solution to "bind" all this with only one Element instead of writing in each CSS selector?

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

    Responsive QR Challenge code using CSS

    3
    filecc•470
    @fileccPosted over 1 year 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 over 1 year 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
  • Md Sohail Ali•150
    @mdsohailaliSubmitted over 1 year ago

    Hello Everyone 👋

    This is my solution for the 3 column preview card component.

    I have completed this challenge by using HTML and CSS

    Feel free to leave any feedback and help me to improve my solution. See you guys later in next challenge.

    Ill be happy to hear any feedback and advice!

    3column-preview-card-component

    1
    filecc•470
    @fileccPosted over 1 year 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 over 1 year 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
  • Tanguy•140
    @OignonFugaceSubmitted over 1 year ago

    Hi everyone :)

    I am amazed at how varied all these challenges can be, hence pretty much always making us work on different and new things. On completing this challenge I would specifically like to thank Frontend Mentor for the endless opportunity to practice, train and get better.

    More context on the github repo.

    My questions are:

    • On the subject of modifying the color of svg elements without having to copy paste the whole svg code into html markup in order to access the fill property with css, that I find cumbersome : do you have any resources on the subject that could enlighten me.
    • Also, I did get through quickly on the matter of styling the background image on mobile view and did not quite matched the expected design with my use of background-blend-mode property. Any advice on that part?

    Thanks!

    Pod landing page [harder than I thought!][html/css form validation]

    2
    filecc•470
    @fileccPosted over 1 year 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 about 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 about 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