5 Minute Responsive Web Design Tutorial

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:

  1. 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?

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.

Step 2: Mapping out our site

Our website will include the following elements and sections:

  1. Header — This will include all of the links to our CSS, bootstrap, font awesome, and our favicon.

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!):

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.

Software Engineer focused on Full Stack development with MERN stack and Ruby experience. Interested in sharing my learning journey with aspiring developers.