Make a clone of Udemy.com

Hello reader, my name is Arpit Sachan. I learn full-stack web development at Masai School. During the construct week of Masai School, we have to create a project so we created the clone of the Udemy.com. In my Team are Three members - Arpit Sachan , Raju, and Pavan Kumar. So we starting making the clone with the front and backend parts.

What is Udemy.com and what functionality have we added to our project?

Udemy is a learning platform where you can buy courses and learning new things and got certificates. Udemy is a big platform, we try to add most of the functionality which has in the original website. Our main functionality of the project is you can buy them Courses from the website.

During this project, we created 5 pages- HomePage, Login/Sign Up Page, Categories Page, Product Page, Cart Page, and Payment Page.

Home Page

NavBar- we create the navbar using HTML and CSS. We added the logo, search bar, Cart button, and login/signup Button.

Hero Section- In this section, we added the image and added a div in z index at the left side of the image which has a search bar and heading

Course Slider Section - In this section, we added the slider and who are direct fetches the data from the MongoDB database.

Top Categories Section - In this section, we added the categories of courses and created them using HTML, CSS, and JS.

footer section - In this section, we added the logo and all the pages of the Udemy and input section where you can select the language but it is not working.

Category Page

On the page, we show the course which category like in the picture user select python courses category so he got the courses related to python.

slider section - in this section you got the course related to python in the slider.

learning series - in this section you got a topic related to python which you have to learn.

All courses Section - In this section, you got the courses related to the topic and you got his rating, time, and bestseller tag. you can sort the courses as per his rating price and Popularity.

faq section - In this section, you will show questions related to python, when you click on + button you got his answer.

Product Page

When you click on any course you will redirect to this page. On this page, you will get the whole detail of the course

On this page, you got the first section where you got the full course name, rating, creator name, language, and buttons. On the left side of the whole page, you got a div where you got the price, add to cart button, buy now button, and some course details.

Functionalities -you can sort the product on the basis of rating.

Course Content Section - in this section you got the all detail of the course including each topic. like you click on overview so you got the name of all the videos.

Description Section - In this section, you got the whole description of courses when you click on show more then you will get the whole description.

Review Section - In this section, you got the review of the course where you can also rate the review.

Cart Page

when you click on add to cart button then click on the cart button(nav-bar). then you will get this page.

functionalities -

• you can add the coupon and got the discount
• you can remove the course -whichever courses you added will add to local storage.

Login/ Signup Page

if you don't create an account on Udemy so you have to create one from here.

Functionality

• this will authenticate the account from the database.

Payment Page

On this page, we added two payment methods Card and Netbanking methods.

On this page, you got the total price and fill in the details of the card and authenticate your payment.

I hope this article is helpful this is our repository link-github.com/sachanarpit/udemy_clone_with_ba…