simple responsive website with smooth scrolling

How we can create a simple and responsive website using HTML, CSS, JS? Solution: See this Simple Responsive Website With Smooth Scrolling, Using CSS & jQuery.

Previously I have shared a one-page portfolio web template, it is also similar but this is a normal website and it has a clean and attractive look with a smooth scroll feature. Small business or individual who wants to represent their business online, they can use this website template. Most of the personal websites are with the same design and layout style, you can check.

Today you will learn to create a clean responsive website using CSS and jQuery. Basically, this template has a full-height gradient background with a logo, title, and texts. At the bottom of the layout, there is an animated scroll down arrow icon or indicator. When you will scroll down, a fixed and sticky navbar will appear at the top. Inside the navbar there are target anchors to navigate sections in the webpage, you will click on any item then you will scroll to that selected section with a smooth scrolling effect.

So, Today I am sharing Simple Responsive Website With Smooth Scrolling. There I have pure HTML and CSS for creating the responsive layout, I did not use any libraries like Bootstrap. And some important features like a smooth scroll, sticky nav, etc are based on jQuery which is a JS library. If you want to create a clean and simple website, then you can use this template.

If you are thinking now how this website actually is, then see the preview given below.

Preview Of Responsive Web Template with CSS and jQuery

See this video preview to getting an idea of how this template looks like.

Live Demo

Now you can see this visually, also you can see it live by pressing the button given above. If you like this then get the source code of its.

You May Also Like:

Simple Responsive Website With Smooth Scrolling Source Code

Before sharing source code, let’s talk about it. First I have created the layout using HTML tags like section, div, etc.  I have created all the sections using HTML <section> tag and placed other properties like div, heading, paragraph, etc tags inside it. And all the icons are based on Font-Awesome library which is linked in the HTML file, other files like CSS, JS, jQuery are linked in the HTML file.

Now using CSS I have placed all the elements in the right place, as you can see in the preview. With CSS first I gave size and position to all the elements, and used CSS @keyframe command to creating the animated scroll down icon. The responsive design is based on CSS @media query, I have reduced and placed the items for 2 or more screen size.

jQuery Handling here the 4 important features of this program. The four features are loop review, target anchor navigation, smooth scroll, and mobile navigation. Most of the functions are based on add and remove the class name method, and it works on click using jQuery .click( function() ) command.

Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First for HTML, second for CSS, and the third file for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

function.js

The last step, create a JavaScript file named ‘function.js‘ and put the codes.

That’s It. Now you have successfully created Simple Responsive Website With Smooth Scrolling, Using CSS & jQuery. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visting.

3 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here