Music Player Project using HTML CSS And JavaScript ||
Learn How To Make A Music Player Using HTML CSS And JavaScript
#htmlandcss #javascript #webdevelopmentprojects #javascript #scalive
• Fonts & Icons In CSS | How To Use Fon...
Code:-
https://github.com/scabhopal/Music-Pl...
• Web Development Series
Slides:
https://1drv.ms/b/s!AhhEH8Eya0cIqMAxw...
Font-Awesome:-
link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/lib..."
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="crossorigin="anonymous"
referrerpolicy="no-referrer"
-------------------------------------------------------
00:00 - Intro
00:47 - Overview
01:36 - Ph -1 : Handling HTML Part
04:02 - Adding Font-Awesome Library link
04:52 - Adding div(container & music player)
06:40 - Adding Heart & Plus Icon In Nav Bar
08:39 - Adding Text(Now Playing) b/w Heart & Plus Icons
09:34 - Adding Song , song-name , song-image , artist-name
13:37 - Adding Song -Slider Feature
14:35 - Adding Song Play/Pause , Backward & Forward Icons
17:17 - Ph -2: Handling CSS Part
19:37 - Styling Container div(Bg img & Size)
22:25 - Styling inner div(Music-Player)
26:13 - Styling Nav-Bar Section
29:34 - Styling song-name, song-image, artist-name
35:14 - Styling Song -Slider Feature
39:14 - Styling Song Play/Pause, Backward & Forward Feature
42:23 - How To Enlarge Play/Pause Icon?
44:17 - Ph-3 : JavaScript Part Start
46:32 - Progress-Bar With Song Duration
48:46 - Play/Pause While Click On It
53:40 - Progress Of Slider With Song Progress
57:31 - End
-------------------------------------------------------
📌 𝐑𝐄𝐂𝐎𝐌𝐌𝐄𝐍𝐃𝐄𝐃 Playlist 𝐅𝐎𝐑 𝐘𝐎𝐔 -
OOPs Java Series • Happy Republic day | OOPs Announcemen...
Arrays • DSA Placement Series 🔥 || #faang #cod...
2D Arrays • Future Plans Announcement | DSA Place...
ArrayList • ArrayList Announcement Video 🔥
String Handling • Thank You For Your Support | DSA Plac...
Searching & Sorting • Searching Sorting Announcement 🔥
Complexity Analisis • Complexity Analysis | Announcement Vi...
-------------------------------------------------------
📌 SCA 𝐒𝐎𝐂𝐈𝐀𝐋 𝐌𝐄𝐃𝐈𝐀 -
To gain expertise in other languages, check out our website:-
https://scalive.in/
To watch more videos like this, subscribe to our channel.
SCALive:-
/ sharmacomputeracademybhopal
Follow us on Facebook:-
/ sharmacomputeracademy
Follow us on Instagram:-
/ scalive.in
Email:- [email protected]
-------------------------------------------------------
📌 For any Queries or Complaints visit:
Telegram Channel:- https://t.me/scaofficialchannel
Contact us:- 07314853128
-------------------------------------------------------
#WebDevelopment #WebDesign #FrontendDevelopment #BackendDevelopment #FullStackDevelopment #WebApp #WebsiteDesign #WebDeveloper #Programming #CodeNewbie #DeveloperCommunity #SoftwareEngineering #TechProject #CodingProject #WebDevLife #UIUXDesign #ResponsiveDesign #WebDevelopmentTips #DevLife #CodeGoals #Frontend #HTML #CSS #JavaScript #WebDevelopment #Coding #music #Programming #FrontendDevelopment #WebDesign #Tutorial #CodingTutorial #LearnToCode #WebDevelopmentTutorial #HTMLCSSJavaScript #DevelopmentTips #ProgrammingTutorial #CodeTutorial #Developer #CodingForBeginners #WebDev #SoftwareDevelopment #CodeNewbie #TechTutorial #HTMLTutorial #CSSTutorial #JavaScriptTutorial #WebDevelopmentTips #DeveloperCommunity #musicplayer #miniproject #CodingTips