₦airaland Forum

The OP is one Mustapha Yusuf (www.nairaland.com/mustaphay). I wonder why he opened another account for this. Anyway, I just discovered now that he sent me an email requesting a sample video from each section of the tutorial videos before he can order. I didnt reply him and he didnt order and so he came here to call me a thief. For avoidance of doubt, all the videos i put up there were not gotten free. If u know me very well, u wil know that i dont do dirty things. U can follow me on facebook: www.facebook.com/aiuzor or twitter on: www.twitter.com/alexuzor

I run a successful web design team, i train pastors on how to use wordpress to design personal websites, i train people on web design and development (This one is ongoing: www.webdesignmastery.net), i consult for dioceses on ICT and i manage facebook accounts of some clergy and bishops. So i make enough money. I dont know u and i dont know why u came here calling me a thief. U didnt order for the videos. U simply requested for sample and when u didnt get the samples, u called me a thief. Hw did i steal from u?

Sorry, i just saw this now. well, i must tell u that the OP doesnt know what he's talking about. i bought all the videos from a to z. i paid for the videos and also paid for bandwidth used to download them. as i write this, i hav nt received any email or phone call from anybody asking me to send him a sample video (which i may nt send even if such request is made). Pls can OP explain how he knows the videos ar free videos i downloaded?

If you need this ebook: 'How To Build a Website With Wordpress...Fast' and another ebook, '100 Wordpress Tips', then send me email on: plus.graphicsplus@gmail.com let me tell you how to get the ebooks.

Trash indeed.

Check: www.webtutsfromscratch.com and then thank your stars.

1. Lynda - PHP with MYSQL beyond the basics (99 videos)

2. Lynda - Foundations of Programming Databases (40 videos)

3. Lynda - Foundations of Programming Object Oriented Design (47 videos)

4. Lynda - Foundations of Programming Fundamentals (61 videos)

5. Lynda - Object Oriented Programming with PHP (37 videos)

Total - 284 videos.

The size is 4.3GB. I will put them in DVD and send to u anywhere u ar in Nigeria.

Send me email: plus.graphicsplus@gmail.com

If u want the videos of the tutorials by Kevin and other of his tutorials in lynda.com, send me email now and i wil tell u how to get all the videos.

plus.graphicsplus@gmail.com

PNG - www.tinypng.org
JPG - www.jpegmini.com

@Code-Eater, am on mobile now. i wil get back to on ur question. meanwhile u can check the answer someone offered.

Yes, the @media query stuff will come after the main stylesheet. It should come like this:

@media all and (max-width:480px) {..............}

All ur codes for 480px media query will fall inside the curly bracket where the dots are.

Again, @media query doesnt work on older browsers like ie6 to ie8. There is a javascript walk-around to fix that.

Cheers.

Today, we conclude our tutorial on designing responsive web page from scratch. I have done the @media query that will take care of 481px to 800px and 801px to 1050px. The web page is completely responsive right now. You can view it with any mobile device and it will display perfectly without a horizontal scrollbar. Basically, we used max-width of 100% on all images. We used percentage instead of pixel for the width and we floated to none some of the elements we floated to either left and right initially. If you look at the @media query codes for 801px to 1050px, you will see that we maintained some of the floated divs, but we changed the width from pixel to percentage so that it will be fluid.

Download the @media query for 481px to 800px and 801px to 1050px here: http://www.ctrlshiftstudios.com/query2.txt

Paste it under the @media query of max-width of 480px we did previously. Save and refresh your browser. Then go ahead to resize your browser and see how responsive the web page has become.

Go on and study the codes and try playing around with the whole stuff.

You can see how the web page rendered on different mobile devices here: http://www.responsinator.com/?url=http%3A%2F%2Fctrlshiftstudios.com%2FR-W-D%2F

Or you can view the responsive web page directly here: http://www.ctrlshiftstudios.com/R-W-D

Cheers.

My brother, u seem to always have questions. It seems u ar between two opinions. Now get these things very clear. No graphics software is the best. Each has its area of strength.

If u want to be able to design stunning web banners, do surreal picture manipulation, edit pictures and get images ready for the web, then u must learn photoshop.

If u plan to do graphics for printing, especially offset printing, then u must use corel draw. You can use coreldraw to design logos. But if you have the chance, I wil advice u to also learn adobe illustrator. It's a powerful software used to design logos.

