https://github.com/ahmedgamal2212/udemy-clone-vanilla

Udemy homepage clone using HTML, CSS, and Vanilla JavaScript that focuses on elements layout and simple animation for courses representation.
https://github.com/ahmedgamal2212/udemy-clone-vanilla

asyncjs css css-flexbox html html-css-javascript javascript

Last synced: 14 days ago
JSON representation

Udemy homepage clone using HTML, CSS, and Vanilla JavaScript that focuses on elements layout and simple animation for courses representation.

• Host: GitHub
• URL: https://github.com/ahmedgamal2212/udemy-clone-vanilla
• Owner: AhmedGamal2212
• Created: 2022-08-06T18:23:21.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-06-20T11:01:20.000Z (over 1 year ago)
• Last Synced: 2024-04-20T00:41:19.269Z (10 months ago)
• Topics: asyncjs, css, css-flexbox, html, html-css-javascript, javascript
• Language: CSS
• Homepage: https://ahmedgamal2212.github.io/Udemy-Clone-Vanilla/
• Size: 1.79 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Udemy-Clone-Vanilla

This is my first project for ***bld.ai*** summer internship's front-end course, and it's a simulation for ***Udemy***'s home page.

The project is completed.

I used **HTML5** and **CSS** in building the structure and applying some basic styles, **Vanilla JavaScript** to fetch courses data from an API, manipulate search bar form, creating courses cards, and applying media queries to carousel, and I finally used **Bootstrap** in styling cards and layout them using Bootstrap grid system, and creating the carousel.

Phases that the project passed by:

- Phase #1:

  - Creating basic structure using semantic HTML

  - Applying basic styling using CSS

  - Building reponsive design using flex box and media queries

- Phase #2:

  - Using JavaScript to fetch the data of the courses from an API

  - Using JavaScript to process the search bar form and apply filters on the courses

  - Using JavaScript to edit elements using DOM manipulation functions

- Phase #3:

  - Using Bootstrap built in components to build the courses carousel

  - Using Bootstrap grid to layout courses in the carousel

  - Using Bootstrap to style cards and courses in the carousel

You can find the **live demo** of the final version here https://ahmedgamal2212.github.io/Udemy-Clone-Vanilla/.