dj-project

Challenge: DJ-Project

Challenge Parameters	Challenge Details
Repository	`dj-project`
Challenge type	`Consolidation`
Duration	`6 days`
Deadline	`October 13th 2021, 5:00 pm`
Deployment method	`GitHub pages`
Group composition	`Team of 3 or 2`
Form	`[Google Form]()`

Mission objectives

Consolidate your knowledges in GIT, HTML, CSS (SASS), JS.
Respect the given design and deliver pixel perfect content.
Work in a team.
Respect the given deadline.
Divide work in smaller parts.

Mission

It's a beautiful Wednesday morning, you take a sip of your coffee while scrolling through a list of job opportunities. Suddenly, your phone rings, you don't hesitate and pick up, Hello this is BeCode's bravest ones, how can I help you? on other side, a young deep voice can be heard - Hello, my name is DJ Angerone, I've heard that you and your team make professionally and quick websites for clients, I was hoping you could do the same for me.

Over the last year, he has been releasing many new albums and became quite famous. As of now, people are starting to call him more and more. But he realized he never reached the people online, he needed something to present him self in the online world, a website, he would use it to present himself and his music, show pictures and the dates and locations where he plans to perform. He already reached out to a designer, and now he has a logo and an overview of his dream website. Your goal is to code this site, respecting the designer's mock-up, within a week.

The purpose of this website is to inform it's future visitors about the DJ's new releases and events. In the future he wants to open a ticket shop.

About the design

All the design are located inside this repository. The tablet portrait design is 768px width, and the mobile is 320px. You will have to manage the responsiveness how you think is the best.

Alfred created the design, but he wants you to design some nice hover effects or animations as well. You will have to use your creativity to propose the nicest effects.

Details :

On tablet and mobile views, you'll notice there is two menus: the hamburger menu links to the pages and the other one links to the social medias.
Right under the main title, it should play a music, don't just do a decoration.
When you hover an image, in the gallery overview on the Homepage, and on the Gallery page, it should display a button like this:
In your-resources folder, you'll see an element called favicon.ico. Search what a favicon is and how to add it to your website.
Change dates from 2019 to 2022.

Instructions

Your mission is to build the front-end integration of the website.

Observe the design carefully, you need to follow it strictly!
The website has to be responsive. (Learn about media-queries)
To help you to set up a naming convention for your classes in CSS we recommend to use the BEM methodology.
The website has to respond to the w3c validator.
Pay attention to your SEO (The Lighthouse extension can help you).
You must use Sass.
Think about some nice CSS effects/animations.
Make sure the site is BUG FREE.
Respect the deadline.
Everyone in the team must code.

JS effects

In tablet and mobile mode, there must be a functional hamburger menu.
Hide the menu when scroll down in the page and display it when scroll up. Take example on this website
Use a slighty parallax effect for the big top images (Example).
Use a scroll to top button at the right bottom of the pages.
The countdown of the homepage must match the date and time of the next gig.

For GitHub

Write a good README
Mention a description and the website URL on the top of the repository

Tips and Tricks

Take your time to prepare. (Make prototypes, gather the correct content, pictures,...).
Think about the layout first.
Use pen and paper, draw, write, think.. It will save you some time.
Work step by step. First start with HTML then go to CSS and then make the effects. (Precise work always should be done last.)
Divide your work.
Use Trello or GitHub Projects to organize your team.
Create naming conventions that everyone must respect.
Make everyday at least one meeting, talk about what you did so far, where do you struggle, the objective of the day.
Pull,push and merge regularly.
Be aware of your time, don't stick to an issue too long, take it in account and fix it at the end.

Style Guide

Font : Poppins

Colours :

Purple: #8121e0
Dark grey: #282828
Grey: #444444

Images and Icons : You will notice that not all images and icons have been included (for example, the purple boxes means there is an icon missing). It is up to you to find a fitting image with a good resolution.

Nice locations to find royal-free images / icons:

Images

Unsplash
Pixabay
Pexels

Icons

Ionicons
Flaticons
Font Awesome

aurore-ry/dj-project