Create a Responsive HTML/CSS Skeleton

The best way to learn HTML and CSS is to create a project. This responsive website skeleton I have created will help you understand the basics of positioning, flow and responsiveness, It also can be used as a starting point for any web page design.

Here are the major topics I will cover:

• Using the Columnal CSS framework.
• Media queries
• Using the Chrome debugger

Using the Columnal CSS framework

Many CSS page layout framework exist, but I will be concentrating on just one of them for simplicity. The Columnal Framework divides the page into 12 columns for easy placement. CSS frameworks like this make it easier to create a responsive website. To use it, simply download the CSS file from their web site and use the classes they have set up.

Example:

The class "col_8" will take up 8 vertical columns.

Media queries

CSS media queries enable your website to find out the resolution, pixel density and other important display information about the end user's screen. This information will make it possible to create a user-friendly version of your website.

Using the Chrome debugger

The Google Chrome debugger is probably the best free developer's tool out there. It's fast and simple to use. I will only get into a small subset of it's capabilities for this lesson.

Let's Get Started

 Creating a mock-up in an image editing program such as Photoshop is the first step. I will create two versions. One for a desktop display and one for a mobile display.

Example:

---

Desktop View

---

Mobile View

---

One school of thought states that the smallest mobile version should be coded before the largest desktop version. While you are coding the HTML and CSS for this skeleton, you should continually check your results in Google Chrome. If there is a problem, switch to the Chrome debugging tool by clicking CTRL-SHIFT-I in Windows. Right click on any element in the page and select "Inspect Element" which will highlight the selected element in the "Elements" tab and show the element's styles in the "Style" box to the right. When you hover over the style in the "Style" box, you will notice that a box appears next to the style. You can check this box to turn on and off the style. Also, you can click on the style to edit it. New styles can be added by clicking just below the last style in the class. An insertion box will appear allowing you to type in a style with a value. More information on the Chrome debugger can be found at "Introduction to Chrome Developer Tools, Part One" by Seth Ladd.

When changing the widths of elements on the page, try to stick to the pre-made classes from the Columnal Framework. To include this framework, just visit the Columnal web site and download a copy of the framework.

Use divs with background colors to create horizontal lines since the visibility of the "hr" tag cannot changed.

Create a CSS styles file which has two sections. One for desktop and one for mobile. Setup the mobile version with a CSS media of about 1000 pixels to make it easier to diagnose problems when you are simulating a mobile device screen size on your desktop machine.

Example:

@media only screen and (max-width : 1000px) {
/*CSS styles for mobile version to go here*?
}

The media query can be adjusted later to the true target screen size in the final stages of development.

To make elements appear and disappear by changing the display style. Make sure to keep the design simple to test flow and continue checking the appearance in Chrome.


Click ((here)) for the project code.

Click ((here)) for an example of the code.