/yt-ecommerce-2

Primary LanguageCSS

Section One

  1. Create an html boilerplate with html:5
  2. Change the title to the name of our site
  3. Open your browser and Get all the external StyleSheets and Scripts (Favicon, Google Fonts, Font Awesome, Glidejs, Animate.css)
  4. Create a new folder and name it js, Now create three js files (index.js, product.js, slider.js)
  5. Create our custom stylesheet, styles.css
  6. Now link our custom scripts and stylesheet

Section Two

  1. Open styles.css
  2. Now using psuedo class (:root) let's define our color variables
  3. With the universal selector, let's set some default padding,margin and box-sizing
  4. Write default styles for some html tags like html, ul, a etc
  5. Let's now define the width for our container and set it's media queries

Section Three

  1. Open index.html
  2. Comment out the various main sections of the site(Header, Main and Footer)
  3. Let's start with the Header
  4. Open the project with live-server using (alt + l + o)
  5. Write the html code for the Navigation
  6. With the nav-item, copy and paste 4 times using (shift + alt + down arrow key)
  7. Duplicate the span in nav-icons 2 more times with the same trick

Section Four

  1. Open index.js
  2. Use querySelector to get some html elements(nav-menu, navigation, hamburger, close)
  3. Get the left position of nav using (getBoundingClientRect) function
  4. Add a click event listener to openBtn
  5. Check if the left position is less than zero, if true add the show class
  6. Duplicate the event listener code and change openBtn to closeBtn and also change add to remove

Section Five

  1. Open index.html
  2. Open your browser and search for glidejs, copy the slider code in the doc
  3. Add the id (glide1) to the glide div. It is the id we will use to initialise the glidejs slider for it to work
  4. Put the code for the banner in the glidejs li
  5. Duplicate the glidejs li two times and change the images respectively
  6. Open slider.js and select the glide1 id, Write the code to initialise the slider
  7. Go to the glidejs doc and copy the code for the arrows
  8. Let's customize the arrows by adding fontawesome arrows

Section Six

  1. Open index.html
  2. Let's write the code for the category section and add the generic class section

Section Seven

  1. Open index.html
  2. Create a section with a class sort-category
  3. Let's create our generic title, we will reuse it throughout the site
  4. Create a div with class product-center and add the container class
  5. Write the code for our first product
  6. Duplicate it 3 times with (shift + alt + down arrow key)

Section Eight

  1. Open product.js
  2. 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.
  3. Write a function to display the products
  4. Write the code to filter the products
  5. Define a function to further filter the array of products
  6. Add (DOMContentLoaded) event listener to the window.

Section Nine

  1. Open index.html
  2. Create a section with the class gallary
  3. Write the code for the first gallary item and duplicate it 3 times

Section Ten

  1. Open index.html
  2. Write the code for all products
  3. Open product.js
  4. Get all the products
  5. Display all the products

Section Eleven

  1. Open index.html
  2. Write the code for the brands section
  3. Copy and paste the code for the slider from glidejs doc
  4. Add the brand image to the li
  5. Duplicate the glidejs li 5 times and change the images respectively
  6. Add an id (glide2) to the glide div
  7. Initialise the glidejs slider

Section Twelve

  1. Open index.html
  2. Write the code for the latest products section
  3. Copy and paste the title we created and change the text in the h1
  4. Create a div with the class (latest-center), also add the product-center class for the styling of the products
  5. Open product.js and select the latest-center class
  6. Get latest products using the filterArray function
  7. Display the latest products

Section Thirdteen

  1. Open index.html
  2. Create a section with the class blog and the generic section class
  3. Copy and paste the title code and change the text in the h1
  4. Create a blog container
  5. Copy and paste the code for the slider from glidejs doc
  6. Add an id (glide3) to the glide div
  7. Create the blog card in the glide li
  8. Duplicate the glide li 4 times
  9. Initialise the glidejs slider

Section Fourteen

  1. Open index.html
  2. Write the code for the recent products section
  3. Copy and paste the title we created and change the text in the h1
  4. Create a div with the class (recent-center), also add the product-center class for the styling of the products
  5. Open product.js and select the recent-center class
  6. Get recent products using the filterArray function
  7. Display the recent products

Section Fifteen

  1. Open index.html
  2. Write the code for facility
  3. Duplicate facility box 3 times and change the fontawesome icons and paragraph text respectively

Section Sixteen

  1. Open index.js
  2. Write the code for fix-nav
  3. Write the code for smooth scrolling
  4. Add smooth scrolling property to html tag

Section Seventeen

  1. Open index.html
  2. Write the code for popup
  3. Open index.js
  4. Write the js code to show and hide popup

Section Nineteen

  1. Open index.html
  2. Write the code for the preloader
  3. Open index.js
  4. Write the js code for the preloader

Section Twenty

  1. Open index.html
  2. Now for the footer, open the github repo and copy and paste the code for the footer