#1. Create the HTML page - "index.html".
#2. Get your slider images of the same size and put them in a folder "img". I downloaded my four (4) images from unsplash.com.
#3. Put the images within div tags and place them under the h1 header in the html page.
#4. Create two buttons "Previous" and "Next", and place them under the images.
#5. Next, we need to prepare our Html Elements for CSS styling and Javascript functions. So let's add ids to our button to access them later.
#6. Next, let us also add an aria-labels to our buttons, to enable non-visual (audible) users to understand what the buttons are used for.
#7. Next, let's change the "Previous" and "Next" texts on the buttons to use "<" and ">" respectively. We would style our buttons later to look great with these directional symbols.
#8. Next, let's enclose our buttons in a div element with class "slider-btn", as we would need to style the buttons collectively later.
#9. Next, let's enclose our slider images and buttons in a div element with class "container", as we would need to center align all the items on the page.
#10. Next, we need to ensure that only the first slide is shown initially when the webpage is loaded. Hence, we will give classes to the slides, which we will style later.
#11. Next, let's ensure that we create and link our CSS and Javascript files to our front-end HTML page.
#12. Now it's time to style our page. Let's open the styles.css file in a new tab and style the body background to blue to confirm that it's linked.
#13. Great! It's working! So, let's make the background grey instead and apply border-box and margin: 0 settings, to ensure that our items do not have margin and padding overlaps.
#14. Next, let's style our container to have a max width of 600px and center aligned. Also, we would include a border so that we can detect a mis-match with the slide images which we would style next.
#15. Next, let's center align our content in the container. Then, we would style the slider images to have a max-width of 600px, occupy 100% of parent width, and have a responsive height.
#16. Next, let's style our class "slide-hidden" to hide all slides except the first slide.
#17. Next, let's style our class "slider-btn" which is a container for our buttons, to position our buttons within the middle of the slide. The buttons should be "absolutely" positioned to the container which is "relatively" positioned.
#18. Next, let's style our buttons to look more presentable with rounded corners.
#19. Next, let's adjust the margins on the buttons using their ids, and let's remove the border from our container.
#20. Awesome! Next, we would need to open our script file in a new tab. Then, lets put all our functional button nodes into variables.
#21. Next, we need to add a class "slides" to our slider images, so that we can access their nodes.
