Clone Dynamic Web Page for Beginners.
This guide will help you to learn about some basic coding used in a web page.
The term cloning means replicating the original website into a dummy or a project website and dynamic programing used in the title means that it works a little bit similar to the original website which takes input as a search result and finds the result.
I will not say that you can make a dynamic website without using a server instead you can simulate yours by using the original website link and adding your query to it by using the URLSearchParams method and local storage of your browser.
What did we clone?
We cloned RODAN + FIELDS which is a beauty product selling website. It also provides training to become a consultant and have the option to find a consultant.
What language did we use?
We used Javascript, Html, CSS.
Landing Page
What are the things we implemented in the Navbar on the landing page?
Menu
We used some new terminologies unknown to beginners to achieve this drop-down menu on hover like justify-content, bottom border, transition, transform, hover, box-shadow, opacity, grid, flex.
Things implemented in the body of the landing page?
This carousel is implemented by using scrollLeft in Javascript. First I designed the carousel by using CSS and three divs, the first div, and the third div are used to listen to the event of the click to scroll forward or backward. The center div has all the list of items in it to be scrolled and is achieved by using CSS property overflow hidden.
This is with an added functionality where the arrow button disappears when the user reaches the end of the list, there is also this function of highlighting the direction of the scroll in which was scrolling. It is implemented using the same code but keeping the track of the listed items.
How did I add modal functionality on a layer?
For this, I used the event listener with property show by dynamically setting the class using the buttons and toggling between the opacity 0 and 1. To use toggle I had to also use pointer-events in CSS.
Some other pages are shown below
On this page, we are sending user email to the server, or we can store it in the local storage of the web browser and use it later to notify the user of the latest updates on new products launched.
On the blog page again another type of scrolling used for scrolling through the list by using a touch or mouse scroller. In the search, we can enter the product name and search the related and the searched product by using the main website link by adding the query to it.
End Note
I would like to thank all of you for sticking with me till the end and I would like to thanks my mentors and teammates who worked with me in a collaborative manner to achieve this.
We used gitHub to merge and collaborate in this project and it is an open-source online platform for everyone to use.
please feel free to visit our git repository link https://github.com/kapsxx/unit-2-project
