Skip to content
OverviewSolutions
55
Comments
5
P

Dong Hee

@DHBLee1,320 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Marzia Jalili•7,070
    @MarziaJalili
    What are you most proud of, and what would you do differently next time?

    Man, I learned a lot this time!

    Here you go with the list:

    1️⃣ npm package called React-Icons for the icons

    2️⃣ Another package called React-Use for the Navbar

    3️⃣ React hook called useRef

    4️⃣ New implementation for GSAP

    5️⃣ The most surprising one, a self-closing <div /> and <span />

    6️⃣ Some new Tailwind CSS classes

    What challenges did you encounter, and how did you overcome them?

    Some overflow issues, fixed by container, mx-auto, grid and so on.

    😎😎😎

    What specific areas of your project would you like help with?

    Sometimes if the videos don't get loaded properly, you gotta either wait a little or refresh the page.

    Make sure to check out the following:

    1️⃣ The video change when clicking the center of the Hero Section

    2️⃣ The audio on the Navbar

    😁😁😁

    Zentry Gaming Platform | React JS ⚛️ & Tailwind CSS 🎨 & GSAP 🚀

    7
    P
    Dong Hee•1,320
    @DHBLee

    Wow 👏👏👏👏 The animation looks nice, haven't tried doing that kind of animations. GSAP..... interesting🤔

  • Marzia Jalili•7,070
    @MarziaJalili
    What are you most proud of, and what would you do differently next time?

    This is the second version of the project in which I added some sort of animation to the background. Kind of proud of using the calc function, man! It's doing magic, for real!

    😎😎😎

    What challenges did you encounter, and how did you overcome them?

    🤔 At first, the web had some overflow issues, but I managed to use the position property to handle it.

    What specific areas of your project would you like help with?

    I would love to know how the web looks on different devices. And, if there's anything I can improve feel free to mention.

    🫡🫡🫡

    Social Links Profile | With Some Great Animations

    7
    P
    Dong Hee•1,320
    @DHBLee

    Nice Visuals👌👌

  • moth.dev•90
    @mothDebugged
    What are you most proud of, and what would you do differently next time?

    I'm proud that it functions correctly, but I want to learn more efficent ways of writing code, and also styling the transition to look nicer.

    What specific areas of your project would you like help with?

    I spent a long time searching how to assign functions to multiple individual elements with no luck so the code is very messy and unoptimised, any advice on the JavaScript would be greatly appreciated!

    FAQ accordion

    1
    P
    Dong Hee•1,320
    @DHBLee

    Hello! I guess instead of using the onClick=() feature of html, you can instead group all the buttons into one class like .on-click. Aditionally, we can use the parentElement to avoid using different class names for your plus/minus icons and js-answer.

    So this is an example look of your HTML file,

     <div class="faq-question-answer">
          <div class="faq-title">
            <h2> What is Frontend mentor, and how will it help me? </h2> 
            <img class="plus-icon" src="assets/images/icon-plus.svg" alt="Plus icon">
            <img class="hidden minus-icon" src="assets/images/icon-minus.svg" alt="Minus icon">
          </div>

          <p class="faq-answer js-answer hidden"> 
            Frontend Mentor offers realistic coding challenges to help developers improve their 
            frontend coding skills with projects in HTML, CSS, and JavaScript. It's suitable for 
            all levels and ideal for portfolio building.
          </p>
        </div>

        <hr>

 <div class="faq-question-answer"> 
          <div class="faq-title">
            <h2> Is Frontend Mentor free? </h2> 
            <img class="plus-icon" src="assets/images/icon-plus.svg" alt="Plus icon">
            <img class="hidden minus-icon" src="assets/images/icon-minus.svg" alt="Minus icon">
          </div>

          <p class="faq-answer js-answer hidden">
            Yes, Frontend Mentor offers both free and premium coding challenges, with the free 
            option providing access to a range of projects suitable for all skill levels. 
          </p>
</div>

    Then on your script.js, you can do something like this

    const btns = document.querySelectorAll('.on-click');

btns.forEach(btn => {
    btn.addEventListener('click', () => {
        const parentElement = btn.parentElement;
        toggleAnswer(parentElement);
        
    });
})


function toggleAnswer(parentElement) {
    const plusIcon = parentElement.querySelector('.plus-icon');
    const minusIcon = parentElement.querySelector('.plus-icon');
    const answer = parentElement.querySelector('.js-answer');
    
    if(!answer.classList.contains('hidden')) {
        answer.classList.toggle('hidden');
        plusIcon.classList.toggle('hidden');
        minusIcon.classList.toggle('hidden');
    }
}

    So what happens is that we are using querySelectorAll to get all class called on-click, then we use forEach to get each btn and insert an addEventListener to it. Once click, we are getting the parent element of the btn by using the parentElement feature which is faq-question-answer. In this way, we don't need to use querySelectorAll for the plus/minus/js-answer class because we are already within the scope of the specific class hierarchy.

    I also noticed that you used add and remove for your plus and minus icons, but you can also use toggle because they both start at opposite states, so toggling the minus and plus icons will go from (hidden to visible) and (visible to hidden) respectively.

    This is one of the ways to effectively reduce redundant codes on your project, but there are definitely better ways to tackle this function more efficiently. I hope it helps :)

    Marked as helpful
  • RoelofWobben•20
    @RoelofWobben
    What are you most proud of, and what would you do differently next time?

    I would different that some things are gone in my mind. So I would take a beginners course in css to get into it.

    What challenges did you encounter, and how did you overcome them?

    no real challenges

    What specific areas of your project would you like help with?

    is this site good responsive ? Did I use semantic html well ? Are there other things I could improve ?

    Responsive blog card

    2
    P
    Dong Hee•1,320
    @DHBLee

    Hello! Your website is 👌 Looks very identical to the challenge. Your code looks good so far, had similar class names for clarity, used flexbox and rem for easier CSS styling. I noticed that you did all the padding individually for your .card-tag p, it'd be better to use padding: 10 20; instead. I also saw your semantic elements being nested inside a div, but I think it'll be fine to only use h tags or p tags directly because they're the only ones inside a div. Usually you'd use a div if you want to target two or more elements to have a different style from its whole parent container. Nonetheless, Strong start so far💪

  • BeshoyNFarag•30
    @BeshoyNFarag
    What are you most proud of, and what would you do differently next time?

    First things first this is my first webpage. I would say that i'm proud of the last section of nutrition, i tried first to use a table for it, however; it did not work, so i give it a nap time. After that i remembered my hr customed inline tag, i used that to make the lines, and used a flex-box display and justify content property to custom it.

    What challenges did you encounter, and how did you overcome them?

    when make my webpage responsive, the height was a problem, the list decoration was as well not easy, the H2 was pretty hard to handle.

    What specific areas of your project would you like help with?

    i feel like my code is not clean at all, like i have a lot of inline css styling in my html file. also the last section responsiviness is not the best.

    First-Responsive Web Page Using Flex-Box

    1
    P
    Dong Hee•1,320
    @DHBLee

    Hello! I browsed through your codes and I noticed that you are using percentage for your margin and padding. I advise to use px or em/rem for this. Normally, you don't need to make the margin and padding be responsive based on the width/height size, only the texts, images, containers, and other stuff. It'll be easier to control the overall look of your website if you decrease the elements that changes when the screen size increases.

    Also, in this challenge, you can see that the information below the image have the same padding, so it'd be easier to set the padding of your parent container instead of putting padding/margin to your individual elements.

    Nevertheless, It's a great start to your front-end journey💪 goodluck!

    Marked as helpful