Best HTML Responsive Website Design with CSS3 jQuery


How to Create Responsive Web Design without using Bootstrap ?


Responsive Website Template using HTML CSS
Create HTML Responsive Template using CSS and jQuery

I'm sure you've heard this - "If you want to make a Responsive Website, so go with the Bootstrap". Me too friends. I've created many Responsive Websites with the help of Bootstrap. But why I used Bootstrap for responsive design ?

The simple answer is - "Because, I didn't have good knowledge of CSS". One day my in my office my senior gave me an HTML Template and asked me to make it responsive.

Then I started to work and included the Bootstrap files and started to adding Bootstrap Grid and Classes. After finish one page, I show the design to my senior. Immediate he got that - I've used the Bootstrap in this project.

And he asked to remove the Bootstrap and make this Website Responsive without Using Bootstrap. Then I shocked and asked my senior - "Is it possible to make a website responsive without Bootstrap"?

He gave me to answer "Yes" and told me to - "We Can Make Responsive Website with CSS Only too". After that, I took some days to learn about Mobile Responsive Design with CSS. After that, I boost my CSS skills.

And now, I use maximum my own implementation to make Responsive Website Designs.

So this was a short story of mine, and welcome back friends to the CodingTuting. I'm Jignesh Panchal with another awesome tutorial. Friends, I hope you like our last beautiful creation on CSS Scroll Animation. If you haven't seen, please Click here.

Let's move to today's article - Responsive Web Design with HTML5 and CSS3.


I've created full single page Responsive Website Templates. In this, I've used HTML5 structure, CSS3 for responsive and animation and some JS and jQuery for toggle the class. We've the following features in this template.

1. Responsive Navigation Bar with Animation
2. Scrollable Image Strip and more

Preview of HTML Responsive Web Design with CSS



What CSS I used to make it Responsive ?

Simple - I used CSS @media Queries for make it responsive. I used different stylesheets for different screen sizes. Eg: Big Screen, Tablet, iPads, Big Mobile Screen, Medium Mobile Screen, and for Small Mobile Screen.


What are Media Queries ?

Media Queries are special rules which - analysis of the viewport and the dimension of the devices and screen. Then it applies the specific CSS based on the analysis.


In simple words, we can understand that - Media Queries is the body of a specific CSS. And this CSS executes only when a specific condition becomes true. And these conditions are the width of the device/screen.

So we can use different CSS for different devices with the help of @media queries. And Bootstrap is using is this same method. Bootstrap is also using @media Queries in its Grid System.



Focus on the source code

As you know, I always give a summary of the source code before share it. See How I did this? Don't be hurry for source code.

I'm using Google Fonts and Fontawesome Icons in my code. You can use it too or any others as you like.


  • I created the basic HTML structure and give the descriptive class names to the elements.
  • I applied the CSS for decoring the web page.
  • I applied @media queries for different device width. I've mentioned as a comment on each @media query.
  • At last, I created some jQuery and JS function for toggle some CSS classes


See the Pen Responsive Design Template by CodingTuting (@codingtuting) on CodePen.



Suggestion

You can make this template more attractive by adding scroll animation. I've posted a tutorial about How To Create Scroll Animations with CSS and jQuery. Go to that tutorial and apply Scroll Animation in this template.



I hope you got - How To Make Web Page Responsive with CSS and jQuery. You can change the colors as your choice. Please read our more articles on Web Design and all. If there is any bug in this tutorial please let us know in the comment.

We would like your suggestion on any topic. Please suggest us, we'll try to post about that topic as soon as. If you've any query regards the Web Design, Development, etc. Please do comment.


Sharing is Caring


Thanks for Reading


Hi, I'm Jignesh Panchal. I'm a Web Developer & Designer. I've started this blog to help the programmers using my experience and skills. You will get solutions and tips about Programming, Web Development etc.

Share this

Related Posts