Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All solutions

  • Submitted

    Interactive rating component challenge - Solution using Bootstrap

    • HTML
    • CSS
    • JS

    0

    Hey guys!

    After a few weeks working on other projects, I'm back on Frontend Mentor for my first challenge including some JavaScript!!! I've been learning how to use Bootstrap 5, Sass and jQuery lately so I told myself that building a Frontend Mentor project would be a great way to put into practice my new skills!

    I definitely LOVE working with those tools, even if I'm far from being comfortable with them for now! It's actually the first project I've coded with them without following a tutorial. I had so much fun and I'm so proud of the result because... it actually works and that amazes me!

    I have a question for people who like jQuery as much as I do but who have more experience then me: what do you think about my few lines of code?! Is it decent? Is there another (better or more efficient) way to achieve the same result? Here is the snippet if you don't feel like going into my repository!

    $(document).ready(function() {

    let num = "";

    $(".box__rate-btn").click(function() {
        $(".box__rate-btn").removeClass("active");
        $(this).addClass("active");
        num = $(this).text();
    });

    $(".box__btn").click(function() {
        $(".box__rating-message").text("You selected " + num + " out of 5");
        $(".attribution").show(500);
        $(".state1").hide();
        $(".state2").show();
    });

});

    Happy coding and... happy Halloween if you don't see me here before the end of the month! Cheers :)

  • Submitted

    Stats preview card component challenge - Solution using Flexbox

    • HTML
    • CSS

    1

    Hey guys!

    I'm glad to be back! This time, I added an additional constraint to the challenge: building the project in less than 4 hours. It was a little tricky and I haven't had the time to do everything exactly as I wanted but... I did it!

    I chose to give me a time limit because I noticed that I can easily spend hours on details just because I find something not good enough and, it can be a problem! That's why today, my priority was to finish the project on time and not to absolutely nail it!

    Except that, I have a question: what would you use to create the image purple overlay?

    The image that was given to us was black and white so we needed to add the color. I personally used the pseudo-element ::after but I think there are many ways to do so and I would like to know is one better than the others.

    Thanks and have fun while coding :)!

  • Submitted

    Order summary component challenge - Solution using float ONLY

    • HTML
    • CSS

    1

    Hello everyone!

    For this project, I decided to challenge myself with the rule of building this order summary WITHOUT using CSS grid or Flexbox! That’s what I did and instead, I only used CSS float. It was neither the easiest nor the fastest way to build the project but I'm glad succeeded!

    I have a question about CSS classes. I understand now that it's always better to assign a class to an HTML element that we wanna style, even if we won't reuse it later. However I was wondering, are they specific rules or at least good practices when creating those classes? I have the feeling that there are so many different options, it's hard to choose!

    Is it better to group elements by display, position, color, font...? Is there a priority?

    Thanks a lot and... happy coding! Have fun :)

  • Submitted

    NFT preview card component challenge - Solution using CSS Grid

    • HTML
    • CSS

    1

    Hi guys!

    I have a question about best practices. I know it's usually recommended to use a CSS class selector .myclass instead of an id selector #myelement or an element selector div.

    However, I was wondering, is it better to create a class even if we won't reuse it? For example:

    <body>
  <section>
    <p class="myparagraph"></p>
  </section>
  <section></section>
  <section></section>
  <section></section>
</body>

    If I want to style the paragraph, is it best practice to delete its class in the html and do:

    p {
  color: blue;
}

    OR this:

    section p {
  color: blue;
}

    OR do I keep the class of the paragraph (even if it won't be reused) and do:

    .myparagraph {
  color: blue;
}

    Thanks and happy coding :)

  • Submitted

    Product preview card component challenge - Solution using CSS Grid

    • HTML
    • CSS

    0

    Hi there!

    I had a lot of fun while building this project using CSS grid!

    It was the first time I was using SVG and I've learned that there are several different ways to use that kind of image. I was wondering:

    • What's the best practice to use SVG?
    • Is it better to include SVG images in the CSS or HTML?
    • If the answer is HTML, what tag should I use (<svg></svg> or <object></object> or <iframe></iframe> or another one)?

    Happy coding everyone :)

  • Submitted

    QR Code component challenge - Solution using Flexbox

    • HTML
    • CSS

    2

    Hi there!

    Thanks for having a look to my solution :)

    As I explained on the continuous development section of the README.md file of my repository, I wish I knew how to make my bottom page attribution paragraph stay visible even after unhover. I mean, it's hidden at the beginning and it becomes visible when the user hovers over it, that's good. However when the user unhovers, it disappears, that's the problem. I'd like it to stay visible no matter what the user is doing after the first hover.

    I haven't managed to find a CSS only solution. I've read that it can be done "easily" with JavaScript but I have only a very basic understanding of it as I've only started to learn about it a few days ago on FreeCodeCamp. If someone knows how to do and could explain me step by step, it would be much appreciated!

    Happy coding!