Build a responsive site with the Get Shit Done Kit

Dawid Adach -

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:

https://gist.github.com/dawidadach/f754942b153c513b4e87

Navigation Bar (navbar)

Now, just after the <body> tag, we will add the code below:

https://gist.github.com/dawidadach/1052a66886f68c2dd0ee

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:

 

Footer

Once we have the beautiful navigation panel on top of the site, we will create the footer. In order to do that, paste the code below just before the closing </body> tag:

https://gist.github.com/dawidadach/7b45b521bbf0462abf82

Once you will do that, you will see the new panel with highlited call to action on the bottom of your website:

Content

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.

Jumbotron

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:

https://gist.github.com/dawidadach/295289c5e9101e11427b

Since we want to use a background, you download THIS file, and save it into the “img” folder with the name “header.jpg”.

Panels

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:

https://gist.github.com/dawidadach/d18bcf891db4741a8faf

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:

https://gist.github.com/dawidadach/06787310b9b1b4cb0cf3