Complete Responsive Online Education Website Using HTML/CSS/JS /PHP - Header, Home, About Page



Published
how to make a complete responsive multipages online education / e-learning / online courses website design using html css vanilla javascript and php from scratch.
create a complete responsive multipages online courses website like youtube video player and playlist using html css and vanilla javascript php pdo and mysql database step by step tutorial fro beginners.

view full playlist :
https://youtube.com/playlist?list=PLSJxovi1IyDGkHNqlrPSU2kXu1aophIkG

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
✔ responsive admin dashboard
✔ responsive playlist CRUD
✔ responsive content / video CRUD
✔ responsive admin login, register, update form

Buy Me A Coffee :
https://www.buymeacoffee.com/mrwebdesigner

* SOURCE CODES *

DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):
https://drive.google.com/file/d/1nWcOMTJmm-DLvHj3fq48n5YmGWYY7B4j/view?usp=sharing
( *you are free to use this source code )

*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

google fonts:
https://fonts.google.com/specimen/Rubik

Editor : - visual studio code with Laetus: Dark Vibrant Theme
Browser : - google chrome
UI Tool : - Figma
localhost : xampp
Images / Video / SVG : -
01 - https://www.freepik.com/
02 - https://storyset.com/
03 - https://undraw.co/
04 - https://pixabay.com/
05 - https://unsplash.com/
06 - https://pixabay.com/
07 - https://www.flaticon.com/
08 - https://pngtree.com/
09 - https://www.pngegg.com/

New To My Channel Subscribe Now And See More Stuff Like This:
https://www.youtube.com/c/MrWebDesignerAnas

timestamp:
0:00 demo
10:24 file structure
10:49 header and footer section
18:11 quick options section
33:03 courses section
46:46 about section
58:54 reviews section





#backend
#websitedesign
#multipages
Category
Web design
Be the first to comment