First, I must thank God for granting me journey mercies. We landed on Monday morning at MMIA safely. It's good to be home.

I must say that Nigeria is stil as mean and rugged as ever. The security agents at d airport were so mean and not even wearing a smiling face for seeing their fellow citizens returning from some far countries. To them, eveybody was a suspect. The trolley was not free. I had to quickly change few dollars I had on me in order to be able to pay 150 naira for something one can use free at other airports abroad. While in a taxi, I found out that lagos is stil as noisy and busy as ever. One reason why I wil never reside in this great city.

Ok. So I have been working on some tutorials, which I wil be making available on this board in due time. First, I want to handle a responsive web design tutorial from scratch. I wil practically walk us through from a blank text editor to a fully responsive website.

I wil start by the weekend. I wil later upload the screenshot of what we will be building.

that will be nice and we will also be adding few ideas to it, nice one bro and welcome back to Nigeria, the home of comedy. heheheh

Following#

Double tinz.

Welcome back, *grabs front seat*

Welcome Sir

Welcome HOME bro, hope to speak with you soon!

welcome back boss

Yiipeee!!! My daddy is home!!!!

GraphicsPlus: First, I must thank God for granting me journey mercies. We landed on Monday morning at MMIA safely. It's good to be home.

I must say that Nigeria is stil as mean and rugged as ever. The security agents at d airport were so mean and not even wearing a smiling face for seeing their fellow citizens returning from some far countries. To them, eveybody was a suspect. The trolley was not free. I had to quickly change few dollars I had on me in order to be able to pay 150 naira for something one can use free at other airports abroad. While in a taxi, I found out that lagos is stil as noisy and busy as ever. One reason why I wil never reside in this great city.

Ok. So I have been working on some tutorials, which I wil be making available on this board in due time. First, I want to handle a responsive web design tutorial from scratch. I wil practically walk us through from a blank text editor to a fully responsive website.

I wil start by the weekend. I wil later upload the screenshot of what we will be building.

Comma give me chocolate

CODE-EATER:
Yiipeee!!! My daddy is home!!!!

lmao!
----------
welcome sir. What did you bring for we kids?

We must collect owo omo onile

It is nice to travel and acquire a new knowledge. You are come back to share it with your people.

Welcome Back

welcome back home sire, nd how was India?

Welcome Boss!

Welcome to the best country in world (dont ask me why). Let the tutorial begin no time to waste. Thank you

Will like to contribute in your responsive design teaching just tell us what to help out with

following keenly,intensely,romantically,and squarely...now hw can i bookmark this thread?

every1 is hapi dat dady is back

sisqology:




Comma give me chocolate

u dey vex o, u no fit welcome am first b4 u ask 4 chocolate

Following...

Welcome bro

Welcome Back bro!

Anybody that wants to learn responsive web design should go through http://learn.shayhowe.com

I had to start over from CSS basics with his tutorial to get a good grasp of it.

Still waiting for graphicsplus tutorials though

Please am sorry for delaying this tutorial. I have few things that demanded for my attention. Without wasting further time, let's dive into this tutorial. We will be learning how to build a responsive website from scratch. Responsive Web Design, otherwise known as RWD has been around for about three to four years now. RWD becomes inevitable since most people now use mobile devices to access the internet. Everyday, we see more and more people using mobile devices like smart phones, ipad and even phones that are not smart phones, to browse our websites. In order to give these people an awesome experience while surfing through our websites, RWD has become very important. I want to believe that you dont like it when you have to zoom and scroll right and scroll back to left while browsing some websites with your mobile devices. People are counting on us to give them a kind of seamless experience when browsing the internet with either pc or mobile device. And in order to meet their expectations, RWD has come in to offer the seamless experience.

RWD uses few tricks and css3 @media query to target every single mobile and desktop device and end up delivering almost same experience across these platforms. In this tutorial, we will develop a full website homepage from scratch and make it responsive at the end. If you follow this tutorial and capture how these things work, you will not be afraid again to start coding your websites with any pixel width. You can even start from 3000px, which is wider than normal pc and laptop. However, when someone visits the website with a screen resolution of 960px, the person will never see a horizontal scrollbar because you would have taken care of it with @media query.

