I Programmed My First ACTUAL Website. [Concepts I Learnt]

[@DevelopingGuide]

I forgot to add this part in the video 😅:
This is where I learned to remove the navigation bar on scroll!
th-cam.com/video/-9aDPbKFwFQ/w-d-xo.htmlsi=Nan0mTqFWhE31WqA

[@DevelopingGuide]

Nav Bar Full Code
Nav Bar HTML:






About
Journey
Advice





About
Journey
Advice



Nav Bar CSS:
#navBar{
height: 80px;
box-shadow: 0px 2px 10px gray;
background-color: transparent;
z-index: 999px;
position: fixed;
width: 100%;
max-width: 100%;
backdrop-filter: blur(1px);
transition: 0.4s ease transform;
}
.navItems{
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 5rem;
padding-right: 5rem;
}
.navBtns ul{
width: 30vw;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.btnsList{
list-style-type: none;
}
.btnsList a{
text-decoration: none;
color: white;
font-size: 1rem;
transition: all 0.3s ease-in;
}
.btnsList a:hover{
color: grey;
}
.btnsList a:active{
color: darkgray
}
.fa-house{
color: white;
transition: all 0.3s;
}
.fa-house:hover{
color: gray
}
.fa-house:active{
color: darkgray
}
.selected a{
color: darkgray;
}
.fa-bars{
color: rgba(255, 255, 255, 0.573);
cursor: pointer;
}
.fa-bars .fa-xl :hover{
color: white;

}
.dropBar{
display: none;
position: absolute;
right: 0px;
top: 80px;
width: 100vw;
background-color: rgba(255, 255, 255, 0.308);
height: calc(100vh - 80px);
}
.dropBar ul{
margin-top: 1rem;
}
.dropBar ul li{
list-style-type: none;
margin-bottom: 1rem;
border-left: 1px white solid;
padding-left: 1rem;
width: 100vw;
}
.dropBar ul li a{
width: 100;
text-decoration: none;
color: white;
font-size: 1.5rem;
}
Nav Bar JS:
navBar = document.getElementById('navBar')
window.addEventListener('scroll', function(){
const currentScrollY = window.scrollY

if (currentScrollY > lastScrollY){
navBar.classList.add("hidden")
}
else{
navBar.classList.remove("hidden")
}

lastScrollY = currentScrollY
})
let count = 0
const dropBar = document.querySelector('.dropBar')
function showNavbar(){
dropBar.style.display = "flex"
count += 1
if (count % 2 != 0){
dropBar.style.display = "flex"
}
else{
dropBar.style.display = "none"
}
}

[@YaraSafrão]

I’m about to make the same project. Now I’m learning JavaScript

[@DevelopingGuide]

Good Luck! (and rmb that google/ is your bestf 😅😅)