Designed using basics html, css & JS

Hi Jumagobe, I think you made a really good attempt here, so well done, first of all! To be honest, I'm not sure where to start for feedback, as there's just a number of things you probably would need to work on, not just the JavaScript. I'll just note down my observations here:

1. It's best to use responsive images with either img and srcset or the picture element instead of background-image. This is meant to be a page that showcases the key products for a company; the visual aspects are one of the most important parts of the page, and so you'd definitely want the images to be available to the screen reader, so that the screen reader can convey what the images are using the img attributes. The background-image is really meant for images that are used as a background with text in the foreground. Another point about the images is that they look distorted and out of their aspect ratio right not, so be sure to fix that!

2. Right now, the page only looks optimal at the desktop view on a fairly normal sized screen; when it gets smaller, things start to look out of shape and alignment, and they just end up looking broken. You also don't seem to have a mobile view here yet, but I see in your JS script that there should be a open and close hamburger toggle for the menu, so I'm not too sure what's happening with the mobile view. All I can see is that, it's not there right now, sadly!

3. It's good that you are able to get the buttons to work in changing the images, and as you said, the Javascript really does need work. I normally would spend the time to help with rewriting this, but I don't know where to start here because I would rewrite every line you have. What I suggest you do is that, in the challenge hub for this challenge, click on "Solutions" at the top right corner, and have a look at how others did this challenge. I think you'd get a lot from comparing other people's solutions.

Lastly, I would suggest that you work on some more Junior level landing pages first, and I'm going to see if I can give you some more feedback on your other solutions because I think you do need some help first before working on a project like this one. You need to work on using media queries, using a mobile-first approach, and also working on how to write Javascript.

Anyway, I really do hope you check out the other solutions to this challenge and see how to fix some of the problems here. Best of luck, and keep going!

As for a slider script - i usually avoid inner_html. For this kind of functionality in pure js i usualy use flex-box for a section (here the upper section) with each flex child width : 100%, flex - schrink of 0 and in the direct element over the whole section overflow - x set to hidden. Now you can control the translate x of the section with buttons (e.g. translate-x -100% will show next slide). You can check my solution - i did it with grid, but it's almost the same - 3 columns of width 100% in the main section.