DEV Community

Lens
Lens

Posted on

Remaking my first website after a year of web dev🎉

Introduction

On January 1st last year I made my first website project to see how much I've grown with 1 week of web development. It didn't look pretty, but I knew I was making good progress! It's been a year, and after learning many skills, I felt like remaking it today to show how much I've grown. I went a bit lazy on the last three sections, but I still think it looks good! If you want to see how I made it scroll down for more.

Before

After!



Nav menu

The nav menu only took a minute or two to make. First, I made a nav element with paragraph elements as its children. Then with CSS, I gave it a display property of flex and gave the children a gap of 10%. Finally, I centered the children's elements width align-items: center and justify-content: center. I also gave the children a hover animation where they go bold.

HTML

<nav>
      <p>Home</p>
      <p>Cafe</p>
      <p>About</p>
      <p>Blog</p>
    </nav>
Enter fullscreen mode Exit fullscreen mode

CSS

nav {
    display: flex;
    gap: 10%;
    align-items: center;
    justify-content: flex-end;
    background-color: #e9c46a;
}

/*Hover animation*/
nav > p:hover {
  font-weight: bold;
  cursor: pointer
}
Enter fullscreen mode Exit fullscreen mode

Intro section

I centered the text using flex and I used the transform property to place the images at specific places with specific rotations. I also gave them a keyframes transition where their opacity goes from 0 to 1 (meaning 100%).

CSS

header {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9c46a;
    height: 50rem;
}

/*Sizing the images*/
header > img {
    width: 100px;
    position: absolute;
    z-index: 0;
    animation: reveal 1s;
}

/*Starting animation*/
@keyframes reveal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/*Adding their locations*/
header > img:nth-child(6) 
    transform: translate(-400px, 200px) rotate(30deg);
}
 header > img:nth-child(7) {
    transform: translateY(-300px);
}
 header > img:nth-child(3) {
    transform: translate(400px, 200px) rotate(-30deg);
}
 header > img:nth-child(4) {
    transform: translate(-400px, -200px) rotate(-30deg);
}
 header > img:nth-child(5) {
    transform: translate(400px, -200px) rotate(30deg);
}
Enter fullscreen mode Exit fullscreen mode

Info section

I gave the section flex with a flex-direction of column. Then I made a div under the heading that is a flex row with each div in it having a gap of 30px. I used icons from ion-icons for each statistic. Lastly, I centered the icon and the text in each of the divs to make sure they look nice.

CSS

/*Aligning the headers*/
info > div:nth-child(1) {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*Aligning each stat*/
.info > div:nth-child(2) {
    display: flex;
    align-items: center;
    gap: 30px;
}

/*Aligning the content in the stats*/
 .info > div:nth-child(2) > div {
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    gap: 10px;
    text-align: center;
}

/*Sizing the icons*/
.info > div ion-icon {
    font-size: 40px;
}
Enter fullscreen mode Exit fullscreen mode

Resturants section

To me, this is the best out of all of the sections. First I aligned all the content in the section by giving it a display of grid then setting place-items to center. Next I div grid with six images where grid-template-columns is set to repeat(3, 1fr) meaning there are 3 images on every vertical part of the div. I gave each of the images a class of hidden, and I'll tell why in the paragraph below.


Using JavaScript, I used the Intersection Observer API to make it so that if the observed element intersects the viewport, it'll have the class show, but if not, it won't have that class. I then made the hidden class the thing being observed. So what does this do? The hidden class makes it so an element has 0 opacity and is all the way to the left, but the show class makes it so an element is back to where it was and has full opacity. So now each observed hidden element that intersects the viewport will go back to normal, now if we give the hidden class a transition it'll make a nice transition animation that'll happen every time. for yourself!

CSS

/*Centering the content*/
.cafe {
    display: grid;
    place-items: center;
    background-color: #ffcdb2;
}

/*Sizing the images*/
.cafe > div > img {
   width: 200px;
   border-radius: 5px;
   cursor: pointer;
}

/*Image grid*/
.food-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/*Giving each image different transition times
(for fun)
.cafe > div > img:nth-child(1){
    transition: 600ms;
 }
.cafe > div > img:nth-child(2){
    transition: 600ms;
 }
.cafe > div > img:nth-child(3){
    transition: 640ms;
 }
.cafe > div > img:nth-child(4){
    transition: 680ms;
 }
.cafe > div > img:nth-child(5){
    transition: 700ms;
 }
.cafe > div > img:nth-child(6){
    transition: 740ms;
 }

Enter fullscreen mode Exit fullscreen mode

JS

var hidden = document.querySelectorAll('.hidden');


const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add("show");
      } else {
        entry.target.classList.remove("show");
      }
    });
  });

//to observe the hidden class
hidden.forEach((el) => observer.observe(el));
Enter fullscreen mode Exit fullscreen mode

Music Playlist

The music section is just a music playlist that I made to study and code, even though sometimes I get distracted because of the nice music lol.


Conclusion

It's been a great year for my progress in web development, but this year I hope to go beyond that by learning computer science, backend development, and much more. I hope you can complete your goals this year too! So happy new Year!

Top comments (0)