/discord-ui-clone

Codedamn project discord UI clone

Primary LanguageHTML

Codedamn Projects - Discord UI Clone

main image

Hello developer!

This is one of the many projects available on codedamn to reinforce your learning by building. If you want to become a frontend developer and learn by practicing, feel free to attempt this challenge. Feel free to check out the codedamn frontend web developer learning path to learn more about how to become an awesome frontend developer.

Project Overview

NOTE : For mobile views look at the /designs folder

Landing Pages

You have to try and recreate the discord login page all the assets are present at the /assets folder. You don't need to scout for assets anywhere else.

The full landing page can be seen at this link or at the /designs/discord-clone (landing-page) desktop.png

The landing page should include the header and the footer as well

Login Page

The login page should have the URL of /login

slash-login

Register Page

The register page should have the URL of /register

slash-register

Dashboard

The dashboard should be at URL /dashboard

dashboard

Server

The server should be shown /server/{name}.

server

Instructions

Your challenge is to build out this project and get it looking as close to the design as possible.

You can use any tools or technologies you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

Your project should:

  • Be responsive for desktop and mobile phones
  • Have minimum functionalities and effects working

Want some support on the challenge? Join our discord community and ask questions in the #general channel.

There is no limit you can go beyond the mentioned criteria and create additional functionalities

Where to find everything

Your task is to build out the project as per the provided screenshots. You will find both a mobile and a desktop version of the design.

The designs are in image formats can be found in /designs.

You will find all the required assets in the /assets folder. These include images, fonts, etc.

There is also a style-guide.html file containing the information you'll need, such as color palette and font names. Make sure to open this in the browser to see the contents.

Send feedback!

We love receiving feedback! We're always looking to improve our challenges and our platform. So if you have anything you'd like to mention, please visit codedamn feedback page