Open your browser and Get all the external StyleSheets and Scripts
(Favicon, Google Fonts, Font Awesome, Glidejs, Animate.css)
Create a new folder and name it js, Now create three js files (index.js, product.js, slider.js)
Create our custom stylesheet, styles.css
Now link our custom scripts and stylesheet
Section Two
Open styles.css
Now using psuedo class (:root) let's define our color variables
With the universal selector, let's set some default padding,margin and box-sizing
Write default styles for some html tags like html, ul, a etc
Let's now define the width for our container and set it's media queries
Section Three
Open index.html
Comment out the various main sections of the site(Header, Main and Footer)
Let's start with the Header
Open the project with live-server using (alt + l + o)
Write the html code for the Navigation
With the nav-item, copy and paste 4 times using (shift + alt + down arrow key)
Duplicate the span in nav-icons 2 more times with the same trick
Section Four
Open index.js
Use querySelector to get some html elements(nav-menu, navigation, hamburger, close)
Get the left position of nav using (getBoundingClientRect) function
Add a click event listener to openBtn
Check if the left position is less than zero, if true add the show class
Duplicate the event listener code and change openBtn to closeBtn and also change add to remove
Section Five
Open index.html
Open your browser and search for glidejs, copy the slider code in the doc
Add the id (glide1) to the glide div. It is the id we will use to initialise the glidejs slider for it to work
Put the code for the banner in the glidejs li
Duplicate the glidejs li two times and change the images respectively
Open slider.js and select the glide1 id, Write the code to initialise the slider
Go to the glidejs doc and copy the code for the arrows
Let's customize the arrows by adding fontawesome arrows
Section Six
Open index.html
Let's write the code for the category section and add the generic class section
Section Seven
Open index.html
Create a section with a class sort-category
Let's create our generic title, we will reuse it throughout the site
Create a div with class product-center and add the container class
Write the code for our first product
Duplicate it 3 times with (shift + alt + down arrow key)
Section Eight
Open product.js
Write a function to get the products from products.json. I had wanted to create a server which would allow us fetch data from mongodb atlas but I don't want to make the course long.
Write a function to display the products
Write the code to filter the products
Define a function to further filter the array of products
Add (DOMContentLoaded) event listener to the window.
Section Nine
Open index.html
Create a section with the class gallary
Write the code for the first gallary item and duplicate it 3 times
Section Ten
Open index.html
Write the code for all products
Open product.js
Get all the products
Display all the products
Section Eleven
Open index.html
Write the code for the brands section
Copy and paste the code for the slider from glidejs doc
Add the brand image to the li
Duplicate the glidejs li 5 times and change the images respectively
Add an id (glide2) to the glide div
Initialise the glidejs slider
Section Twelve
Open index.html
Write the code for the latest products section
Copy and paste the title we created and change the text in the h1
Create a div with the class (latest-center), also add the product-center class for the styling of the products
Open product.js and select the latest-center class
Get latest products using the filterArray function
Display the latest products
Section Thirdteen
Open index.html
Create a section with the class blog and the generic section class
Copy and paste the title code and change the text in the h1
Create a blog container
Copy and paste the code for the slider from glidejs doc
Add an id (glide3) to the glide div
Create the blog card in the glide li
Duplicate the glide li 4 times
Initialise the glidejs slider
Section Fourteen
Open index.html
Write the code for the recent products section
Copy and paste the title we created and change the text in the h1
Create a div with the class (recent-center), also add the product-center class for the styling of the products
Open product.js and select the recent-center class
Get recent products using the filterArray function
Display the recent products
Section Fifteen
Open index.html
Write the code for facility
Duplicate facility box 3 times and change the fontawesome icons and paragraph text respectively
Section Sixteen
Open index.js
Write the code for fix-nav
Write the code for smooth scrolling
Add smooth scrolling property to html tag
Section Seventeen
Open index.html
Write the code for popup
Open index.js
Write the js code to show and hide popup
Section Nineteen
Open index.html
Write the code for the preloader
Open index.js
Write the js code for the preloader
Section Twenty
Open index.html
Now for the footer, open the github repo and copy and paste the code for the footer