How to Create Responsive Web Design without using Bootstrap ?
 |
| 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.
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.
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
2 Comments
Write CommentsI read that Post and got it fine and informative. Website Design
ReplyThanks for the informative and helpful post, obviously in your blog everything is good.. Website price
ReplyEmoticonEmoticon