Git Product home page Git Product logo

dsc-session's Introduction

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.

dsc-session's People

Contributors

elemento24 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.