Introduction

Welcome Guys & Gals. In the DSC Session, we will be providing you with a hands-on experience, on how to make a simple webpage from scratch. The webpage would be consisting of

• HTML (Hyper Text Mark-up Language)
• CSS (Cascading Style Sheet)
• JS (JavaScript)

Live Demo

Github Pages

Files & Folders Overview 👓

• CSS Folder - It consists of all the stylesheets, that is the CSS files. There are 3 files, one for resetting the styles, that is base.css, one for all the animations, that is animations.css, and the last styles.css, which contains the major code for styling purposes.
• IMG Folder - It consists of the images, that we will be using in the webpage.
• Song - It consists of the song, that we will be putting as the background song.
• README.md - It is the file, which is responsible for the thing you are currently reading.
• index.html - It is the main file, which links all the files, and consists of the HTML code
• index.js - It is the file which consists of the JS code, utilized by the webpage

Walkthrough 🚶

• This is a simple webpage based on just 3 technologies as mentioned in the Introduction.
• The webpage contains a lot of Visual Content, such as Images, and Animations. You can read more about CSS Animations, here
• There is even an audio track, which you can play, clicking anywhere on the webpage. You can read more about how to include an audio element, here.
• I have made use of CSS Grids, to make the different sections such as that of Songs, Albums, Artists, etc. You can read more about CSS Grids, here.
• There is a simple Navbar, which is initially transparent and upon Scrolling, it will darken itself.

Resources 📖

• Mozilla Developers Network(MDN) - For HTML, CSS and JS reference
• Animate on Scroll(AOS) - For animating the Objects
• Google Fonts - For selecting the different font families
• UI Gradients - For picking up different gradient colors
• Image Splitter - For splitting up a single image into pieces

Task 🎯

• Your mission, should you choose to Accept it, is to make a similar webpage, for the hobby, that intrigues the most.
• Before proceeding, let me again tell you what I meant by the term Similar. It means to Go Wild, at least here 😂.
• Excite us, with your own Webpage, based on your personal Hobby.
• Go crazy with Themes, such as Online Games, Art, Fashion, Photography and what not, just something apart from Studies definitely 🥳
• So we, at the DSC are waiting patiently, for you to come up with your own unique idea. And if we like your version, then we will feature you on all the Social Handles of DSC.

Submission Guidelines

• In the repo you will find a folder, named as Ideas. In that folder, you need to make a JSON file with it's name as your Github Username.
• You will find a sample JSON file, in that folder. Adhere to that format.
• Make a PR, including that JSON file, and MAKE SURE to add the link of your Live Demo, in the Description of your PR.