I think this might be helpful for those who are doing mistakes watching the video. If there is any problem or any issue with code sharing please feel free to knock me [email protected]

Code .js

/*==================== QUALIFICATION TABS ====================*/
const tabs = document.querySelectorAll(['data-target']),
      tabContents = document.querySelectorAll(['data-content'])

tabs.forEach(tab =>{
    tab.addEventListener('click', () =>{
        const target = document.querySelector(tab.dataset.target)
        
        tabContents.forEach(tabContent =>{
            tabContent.classList.remove('qualification__active')
        })
        target.classList.add('qualification__active')

        tabs.forEach(tab =>{
            tab.classList.remove('qualification__active')
        })
        tab.classList.add('qualification__active')
    })
})

this is the html

<div class="qualification__tabs">
                    <div class="qualification__button button--flex qualification__active" data-target="#education">
                        <i class="uil uil-graduation-cap qualification__icon"></i>
                        Education
                    </div>

                    <div class="qualification__button button--flex" data-target="#work">
                        <i class="uil uil-briefcase-alt qualification__icon"></i>
                        Work
                    </div>
                </div>

Same things as on video but when I try on browser doesn't click.

Here is the icon code <header class="header" id="header"> <nav class="nav container"> <a href="#" class="nav_logo"> Liza </a> <div class="nav_menu" id="nav_menu"> <ul class ="nav_list grid"> <li class ="nav_item"> <a href="#home" class="nav_link"> <i class="uil uil-estate"></i> Home </a> </li> <li class ="nav_item"> <a href="#about" class="nav_link"> <i class="uil uil-user"></i> About me </a> </li> <li class ="nav_item"> <a href="#Resume" class="nav_link"> <i class="uil uil-file-alt"></i> Resume and Skills </a> </li> <li class ="nav_item"> <a href="#portfolio" class="nav_link"> <i class="uil uil-scenery"></i> Portfolio </a> </li> <li class ="nav_item"> <a href="#works" class="nav_link"> <i class="uil uil-paint-tool"></i> Works </a> </li> <li class ="nav_item"> <a href="#contact" class="nav_link"> <i class="uil uil-message"></i> Contact Me </a> </li> </ul> </div> </nav> </header> In the images it shows what yours looks like vs mine

Hi! I was wondering how do you make this thumpnail for your github projects? I would love to know how you did it so I can do this in my future products! :)

const navMenu = document.getElementById('nav-menu'), navToggle = document.getElementById('nav-toggle'), navClose = document.getElementById('nav-close'),

/===== MENU SHOW =====/ /* Validate if constant exists */ if (navToggle){ navToggle.addEventListener('click', () =>{ navMenu.classList.add('show-menu') }) }