Online Education Website - How To Make A Online E-LEARNING Website Design Using HTML / CSS / JS /PHP/SQL Step By Step part one

how to make a complete responsive multipages online education / e-learning / online courses website design using html css and vanilla javascript from scratch. create a complete responsive multipages online courses website like youtube video player and playlist using pure html css and vanilla javascript step by step tutorial fro beginners. FULL PLAYLIST : https://www.youtube.com/playlist?list=PL2iJHNeMemSVXzU_3lGu5dWkSoIr_TYMP support me by buy me a coffee : Ko-fi.com/codewithselena * SOURCE CODES *: https://ko-fi.com/s/9fd5ddf4cf the main features of this website are : ✔ theme toggler using javascript localstorage ✔ responsive side bar ✔ responsive navbar with search box ✔ responsive quick view using css grid ✔ responsive about using css grid ✔ responsive reviews using css grid ✔ responsive courses using css grid ✔ responsive playlist using css grid ✔ responsive watch videos and comments using css grid ✔ responsive contact using css grid ✔ responsive user profile ✔ responsive tutor / teacher profile ✔ responsive login form ✔ responsive update form ✔ responsive register form DOWNLOAD THE IMAGE USED IN WEBSITE FROM GOOGLE DRIVE ( INCLUDES IMAGES ): https://drive.google.com/file/d/1aObrtVFSavqfQ_OBA7DAWjiax_7H930r/view?usp=sharing How To Download Step 1 :- click the google drive link ☝☝☝ Step 2 :- click on download link in the google drive. Step 3 :- extract the zip file into your desired folder. Step 4 :- open the converted files into your browser. Step 5 :- open your editor and put your unzipped files into it and then edit it as you like. font awesome cdn link: https://cdnjs.com/libraries/font-awesome Code from line 182 - 217 (requested by viewers) ---------------------- #search-btn{ display: none; } .header.flex .profile{ position: absolute; top: 120%; right: 2rem; background-color: var(--white); border-radius: .5rem; padding: 2rem; text-align: center; width: 40rem; transform: scale(0); transform-origin: top right; box-shadow: var(--box-shadow); } .header .flex .profile.active{ transform: scale(1.0); transition: 2s linear; } .header .flex .profile img{ height: 10rem; width: 10rem; border-radius: 50%; object-fit: cover; padding: .5rem; background-image: var(--gradient); margin-bottom: .5rem; } .header .flex .profile h3{ font-size: 2rem; color: var(--black); margin-bottom: 2rem; text-transform: capitalize; } ------------------------------ If you find this tutorial helpful, then hit LIKE button and SHARE it with your friends and on social media. Don't forget to Subscribe for upcoming tutorials. Get in touch Youtube : https://www.youtube.com/@codewithselena Instagram : https://www.instagram.com/codewithselena/ For any query, please DM on Instagram.