webdevRefinery Forum: How do I make X threads? - webdevRefinery Forum

Jump to content

  • 2 Pages +
  • 1
  • 2
  • You cannot start a new topic
  • You cannot reply to this topic

Rate Topic: ***** 3 Votes

User is offline hydralisk 

  • Group: Administrators
  • Posts: 496
  • Joined: 02-March 10
  • Expertise:HTML,CSS,Javascript,Flash

Posted 18 March 2010 - 08:42 PM (#1)

How do I make X threads?


CSS Zen Garden + firebug. Read this NOW.
I'm seeing so many threads pop up asking how to do pretty basic stuff, and I'm done responding to them. While I understand that there are going to be a lot of n00bies, I don't think this is the way you want to learn. I didn't sign up to spoon-feed people code. I want people to help themselves. When something just doesn't work for some reason, and you think it should, that's when I'll lend a hand. But please, for the love of God, learn the basics.

Step 1: Download Firefox.

Step 2: Download and install the add-on Firebug. This one is very important. Learn how to use this tool well. Get acquainted with the element inspector. This will let you highlight anything on a web page and see the HTML and CSS used to make it happen. This is extremely important, because this is how I learned to make web sites.

An extremely useful tool: Visit CSS Zen Garden. This web site was built around the concept of taking a page of HTML markup and displaying it in very unique ways using CSS. There are SO MANY different layouts using the EXACT same HTML. Not only is this totally awesome for the vast number of techniques you can learn, but you can download each example and see what files go into making that web site happen.

When you first visit the site, you'll see the basic design. On the right is a sidebar with more designs. Click "next" link to see more. As you visit each site, you'll see that it has the exact same markup displayed differently. Let's say you chose the design The Lonely Flower. If you like this site and what to see the CSS that goes with it, there's a link on each page called "View this Design's CSS."

The base HTML and CSS file should be on there as well. Look for "Download the sample HTML file and CSS file."

I can not emphasize how important it is for you to be able to learn how to pick apart another person's web site and learn how to do things. Even if you consider yourself to be a master, there will always be something new to learn. This tool is also awesome for seeing what's wrong with your own web site. You can also use Firebug to design inside the browser, which is something I'm doing more and more these days :)
8

User is offline magik 

  • magikly delicious
  • Group: Members
  • Posts: 1095
  • Joined: 08-March 10
  • Expertise:HTML,PHP,Javascript,SQL

Posted 18 March 2010 - 09:02 PM (#2)

I wholeheartedly agree, you must learn how to teach yourself, how to reverse engineer. They are definitely necessities in my opinion for any good developer ( any language/platform ). I've always found I learn the best by jumping right into the code and modifying/writing code how I think it works - and if it works, then awesome, my understanding was correct ( at least in this instance... ) - and if it doesn't, then you pull out your debugging tools and try to figure out what the hell is wrong. And by figuring out what the hell was wrong and fixing it to where it's right - you aren't just correcting a single line of code - you are correcting your understanding of how that code works. Even if you don't understand what's going on under the hood - at least you fix your understanding of the syntax.

You have no idea how often I've been told to do something a specific way in any language - and you do it that once, but you have no idea what you just did, because you just plugged and chugged. If you understood why someone is telling you to do something in a specific way - you understand the underlying concepts behind it and can easily figure out how and where to use that code.

I've pretty much taught myself every programming language/web development language that I know through these methods. I've never had any formal training. Look at a couple of basic tutorials, figure out how to get your basic Hello World program running, then add to it. Figure out what you want to add, and try to add it. At the start of my quest into learning I usually tend to copy code, then modify it. And all the while I'm looking and reading this code, figuring out how it accomplishes the task of what I am trying to do - and by the end of it, you gain a grain of knowledge. Build up enough grains and you'll have a sand castle. And that's what we all want right?

I can say though, that the one thing self-teaching lacks is teaching good fundamental practices. Since you're learning from so many different sources across the web, it's hard to get in the rhythm of sticking to a style. All the code you see will be formatted differently, and since there are a million ways to do the same thing - you'll be exposed to all of them. Sometimes it's nice to have a teacher to help you early on get rid of bad practices.

But this is exactly why I love the idea of this forum. You can come here as a complete noob, and not (hopefully) not get harassed by elitist devs. These forums allow one to learn good habits from experienced devs all the while learning the basics of any of these languages.

But as Hydralisk said - don't come here looking to be spoon fed. I don't see these forums as a teaching forums - but rather as an idea/learning forum. Come here to bounce around ideas of how you think code should be implemented. Don't come here asking someone to implement it for you.

And I've never been to CSS Zen Garden, but from your description, that sounds fantastically awesome. Take the exact same HTML and just change the CSS and see how powerful CSS can be! That's an amazing concept. Probably would help me think of some great ways to change up the display using only CSS.
.... magik's most awesomely rainbowed signature =þ

the wdR forums, on crack rocks, said:

Your signature may contain:
  • Any number images
  • Images of any size
  • Any number of URLs
  • Any number of lines

dangerous...
1

User is offline Mark 

  • Group: Members
  • Posts: 549
  • Joined: 08-March 10
  • LocationSacramento, CA, USA
  • Expertise:HTML,CSS

Posted 18 March 2010 - 09:15 PM (#3)

Wow this actually turned out good!
0

User is offline heLLo 

  • Group: Members
  • Posts: 70
  • Joined: 10-March 10

Posted 18 March 2010 - 10:35 PM (#4)

Thank you! I will for sure get that firebug and pop right back into learning at a very fast pace. Thanks guys!!

heLLo
Posted Image
0

User is offline Secretss 

  • Group: Members
  • Posts: 248
  • Joined: 08-March 10

Posted 19 March 2010 - 12:57 AM (#5)

Nice! I love the Zen Garden! Sweeeet.

May I just add something? A sort of guide to asking for help:

Instead of simply coming in and asking for help like this, I think you (we?) should

View PostSecretss, on 18 March 2010 - 10:41 AM, said:

1) Google first, find a couple of relevant guides. Show us what you found.
2) Try to use your findings in your work. Tell us what you already know. Show us what you did with the information you found.
3) Take note of what happened. What were the results? It didn't work? Show us how it didn't work.

And then we might be able want to help.

Twitter
0

User is offline heLLo 

  • Group: Members
  • Posts: 70
  • Joined: 10-March 10

Posted 21 March 2010 - 09:21 AM (#6)

Is Zen Garden better that w3schools?

heLLo
Posted Image
0

User is offline Secretss 

  • Group: Members
  • Posts: 248
  • Joined: 08-March 10

Posted 21 March 2010 - 10:28 AM (#7)

View PostheLLo, on 21 March 2010 - 09:21 AM, said:

Is Zen Garden better that w3schools?

heLLo
It's not a tutorial/school site. It's a site with various "skins" that a visitor can switch. The point is to show you that, with the exact same HTML file, you can apply different stylesheets to achieve completely different appearances of your page.

It also lets you download the skins for study/use. Users can download the sample HTML and CSS files and create their own CSS and submit to them.
Twitter
0

User is offline DarkCoder 

  • Group: Members
  • Posts: 1463
  • Joined: 08-March 10
  • LocationEngland, United Kingdom
  • Expertise:HTML,CSS,PHP,Javascript,SQL

Posted 21 March 2010 - 04:02 PM (#8)

And especially when the author asks for help then doesn't even respond when people try and give them help and code examples...
lynxphpPosted Image
0

User is offline heLLo 

  • Group: Members
  • Posts: 70
  • Joined: 10-March 10

Posted 21 March 2010 - 10:12 PM (#9)

Hmmmm. I'll get on that tomorrow.

heLLo
Posted Image
0

User is offline saligal 

  • Group: Members
  • Posts: 13
  • Joined: 13-March 10
  • Expertise:HTML,CSS,PHP,Javascript,SQL,Graphics,Flash

Posted 26 March 2010 - 08:16 AM (#10)

Is firebug better than chrome's Dev tools?
0

User is offline Mack 

  • http://mackgoodstein.com/
  • Group: Members
  • Posts: 2070
  • Joined: 08-March 10
  • Expertise:HTML,CSS,PHP,Javascript

Posted 26 March 2010 - 01:28 PM (#11)

View Postsaligal, on 26 March 2010 - 08:16 AM, said:

Is firebug better than chrome's Dev tools?


They make firebug for chrome, why not experiment?
My Site
My Photos
Posted Image
0

User is offline Olli 

  • Veteran.
  • Group: Members
  • Posts: 685
  • Joined: 08-March 10
  • LocationEngland, Manchester
  • Expertise:HTML,CSS,Graphics

Posted 14 April 2010 - 05:13 PM (#12)

View PostMack, on 26 March 2010 - 01:28 PM, said:

They make firebug for chrome, why not experiment?


no, Chrome has the 'Inspect element' function built in.
Steam : Ollibreh


if you want to achieve greatness stop asking for permission
0

User is offline Mack 

  • http://mackgoodstein.com/
  • Group: Members
  • Posts: 2070
  • Joined: 08-March 10
  • Expertise:HTML,CSS,PHP,Javascript

Posted 14 April 2010 - 05:34 PM (#13)

View PostOlli, on 14 April 2010 - 05:13 PM, said:

no, Chrome has the 'Inspect element' function built in.


Yeah, but it also has firebug available as an extension.
My Site
My Photos
Posted Image
0

User is offline WeHaveMetBefore 

  • Group: Members
  • Posts: 8
  • Joined: 20-June 10

Posted 21 June 2010 - 02:33 PM (#14)

Oh my god! Thank you so much! Firebug is amazing, I found so many snippets of code here and there that I could use. Again, thanks so much!
~Whatever we haven't lived up to today is lost forever. 
0

User is offline Daniel15 

  • dan.cx
  • Group: Moderators
  • Posts: 3415
  • Joined: 17-April 10
  • LocationMelbourne, Australia
  • Expertise:HTML,CSS,PHP,Java,Javascript,Node.js,SQL

Posted 22 June 2010 - 05:28 AM (#15)

Great topic! Very nice :D

Quote

Is firebug better than chrome's Dev tools?

Chrome, like Opera, has dev tools built in. I still prefer Firebug as it seems to work better. Opera's dev tools are getting pretty good now though :D


Speaking of CSS Zen Garden (and something kinda similar), I used to have an easter egg on my site - If you went into the browser's styles menu and chose the "Not an easter egg" style, you'd go from my normal site layout:
Posted Image
To a clone/copy of a theme that used to come with Frontpage 2000 and I saw used all the time many many years ago:
Posted Image
:lol: :lol:
Daniel15! :D
Posted Image

Repeat after me: jQuery is not JavaScript. It is not the answer to every JavaScript-related question. When you have to write some JavaScript, do not instantly react with "Oh, I'll do that with jQuery!"

Spoiler
0

User is offline AbrarSyed 

  • Yeah, I know, I am just that awesome...
  • Group: Members
  • Posts: 685
  • Joined: 03-July 10
  • LocationIL, USA
  • Expertise:HTML,CSS,PHP,Javascript,Graphics

Posted 23 July 2010 - 03:57 PM (#16)

BTW. Opera has the all-amazing Opera Dragon FLy......
MINECRAFT PARTY
67.175.138.40:443 OFFLINE
0

User is offline Koen 

  • Leroy Jenkins
  • Group: Members
  • Posts: 2503
  • Joined: 10-March 10
  • Locationthe Netherlands
  • Expertise:HTML,CSS,Javascript,Graphics

Posted 23 July 2010 - 04:24 PM (#17)

View PostAbrarSyed, on 23 July 2010 - 03:57 PM, said:

BTW. Opera has the all-amazing Opera Dragon FLy......

Hmm, I still prefer Chrome's devtools!
Please click the + if I helped you!
Twitter: @KoenKlaren

<callumacrae> YOU DID A ROMNEY
0

User is offline Daniel15 

  • dan.cx
  • Group: Moderators
  • Posts: 3415
  • Joined: 17-April 10
  • LocationMelbourne, Australia
  • Expertise:HTML,CSS,PHP,Java,Javascript,Node.js,SQL

Posted 23 July 2010 - 07:16 PM (#18)

I still prefer Firebug, honestly. :P
Daniel15! :D
Posted Image

Repeat after me: jQuery is not JavaScript. It is not the answer to every JavaScript-related question. When you have to write some JavaScript, do not instantly react with "Oh, I'll do that with jQuery!"

Spoiler
0

User is offline fauverism 

  • Group: Members
  • Posts: 8
  • Joined: 09-March 10
  • Expertise:HTML,CSS,PHP,Javascript,Graphics

Posted 07 November 2011 - 07:25 AM (#19)

I used to love Firebug too. Paul Irish converted me. Check out http://paulirish.com...eveloper-tools/
0

User is offline Kyek 

  • Founder of wdR
  • Group: Administrators
  • Posts: 5078
  • Joined: 20-February 10
  • LocationPhiladelphia, PA, USA
  • Expertise:HTML,CSS,PHP,Java,Javascript,Node.js,SQL

Posted 07 November 2011 - 08:07 AM (#20)

View Postfauverism, on 07 November 2011 - 07:25 AM, said:

I used to love Firebug too. Paul Irish converted me. Check out http://paulirish.com...eveloper-tools/

Holy... holy crap! The Chrome dev tools are great, but I'd given up on using it for JS debugging a year ago because it just wasn't as reliable as Firebug. It would appear some work has been done in that department! Un-minification right in the browser is frickin' amazing!
Twitter :: GitHub :: webdevRefinery ;-)
0

Share this topic:


  • 2 Pages +
  • 1
  • 2
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users


IPB Skins by Skinbox

Enter your sign in name and password

Sign in options
  Or sign in with these services