Css media

How to make your website responsive and interactive with CSS and JavaScript

Having a website that is both responsive and interactive is an unwritten requirement of every website owner. The benefits of having an interactive website that perfectly adapts to any screen size cannot be overstated.

You need to create a personalized experience for every user who visits your website, and with several CSS properties and a few JavaScript functions, you can do that.

In this tutorial article, you will learn how to make your HTML and CSS website responsive and interactive.

Make your website interactive

When you build a website, you start from the top down. Therefore, making your website interactive is a process that should also start at the top. Take this portfolio website we built as an example. It has a clean design but it is not completely interactive.

Each menu item changes color when you hover over it, but how do you know which section of the website you’re on? Well, there are two ways to do this: activate menu items with scrolling and on click events.

Activating a menu item each time you scroll up or down a website will require the use of a JavaScript function that you can call “activeMenu”. This function will need to access the menu items in the navigation bar, as well as each section of the website. Fortunately, you can achieve this by using the querySelectorAll DOM selector.

In your project directory, you will need to create a new JavaScript file and link it to your HTML file using the following line of code:

VIDEO OF THE DAY MAKEUSE

In one scenario label, the src value is the name of the JavaScript file, which in the example above is main.js.

The main.js file

// using javascript to activate menu item onscroll
const li = document.querySelectorAll(".links");
const sec = document.querySelectorAll("section");

function activeMenu(){
let len=sec.length;
while(--len && window.scrollY + 97 < sec[len].offsetTop){}
li.forEach(ltx => ltx.classList.remove("active"));
li[len].classList.add("active");
}
activeMenu();
window.addEventListener("scroll", activeMenu);

the querySelectorAll the selector in the code above retrieves all menu items using the connections to classify. It also enters all sections of the website using the section label. the activate menu The function then takes the length of each section and removes or adds an “active” variable based on a user’s scroll position.

For the above code to work, you will need to update the portfolio website stylesheet to include the following code in the navigation bar section:

#navbar .menu li.active a{
color: #fff;
}
 //using jquery to activate menu item onclick
$(document).on('click', 'li', function(){
$(this).addClass('active').siblings().removeClass('active')
})

Adding the above code to your JavaScript file will activate each section when a user clicks the appropriate menu item. However, it uses jQuery (a JavaScript library) which accomplishes this task with a minimal amount of code.

One issue you might run into when activating each menu item by clicking is that the navigation bar will cover the top of each section. To avoid this, you can simply insert the following code into the utility section of the stylesheet:

section{
scroll-margin-top: 4.5rem;
}

The code above will ensure that when you navigate to each section by clicking, the navigation bar will stay 4.5 rem above each section (or 72px). Another great feature to add to your website is smooth scrolling, which you can accomplish with the following CSS code:

html {
scroll-behavior: smooth;
}

Make your home page interactive

On most websites, a user will see their first button on the navigation bar or home page. In addition to looking like a call to action, a button should also be interactive. A great way to accomplish this is with CSS :float selector, which assigns a new state to an item each time a user’s mouse passes over it.

On the portfolio site, the only link on the home page has the btn class (which makes it look like a button). So, to make this button interactive, you can just assign the :float selector at btn to classify.

Using the selector: hover

 .btn:hover{
background: #fff;
color:blue;
border: blue solid ;
border-radius: 5px;
}

Adding the above code to the utility section of the wallet website will cause the button to toggle between states when you hover over it.

Another cool feature for the home page is a typing animation, which uses typed.js (a jQuery input animation script).

Using typed.js

// jquery typing text animation script
var typed = new Typed(".typing", {
strings: ["Software Developer"],
typeSpeed: 100,
backSpeed: 60,
loop: true
});

After adding the above code to your JavaScript file, you will need to make the following modification to the HTML code:

And I'm a


In the code above, you replace the text “Software Developer” in the original code with the class “Typing”, thereby creating the typing animation.

Make other sections of your website interactive