So both coreldraw and photoshop are powerful. It's just that photoshop is the king when it comes to photo editing and manipulation.

I believe we must start now to contribute and give back to the web design and development community. You will believe with me that we have gained a lot from the code community in this industry. We have downloaded some awesome free video tutorials. We have gone through some premium, yet free written tutorials. And we have learned a lot from these colleagues around the web from the nations of the world. We in Africa, Nigeria in particular must starting thinking about learning and teaching others and learning along the line. We must give back to this industry. It's not about getting the money. It's about making a positive impact in the life and career of others.

To contribute my own qouta in my own little way, I have dedicated a website where I will be doing some awesome tutorials during my spare time. I will be doing series of web design and development tutorials from scratch. I believe in doing something from scratch. I believe in learning how things work. I am not against someone using a free template, but I want the person to first know how to code web templates from scratch on his own.

This is how it will work for now. I will first do the tutorials on Nairaland and then upload to the website. I intend that the website will later become a chronicle of awesome web design and development tutorials from me and my friends. No signup is required. No payment is needed. No adverts will be placed. Just tutorials. Just a learning ground.

I just did a little home page for it. I have mapped out 12 tutorials I will face in the next couple of months.

Check: www.webtutsfromscratch.com

More is yet to come in this industry. Let's keep learning. Let's keep teaching. Let's keep making impact. Let's keep earning. And let's keep growing. Cheers.

Ok. Let's go on and finish this tutorial. Before we dive into RWD, I want us to remember that our base web page width is 1000px. This means that devices with width of 1000px and above will display our web page perfectly. Our problem now is how to accommodate devices with width of 999px and below. To deal with that, we are going to comfortably do it with css3 @media query.

Let's get started. First, we will add the meta viewport below to the head of our html document.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

This is important because most mobile browsers scale html pages to a wide viewport width so it fits on the screen. We use the viewport meta tag to reset this. The viewport tag above tells the browser to use the device width as the viewport width and disable the initial scale.

After adding the viewport meta tag to the head, we now go back to our css file. I want you to copy all the css codes to paste them on another blank page of your text editor. This is how I work so I will not have to scroll up and down checking the codes. Paste the codes in another tab and dont save it. After applying the @media query, we will then highlight the codes and cut and then go back and paste them inside our style.css.

Let me at this point tell us the whole concept of media query. CSS @media query is like writing a conditional statement. It's like writing if yes, do this thing, else do another thing. Again, media query codes come at the bottom of our main styling. This is important because what media query is doing is actually overwriting the main styling to serve other devices.

In applying rwd to this web page, we will be dealing with these device widths:
0 to 480px
481px to 800px
801px to 1050px (we will add extra 50px to give it good breathing space)

So we will be dealing with these three sets of @media query.

Let's start with 0 to 480px.
At the very to of the stylesheet we copied and pasted on a new tab, let's write this:

@media all and (max-width:480px){ cut the stylesheet again and paste it inside this curly bracket}

Now, we will start the manipulations.
First, we need to be aware that the things that are in our main stylesheet which we will like to retain, should be deleted. This means that what we dont need to restyle should be deleted.

For instance, we have no business with the body tag and other stuff like background color that we dont need to change, and so we will just delete them from our media query to minimize file weight.

Again, @media query works with percentage instead of pixel. Pixel is rigid while percentage is flexible.

So in dealing with the max-width of 480px, we have to overwrite the div we floated to left and right. You know in css, we have float of left, right and none. We will be using float:none to overwrite the float:left or float:right we did earlier.

Before we go on, I want you to add this line of code: img{max-width:100%}

This is important. It will make the images to scale proportionally. This means that the images will never be more than their parent containers. Therefore, our header image that is 1000px in width will be forced to display normally at the screen width of 480px.

We will start from top and walk our way down. We will begin from .nav
Those ones that come before the class of nav dont have anything that will disturb us. So we will retain their styling as it is in the main styling above and to tell css that we are comfortable with the way they are, we will not touch them. This is why we deleted them from our @media query max-width of 480px.

So let's start from the div class of nav. I will explain the codes line by line.