Basically, RWD works by refloating and restructuring your web pages by targeting screen resolutions of different devices. RWD is different from having a mobile version of a website. RWD uses one html document and one css document. It however uses @media query inside the main stylesheet to target different devices. But mobile version of a website uses different html and css documents.

So, I believe every web designer and developer should know about RWD. It has not really become a common phenominon in Africa. In fact 97% of websites in Africa and Nigeria in particular are not responsive. Web designers in Europe and America are quickly embracing RWD because it seems to be the future. You can check for inspiration in this website that chronicles most responsive websites in the world - www.mediaqueri.es

Ok. Enough of my rambling. Let's give this thing a shot. Grab a bottle of 7up and a funnel-paper wrap of pop corn and let's face it.

Below is the screenshot of the home page we will be building. We will start from html and make walk our way to css. I will try my very best to explain everything. However, I assume basic knowledge of html and css on your part. We will be using notepad++. Feel free to use any text editor you like. But as a notepad++ addict, I recommend you try notepad++. It's just very powerful and awesome.



Ok. Before we dive into the html markups, I want us to see a sketch of what we are gunning for. This is how I start every project. I first sketch with a pen or pencil on a paper and then dive into notepad++. It helps to narrow-down my mind on what am going into.

So looking at the photoshop sketch below, you will notice we have 8 basic divisions or layouts to deal with. We will follow them from number 1 down to number 8. So here we go.



First, let's write the markup for the number 1 and 2. Both of them are inside one container called header. Inside the header, we have a container called nav and inside this nav tag, we have a div class of nav, which is carrying the logo and the navigations. Please note that the header and the nav are just html5 tags. Then after the container called nav, we have another div class of header, which is carrying our header image. Please note that header and nav tags are different from div class of header and div class of nav.

So here is the markup for number 1 and 2 on our sketch.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Responsive Web Design - RWD</title>
<link rel="stylesheet" href="css/style.css"/>
</head>

<body>
<!--Header begins-->
<header>
<nav>
<div class="nav">
<a class="logo" href="index.html"><img src="images/logo.png"/></a>
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<div class="clear"></div>
</div>
</nav>

<div class="header">
<img src="images/header_image.png"/>
</div>
</header>

Please write the codes and save it with index.html. You can follow along exactly with me by downloading and unzipping all the images I used on the web page. Download it here: www.ctrlshiftstudios.com/RWD_images.rar

Note, I created a folder called images where I stored all the images. I created a folder also called css where I stored my stylesheet file. You can do the same.


In the markups above, you can see we have an empty div class, which I called clear. We will use it to clear the parent container of the logo and navigation because we are going to float both of them to left and right respectively.

Just copy the markup above and save and then download the zipped images. Unzip the file and rename the folder to images.

I will see you soon.

Let the old things pass away. Ọrọ RWD la n so ba yi.

Present sir! Thanks boss.

I hope after this i will come up with my own responsive site for my online services.

Nice on bro

Sobs


No knowledge of html or css. I was thinking you'd carry us along. I still dey follow sha.

Good job!

Thanks. Knowledge aquired!!

See my lecturer 4 front sit ohh! I don graduate be dat.
Good job baba Graphics+, please try & carry amateurs like us along. Thankx

Ok, for all newbie GraphicPlus has said it and I quote… {I assume basic knowledge of HTML and CSS on your part – (end of quote)}.

The honest truth is that! Get the basics before you start cracking your brain with RWD. Just to carry every one along, I suggest that experienced folks break down/simplify some aspects for nebies as we move along (I stand to be corrected).

Permit me to add the image below so newbies will know what containers or divisions or layouts referred to above. This is a combination of image1 and image2 (final project image + photoshop sketch).

Also the folder structure should look like the second image, which you may create on your desktop.
Index.html = is where you will place all ur html codes
Images folder = is where you will place all ur image
Css folder = is where you will place all ur css file

Hope this help!