What HTML, CSS, JavaScript technologies I should use?

[konstantinnikkari]

Hello!

I’m designing a very simple page, no menu, no scrolling. The page is simple design-wise but probably not simple coding. I know basic HTML and CSS but JavaScript is utopia for me. I’m not there yet in my studies. Could you please help me by saying which HTML, CSS, JavaScript technologies I should look and study to be able to do a site like this. Mostly I’m looking for help for the explained objects in the pictures below.

Pictures
https://www.dropbox.com/sh/axoj4u0xf77kwj1/AACj2fANKpGHVvaNRODVerc6a?dl=0

[DavideMancuso]

HI, here is a list of components and suggestions that can help you:

For the photo viewer I would use OWL Carousel (https://owlcarousel2.github.io/OwlCarousel2/) - in a few minutes I already suggested it twice

To open pop-ups, I would use a few lines of jQuery code without using external plugins.
In this case, hide all windows. At the click of the “+” sign open apply - via jQuery - a class to show the hidden window. This window will show the position by absolute value.

To open the projects instead I would also use a few lines of jQuery code.
Hide all projects, and when you click on a project apply the show class.

[Pepster64]

Using vanilla javascript really doesn’t take that much code and you don’t have to remember to add the jQuery library.

Here’s a small script for a javascript pagination script that I wrote for my website:

'use strict';

const pagination = () => {

    const d = document;
    const pageTotal = d.querySelector('#gallery').getAttribute('data-total');
    const nextPage = d.querySelector('#nextPage');
    var prevPage = d.querySelector('#prePage');


    var page = 1;

    const forward = (e) => {
        e.preventDefault();
        if (page < pageTotal) {
            d.querySelector('#page' + page).style.display = "none";
            page += 1;
            d.querySelector('#page' + page).style.display = "block";
            //btn = document.getElementById("image" + page);
            
        } else {
            page = 1;
            d.querySelector('#page' + pageTotal).style.display = "none";
            d.querySelector('#page' + page).style.display = "block";
            //btn = document.getElementById("image1");

        }
        //console.log(d.getElementById("image" + page));
    };

    nextPage.addEventListener("click", forward, false);

    const reverse = (e) => {
        e.preventDefault();
        if (page > 1) {
            d.querySelector('#page' + page).style.display = "none";
            page -= 1;
            d.querySelector('#page' + page).style.display = "block";
            //btn = document.getElementById("image" + page);
        } else {
            d.querySelector('#page' + page).style.display = "none";
            page = pageTotal;
            d.querySelector('#page' + pageTotal).style.display = "block";
            //btn = document.getElementById("image" + pageTotal);
        }
    };

    prevPage.addEventListener("click", reverse, false);
};

pagination();

Though there is nothing wrong in using jQuery, but I would learn a little javascript before doing so. You’ll get a better grasp on what is going on behind the scene and there are times that you will come across a solution on the internet. that uses vanilla javascript.

[konstantinnikkari]

Thank you DavideMancuso and Pepster64.

Pepster64: Your code is for the gallery part? I’m sorry to ask this. I just don’t know yet how to read JavaScript at all. So your code doesn’t tell me what it is about.

And I fully agree with you. I want to learn JS vanilla as I usually strive for learning fundamentals in anything I do.