@media all and (max-width:480px){
.nav{
width:90%;
margin:0 auto;
padding:5%;
text-align:center;
}

The div class of nav was 1000px. Now it's 90% plus padding of 5% on the left and right, which makes it 100%. Text-align of center will center every inline element inside it.


.logo{
display:inline-block;
float:none;
margin:10px 0;
}

Logo was displayed block before. Now we display it inline-block. And instead of floating it left, we floated it none. We set display to inline-block so that the logo will be centered by the text-align center on the div class of nav. A block element cannot be centered by text-align center.

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

He we reversed the floated ul to none. We dont want it to float again to the right.

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

Her we set the li to display block. We did this so that the list will be vertical instead of horizontal.


.nav li a{
text-decoration:none;
color:#003366;
text-transform:uppercase;
display:block;
background:#f3fc07;
padding:10px;
margin:5px 0 0;
-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
transition:all .5s ease-out;
}

We also set the navigation anchor links to display block. This will make the entire background of the anchor link to be a link. This means you dont have to hover the link text for the link to have effect. I also added transition effect to the link.

.nav li a:hover{
color:#003366;
background:#fff;
}

.nav li .active{
color:#003366;
background:#fff;
font-weight:bold;
}


.header{
width:90%;
padding:5%;
margin:auto;
}

Our div class of header is now 90% with 5% padding on the left and right. This means the div is now 100%.

.main{
width:100%;
margin:0 auto;
}

Same thing is going on here.

.process{
width:90%;
padding:0 5%
}

The same thing is also here.

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

Nothing much here. I just reduced the margin-top of 50px to 30px.


.our_process{
width:100%;
float:none;
margin:0 50px 0 0;
text-align:center;
}

This div class of our_process had 300pc width and it was floated left. Now we set the width to 100% and we floated it none. We simply want the three divs to be vertical instead of horizontal.

.our_process p{font-size:1.2em}

We increased the paragraph font size.

.section{
width:100%;
margin:50px 0 0;
}

We changed the 1000px to 100%.

.article{
width:90%;
float:none;
margin:0;
padding:5%;
background:#003366;
color:#fff;
text-align:center;
}

This div class of article was 660px in width and was floated left. Now, we dont want it to be floated again. So we float it none. And we made the width 100%. We also added text-align center so that everything inside it will be centered.

.article p{text-align:left}

Since we dont want the paragraph inside the div class of article to be centered, we overwrite the text-align center above and set it to text-align left.



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

The image inside the div class of article was floated left and the paragraph wrapped around it. Now, we say no. We floated it none and removed the earlier margin-right.

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

.sidebar{
width:90%;
float:none;
padding:5%;
text-align:center;
}

This div class of sidebar was 250px in width. Now, we set it to 100%. And centered the contents.

.sidebar p{text-align:left;}

Here, we dont want the paragraph to be centered.

.clients{
width:90%;
padding:5%;
text-align:center;
border-bottom:1px solid #ddd;
}

From 1000px, we now set this div class of clients to 100% and centered the contents.

.clients img{
float:none;
display:inline-block;
margin:10px 0 0
}

We floated the images inside div class of clients. Now, we floated it none and displayed it inline-block. This will help the images to change their arragement automatically.

#testimonial{
width:90%;
padding:5%;
margin:0 auto;
}

Here we set the div id of testimonial to 100%.

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

.testimonial{
width:100%;
float:none;
margin:0 0 30px;
text-align:center;
}

We floated the div class of testimonial. Now we float it none and we gave it a width of 100% and centered the contents.

.testimonial img{
float:none;
margin:0 0 10px 0
}

We initially floated the image. We removed the margin-right of 10px and gave it margin-bottom of 10px.

.testimonial p{
float:none;
width:100%;
margin:0;
text-align:left;
}

We also reversed the floated paragraph inside the div class of testimonial. We set the width to 100% so that it will be flexible. We dont want it to be centered so we aligned it to left.


We deleted the div id of footer because we dont have any issue with its styling.

.footer{
width:90%;
margin:0 auto;
padding:5%;
}


Here, we set the width of the div class of footer to 100%.

.footer_details{
width:100%;
float:none;
color:#f3fc07;
margin:0 0 30px;
}

Here, we reversed the floated div class of footer_details. And instead of the 300px width, we now gave it 100% width.

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

.footer_details p{margin:0}

.copyright{
padding:20px 0 0;
border-top:1px solid white;
text-align:center;
}

I added text-align center so that the contents of the div class of copyright will be centered.

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

The paragraph was floated. Now we say no, so we floated it to none.

.social{
float:none;
display:inline-block
}

