Implementing Responsive Tags into the Head Tag
This guide walks through how to integrate responsive meta data components into the head tag to allow the website to render a different layout based on screen size.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

To get started, go to the show notes and click on the repository link. This will give you a list of files that I've used including the images. You can choose to follow along or use different images, that's totally up to you.

First off, I'm going to create a filed called "index.html". Inside the main folder, there's a subfolder called "images" and inside that, a nested subfolder called "common".

There is a reason why I have two nested subdirectories. In the "images" subdirectory, all the image files pertaining to this page will be stored, while in the "common " subdirectory, images that are common to all the web pages will be stored.

You can find images at "www.github.com/jordanhudgens/social-network-html-css". This link will also have the finished code, and I wouldn't recommend copy-pasting everything. Instead, just copy the image files and create the html and css files with me. Just make sure you have the same directory structure if you plan to follow along with me.

Next, we need Bootstrap. To get it, go to "www.getbootstrap.com", and click on a button called "Download Bootstrap". To use this, create a new directory called "Vendor" and copy all the bootstrap files to it.

If you're wondering why we're integrating styles from the beginning, it's because bootstrap is one of the design frameworks, and we're layering all our code on top of this framework. In our earlier projects, I created the HTML structure and then styled it, but here, we're going to work on it from start to finish.

Let's get started with our skeleton structure - <!DOCTYPE>, <html>, <head>, <title>, and <body>. In the <html> tag, I'm going to set the language to English, and inside the <head> tag, we'll setup our meta-data. We'll set our charset to "UTF-8", http-equiv to "X-UA-Compatible" to make our webpage a responsive one, and content to "IE-edge" to make it compliant with Windows-based systems.

Next, we're going to include more things to make our page responsive. For this, we're going to use an attribute called viewport 

<!DOCTYPE html>
<html>
  <head>
    <title>Social Network HTML/CSS</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width-device-width, initial-scale=1">
  </head>
</html>

You can also put meta-data information like author, description, and keywords, but we're not going to worry about it here.

Next, let's integrate bootstrap . If you open the bootstrap folder, you'll see a few .css files. Though bootstrap.css has all the style code, it's recommended you use bootstrap-theme.min.css because it contains the same styles minus the white space. Since we're not going to edit any of the bootstrap styles it's sensible to use this option to decrease your file size.

To integrate bootstrap, the code is:

<link href="vendor/bootstrap-3.3.2/css/bootstrap.min.css" rel="stylesheet">

Make sure you have all of this code in place before moving on.

We'll continue with the design in subsequent videos.