Discord Rebuild

The purpose of this assignment was to learn how to code a fully responsive website with semantic HTML by rebuilding two pages of an existing website.

I chose to rebuild the Discord website, as this website had some interesting features like animation and complex responsive elements.

SEE LIVE SEE CODE

image of a laptop with the discord website opened

Stylized image of a Discord server with multiple channels for studying, games, cooking, and pet photos.

Responsiveness

This project was coded with responsiveness in mind, that's why I started with mobile first. If everything fits on a small screen, it definetly fits on a larger size screen. I used css grid in combination with media-query's to make the website look good on any screen size.

Stylized image showing friends hanging out in multiple voice channels.

Semantic code

Prior to this project, I was mainly using div's and a lot of classes. Now I've learned how to use pseudo selectors like nth:type-of and also semantic code like <section>, <article> and <nav>.

Stylized image showing friends in a server organized into roles for Coach, Student Lead, and Animal Crossing.

Javascript

I used JavaScript to make a working hamburger menu. I also used JS to animate the elements on the homepage to slide up as the user scroll's down. This seemed like a big challenge at first but eventually I've learned a lot in the process of making it work.

THE RESULT

These are two screenshots of the pages I've build on a large screensize

SEE PREVIOUS SEE NEXT PROJECT

Shape of a wave that ends the previous section