Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,152,114 members, 7,814,914 topics. Date: Wednesday, 01 May 2024 at 11:13 PM

Responsive Web Design Tutorial From Scratch - Webmasters (4) - Nairaland

Nairaland Forum / Science/Technology / Webmasters / Responsive Web Design Tutorial From Scratch (6776 Views)

What’s The Difference Between A Mobile Website And Responsive Web Design? / JavaScript Tutorial From The Scratch Brought To You From Part 2 / Javascript Tutorial From The Scratch Brought to you from Part 1 (2) (3) (4)

(1) (2) (3) (4) (Reply) (Go Down)

Re: Responsive Web Design Tutorial From Scratch by NnamdiN: 8:46am On Oct 25, 2013
emmyw: sometimes people will be looking for were they will exchange words with people,well NnamdiN,you can visit my forum below,and if you want me to design a site practically,i can do it,but you have to know that you likes people that brag and boast,i'm sure if they give you pc,you can't design a site without seeking for nairaland help.watch the way you talk,never talk too much cos you are a man.and lets this argument stop,i don't want it anymore.
I'm seriously confused here. What did I write that offended you I have no knowledge of website design, you asked what next and I simply stated it was time for us (the newbies). What's all the gospel about bro?
Re: Responsive Web Design Tutorial From Scratch by Nobody: 8:52am On Oct 25, 2013
emmyw: sometimes people will be looking for were they will exchange words with people,well NnamdiN,you can visit my forum below,and if you want me to design a site practically,i can do it,but you have to know that you likes people that brag and boast,i'm sure if they give you pc,you can't design a site without seeking for nairaland help.watch the way you talk,never talk too much cos you are a man.and lets this argument stop,i don't want it anymore.

Pls Do Not Derail This Thread.. Its Meant for people that are learning.. And it aint a must that u gotta Respond to People's Thoughts..

As for your Forum u talking about, Its just an SMF.. Just a few clicks.. Pls let Peace Reign..

@OP Thanks Boss.. I've Learnt a lot so Far..
Re: Responsive Web Design Tutorial From Scratch by emmyw(m): 2:55pm On Oct 25, 2013
Djangocode:

Pls Do Not Derail This Thread.. Its Meant for people that are learning.. And it aint a must that u gotta Respond to People's Thoughts..

As for your Forum u talking about, Its just an SMF.. Just a few clicks.. Pls let Peace Reign..

@OP Thanks Boss.. I've Learnt a lot so Far..
what brought you inbetween the matter did i tel u we re quereln,keep ur mouth shot, bad mouth,bad belle,that wat draws u bak,d bible said its a sin to raise case.stop ur evil.
Re: Responsive Web Design Tutorial From Scratch by Appliedmaths(m): 3:18pm On Oct 31, 2013
@op and every one, please I didn't get the last part on how to add the @media query to the main css style sheet.

Are we to paste the newly edited @media and all (max-width:480px)... Immediately after the last code on our main style sheet?


I've done this but when I re-size my browser both mozilla and IE , the page remains un-responsive pls any other solution. My system isn't connected to the internet sha!.
Re: Responsive Web Design Tutorial From Scratch by GraphicsPlus(m): 4:00pm On Oct 31, 2013
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.
Re: Responsive Web Design Tutorial From Scratch by Appliedmaths(m): 4:44pm On Oct 31, 2013
GraphicsPlus: 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.

Ok sire!, I think I've gotten it now. So if it's a real situation then the page we created will be properly viewed by devices with 480px max-width and also standard web browsers simultaneously.
Re: Responsive Web Design Tutorial From Scratch by turl(m): 10:12pm On Oct 31, 2013
Nice one man..nice to see someone schooling people on RWD..I'll keep an eye on this. If I had to suggest anything though i'd say you should've approached it from a mobile-first angle. That's the best way especially for the African demographic that have limited access to bandwidth.

Nice one all the same brah!
Keep it up.
Re: Responsive Web Design Tutorial From Scratch by Appliedmaths(m): 1:00am On Nov 01, 2013
@OP and all, after much research here's how it worked form me ...I set my min-width to 480px and my max width to 980px on my main style sheet. I.e

@media and all (min-width:480px) and (max-width:980px)...etc

So if I minimize my browser page I get a perfect mobile lay out and immediately I maximize I get a perfect full laptop screen layout. So I can actually capture device screens ranging from 420px - 980px .Thanks all the way! #cheers!
Re: Responsive Web Design Tutorial From Scratch by CODEEATER(m): 8:45am On Nov 01, 2013
#GraphicsPlus
#i know my following question is not related to the thread topic but I don't know who to turn to##

I have been going through some stuff in nodejs and something has been bugging me.

In all the tuts I have read it involves installing the node package on your local machine and having to run some codes in cmandline to run ur njs scripts... but what about on an online web server... who on earth am I going to install node on bluehost for example.. and the command line thing,how can all that be done on a real web server?

Or is there another way?...
Re: Responsive Web Design Tutorial From Scratch by dansmog(m): 10:22pm On Nov 01, 2013
CODE-EATER:
#GraphicsPlus
#i know my following question is not related to the thread topic but I don't know who to turn to##

I have been going through some stuff in nodejs and something has been bugging me.

In all the tuts I have read it involves installing the node package on your local machine and having to run some codes in cmandline to run ur njs scripts... but what about on an online web server... who on earth am I going to install node on bluehost for example.. and the command line thing,how can all that be done on a real web server?

Or is there another way?...
not all the host supports node.js, i think on the official website, there is a list of supported host. and a tutorial too on installing on an online web server ... this will help you http://stackoverflow.com/questions/14290769/do-online-webhosting-accounts-allow-the-customers-to-install-and-run-webservers
Re: Responsive Web Design Tutorial From Scratch by Cordova: 5:12pm On Nov 02, 2013
Good job jo. Carry go. We dey campe
Re: Responsive Web Design Tutorial From Scratch by GraphicsPlus(m): 7:23am On Nov 03, 2013
@Code-Eater, am on mobile now. i wil get back to on ur question. meanwhile u can check the answer someone offered.
Re: Responsive Web Design Tutorial From Scratch by Nobody: 11:05pm On Jan 03, 2014
grin grin grin grin I have really learnt a lot from this thread, please dont allow thread to die, we need more tutorials.
Re: Responsive Web Design Tutorial From Scratch by Lianna2020: 10:03am On Oct 26, 2020
Error
Re: Responsive Web Design Tutorial From Scratch by DanieleLorenzo: 6:26am On Sep 29, 2022
k
Re: Responsive Web Design Tutorial From Scratch by akwesenana: 8:13am On Oct 25, 2022
Lima98 that man just dey whine me.

By 12:00 am yesterday, he sent me like 15 topics to review and that I'll take a test today.


I asked if we could be sending it on Facebook but he said I should pass the test first.

I don't really understand the man sha.

Although the work, I'm up to it.smiley
Re: Responsive Web Design Tutorial From Scratch by Lima98(f): 8:17am On Oct 25, 2022
akwesenana:
Lima98 that man just dey whine me.

By 12:00 am yesterday, he sent me like 15 topics to review and that I'll take a test today.


I asked if we could be sending it on Facebook but he said I should pass the test first.

I don't really understand the man sha.

Although the work, I'm up to it.smiley
yes that's how he do his thing just do the test if you can he want to comfirm if you can really do the work

(1) (2) (3) (4) (Reply)

How To Get More Readers On Your Blog / How To Use Ajax (asynchronous Javascript) / 100 Euro Itunes Gift Card For Sale

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 32
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.