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/.