Skip to content

Elevate-Lab/DSC-Session

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 📖


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.

About

This repo hosts the code for the DSC Session

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published