5 Minute Responsive Web Design Tutorial

6 min readOct 1, 2020

Are you new to programming or just don’t know where to start learning responsive web design? well, you’ve come to the right place! Today I will show you how you can create your very own responsive website that will only take five minutes of your time.

Frontend Tools

For the purposes of this demonstration, we will be using many of the following website design tools:

Bootstrap — A front-end open-source toolkit that includes prewritten HTML, CSS, and Javascript. Bootstrap will make our lives so much easier after all, why take hours creating web features that someone has already done for us?
Font Awesome — An open-source project that allows us to use thousands of free vector icons for our website.
Flaticon — Similar to Font-Awesome, Flaticon allows us to use a plethora of free vector icons created by UX/UI web developers.
Favicon.ico — This is a favicon generator that we will utilize to create our favicon. A favicon is the shortcut icon that appears on the website tab.
Google Fonts — We will be using google fonts to inject fonts into our webpage.
Color Hunt — A platform that provides hundreds of different color pallets for website design.

Step 1: Creating the files

The file structure for this tutorial will include a CSS folder with a CSS styling file, an images folder, and an index.html page.
The index.html file will be utilized to create the structural elements of the web page.
The CSS or cascading style sheets file will be utilized to style the elements of in the index.html page.
We will be using the images folder to store any images we decide to use on our web page.

Step 2: Mapping out our site

Our website will include the following elements and sections:

Header — This will include all of the links to our CSS, bootstrap, font awesome, and our favicon.
Navigation Bar — We will be using the bootstrap navigation bar for this demo.
Main — The main content of our webpage will include a bootstrap card with an image and a description.
Footer — The footer will be at the bottom of our webpage and will usually include links or a trademark logo.

Step 3: Getting Started

Create the favicon by uploading an image or by using the favicon.ico illustration tool. I uploaded a flaticon image and saved the favicon to the images folder.

Select the desired google fonts and use the “Embed” tab to paste the <link> element into the HTML <head> section. So far your HTML should look similar to this:

Website with the favicon, title, and links added

Finally, let’s download some free vector icons from Flaticon to our images folder to use on our user interface:

Step 4: HTML setup with Bootstrap

Bootstrap is quite easy to utilize and navigate through and will be vital to achieving a responsive design. Going to the bootstrap homepage, we will need to copy the bootstrap CDN and paste it into the <head> of our website. We will also need to ensure that we do this above the <link> for our custom style sheet.

Once this is completed, we can utilize the CSS components on our webpage. Navigate to the Documentation — > Components

Here we have access to several components along with the HTML code needed to get them functioning. For the purpose of the tutorial, we will be using the Bootstrap card and the Navbar components.

Navigation Bar

To start, click on the navbar link in the left panel and find a navigation bar that you would like to use. I choose to select the navigation bar with a logo and a title. Inject the code associated with your selection into the sectioned off HTML page. For now, modify the image source and the text to fit your web page.

Using Card with Bootstrap Grid

Let’s also utilize the bootstrap card and grid components and paste in some cards utilizing the bootstrap grid. To use bootstrap grid, we will need to create a <div> element with the class “row” and once we paste in our card elements, add in a column class to each card. The bootstrap grid system operates on a 12 section system, thus if we want a card that takes up half of it’s row container, we need it to fulfill 6 sections of the grid. Bootstrap uses the “col-lg-6” class to denote this. Add this to each card element within a row div. You can read more about the boostrap grid in the bootstrap documentation.

This may seem intimidating but remember: we are mostly just copying and pasting code from the documentation and modifying it to fit our page design.

Adding an About Me Section

Above the hobbies div, let’s create another <div> element with the class of “about-me” and add in an image, header, and a p tag.

Adding A Footing Section

Finally, let’s add a footing section with some relevant content in it. I’ve included a link and copyright text in mine.

Well done! we’ve built out all the structure of our page. Let’s see what our page looks like:

Yikes! looks like we need to incorporate some custom styling into our webpage.

Let’s choose a color palette that matches the theme of our webpage. I’ve selected this one, I just love the fall/Halloween inspiration here.

In the style.css style sheet, incorporate custom margins, background color, and your google fonts. For a more detailed tutorial on custom CSS styling check out the following article (It’s super detailed and helpful!):

CSS Custom Properties are here.

In this article I’m going to tell you all about CSS Custom Properties, as well as give you some examples of how to use…

medium.com

Alright let’s take a look at the final outcome of our responsive website once custom styling has been incorporated:

So much better! and it’s fully responsive! Great job. Overall, creating your own creative and decorative webpage may seem like a difficult and intimidating task for a new programmer, but it doesn’t need to be! Luckily, there are tools available in order to aid in the creative process.