^I disagree! No need carrying newbiew along, that will mess up the whole lesson.

Newbies should go learn html/css first and this thread will always be here for them to fall back to when they desire to learn responsive design.

Let's continue.

After the closing of header tag above which took care of number 1 and 2 divisions on our sketch, we will continue by marking up number 3. We will begin by creating a div class of main which will carry number 3 to number 7 divisions. The reason header and footer are not included in the main wrapper is because header and footer will be 100% in width while the main div will be 1000px in width. A div that has 100% width cannot be a child of a div that has 1000px width if we want the former to cover the entire width of the body element.

So we will create a div called 'main'. Inside it, beginning with number 3 on our sketch, we will create a div class called 'process'. Inside the div class of 'process', the first thing there is a sentence inside a h1 tag. Inside the h1 tag, we have a span class of bold. We will use it to make the words between the span tag to be bold later in our css. Inline styling could have taken care of it, but I like using external styling.

So after the h1 tag, we will create three class divs with same name. I called the name, 'our_process'. Inside each of the div class of 'our_process', we have three things. An image. A h2 tag. And a paragraph.

Let's see the markups:

<!--Main begins-->
<div class="main">
<!--Process begins-->
<div class="process">
<h1>At <span class="bold">WebDesign Studios</span>, we have the experience and skill to help your business to stand out from the crowd through these calculated processes</h1>

<div class="our_process">
<img src="images/design.png"/>
<h2>Design</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<div class="our_process">
<img src="images/develop.png"/>
<h2>Develop</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<div class="our_process noRight">
<img src="images/deploy.png"/>
<h2>Deploy</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<div class="clear"></div>
</div>

Please note that we have not closed the div class of 'main'. We will do that later down down. Please note that there is an additional div class I called 'noRight' which I added to the third div class of 'our_process'. We will use it later to strike off margin-right from that third div. The idea is that we will first give a margin-right to the div class of 'our_process'. This means that the three of them will have margin right. But since I dont want the third one to have margin-right (I will tell you why), I now gave it a second name in order to target it alone. Note that you can give multiple names to a div class. For instance, you can do this: <div class="first division anotherColor"></div> So automatically, this div has three names. But note that you cannot do that with id. Id must have one name.

Finally, please note that before the closing of the div class of 'process' which is carrying the three divs called 'our_process', I added an empty div with the class of clear. We will use it to clear the parent container since we will be floating the three children to the left. I know you are aware that in order to run away from css problem that comes with floating, you must clear a parent container each time you float it's child to either left or right. Floating means taking an element away from the normal flow of the document. By so doing, its parent will not recognize it again as its child. To make the parent to recognize it again, you have to clear the parent by using an empty tag to clear it. This clearing tag must come last before the closing of the parent div.

Please copy the markup above and paste it under the closing header where we stopped last time and save.

I will see you soon.

I'm happy to see you here.
Good work.
Maybe later I can create tutorials on "designing" interface, structure, how to sharpen your creative eyes, creating stunning mock up using fireworks or photoshop, mobile apps e.t.c
It is all about creating excellent user experience.

Ok. Number 3 on our sketch is done. We will now face number 4 and 5 on the sketch.

To carry number 4 and 5, we will create a div that will be their parent. I called the div, 'section'. Inside the div class of section, we now have two divs. One for number 4 and the other for number 5. I called the number 4 div, 'article' and called the number 5 div, 'sidebar'.

Inside the div class of 'article', we have a h1 tag, an image and three paragraphs. Simple.

Inside the div class of 'sidebar', we have an image, a h2 tag and a paragraph. Simple.

Before the closing div class of section, we have our empty div class of clear. We are going to float number 4 to left and number 5 to right. So we will need to clear their parent container.

See the markups:

<!-- Section begins-->
<div class="section">
<div class="article">
<h1>Creativity redefined!</h1>
<img src="images/creativity.png"/>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<div class="sidebar">
<img src="images/news.png"/>
<h2>Latest News</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip consequat.</p>
</div>

<div class="clear"></div>
</div>

Stay tuned.

Waow ... Its awesome

Following and learning new things

Let's go on. Please remember that we have not closed our div class of 'main'.

Let's tackle number 6 and 7 on our sketch.

The number 6 has six images which are the logos of companies our company has rendered services to. We will simply create a div class called 'clients'. Inside the div, we have a h2 tag, six images and our empty div class of clear because we are going to float all the images to left.

See the markup:

<!-- Clients begins-->
<div class="clients">
<h2>Our Clients</h2>
<img src="images/1.png"/>
<img src="images/2.png"/>
<img src="images/3.png"/>
<img src="images/4.png"/>
<img src="images/5.png"/>
<img src="images/6.png"/>
<div class="clear"></div>
</div>

Let's deal with number 7 immediately. The number 7 on our sketch is a div that will contain two testimonials from some of our clients. So we will create a div id called 'testimonial'. Inside it, we will now have a h2 tag and two divs. Each div will carry a testimony of our client.

So we will create two divs with same name called 'testimonial'. Inside each div, we will have an image, a paragraph. Inside the paragraph, we will have two spans. The spans will be used later to make the name of the testifier bold and make his company's name italic. Inside each of the div class of testimonial, we will also have an empty div called clear because we are going to float the image to left and the paragraph to right.

Again, before the closing div id of testimonial, we will also create an empty div class of clear because we are going to float the two div class of 'testimonial' to left.

Again, I gave the second div class of testimonial a second name of 'noRight' because we will strike off the margin-right we will give to the two divs later.


Then finally, we now closed the main div that we opened before.

See the markups:

<!--Testimonial begins-->
<div id="testimonial">
<h2>Testimonials</h2>
<div class="testimonial">
<img src="images/testimonial1.png"/>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper. <span class="testifier">Mike Johnson</span> - <span class="company">iRent Limited</span></p>
<div class="clear"></div>
</div>

<div class="testimonial noRight">
<img src="images/testimonial2.png"/>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper. <span class="testifier">Jane Sandberg</span> - <span class="company">CAT Engineering</span></p>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>

See you.

Pls guys carry me along pls, i need to learn this, where am i going to put this down


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

should i use the notepad or what pls clear me. Thanks

^^^ Just paste it in a notepad++ or any other text editor of your choice and save it as index.html

You should create a parent folder any where in your pc and name it anything you like. inside this parent folder, save the index.html there. Then create two folders inside that parent folder and name one images and the other css

You can download all the images I used so that you can follow along with me exactly. Download all the images here: www.ctrlshiftstudios.com/RWD_images.rar

Let's go on by dealing with the footer.

We first created a div id called 'footer'. Inside it, we have another div class called 'footer'. The reason why we have two divs that will carry all the contents of the footer is because, the div id of 'footer' will be 100% width while the div class of 'footer' will be 1000px. This is necessary since any div with 100% width does not recognize margin:0 auto. So we will apply the margin:0 auto to the div class of 'footer' that will have 1000px.

So inside the div class of 'footer', we will create three divs with the same class name of 'footer_details'. Inside each div, we simply have a h2 tag and a paragraph. I also gave the last or third div a second name of 'noRight' because we dont want it to have margin-right.

We will float the three divs to left. We will use the div following them to clear their parent.

So after the three divs, we have a div class called 'copyright'. Inside the copyright, we have a paragraph and another div class called 'social'. So the p tag and the div class of social are siblings to same parent called copyright.

Inside the div class of social, we have three images that are linked to facebook, twitter and youtube.

Before closing the div class of copyright, we created an empty div class of clear because we are going to float the p tag to left and float the div class of social to right.

So finally we close the div class of footer, div id of footer, body and html.

See the markups:

<!--Footer begins-->
<div id="footer">
<div class="footer">
<div class="footer_details">
<h2>More Links</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<div class="footer_details">
<h2>Contact Details</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<div class="footer_details noRight">
<h2>Other Stuff</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<div class="copyright">
<p>&copy; Copyright 2013 - All rights reserved</p>

<div class="social">
<a href="#" target="_blank"><img src="images/facebook.png"/></a>
<a href="#" target="_blank"><img src="images/twitter.png"/></a>
<a href="#" target="_blank><img src="images/youtube.png"/></a>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</body>
</html>

Next, we will now dive into css and start making the web page to make sense.

Cheers.

Pls want to learn from scratch pls we need your assistance send me material on camposemma13@gmail.com my bbm pin 3309F90D am waiting to hear from you sir.

GraphicsPlus: ^^^ Just paste it in a notepad++ or any other text editor of your choice and save it as index.html

You should create a parent folder any where in your pc and name it anything you like. inside this parent folder, save the index.html there. Then create two folders inside that parent folder and name one images and the other css

You can download all the images I used so that you can follow along with me exactly. Download all the images here: www.ctrlshiftstudios.com/RWD_images.rar

thanks a lot, i got it, am now cleared.

Sir!!!

U said sum tin abt width of divs...

I thought a child div element of width 100% will size up to 100% of its parent's width...

I.e parent div-1000px child div-100% :the child with be 1000px wide,there by inheriting the parents width value (or something like that)?


//don't sue me if am wrong

Just for the newbies if any following, the footer has an open tag which was not closed.

The youtube social icon:
<a href="#" target="_blank><img src="images/
youtube.png"/></a>

<a href="#" target="_blank " ><img src="images/
youtube.png"/></a>

^^thanks, I never remembered that of footer, I thought it was only that of 'Main' Nice Tuts.

@Code-eater, a child element with a width of 100% will always fill its parent container. But in this case, what we want to achieve is to have a div that wil cover the whole of body element. In order to achieve that, body element should be the direct parent, and not a wrapper div of 1000px.

Cant believe that am just seeing this thread,thank God,images downloaded.... Mr.Grafikz+ mehn ure 2fast,try take am easy on we wey still be lenaz naw.......thank you++

wisemania: Cant believe that am just seeing this thread,thank God,images downloaded.... Mr.Grafikz+ mehn ure 2fast,try take am easy on we wey still be lenaz naw.......thank you++

Bro....I advice u leave this thread 4 now...u suppose learn how to walk before attempting to run....RWD na advanced sh#t,u suppose learn normal HTML n CSS b4 thinking of responsive....


#just my humble advice

GraphicsPlus: @Code-eater, a child element with a width of 100% will always fill its parent container. But in this case, what we want to achieve is to have a div that wil cover the whole of body element. In order to achieve that, body element should be the direct parent, and not a wrapper div of 1000px.

Ooooo...I c....

#point taken

Tanks Uncle G

CODE-EATER:


Bro....I advice u leave this thread 4 now...u suppose learn how to walk before attempting to run....RWD na advanced sh#t,u suppose learn normal HTML n CSS b4 thinking of responsive....


#just my humble advice

laff laff......u don 2dey downgrade me 2mch sha.....so u tink say html and css dey hrd me nahin i dey study jScript....guy udey fall my hnd anyhw....no dey cast me again wen i post nxt tym....i waznt referin 2 ->U<- ......

CODE-EATER:


Bro....I advice u leave this thread 4 now...u suppose learn how to walk before attempting to run....RWD na advanced sh#t,u suppose learn normal HTML n CSS b4 thinking of responsive....


#just my humble advice

It's not so advanced bro, If they know little css, they can continue learning.

wisemania:
laff laff......u don 2dey downgrade me 2mch sha.....so u tink say html and css dey hrd me nahin i dey study jScript....guy udey fall my hnd anyhw....no dey cast me again wen i post nxt tym....i waznt referin 2 ->U<- ......

y u talk like Dat na... me no know...



Una 2 like to dey take offence over little tins...

So far so good!
Newbies following up to this point, your webpage by now should look similar to the image below. CSS chapter will make it structural and colorful.

NOTE: up to this point the real RWD hasn’t started yet!

joomlaman: So far so good!
Newbies following up to this point, your webpage by now should look similar to the image below. CSS chapter will make it structural and colorful.

NOTE: up to this point the real RWD hasn’t started yet!

ryt on point bro,got d xame layout....remainin css....

Ok. Let's continue. I am going to paste all the css styling for the normal rigid and unresponsive web page to take shape.

body{
margin:0;
padding:0;
font-family:sans-serif;
}

.clear{clear:both}

header, nav{
width:100%;
display:block
}

nav{
background-color:#003366;
}

.nav{
width:1000px;
margin:0 auto;
padding:10px 0;
}

.logo{
display:block;
float:left;
}

.nav ul{
float:right;
list-style:none;
margin:10px 0 0;
padding:0;
}

.nav li{
display:inline-block;
margin:0 0 0 10px;
}

.nav li a{
text-decoration:none;
color:#fff;
text-transform:uppercase
}

.nav li a:hover{color:#f3fc07}

.nav li .active{
color:#f3fc07;
font-weight:bold;
}

.header{
width:1000px;
margin:50px auto;
}

.main{
width:1000px;
margin:0 auto;
}

.process{
width:1000px;
}

.process h1{
font-weight:normal;
text-align:center;
margin:50px 0;
}

.process .bold{font-weight:bold}

.our_process{
width:300px;
float:left;
margin:0 50px 0 0;
text-align:center;
}

.section{
width:1000px;
margin:50px 0 0;
}

.article{
width:660px;
float:left;
margin:0 50px 0 0;
padding:20px;
background:#003366;
color:#fff;
}

.article img{
float:left;
margin:0 20px 0 0;
border:1px solid #f3fc07;
padding:5px 5px 0 0;
}

.article h1{
margin-top:0;
color:#f3fc07
}

.sidebar{
width:250px;
float:right;
}

.clients{
width:930px;
clear:both;
padding:35px;
border-bottom:1px solid #ddd
}

.clients img{float:left}

#testimonial{
width:1000px;
margin:50px auto;
}

#testimonial h2, .clients h2{
margin-top:0;
text-align:center;
letter-spacing:25px;
font-weight:normal
}

.testimonial{
width:475px;
float:left;
margin:0 50px 0 0;
}

.testimonial img{
float:left;
margin-right:10px
}

.testimonial p{
float:right;
width:365px;
margin:0;
}

.testimonial .testifier{font-weight:bold}
.testimonial .company{font-style:italic}

#footer{
width:100%;
background:#003366;
}

.footer{
width:1000px;
margin:0 auto;
padding:10px 0;
}

.footer_details{
width:300px;
float:left;
margin:0 50px 20px 0;
color:#f3fc07;
}

.noRight{margin-right:0}

.footer_details h2{
color:#fff;
margin:0 0 5px;
font-weight:normal
}

.footer_details p{margin:0}

.copyright{
clear:left;
padding:20px 0 0;
border-top:1px solid white
}

.copyright p{
float:left;
color:#fff;
font-size:12px;
margin:0
}

.social{
float:right;
}

What I did was just to apply styling to our html markups. I used floating a lot. So if you copy the codes and save as style.css inside a folder call css, then you should get something like the screenshot below or view it online at: www.ctrlshiftstudios.com/RWD




Right now, the web page is just rigid and unresponsive. But in the next tutorial, we are going to make it to be responsive in every device.

I will see you soon.

#Following, dont think because i created my own responsive thread mean say i no dey follow your thread o.

^~^~^~^~^~^ @G+
Hmm, I expected the CSS be treated according to the layouts 1,2,3,...8 just like d HTML?

many newbies like me will un-follow here too!

^u ar correct. i wil explain the css line by line later before we dabble into rwd. ok?

GraphicsPlus: ^u ar correct. i wil explain the css line by line later before we dabble into rwd. ok?

Happy hear.

Question:
My usual practice is to declare global styles (same styling that appear in multiple sections) at the beginning of my style sheet, like under body{} I will declare other globalzzz!

I tried adding => .noRight{margin-right: 0px;} from top (as global in my own way) since it appears in multiple sections, it didn’t work well for me! Also if I placed it anywhere before the last it won’t work.

Any formal explanation why .noRight…. Most be placed where it is now?

^Ok. The class of .noRight cannot work elsewhere unless u place it under class of .our_process and the class of .footer_details. The class of noRight is simply overwriting something, which is margin-right given to the above two divs. In css, the second styling is more important than the first except on few occasions. So the last always overwrites the first.

I wil explain the css styling line by line before we go on with rwd proper.