Creating a button utility class and using the float selector will make sure that every section of your web page that has a button is interactive. CSS transition and transform properties also have great animation features that you can add to your website.

If you have a gallery or an images section on your website, you can use the two properties mentioned above to create a hover effect on your images. Adding the following CSS code to the images in the project section of the portfolio website will create a transforming effect on the images in the section:

.img-container img{
max-width: 450px;
transition: all 0.3s ease-out;
cursor: pointer;
}

.img-container img:hover{
transform: scale(1.2);
}

Make your website responsive

When building a responsive website, you need to consider four different types of devices: desktops, laptops, tablets, and smartphones. Additionally, each of these device types has a range of different screen sizes as well, but these four categories are a good place to start.

Related: How to Use Multimedia Queries in HTML and CSS to Build Responsive Websites

In its current state, the wallet website displays well on desktops and laptops. So, making it responsive will mean creating a custom layout for tablets and smartphones.

The best way to achieve responsive design with CSS and HTML is through media queries. You can place a media query in a CSS file or HTML link label. This latter approach makes scalability easier, and it’s also the method I’ll demonstrate.

You will need to create two additional CSS files. The first CSS file will create the layout structure for small laptops and tablets in landscape mode. It will have a maximum width of 1100px, as you see in the following link tag:


Inserting the above line of code into the to manage tag of your HTML file (or in this case the portfolio website file) will ensure that each device with a screen width of 1100px and under will use the style in the widescreen.css to file.

The widescreen.css file

/* Home */
#navbar .container h1 a span{
display: none;
}

#home .home-content .text-3 span{
color: #000000;
}

/* Portfolio */
.projects{
justify-content: center;
}
.project{
flex: 0;
}

/* About */
.about-content{
flex-direction: column;
}

/* Contact */
.contact-content{
flex-direction: column;
}

The code above will produce a responsive layout on devices with screen sizes of 1100px and below, as you can see in the output below:


Large screen view

The second CSS file will create the layout structure for smartphones and tablets in portrait mode. It will have a maximum width of 760px, as you can see in the following link tag:


The mobile.css file

/* Navbar */

#navbar .container h1 a span{
display: none;
}

#navbar .container .menu{
margin-left: 0rem;
}

#ham-menu{
width: 35px;
height: 30px;
margin: 30px 0 20px 20px;
cursor: pointer;
}
#navbar .container .menu-wrap .menu{
display: none;
}

.bar{
height: 5px;
width: 100%;
background-color: #ffffff;
display: block;
border-radius: 5px;
transition: 0.3s ease;
}
#bar1{
transform: translateY(-4px);
}
#bar3{
transform: translateY(4px);
}

/* Home */
#home{
display: flex;
background: url("/images/home.jpg") no-repeat center;
height: 100vh;
}

#home .container{
margin: 6rem 1rem 2rem 1rem;
padding: 2rem;
}

#home .home-content .text-1{
font-size: 20px;
margin: 1.2rem;
}
#home .home-content .text-2{
font-size: 45px;
font-weight: 500;
margin: 1rem;
}
#home .home-content .text-3{
font-size: 22px;
margin: 1.2rem;
}
#home .home-content .text-3 span{
color: #0000ff;
font-weight: 600;
}

#home .container{
margin-left: 4.5rem;
}

/* About */
#about .container{
padding: 0;
}

/* Contact */
#contact .container{
padding: 0;
}


The above file will produce the following responsive smartphone layout:


Smartphone view

Other Ways to Build Responsive Interactive Websites

Knowing how to make your website responsive and interactive using CSS and HTML is a great skill to have. But these are not the only methods to make your website responsive and interactive.

Many front-end frameworks and even templates on services like Joomla facilitate responsive interactive designs.


Illustration of Joomla and its logo
15 Stylish Joomla Templates For Responsive Websites

Looking to build a website for your business or blog? Try these Joomla templates.

Read more


About the Author