The same here. We floated it to none instead of right. Because a div is a block element and cannot be centered by text-align, and since we wanted the div class of social to obey the text-align center we applied on its parent, we now displayed it inline-block so that it will agree to be centered.

img{max-width:100%}

This is very important. It will force all the images to resize dynamically and proportionally without growing bigger than its parent container.

}

Download the @media query codes for 480px here: www.ctrlshiftstudios.com/query.txt

If you download the codes and add them under the last code in your style.css and refresh. If you view it with a mobile device from 480px down or you resize your desktop browser to 480px, you will get this layout as shown on the image below.

https://ctrlshiftstudios.com/mobile.png

I will see you soonest. Please study the codes and try messing around with the whole thing.
Cheers.

1. www.psd.tutsplus.com
2. www.photoshoptutorials.ws
3. www.psdbox.com
4. www.photoshoplady.com

Both of them ar two different graphics software. None is the best. Photoshop is a raster software. Coreldraw is a vector software. If u want to do picture editing or picture manipulation or prepare images for the web, then use photoshop. If u want to design logo, then use Coreldraw.

Ok. Let's continue. Here, I will try to explain the css styling line by line.

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

Nothing much is happening here. I just stripped the body its margin and padding. This is important since we want the nav and footer to stretch from the left to the right of the entire body. Then we set the font family to sans-serif because serif is the deafult font family.


.clear{clear:both}

Clear:both will help us to clear the parents of all our floated elements. We created an empty div with the class name of clear. In css, we have clear:left, clear:right and clear:both. Clear left is used when you have floated elements only to the left. Same with when you have floated to right, you use clear right. But in our case, we floated to both left and right, so we will use clear both.

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

Here we set the header and nav to 100% and display them block because they are html5 elements and in order for older browsers not to display them as inline, we set them to block.

nav{
background-color:#003366;
}

Here we set that blue color to the nav.

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

This is the div class of nav that is a child to the html5 tag of nav. We set the width to 1000px. This is the width we will be using throughout the design. It's our base width. As long as we will go responsive, it doesnt matter. We can even start with 1200px or 1400px. But if you know you will not go responsive, it's always good to start with maximum of 960px. We set the margin to 0 auto in order to center it. We gave it a top and bottom padding of 10px and no padding to the left and right. Remember that if you give padding to the left or right, the width will increase.

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

Our logo is just an anchor tag. By default, anchor tag is an inline element. So here, we set it to block and we floated it left.

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

Here, we floated the ul to right and applied other styling stuff to it.

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

Here we displayed the li to inline-block. This will make it to be on a single line. You can also choose to display it inline. I gave it margin-left of 10px in order to give space between the lists.

.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;
}

Here, we applied some basic styling to the main navigation anchor links, its hover and the active link.

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

Again, we set the header to the width of 1000px and centered it by giving it margin of auto left and right and 50px top and bottom.

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

Same here. We applied 1000px width to the div class of main and centered it.


.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;
}

This is the div that is carrying the three columns of Design, Develop and Deploy. We gave width of 300px to each. Now, 300 times 3 will give us 900. Remaining 100 from our base width of 1000px. We now gave them margin-right of 50px. They have three right sides. So 50 times 3 is 150 plus 900 will be 1050. This will be more than our base width of 1000. So we have to get rid of one of the 50. So I gave a class name of noRight to the third one so that we can set it to margin-right of zero.

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

This is normal. Just setting it to 1000px and giving it a margin-top of 50px.

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

This is the big div at the left. So we gave it 700px width. But since padding increases width of an element, we minused 40px from the width and now gave it width of 660px which is 700px in actual fact. Remember that top and bottom dont count in terms of width calculations. We floated it left and gave it margin right of 50px. Now, remember that its parent width is 1000px. So we now have 700px plus 50px, which is 750px. Remaining 250px.

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

This is normal. We floated the image inside the div class of article to left in order to force the paragraph after it to wrap around it. We gave it margin-right so that there will be a space between it and the paragraph. We also gave it a border, but the border was touching too much on the image, so we gave it some padding. But we dont want the bottom padding so that the hand image will not appear to be hanging, and the left side of the image has enough gap, so we only gave padding to top and right.

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

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

Remember the remaining 250px from the div class of article? We now gave it to the div class o sidebar and floated it right.

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

