Today we will show you how to build a fully responsive webpage using our Get Shit Done Kit, which you can get for free here. Once you download and unzip it, please open the template.html file in your favorite HTML editor. If you don’t have any, check our list of best free text editors. Once you open it you will see the code below:
Navigation Bar (navbar)
Now, just after the <body> tag, we will add the code below:
That will create a beautiful static navigation bar on top of the page. In order to adjust it, change your site name, adjust hyperlinks (replace “#” with the addresses of your social media profiles/emails). Except for the fact that this navbar is simply beautiful, it has another important advantage. It is responsive. When a visitor uses a laptop or a tablet with high resolution, the navbar will be displayed as below:
While the users browsing your webpage on mobile will see this:
Once you will do that, you will see the new panel with highlited call to action on the bottom of your website:
Once we have our responsive navbar and footer done, it’s time to fill our site with content. We will place 2 bootstrap elements in it. The first will be Jumbotron, which we you can use to describe your product, place your call to action like a “Buy” button or newsletter subscription form etc. Below, we will place 3 panels which can be used to present features of your product or describe services you offer.
Currently, inside our container, we have commented the button. Since we do not want to use it let’s remove the entire content inside the container starting with “<!–” and ending on “–>” which is the HTML comment tag and place the code from below instead:
Since we want to use a background, you download THIS file, and save it into the “img” folder with the name “header.jpg”.
Once we are done with our Jumbotron, let’s create 3 panels. In order to do that, we will use separate containers so place below the code above our footer code:
And voila! Your first responsive page built with Get Shit Done KIT is ready an looks awesome:
And it is really responsive:
Below you can find the entire code: