Having a website that’s both responsive and interactive is an unwritten requirement for every website owner. The benefits of having an interactive website that adjusts perfectly to any screen size cannot be overstated.
You should create a personalized experience for every user that visits your website, and with several CSS properties and a few JavaScript functions, you can do just that.
In this tutorial article, you’ll learn how to make your HTML and CSS website responsive and interactive.
Making Your Website Interactive
When you’re building a website, you start from the top down. Therefore, making your website interactive is a process that should also begin at the top. Take this portfolio website we built as an example. It has a clean design but it’s 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 that—activate menu items with onscroll and onclick 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 access to the menu items in the navbar, as well as each section of the website. Fortunately, you can accomplish this with the use of the querySelectorAll DOM selector.
In your project directory, you’ll need to create a new JavaScript file and link it to your HTML file using the following line of code:
<script src="main.js"></script>
In a script tag, 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 selector in the code above grabs all the menu items using the links class. It also grabs all the sections of the website using the section tag. The activateMenu function then takes the length of each section and removes or add an “active” variable depending on a user’s scroll position.
For the code above to work you’ll have to update the portfolio website style sheet to include the following code in the navbar section:
#navbar .menu li.active a{
color: #fff;
}
Activating Menu Items onclick
//using jquery to activate menu item onclick
$(document).on('click', 'li', function(){
$(this).addClass('active').siblings().removeClass('active')
})
Adding the code above to your JavaScript file will activate each section when a user clicks on the appropriate menu item. However, it uses jQuery (a JavaScript library) which accomplishes this task will a minimal amount of code.
A problem that you might encounter when you activate each menu item on click is that the navbar will cover the top portion of each section. To prevent this, you can simply insert the following code in the utility section of the style sheet:
section{
scroll-margin-top: 4.5rem;
}
The code above will ensure that when you navigate to each section by clicking, the navbar will stay 4.5rem above each section (or 72px). Another cool feature to add to your website is smooth scrolling, which you can accomplish with the following CSS code:
html {
scroll-behavior: smooth;
}
Making Your Home Page Interactive
On most websites, a user will see their first button on the navbar or the home page. Aside from looking like a call to action, a button should also be interactive. A great way to accomplish this is with the CSS :hover selector, which assigns a new state to an element every time a user’s mouse runs over it.
On the portfolio website, the only link on the home page has the btn class (which gives it the appearance of a button). So, to make this button interactive, you can simply assign the :hover selector to the btn class.
Using the :hover Selector
.btn:hover{
background: #fff;
color:blue;
border: blue solid ;
border-radius: 5px;
}
Adding the code above to the utility section of the portfolio website will make the button transition from one state to another when you hover over it.
Another cool feature for the home page is a typing animation, which uses typed.js (a jQuery typing 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 you add the code above to your JavaScript file, you’ll need to make the following alteration to the HTML:
<div class="text-3">And I'm a <span class="typing"></span></div>
In the code above you replace the “Software Developer” text in the original code with the “typing” class, creating the typing animation.
Making Other Sections of Your Website Interactive
Creating a button utility class and using the hover selector will ensure that every section of your webpage that has a button is interactive. The CSS transition and transform properties also have some great animation features that you can add to your website.
If you have a gallery or any image 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 transformation 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);
}
Making Your Website responsive
When creating a responsive website, there are four different device types that you need to consider—desktops, laptops, tablets, and smartphones. Additionally, each of these device types also has a range of different screen sizes, but having these four categories is a good place to start.
In its current state, the portfolio website displays well on desktops and laptops. So, making it responsive will mean creating a customized layout for tablets and smartphones.
The best way to achieve a responsive design with CSS and HTML is through media queries. You can place a media query within a CSS file or the HTML link tag. The latter approach facilitates scalability, and it’s also the method that I’ll demonstrate.
You’ll 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'll have a maximum width of 1100px, as you see in the following link tag:
<link rel="stylesheet" media="screen and (max-width: 1100px)" href="css/widescreen.css">
Inserting the line of code above within the head tag of your HTML file (or in this case the portfolio website file) will ensure that every device with a screen width of 1100px and under will use the styling in the widescreen.css 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 under, as you can see in the output below:
The second CSS file will create the layout structure for smartphones and tablets in portrait mode. It'll have a maximum width of 760px, as you can see in the following link tag:
<link rel="stylesheet" media="screen and (max-width: 760px)" href="css/mobile.css">
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 file above will produce the following responsive smartphone layout:
Other Ways to Create 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 frontend frameworks and even templates on services like Joomla facilitate responsive interactive designs.