Here we have 6 images inside the div class of clients. Each image is 155px in width. So 155 times 6 is 930px. Remember that our base width is 1000px. So we now have 70px left. So we gave it padding of 35px, which is 70px left to right which will now make the width of the div 1000px.

.clients img{float:left}

Whereas image is an inline element, which means the six images will line up on one line naturally, but we needed to float the images so to get rid of any default space that will not allow them to accept their parent width of 930px. Without floating them, the images will not agree to be on one line.

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

This is normal. We just gave the div a width of 1000px and centered it left and rght with margin top and bottom of 50px.

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

This is basic. I wanted the h2 tag of div id of testimonial and the h2 of the div class of clients to be same.

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

This div is two. We have two testimonials. So we gave each of them a width of 475px, which when multiplied into two, we have 950px. Remaining 50px. Then we gave them margin-right of 50px which when multiplied will become 100px plus 950px equals to 1050px. So we used the class name of noRight to get rid of the margin-right on the last div of testimonial.

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

Here we floated the image inside the div class of testimonial to left.

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

Here we also floated the paragraph inside the div class of testimonial to right. Ordinarily, it suppose to wrap around the image, but we dont want that, so we floated it to the right. We want both of them to sit side by side.

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

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

This is just normal styling. We gave the footer width of 100% and a dark blue background.

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

This is a child of the div id of footer. This will now carry all the stuff inside the footer. It's not always good to use a div with a width of 100% as a direct parent. This is necessary because a div with a width of 100% will ignore margin:0 auto when applied to it.

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

Here, what happened when we styled the three div of our_process also applied here.

.noRight{margin-right:0}

So this div class of noRight must come after the divs class of our_process, testimonial and footer_details for it to do its work. In css, the last overwrites the first.

.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
}

Since this div class of copyright is following div class of footer_details, we used it to clear the float so that it will not attempt wrapping the divs.

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

I floated the paragraph inside the div class of copyright to left.

.social{
float:right;
}

And floated the div carrying the social icons to right.

This is it. We now have a good looking web page. But if you try resizing your browser or try viewing it online with mobile device, you will be greeted with a horizontal scrollbar which shows that it's not responsive. But making it to be responsive is a piece of cake. Next, we will dive into RWD proper and show us how we can make the web page to display perfectly on every mobile device no matter how small the device is. I will teach us the concept behind RWD. Fortunately for us, the concept is pretty simple.

Cheers.

^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.

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

You need to work on the way you do your markups. You are not been semantic enough. You should try to learn the concept of RWD and apply it. There is no point setting the width of your div class of wrap to 80%. Just start with a pixel, let's say 1010px width. Then make it responsive later. Just zoom your web page out and see how the slider image will go one side at the left.

I tried doing something here: www.ctrlshiftstudios.com/CyberClick

Just zoom it out and see. Then view it with a mobile device. I just did the one that will cater for maximum of 480px.

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

https://ctrlshiftstudios.com/screenshot.png


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.

It depends. Wordpress websites are also built from scratch. So whether you build a wordpress-based website from scratch or you customize an existing wordpress theme, knowledge of html, css and php is required. WP is just a CMS. For one to have total control of WP, the person must learn html, css, php (basics) and the internal workings of WP architecture. For u to dive into cms, i advice you first learn how to build beautiful websites wit raw html and css.

As long as web programming is concerned, what you will need to learn is endless. A time wil come, u wil discover that php is no longer enough and u wil be thinking of learning another language like ruby. Basically, one person cannot build a website like facebook the way it is now. It will demand a team of programmers. But for a start, u just have to learn php and mysql for now.

Just keep learning php and mysql. You can build a facebook-like website with php. Just learn the basics of php and practice a lot. Build something, maybe a CRUD system with registration and login. You dont need to cram anything. As u learn and practice, the codes and concepts will become natural to you. Always keep www.php.net handy for reference.

@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.

Are you using any php book for your learning? You should search and download a good php ebook at www.it-ebooks.info or better still, follow this awesome php tutorial at www.html.net or you can watch these wonderful php video tutorials at www.thenewboston.org

Again, what exactly is the problem you are facing in learning php?

Get the answer here: www.ctrlshiftstudios.com/Can-A-Nigerian-Website-Designer-Afford-A-Range-Rover-Sport

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.

^^^ 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. 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.

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.

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.

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.

https://ctrlshiftstudios.com/screenshot.png

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.

https://ctrlshiftstudios.com/sketch.png

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.