|
So as it is I want to learn how to create a website, more specifically I want to learn how to create a team/tournament website for the Game League of Legends I have a few friends IRL who have the necessary skill to do well in these events and I want to help create something useful to E-Sports as a whole. So first of all I want to learn how to create websites that look professional and well organized but also appeal to the proper audience (a la sponsors and the gaming community).
I understand that this is going to take time and alot of this is just going to be practice and doing these things over and over until I memorize the various command lines like style="background-color:grey" or whatever but to actually learn these I need to understand what every line means and does and thats where im having problems. I am using the website http://www.w3schools.com/ to do the basic learnings and ive done the HTML and XHTML which was generally a breeze, I just kept notepad open and did everything along side of the tutorial, but I have moved onto CSS and thats where I am having problems.
Its not that I don't exactly understand what the command lines mean from the CSS tutorial but im having problems following it like I did for the HTML/XHTML. Im wondering what the best way to put it into practice while I following along would be. Should I just open 2 Notepads throw up some really basic HTML for one and try to manipulate it as I go along with the CSS tutorial? I feel like I am getting to jumpy and wanting to dive farther than I need to and thinking more than I need to (like using photoshop to make a layout and learning to slice things).
So I guess this would be the TLDR;
What would be the best easiest way to learn CSS? Make a basic HTML page and manipulate it with the second notepad with CSS as I follow along with the w3schools tuts? Is there more benefit to learning faster from using programs like Dreamweaver or is learning from books you could pick up from like barnes and nobles or borders the best option?
|
I suggest learning the basics from any of the millions of tutorials out there, so you know what you're looking at (if you don't already), and then opening up some of your favorite sites in Chrome or another Webkit-based browser with Web Inspector enabled (you can use Firebug also if you prefer but Web Inspector is much more feature rich).
Then you can click on HTML elements and see the styles that were applied to them on the right side. You can also modify those styles to see what effects they have on the page.
HTML and CSS are pretty easy to get the basics of, stuff is fairly straightforward once you know the syntax. And it's not as if you need to memorize all of the features of the language as you can always google stuff as you need it. Use w3schools as a reference (or just google which usually takes you there anyway) 
Personally I never found too much use in the books that are available, or continuing to do tutorials and the like, I just learned by experimentation. As for programs to use, any of them work fine, as long as you are actually manipulating the text and not relying on GUI features. Personally I use Espresso but it is Mac-only. I did use Dreamweaver when I used a PC, but I was careful to never let it manipulate my code for me.
BUT, here is the trick, HTML/CSS has nothing to do with functionality. If you want to make an automated tournament site with self-updating brackets and all that jazz, there's going to be a lot more to it. Namely, PHP, or Ruby, or some other language capable of accessing a database. And the unfortunate thing is, rarely are people good at both aspects of web development. For me, picking up the functionality side of things is quite difficult.
|
On February 16 2011 23:23 telfire wrote:I suggest learning the basics from any of the millions of tutorials out there, so you know what you're looking at (if you don't already), and then opening up some of your favorite sites in Chrome or another Webkit-based browser with Web Inspector enabled (you can use Firebug also if you prefer but Web Inspector is much more feature rich). Then you can click on HTML elements and see the styles that were applied to them on the right side. You can also modify those styles to see what effects they have on the page. HTML and CSS are pretty easy to get the basics of, stuff is fairly straightforward once you know the syntax. And it's not as if you need to memorize all of the features of the language as you can always google stuff as you need it. Use w3schools as a reference (or just google which usually takes you there anyway) Personally I never found too much use in the books that are available, or continuing to do tutorials and the like, I just learned by experimentation. As for programs to use, any of them work fine, as long as you are actually manipulating the text and not relying on GUI features. Personally I use Espresso but it is Mac-only. I did use Dreamweaver when I used a PC, but I was careful to never let it manipulate my code for me.
Well Ive already gone through the HTML and XHTML its all pretty straight forward so far and I understand most of it is just going to be me going back and referencing all of this until it become embedded into my brain but Im going through this tutorial just for why you said, to learn the syntax and why when you use them. (I intend on going through HTML/XTHML/CSS/ and PHP as the essentials maybe branch out later to ASP and other things if I find the need for it). Also I would have never thought of opening the sites in Firebug or Web-inspector thanks for the idea!
thanks for answering most of my questions.
|
Never branch to ASP IMO... PHP can do everything it can do and more, there are better languages out there for every purpose.
Anyways best of luck It's hard to answer as it's kind of broad, but if you have any specific questions I'd be more than happy to help as well.
But yeah, Web inspector is AMAZING, for both learning and tweaking your work. You get to see the results instantly, and if you don't already have a text editor that lets you do that it's soooo much better than upload, refresh, upload, refresh, etc.
|
When a panda edits his text files with notepad makes me a Sad[Panda].
|
On February 16 2011 23:46 MoreFaSho wrote:
When a panda edits his text files with notepad makes me a Sad[Panda].
Whats wrong with Notepad :<
|
Absolutely nothing. There are features of other text editors that will save you time, but there is nothing you can't do with notepad that you can do with some other program.
|
I use Notepad2 and sometimes Notepad++ for my (limited) coding. I like the feel of them, as they're similar to Notepad you get the feeling that it's just you and the code without too much clutter. They're both superior to Notepad in that they 'know' what programming language you're writing in, and they color code tags and elements making it easy too see the structure of your page, as well as a ton of other nice features. Notepad++ is great because it supports tabs. You can have several files open in just one window, just like your favorite browser.
Now, for the longest time I used Dreamweaver (I'm contemplating going back), and like telfire I was careful to not let it alter my code because 1) I wanna actually know what I'm doing and 2) WYSIWYGs often generates cluttered, weird looking code. At least they used to. The reason I like Dreamweaver (I think I used CS3) is that like Notepad++, it supports tabs, and secondly, it can actually speed up your coding by basically helping you autocomplete lines. What I mean by that is, say you want to change the position of one of your elements but you can't remember all the possible values of the position-property. What you do then is, just type "position:" like you normally would, and after the colon, Dreamweaver opens up a drop-down menu with all the possible values to that property (relative, absolute, fixed...). Similarly, if you want to assign a class (that you've specified in your style sheet, included in the head section of your page) to a new layer you go <div class=" and Dreamweaver shows you another drop down with all your classes. Stuff like that make Dreamweaver (and probably other editors that I have yet to come in contact with) a pretty sweet editor. Just don't let it mess with your code.
Also, good luck. Web designing is loads of fun, but bear in mind that server-side programming is loads more advanced than just HTML/CSS.
|
On February 17 2011 00:32 Platrius wrote:I use Notepad2 and sometimes Notepad++ for my (limited) coding. I like the feel of them, as they're similar to Notepad you get the feeling that it's just you and the code without too much clutter. They're both superior to Notepad in that they 'know' what programming language you're writing in, and they color code tags and elements making it easy too see the structure of your page, as well as a ton of other nice features. Notepad++ is great because it supports tabs. You can have several files open in just one window, just like your favorite browser. Now, for the longest time I used Dreamweaver (I'm contemplating going back), and like telfire I was careful to not let it alter my code because 1) I wanna actually know what I'm doing and 2) WYSIWYGs often generates cluttered, weird looking code. At least they used to. The reason I like Dreamweaver (I think I used CS3) is that like Notepad++, it supports tabs, and secondly, it can actually speed up your coding by basically helping you autocomplete lines. What I mean by that is, say you want to change the position of one of your elements but you can't remember all the possible values of the position-property. What you do then is, just type "position:" like you normally would, and after the colon, Dreamweaver opens up a drop-down menu with all the possible values to that property (relative, absolute, fixed...). Similarly, if you want to assign a class (that you've specified in your style sheet, included in the head section of your page) to a new layer you go <div class=" and Dreamweaver shows you another drop down with all your classes. Stuff like that make Dreamweaver (and probably other editors that I have yet to come in contact with) a pretty sweet editor. Just don't let it mess with your code. Also, good luck. Web designing is loads of fun, but bear in mind that server-side programming is loads more advanced than just HTML/CSS.
thank you very much for this wonderful and informative first post, Ill have to look into Notepad++ as the highlighting and the multiple tabs sound extremely useful for organizing and actually being able to Identify things so Im going to look into that.
I think I will wait to use programs like Dreamweaver (although I already have it from school) just so I don't have the option of autofilling codes so I don't autopilot everything without really taking the time to do it myself.
I understand that theres alot of server side programming and the latter, I have a friend who is very well versed in those parts of things and owns a few VPS's (He makes money being a dirty little spam whore lolol) and does alot of coding for his own programs and hosts quite a few websites himself (mostly for spamming to make money but to each their own.) he said he'd be willing to help me with my needs when I get there but I would rather become well versed in each piece one step at a time I guess.
(sorry if this is a bit disorganized Ive been awake for 18 hours ill come back and maybe edit this for clarification later.)
|
I think you should either learn a programming language, preferably a functional one, and write a program that writes html for you, or learn a web design program like dreamweaver. No one should ever write html by hand. As for CSS, there are people who resist it for good reasons. Particularly the one I already mentioned (html should be treated as object code). Tables, spacer gifs, etc. can do a good job too.
|
There's nothing wrong with using Dreamweaver in code-only. Otherwise, it's always good to change stuff in Dreamweaver and look to see what changed in the code.
Other than that, the easiest way to learn depends on you. Are you good at learning by reading on your own? If you were to read some websites or ebooks, do you think you'd be okay? Do you need personal instruction or tasks to learn things?
If the former, I have tons of ebooks (20GB worth) ranging on a huge variety of topics. If that's something you're interested in, if you'd like some CSS ones, I can hook you up with those. Otherwise, using some online tutorials is easy enough.
If the latter, do you know anyone that's experienced in CSS? I'm sure someone on here might volunteer up their time to assign tasks or something that might be a good learning experience. I've always found for myself, that learning just for the sake of knowing won't completely prepare you for a specific task; you'll learn far more from a project-based approach where there are specific guidelines and things that must occur.
|
On February 17 2011 01:00 Cloud wrote:
I think you should either learn a programming language, preferably a functional one, and write a program that writes html for you, or learn a web design program like dreamweaver. No one should ever write html by hand. As for CSS, there are people who resist it for good reasons. Particularly the one I already mentioned (html should be treated as object code). Tables, spacer gifs, etc. can do a good job too.
I couldnt disagree more. Iv been a web designer for around 9 years, doing it professionally for 4. Coding XHTML and CSS by hand gives you very fine control over how your website will appear. Ofcourse you shouldnt just dive in and code. There are alot of theory you need to learn before then. Understanding stuff such as the Box Model and the difference between Block and Inline elements will help you ALOT.
Along the way, you will encounter bugs that are browser specific... the most obvious browser to show up would be IE6. How ever, ima say this one time:
For the majority of websites, there is nothing you can do in a modern browser that you cant do in IE6. The only hacks should be for PNG and :hover fixes. And maybe a 1px alignment here and there.
You may say, IE6 doesnt follow standards etc... BUT if you fully understand the box model and IE6's little quirks (like the float margin double bug (fixed with display:inline)) and you plan ahead with your code, there is nothing you cannot do.
For an example: http://motorstormers.com
I made that site a few years back and its pixel perfect in most browsers (all that i have tested) and the hacks were mainly for PNGs.
Wow... look at me ramblin on O_O
Ok ok, to learn XHTML and CSS, i strongly recommend you become part of a web design forum, and be active in it. I used to be an admin at http://techtuts.com/ (dead now) and i started off with no knowledge of php html css etc before i found that site. The members helped me out answeringf my questions etc and i worked my way up. Ofcourse you need to have that drive to learn otherwise no amount of help will get you anywere.
I would suggest you start off learning basic xhtml + css then once yoru comfortable making simple latouts, focus on learning a aserverside language aswell. I use PHP so naturally i recommend that.
Here are some useful links for you:
www.tizag.com <- although the forums are kinda dead, users still lurk there, excelent tutorials for beginers on the main site however
http://www.webdesignerforum.co.uk/ <- alot more active forum
http://sitepoint.com/ <- lots of articles and active forums
http://smashingmagazine.com <- more to do with the design part of the web but still they have the odd article on ccoding and they have lots of inspiration posts
http://stackoverflow.com <- coding problem mecca. ask any programming question (if its well worded) and expect an indepth answer in around 10 minutes, awesome site
thats all i can think of atm, PM me if you have any other questions
|
On February 17 2011 01:00 Cloud wrote:
I think you should either learn a programming language, preferably a functional one, and write a program that writes html for you, or learn a web design program like dreamweaver. No one should ever write html by hand. As for CSS, there are people who resist it for good reasons. Particularly the one I already mentioned (html should be treated as object code). Tables, spacer gifs, etc. can do a good job too.
I sincerely hope this is a troll.
Tables load slower, produce poor search rankings, are less accessible to the impaired, take longer to create and modify, are much more difficult to collaborate with, and are simply poor practice. Everything that can be done with tables can be done with CSS, but CSS gives you far, FAR more control. The only time you use tables is when you have tabular data.
You won't be taken seriously in the design world saying things like this.
|
Hyrule19104 Posts
On February 17 2011 02:00 Lyzon wrote:Show nested quote +On February 17 2011 01:00 Cloud wrote:
I think you should either learn a programming language, preferably a functional one, and write a program that writes html for you, or learn a web design program like dreamweaver. No one should ever write html by hand. As for CSS, there are people who resist it for good reasons. Particularly the one I already mentioned (html should be treated as object code). Tables, spacer gifs, etc. can do a good job too. I couldnt disagree more. Iv been a web designer for around 9 years, doing it professionally for 4. Coding XHTML and CSS by hand gives you very fine control over how your website will appear. Ofcourse you shouldnt just dive in and code. There are alot of theory you need to learn before then. Understanding stuff such as the Box Model and the difference between Block and Inline elements will help you ALOT. Along the way, you will encounter bugs that are browser specific... the most obvious browser to show up would be IE6. How ever, ima say this one time: For the majority of websites, there is nothing you can do in a modern browser that you cant do in IE6. The only hacks should be for PNG and :hover fixes. And maybe a 1px alignment here and there. You may say, IE6 doesnt follow standards etc... BUT if you fully understand the box model and IE6's little quirks (like the float margin double bug (fixed with display:inline)) and you plan ahead with your code, there is nothing you cannot do. For an example: http://motorstormers.comI made that site a few years back and its pixel perfect in most browsers (all that i have tested) and the hacks were mainly for PNGs. Wow... look at me ramblin on O_O Ok ok, to learn XHTML and CSS, i strongly recommend you become part of a web design forum, and be active in it. I used to be an admin at http://techtuts.com/ (dead now) and i started off with no knowledge of php html css etc before i found that site. The members helped me out answeringf my questions etc and i worked my way up. Ofcourse you need to have that drive to learn otherwise no amount of help will get you anywere. I would suggest you start off learning basic xhtml + css then once yoru comfortable making simple latouts, focus on learning a aserverside language aswell. I use PHP so naturally i recommend that. Here are some useful links for you: www.tizag.com <- although the forums are kinda dead, users still lurk there, excelent tutorials for beginers on the main site however http://www.webdesignerforum.co.uk/ <- alot more active forum http://sitepoint.com/ <- lots of articles and active forums http://smashingmagazine.com <- more to do with the design part of the web but still they have the odd article on ccoding and they have lots of inspiration posts http://stackoverflow.com <- coding problem mecca. ask any programming question (if its well worded) and expect an indepth answer in around 10 minutes, awesome site thats all i can think of atm, PM me if you have any other questions
Web developer for 12 years, 4 professionally....and I agree with everything. Not ever using HTML yourself is a terrible idea. It's like saying you should never use the pedals on a car when you can just use the cruise controls instead.
I learned in the old days. Namely, I had a Geocities site (fuck yeah Geocities). I just messed around in Notepad (and later Notepad2, which I recommend over Notepad++) until I got the results I wanted. After a few months looking up stuff you'll be able to do a lot of what you want quite quickly.
Also, functional sites will require a serverside language (I also recommend PHP) and a database system (go MySQL!). Avoid ASP, it's the devil.
|
On February 17 2011 02:31 tofucake wrote:
Avoid ASP, it's the devil.
Rofl so true
|
I'm not a troll, there a whole load of good programmers with the same views as mine, you don't need to trust what I say but you can at least bear in mind that there is a part of the community that disagrees with models like CSS.
http://www.flownet.com/ron/css-rant.html
|
On February 16 2011 23:47 Sad[Panda] wrote:Show nested quote +On February 16 2011 23:46 MoreFaSho wrote:
When a panda edits his text files with notepad makes me a Sad[Panda]. Whats wrong with Notepad :<
Just such weak editing ability and format control. I would really suggest learning vi (there's a tutoral that comes with the vim for windows download), eventually you'll love it. But without starting editor wars, some kind of keyword and format aware editor (jedit, eclipse, emacs, etc.) would be a real help.
|
|
|
On February 17 2011 04:17 Cloud wrote:I'm not a troll, there a whole load of good programmers with the same views as mine, you don't need to trust what I say but you can at least bear in mind that there is a part of the community that disagrees with models like CSS. http://www.flownet.com/ron/css-rant.html
every example in that page can be made using CSS. Hes just arguing that CSS is useless cos its hard to learn.........
|
On February 17 2011 02:03 telfire wrote:Show nested quote +On February 17 2011 01:00 Cloud wrote:
I think you should either learn a programming language, preferably a functional one, and write a program that writes html for you, or learn a web design program like dreamweaver. No one should ever write html by hand. As for CSS, there are people who resist it for good reasons. Particularly the one I already mentioned (html should be treated as object code). Tables, spacer gifs, etc. can do a good job too. I sincerely hope this is a troll. Tables load slower, produce poor search rankings, are less accessible to the impaired, take longer to create and modify, are much more difficult to collaborate with, and are simply poor practice. Everything that can be done with tables can be done with CSS, but CSS gives you far, FAR more control. The only time you use tables is when you have tabular data. You won't be taken seriously in the design world saying things like this.
The amount of people who are still taught to use tables even in college is astounding.
|
Quick question for all of you who do this professionally: how old were you when you were first interested in learning web design and how long did you go to school for it?
|
I first started learning or teaching myself, when i was around 11. i started making linked word documents as websites then i was introduced to dreamweaver... veentually i started learning more and more... now im 21 and thanks to my eagerness to learn when i was young, i have a good future ahead of me in web design
|
On February 17 2011 05:19 RedLuck wrote:
Quick question for all of you who do this professionally: how old were you when you were first interested in learning web design and how long did you go to school for it?
I was 9 and I did not go to school, I self taught. I was terrible for quite some time, but 11 years later I am freelancing for a number of companies. I continue to brush up on my skills and learn new ones. The web is constantly changing and I feel like school might be a decent foundation, but you're going to NEED to self-teach to keep up afterwards anyway. I do not feel it is mandatory.
|
|
|
On February 17 2011 05:19 RedLuck wrote:
Quick question for all of you who do this professionally: how old were you when you were first interested in learning web design and how long did you go to school for it?
I went to art school and studied graphic design, and I taught myself HTML and CSS with a lynda.com dreamweaver tutorial. Now I end up doing most things from dreamweaver's coding window, and I could plausibly do it purely on code, but it's nice to have the program step in and organize things for me since I'm not accustomed to coding (my tech experience is limited to browsing the web and playing games).
It's important to make distinctions between web designers and web developers, and what part of it you want to focus on.
Also, tables are useful for some situations because the slice tool in adobe programs allow you to create a design and export it to a tables layout with all the image resources and rollovers already organized for you, with a minimum amount of coding or general effort. It's the fastest and easiest way to make a website that'll never get updated for a client that doesn't want to bother maintaining it, and the layout is durable enough to work on all browsers (older IE versions don't render CSS properly, and all browsers interpret the code a bit differently, though I'm not too clear on the specifics). The firm I interned at kept Adobe ImageReady from the original creative suite (it got replaced by adobe fireworks, I believe) because it converted to tables with the least amount of hassle.
|
+ Show Spoiler +On February 17 2011 06:28 formthehead wrote:Show nested quote +On February 17 2011 05:19 RedLuck wrote:
Quick question for all of you who do this professionally: how old were you when you were first interested in learning web design and how long did you go to school for it? I went to art school and studied graphic design, and I taught myself HTML and CSS with a lynda.com dreamweaver tutorial. Now I end up doing most things from dreamweaver's coding window, and I could plausibly do it purely on code, but it's nice to have the program step in and organize things for me since I'm not accustomed to coding (my tech experience is limited to browsing the web and playing games). It's important to make distinctions between web designers and web developers, and what part of it you want to focus on. Also, tables are useful for some situations because the slice tool in adobe programs allow you to create a design and export it to a tables layout with all the image resources and rollovers already organized for you, with a minimum amount of coding or general effort. It's the fastest and easiest way to make a website that'll never get updated for a client that doesn't want to bother maintaining it, and the layout is durable enough to work on all browsers (older IE versions don't render CSS properly, and all browsers interpret the code a bit differently, though I'm not too clear on the specifics). The firm I interned at kept Adobe ImageReady from the original creative suite (it got replaced by adobe fireworks, I believe) because it converted to tables with the least amount of hassle.
I only ask because I've always had the itching to learn HTML and web development but I've never acted upon it. At this point in my life I'd really like to start REALLY getting into something like this for which I've always been passionate for.
I 'started' to learn html about 2 years ago but I didn't follow through with it and now I'm 20 years old and kicking myself for not continuing to learn. Now after hearing that a lot of people here started when they were young teens it makes me wonder if I'm too old to scratch this itch. It feels like I'll be years behind everybody which annoys me as I am a semi-perfectionist at times.
|
its never to old to start. if you say stuff like dat, you will fail. Just view it as your a bronze in web dev and were master/diamond
the key to rising up the levels is practise. noone is born a master/diamond, we all start off bronze and work our way up. how quick you level up is determined by how much you study and practise.
so open up dreamweaever, make some templates in design view, switch to code and study it. edit it and see what changes. read up on browser quirks / box model / dom etc. read what doctypes do, inline and block elements... what floats do, clearing floats... positionings etc
it may seem like a lot... but you can always relate it to something else
inline / block = zergling / maurourder
browser quirks / box model / dom = nuke / storm / feedback
floats / clearing / positioning = mothership / thor / ultralisk
basically, everything in html has its own level of difficulty in understanding it. just like sc. understanding the difference between inline and block elements is like knowing what is a zergling and what is a maourder (i cant spell it ¬_¬)
the more difficult a html concept, the higher its tier. but it can all be learnt if you just study
so dont give up
|
On February 17 2011 07:07 RedLuck wrote:+ Show Spoiler +On February 17 2011 06:28 formthehead wrote:Show nested quote +On February 17 2011 05:19 RedLuck wrote:
Quick question for all of you who do this professionally: how old were you when you were first interested in learning web design and how long did you go to school for it? I went to art school and studied graphic design, and I taught myself HTML and CSS with a lynda.com dreamweaver tutorial. Now I end up doing most things from dreamweaver's coding window, and I could plausibly do it purely on code, but it's nice to have the program step in and organize things for me since I'm not accustomed to coding (my tech experience is limited to browsing the web and playing games). It's important to make distinctions between web designers and web developers, and what part of it you want to focus on. Also, tables are useful for some situations because the slice tool in adobe programs allow you to create a design and export it to a tables layout with all the image resources and rollovers already organized for you, with a minimum amount of coding or general effort. It's the fastest and easiest way to make a website that'll never get updated for a client that doesn't want to bother maintaining it, and the layout is durable enough to work on all browsers (older IE versions don't render CSS properly, and all browsers interpret the code a bit differently, though I'm not too clear on the specifics). The firm I interned at kept Adobe ImageReady from the original creative suite (it got replaced by adobe fireworks, I believe) because it converted to tables with the least amount of hassle. I only ask because I've always had the itching to learn HTML and web development but I've never acted upon it. At this point in my life I'd really like to start REALLY getting into something like this for which I've always been passionate for. I 'started' to learn html about 2 years ago but I didn't follow through with it and now I'm 20 years old and kicking myself for not continuing to learn. Now after hearing that a lot of people here started when they were young teens it makes me wonder if I'm too old to scratch this itch. It feels like I'll be years behind everybody which annoys me as I am a semi-perfectionist at times.
HTML and CSS are very straightforward, the only difficult thing I've found is figuring out how different browsers interpret the information. Think of HTML/CSS as describing a layout to someone over the phone. You're just telling the browser where all the stuff is in relation to everything else, and in sequential order. It's pretty intuitive.
If you just set up a website as practice and get involved in every phase making it work, and also make a note to view the source code on websites that you like, you should be able to pick it up relatively quickly. Looking at a tutorial and trying to process all that information without practice is basically impossible, you shouldn't view that as some kind of learning deficiency on your part.
|
On February 17 2011 07:35 Lyzon wrote:its never to old to start. if you say stuff like dat, you will fail. Just view it as your a bronze in web dev and were master/diamond the key to rising up the levels is practise. noone is born a master/diamond, we all start off bronze and work our way up. how quick you level up is determined by how much you study and practise. so open up dreamweaever, make some templates in design view, switch to code and study it. edit it and see what changes. read up on browser quirks / box model / dom etc. read what doctypes do, inline and block elements... what floats do, clearing floats... positionings etc it may seem like a lot... but you can always relate it to something else inline / block = zergling / maurourder browser quirks / box model / dom = nuke / storm / feedback floats / clearing / positioning = mothership / thor / ultralisk basically, everything in html has its own level of difficulty in understanding it. just like sc. understanding the difference between inline and block elements is like knowing what is a zergling and what is a maourder (i cant spell it ¬_¬) the more difficult a html concept, the higher its tier. but it can all be learnt if you just study so dont give up
Thanks for the encouragement. Any advice on the best methods of understanding and practicing the basic + advanced HTML. Also, where would be the best place to start begin the learning process (website tutorials, community sites, etc.)?
I'm quite the newb (not noob) when it comes to web development but that's the part that has me so intrigued. When I bring up the page source on my most frequent website it just looks so beautiful (so nerdy) and that's what is driving me towards learning.
|
On February 17 2011 07:58 formthehead wrote:
HTML and CSS are very straightforward, the only difficult thing I've found is figuring out how different browsers interpret the information. Think of HTML/CSS as describing a layout to someone over the phone. You're just telling the browser where all the stuff is in relation to everything else, and in sequential order. It's pretty intuitive.
If you just set up a website as practice and get involved in every phase making it work, and also make a note to view the source code on websites that you like, you should be able to pick it up relatively quickly. Looking at a tutorial and trying to process all that information without practice is basically impossible, you shouldn't view that as some kind of learning deficiency on your part.
Thanks for the response, and yes I agree that just following tutorials basically gets you nowhere. For one of my projects in high school I designed a web template in PS, spliced it all up and built it in dreamweaver into a functional, though poooooooooorly made, website. Although it was fun and it worked I had no clue what the hell was behind the scenes of what I made and basically didn't learn a thing. Not going in that direction again.
|
You need to go straight to designing your own webpage. Practice is the only way you actually begin understanding how to code. In fact, you could write a webpage that teaches people how to make webpages. :D
I'd begin learning HTML(and CSS at the same time). It's fairly simple. Then move into Javascript and jQuery once you're comfortable with HTML. If you want to, you can continue learning server side scripting like PHP and then database management with SQL.
Basically go in this order: HTML/CSS > Javascript/jQuery > PHP > SQL.
|
On February 17 2011 09:30 KevinIX wrote:
You need to go straight to designing your own webpage. Practice is the only way you actually begin understanding how to code. In fact, you could write a webpage that teaches people how to make webpages. :D
I'd begin learning HTML(and CSS at the same time). It's fairly simple. Then move into Javascript and jQuery once you're comfortable with HTML. If you want to, you can continue learning server side scripting like PHP and then database management with SQL.
Basically go in this order: HTML/CSS > Javascript/jQuery > PHP > SQL.
this is the best way, well this worked for me anyway
best thing is to make a little hobby website about something you like or enjoy... the first mini websites i did was like a miniture gamefaqs.... but in pure html, no PHP..... that was long 
but eventually once i started with php, i made my own arcade game site and just continued developing it after several years
On February 17 2011 08:03 RedLuck wrote:Show nested quote +On February 17 2011 07:35 Lyzon wrote:its never to old to start. if you say stuff like dat, you will fail. Just view it as your a bronze in web dev and were master/diamond the key to rising up the levels is practise. noone is born a master/diamond, we all start off bronze and work our way up. how quick you level up is determined by how much you study and practise. so open up dreamweaever, make some templates in design view, switch to code and study it. edit it and see what changes. read up on browser quirks / box model / dom etc. read what doctypes do, inline and block elements... what floats do, clearing floats... positionings etc it may seem like a lot... but you can always relate it to something else inline / block = zergling / maurourder browser quirks / box model / dom = nuke / storm / feedback floats / clearing / positioning = mothership / thor / ultralisk basically, everything in html has its own level of difficulty in understanding it. just like sc. understanding the difference between inline and block elements is like knowing what is a zergling and what is a maourder (i cant spell it ¬_¬) the more difficult a html concept, the higher its tier. but it can all be learnt if you just study so dont give up Thanks for the encouragement. Any advice on the best methods of understanding and practicing the basic + advanced HTML. Also, where would be the best place to start begin the learning process (website tutorials, community sites, etc.)? I'm quite the newb (not noob) when it comes to web development but that's the part that has me so intrigued. When I bring up the page source on my most frequent website it just looks so beautiful (so nerdy) and that's what is driving me towards learning.
the best advice i can give you is to join an active web design forum. Join and introduce yourself, but be honest. Dont say you are a master when your not, state your skill level as honestly as you can and ppl will be mroe likely to help you. as long as you show the will to learn.
lets say you ask a simple question, if you show that you tried to research it yourself but just dont understand it, your more likely to get responses wereas youll just get lmgtfy trolls ¬_¬
but honestly, you need to just scower the web for any and all web development sites and just pick up information. when i was learning, i had about 20 different accounts at free webhosts, tonnes at obscure web design forums, bookmarks to loads of tutorial websites. i loved to learn
hell i even tried (once i was kinda competent) to teach web design in a pokemon forum....
this is after years of learning so dont expect to master it in a day. you put the effort in, you will be rewarded nicely
|
It's not about memorization but understanding. There are so many resources online and with google, whenever you don't know the syntax or command to do what you want you just search it up.
|
Thank you all for such informed and quality responses it really makes me thank TL for being so damned wonderful :'] you guys pretty much gave me all of the information I could ever need in the world in terms of creating websites! Although I do have one question even though it doesn't exactly partain to this topic in particular (its kind of offtopic but ontopic at the same time xD).
How does one go about making a website profitable I have always wondered this even before making websites was something I wanted to do. Not only that but how do people make money (a la husky) through youtube and through streaming (a la Root.CatZ always says the commercials directly support them or something like that) I understand that it has to do with ads or something like that but how does it directly support the person putting them up (Websites make more sense than the other 2 since it makes more sense to me to have a company pay for adspace on your own personal webpage than it does a stream given to you by a website or a site who lets you host videos on their own server.)
|
On February 16 2011 23:23 telfire wrote:
HTML/CSS has nothing to do with functionality. If you want to make an automated tournament site with self-updating brackets and all that jazz, there's going to be a lot more to it.
You'll want to do some research into web application frameworks. Ruby on Rails is currently the best framework for rapid prototyping (and what we built z33k.com). I did php development work for more than a year, but I would argue rails is far better for learning, since it gets many of the conventions right (REST, database migrations, ORM, and many others that amount to very high developer productivity).
Unless you want to actually do design, do not start with learning html/css, go right to the functionality, you can easily learn the styling later. There are lots of tutorials out there, but the main thing is to have a project to work on that you can get something out and keep releasing updates, even if it is simple at first. It is easy to get started: http://guides.rubyonrails.org/ and when you're done send me a PM and I can give you something to work on
|
On February 18 2011 17:29 luxx wrote:Show nested quote +On February 16 2011 23:23 telfire wrote:
HTML/CSS has nothing to do with functionality. If you want to make an automated tournament site with self-updating brackets and all that jazz, there's going to be a lot more to it. You'll want to do some research into web application frameworks. Ruby on Rails is currently the best framework for rapid prototyping (and what we built z33k.com). I did php development work for more than a year, but I would argue rails is far better for learning, since it gets many of the conventions right (REST, database migrations, ORM, and many others that amount to very high developer productivity). Unless you want to actually do design, do not start with learning html/css, go right to the functionality, you can easily learn the styling later. There are lots of tutorials out there, but the main thing is to have a project to work on that you can get something out and keep releasing updates, even if it is simple at first. It is easy to get started: http://guides.rubyonrails.org/ and when you're done send me a PM and I can give you something to work on
Did you read the OP at all... your replying to someone who gave a reply and yours is completely irrelevant and offtopic. its like all you did was look at the words "web design" in the topic and looked for a way to plug your website. Not to mention you say "Unless you want to actually do design" which was the whole premise of this fucking thread.
|
Notepad++ FTW! I've used a ton of different programs but I find ++ to be the easiest to navigate and use in general.
|
On February 18 2011 18:38 kOre wrote:
Notepad++ FTW! I've used a ton of different programs but I find ++ to be the easiest to navigate and use in general.
Thats what I have been using atm I like the options of tabs and the highlighting someone said NotePad2 is better don't see the real appeal to it that would make it "Better" than ++ I just really think the tabss make it ballercopter.
On February 16 2011 23:23 telfire wrote:
I suggest learning the basics from any of the millions of tutorials out there, so you know what you're looking at (if you don't already), and then opening up some of your favorite sites in Chrome or another Webkit-based browser with Web Inspector enabled (you can use Firebug also if you prefer but Web Inspector is much more feature rich).
Then you can click on HTML elements and see the styles that were applied to them on the right side. You can also modify those styles to see what effects they have on the page.
so far this is one of the most useful things at my disposal even after going through the whole CSS tutorial because it doesn't really direct you to do all of the specific things you may want so Looking at sites like TL and others through firebug (I only use Firefox ) I can actually see how other websites implement them and it highlights whats being affected by the code on screen which makes things so much easier to understand and identify lol
|
On February 18 2011 18:30 Sad[Panda] wrote:Show nested quote +On February 18 2011 17:29 luxx wrote:On February 16 2011 23:23 telfire wrote:
HTML/CSS has nothing to do with functionality. If you want to make an automated tournament site with self-updating brackets and all that jazz, there's going to be a lot more to it. You'll want to do some research into web application frameworks. Ruby on Rails is currently the best framework for rapid prototyping (and what we built z33k.com). I did php development work for more than a year, but I would argue rails is far better for learning, since it gets many of the conventions right (REST, database migrations, ORM, and many others that amount to very high developer productivity). Unless you want to actually do design, do not start with learning html/css, go right to the functionality, you can easily learn the styling later. There are lots of tutorials out there, but the main thing is to have a project to work on that you can get something out and keep releasing updates, even if it is simple at first. It is easy to get started: http://guides.rubyonrails.org/ and when you're done send me a PM and I can give you something to work on Did you read the OP at all... your replying to someone who gave a reply and yours is completely irrelevant and offtopic. its like all you did was look at the words "web design" in the topic and looked for a way to plug your website. Not to mention you say "Unless you want to actually do design" which was the whole premise of this fucking thread.
Sorry if that sounded off-topic, but the OP does say: "I want to learn how to create a website, more specifically I want to learn how to create a team/tournament website" - to which I will again speak to the important point that modern websites are not made of pure html and css.
Regarding z33k.com, which I helped build, it is a team and tournament website for starcraft 2, and sounds quite similar to what your proposing for League of Legends. If you are more comfortable talking about teamliquid, or some other site, that is fine with me but in most cases you are dealing with dynamic content.
I am not saying that starting with html and css is a bad idea, but rather that if you go one level of abstraction higher, and choose to start with an application framework, you'll be guided by many of the best practices that are inherent to the framework.
Focusing learning pure html/css without a dynamic frameworok is like learning to type without a computer. I have been through it, and you'll be able to learn html/css on the way.
Tools that I would recommend to developers
firefox addons: firebug, yslow, colorzilla, web developer toolbar, page speed
sites: colourlovers.com, stackoverflow.com
and not being defensive when asking for help
|
ok so im in the process of learning html and css and so far it hasn't been too bad but theres one thing that really bugging meeee.... (very tired btw, prob why i cant figure this out)
can i apply a border to a table via an external CSS sheet?
table {
border-width: 1px;
}
is yielding no results, even tried to Id the table + may other variants. whats going on? :S
|
On February 19 2011 16:21 RedLuck wrote:
ok so im in the process of learning html and css and so far it hasn't been too bad but theres one thing that really bugging meeee.... (very tired btw, prob why i cant figure this out)
can i apply a border to a table via an external CSS sheet?
table {
border-width: 1px;
}
is yielding no results, even tried to Id the table + may other variants. whats going on? :S
try
table { border-width: 1px solid red;}
and to border the rows and cells:
table tr { border-width: 1px solid blue;}
table tr td { border-width: 1px solid green;}
|
On February 19 2011 14:10 luxx wrote:Show nested quote +On February 18 2011 18:30 Sad[Panda] wrote:On February 18 2011 17:29 luxx wrote:On February 16 2011 23:23 telfire wrote:
HTML/CSS has nothing to do with functionality. If you want to make an automated tournament site with self-updating brackets and all that jazz, there's going to be a lot more to it. You'll want to do some research into web application frameworks. Ruby on Rails is currently the best framework for rapid prototyping (and what we built z33k.com). I did php development work for more than a year, but I would argue rails is far better for learning, since it gets many of the conventions right (REST, database migrations, ORM, and many others that amount to very high developer productivity). Unless you want to actually do design, do not start with learning html/css, go right to the functionality, you can easily learn the styling later. There are lots of tutorials out there, but the main thing is to have a project to work on that you can get something out and keep releasing updates, even if it is simple at first. It is easy to get started: http://guides.rubyonrails.org/ and when you're done send me a PM and I can give you something to work on Did you read the OP at all... your replying to someone who gave a reply and yours is completely irrelevant and offtopic. its like all you did was look at the words "web design" in the topic and looked for a way to plug your website. Not to mention you say "Unless you want to actually do design" which was the whole premise of this fucking thread. Sorry if that sounded off-topic, but the OP does say: "I want to learn how to create a website, more specifically I want to learn how to create a team/tournament website" - to which I will again speak to the important point that modern websites are not made of pure html and css. Regarding z33k.com, which I helped build, it is a team and tournament website for starcraft 2, and sounds quite similar to what your proposing for League of Legends. If you are more comfortable talking about teamliquid, or some other site, that is fine with me but in most cases you are dealing with dynamic content. I am not saying that starting with html and css is a bad idea, but rather that if you go one level of abstraction higher, and choose to start with an application framework, you'll be guided by many of the best practices that are inherent to the framework. Focusing learning pure html/css without a dynamic frameworok is like learning to type without a computer. I have been through it, and you'll be able to learn html/css on the way. Tools that I would recommend to developers firefox addons: firebug, yslow, colorzilla, web developer toolbar, page speed sites: colourlovers.com, stackoverflow.com and not being defensive when asking for help
after re-reading what you wrote (and after a actual night of sleep) I realized i miss comprehended what you said and I apologize you were just using the quote to clarify your point, I wasn't trying to be defensive it was just a huge misunderstanding.
and I want to learn web-design as a whole the tournament/team site is just the project I want to start with, and I understand that html/css won't create a fully functional website with those two things only. Its kind of the reason I thought a team/tournament site would be a great way to start because it would force me to learn javascript/php/mysql all at once also, I am just focusing on CSS and HTML right now to get the basic layout of the website and a basic understanding of how it works. ill move on to the other things after I create a basic home page layout, and its not like im going for final draft mode now so I am more than willing to scrap huge parts of what im doing just to optimize it and do it more professionally. I guess you could say im approaching this like I did starcraft, work on the basic mechanics first fine tune later.
thank you for the list of addons and external resources, Im using firebug already as a recommendation from someone earlier ill look into the others and I bookmarked the sites.
and again I am sorry for my earlier reaction, ive had about 6 hours of sleep in the last 30 something hours.
|
np, game sites gotta stick together anyway let me know how it comes out
|
So I'm struggling at getting my banner to stay in one specific spot, as it is it moves as i resize my browser and its getting annoying, no other image does it on my page and the only other alternative I've found to work is putting it in a table :/ any suggestions?
|
On February 22 2011 11:11 Sad[Panda] wrote:
So I'm struggling at getting my banner to stay in one specific spot, as it is it moves as i resize my browser and its getting annoying, no other image does it on my page and the only other alternative I've found to work is putting it in a table :/ any suggestions?
Can you put it in a <div> with absolute?
Otherwise, if you just set dimensions like height, width, left,top it'll stay exactly where u put it.
another mistake is maybe you're outside <div> container is always changing, try to see exactly what is moving and change it.
BUT, although absolute solves moving problems, using relative is better and setting width, and height tags is more compatible across browsers
EDIT:: i'm sorry if you're using tables, i dont' use them and i have no idea why some people do, i believe they went out of style a long time ago. also, is your website online? maybe i could look at it for you.
|
For anyone teaching themselves how to build a site, pick a programming language (either Ruby on Rails or PHP) and dive right in. Google for "rails (or php) beginner tutorials" and start installing the software.
Once u install the software, explore the files and start editing them. Then google for something like "How to create a database record in rails/php". Then you are on your way to dynamic content.
That way when you get stuck, like a program doesn't install or there is an error, u know exactly what the problem is and you can google for it, fix it, and move on to the next error.
The last thing u want to spend your time on is the alignment of your divs, because what's more important, a page that looks good, or a functional website? The answer is very clearly, a functional website.
The polish will come as you grow into a mature web developer and increase your skills (in all areas). At the start though, it's more cost-effective to build functionality, because anyone can build a polished page. As the site gets better, it will naturally cost more and more to have a plain looking site, and when it becomes too expensive, you just invest time into polish.
As the engineers of the world say -> Form Follows Function
|
On February 22 2011 11:15 D4L[invd] wrote:Show nested quote +On February 22 2011 11:11 Sad[Panda] wrote:
So I'm struggling at getting my banner to stay in one specific spot, as it is it moves as i resize my browser and its getting annoying, no other image does it on my page and the only other alternative I've found to work is putting it in a table :/ any suggestions? Can you put it in a <div> with absolute? Otherwise, if you just set dimensions like height, width, left,top it'll stay exactly where u put it. another mistake is maybe you're outside <div> container is always changing, try to see exactly what is moving and change it. BUT, although absolute solves moving problems, using relative is better and setting width, and height tags is more compatible across browsers EDIT:: i'm sorry if you're using tables, i dont' use them and i have no idea why some people do, i believe they went out of style a long time ago. also, is your website online? maybe i could look at it for you.
No its not online, and I would prefer to not use tables since that seems to be the general consensus (although ironically this beloved website apparently uses tables like a boss Lol). Ill try that and see if its my container then (Most likely is) and ill edit a response after I sober up a bit (21st birthday), thanks for the help.
|
I know this is a double post and a bump but I had a question and I am hoping someone can provide me an answer!
I am now trying to move onto learning PHP (next javascript) so I installed xampp as a recommendation to a friend. So after having that installed and all Im wondering how exactly I view my website in an offline setting. Where do I put the files to get them to output into my browser when I do localhost. I tried putting them into the htdocs like my friend reccommended me but when I type http://localhost or 127.0.0.1 into my browser I only come up with the welcome to xampp for windows screen :/.
also this is probably a stupid question but when you do things in PHP does it pretty much throw out the whole .html format for files? im a little confused tbh about the whole uses of PHP altogether and its role so to speak :[
|
PHP is a web programming language, whereas HTML is simply markup. Think of it like a house: you can put up walls, support beams, a floor, and a ceiling, and other structural necessities. That's HTML. Is the house done? No. You want some electricity and plumbing. That's where the PHP comes in. So, if you only need a storage space for stuff and don't need anything functional, .html files alone are good enough. Otherwise, you'll have to use .php.
*Loads up XAMPP*
Assuming you installed it into the default directory, put your html and php files into C:\XAMPP\xampp\htdocs. To access them on the browser, type in http://localhost/filename.php.
GLHF.
|
On March 31 2011 12:59 Sad[Panda] wrote:I know this is a double post and a bump but I had a question and I am hoping someone can provide me an answer! I am now trying to move onto learning PHP (next javascript) so I installed xampp as a recommendation to a friend. So after having that installed and all Im wondering how exactly I view my website in an offline setting. Where do I put the files to get them to output into my browser when I do localhost. I tried putting them into the htdocs like my friend reccommended me but when I type http://localhost or 127.0.0.1 into my browser I only come up with the welcome to xampp for windows screen :/. also this is probably a stupid question but when you do things in PHP does it pretty much throw out the whole .html format for files? im a little confused tbh about the whole uses of PHP altogether and its role so to speak :[
When you type http://localhost or 127.0.0.1 by default apache will have been configured to look for index.php (if php is installed, which it should be) or index.html because you are not specifying any particular page. This is pretty normal behaviour for any web server.
What you should probably do is just delete all the example/control panel stuff in the htdocs folder because you don't need it - keep it simple.
From there create a new text file in htdocs called index.php and edit it with notepad, type out the following:
<?php phpinfo(); ?>
Save it and now visit localhost in your browser again. What should be displayed is a big info dump of php versions and which modules are loaded. If not then either xampp is not running or there is an issue with it.
If you want to access other pages (for example if you had a page called test.php in your htdocs folder) you would type http://localhost/test.php into your browser.
PHP is a scripting language. A very basic explanation of how it works is that when a client (web browser) makes a request for a page (index.php) the php engine executes any php scripts in the index.php file and passes on the "result" of the php script.
A simple example that should run if you copy paste it...
<?php //anything inside these php tags will be treated as php code echo 'hello world'; //this will print out hello world to the browser echo '<h1>test</h1>'; //this will print out 'test' in a h1 element (not recommended) $testVariable = 'I will appear in a list item element'; ?> <!-- anything not in php tags will be treated as plain html would (note that this is a html comment) --> <ul> <li><?php echo $testVariable; ?></li> </ul>
I can give more examples if it's still unclear how php works... Hopefully this is enough to at least get an idea though.
Edit: grrr TL ruined all my nice indents - oh well
|
alright, thank you both for the swift responses, my only real question now is if I am going to be using PHP am I going to be doing all the HTML elements in that .php file and forgoing the .html format alltogether, or am I going to be using 2 seperate types of files the PHP for the server side scripting and the .html as the page element itself. If this is confusing Ill try to clarify a bit better.
|
You will get a different answer depending on who you ask. Every developer has their own PHP technique and there is no technical right or wrong way to do it - there is no standard. Some people will suggest using frameworks or templates of some kind and others refuse to use either (like me hoho).
Of course there are a lot of best practices you can follow (if you google search) but honestly... while you are learning just keep it as simple as possible.
Now that is out of the way I'll try to explain further.
HTML files are static. You can configure apache/php to look for php scripts in HTML files too but I don't recommend it. Most people will assume that a HTML file is just a static file when they see it. If you need to design a page that will not have dynamic content then I don't see any reason why it can't be a flat HTML file.
On the other hand, PHP files are designed for dynamic content - like a forum (teamliquid uses PHP).
Now here comes my opinion. When I write php I tend to seperate functionality into very simple layers so the code is as simple as possible to understand.
For example, if I was to write a page that listed all the books I owned based on data that was stored in a database I would make 4 PHP files.
1. database-utility.php - This file holds the code responsible for connecting to the database and executing queries.
2. book-retriever.php - This file holds the code responsible for sending queries to the database utility as well as turning the result set into an array of objects.
3. book-class.php - This file is a class that will be used to construct "plain old php objects" (POPO). If you don't know much about object oriented programming I can explain more.
4. list-books.php - This file 'talks' to the book-retriever.php and asks for a list of books which it would then iterate through and display. This is where I would put my HTML.
The code for list-books.php would look something like this:
<?php include('book-retriever.php'); $books = BookRetriever::getListOfBooks(); ?> <html> <head> </head> <body> <ul> <?php foreach($books as $book) { ?> <li><span class="bookTitle"><?php echo $book->getTitle(); ?></span><span class="bookAuthor"><?php echo $book->getAuthor(); ?></span></li> <?php } ?> </ul> </body> </html>
This is the only place I would write any HTML. I would also never write any heavy logic or any database code in a "view" page. It makes sure that your "presentation" layer is separate from your "data access". This means your code will be easier to understand and debug as well as keeping it all flexible.
A lot of people (especially when starting) write everything in the one file which just turns into a mess before long. It also means if you change your mind about which method of data access you are using (if you wanted your data as JSON from a REST interface instead of a database) your whole page would need to be rewritten. If you keep things separate the only page that would need rewriting is book-retriever.php - your presentation layer doesn't change at all.
It's annoying that my indenting wont work but there's not much I can do about that...
Also this code won't run because the other components would have to be written. I just wanted to give a simple idea of how I personally separate HTML from php code. I'm sure others would take a different approach.
|
Man, this is all so confusing <.> but I need to learn it because I want to have the website have a forum at the least and maybe somewhere down the line a tourney bracket creator but thats not essential. I just feel like I don't know where to really start :<
thank you for all of the info and help though
|
Why does everyone want to become a Web Designer without any prior knowledge these days... everytime i read that i just want to hit my head on the table -.- Learning Web Design takes about 2-3 years of time until you have all the neccessary knowledge for UI stuff. Add another 2-3 years for the programming/backend stuff. After that you will have to compete with all the other million Web Designers for every job available... but maybe i'm just disillusioned too much.
Anyways, you could take a look at http://www.csszengarden.com, download the HTML and CSS and try to change the CSS to mimic another design someone else made and/or just play around with the CSS.
PS: Don't ever use Dreamweaver. Never. Under no circumstances. It's the most horrible programm ever written for web development.
PPS: Learn to use a linux text editor like vim/gvim or *shudder* emacs. When you get into serious development you will do most of your development on a remote server via an SSH connection instead of the tedious "edit file, transfer to server, test if it still works".
EDIT:
For PHP, the suggestion of vek is very recommended, though i strongly suggest you read into templating systems like Smarty (Yes, they cost performance, but unless the page gets a million hits a day it doesn't matter).
Don't ever mix logic, data and presentation (usually you use MVC(Model-View-Controller) or similar patterns).
Also, use a single php file as entry point to your application, don't make one PHP file per page, it's a hell to maintain later on.
I suggest you first get comfortable with the frontend desgin and use PHP just to do some basic logic, like changing a title, including sub-templates (for example the page header and footer common to all pages) or showing a different page when the user clicks a link. Start slowly, programming is the hardest part of Web Development and if you didn't start learning programming before your 12th birthday you will have an extremely hard time learning it as it requires a very specific mindset.
I learned programming when i was 8 - 21 years ago - and i'm still a novice, eventhough i never stopped learning more about it.
|
On March 31 2011 15:00 Sad[Panda] wrote:
Man, this is all so confusing <.> but I need to learn it because I want to have the website have a forum at the least and maybe somewhere down the line a tourney bracket creator but thats not essential. I just feel like I don't know where to really start :<
thank you for all of the info and help though
You're trying to do too much at once then. Designing a forum requires a decent grasp of php and a strong grip on database design. A bracket program needs some solid logical problem solving skills and serious PHP programming knowledge. I suggest using existing free open source forum engines, such as SMF or phpbb, to add toyour site, and you can check out their code to see how they implement it. As for the bracket program, that'll take you awhile. I'd stick to manually uploading bracket images from existing software, such as tio, for now.
|
On March 31 2011 16:04 ThatGuy wrote:Show nested quote +On March 31 2011 15:00 Sad[Panda] wrote:
Man, this is all so confusing <.> but I need to learn it because I want to have the website have a forum at the least and maybe somewhere down the line a tourney bracket creator but thats not essential. I just feel like I don't know where to really start :<
thank you for all of the info and help though You're trying to do too much at once then. Designing a forum requires a decent grasp of php and a strong grip on database design. A bracket program needs some solid logical problem solving skills and serious PHP programming knowledge. I suggest using existing free open source forum engines, such as SMF or phpbb, to add toyour site, and you can check out their code to see how they implement it. As for the bracket program, that'll take you awhile. I'd stick to manually uploading bracket images from existing software, such as tio, for now.
I wouldn't actually recommend looking at the code of SMF or PHPBB. The code of both is a horrible hell and the only thing it could teach you is how to _not_ do it.
If you want to look at any PHP application to learn from the source, only take the ones that are fully unit tested (requires a proper code design so it's probably a good example then) and for PHP 5.3 (many good features were only added in that version and while you sometimes have to stick to old versions - we at work have to use PHP 5.1.6 - it is always a good idea to learn how to do a task with modern tools). It's a known fact that 90% of the PHP open source projects are horribly written as they often have grown very far beyond their intended use.
|
On March 31 2011 15:39 Morfildur wrote:
PS: Don't ever use Dreamweaver. Never. Under no circumstances. It's the most horrible programm ever written for web development.
PPS: Learn to use a linux text editor like vim/gvim or *shudder* emacs. When you get into serious development you will do most of your development on a remote server via an SSH connection instead of the tedious "edit file, transfer to server, test if it still works".
EDIT:
For PHP, the suggestion of vek is very recommended, though i strongly suggest you read into templating systems like Smarty (Yes, they cost performance, but unless the page gets a million hits a day it doesn't matter).
Don't ever mix logic, data and presentation (usually you use MVC(Model-View-Controller) or similar patterns).
Also, use a single php file as entry point to your application, don't make one PHP file per page, it's a hell to maintain later on.
I can pretty much second all of this... Dreamweaver is the absolute devil. Any WYSIWYG editor is. I've had to clean up so much auto generated crappy broken HTML for customers it's just not funny. Some of the html and css that I've seen come out of Dreamweaver is so cryptic it's a wonder it ever works. The worst is getting rid of nested tables used for (really simple) layouts.
Still, it's a good feeling when you can report back to the someone that you just shaved off 700kB per page load of useless markup. If a page is getting even 1000 hits per day (not that much) thats 700MB of bandwidth saved each day. That's ~20GB per month. It all adds up.
My development enviroment for php/html/css is based on xampp. I just use Textpad to edit the files right in the htdocs folder. I have different folders inside htdocs for different projects (all under source control using TortoiseSVN).
This lets me edit the files and just hit F5 in my browser to see the changes instantly.
I have my screen set up like this:
http://i.imgur.com/etcUO.png
Also... This is like my HTML5 experiments page - I'd never have the javascript inside my html files like that on anything serious if anyone was wondering.
I'm also comfortable using nano if needed but prefer having textpad with Firefox side by side. It's so much easier for doing CSS work.
|
On March 31 2011 16:31 vek wrote:
The screen layout reminds me of the productivity booster number 1:
Use 2 monitors, if possible even 3. It's a thousand times more comfortable to have one screen with code, one with the browser and if you use it, the third with the ticket/task/requirement/image-of-how-it-should-be
|
On March 31 2011 15:39 Morfildur wrote:Why does everyone want to become a Web Designer without any prior knowledge these days... everytime i read that i just want to hit my head on the table -.- Learning Web Design takes about 2-3 years of time until you have all the neccessary knowledge for UI stuff. Add another 2-3 years for the programming/backend stuff. After that you will have to compete with all the other million Web Designers for every job available... but maybe i'm just disillusioned too much. Anyways, you could take a look at http://www.csszengarden.com, download the HTML and CSS and try to change the CSS to mimic another design someone else made and/or just play around with the CSS. PS: Don't ever use Dreamweaver. Never. Under no circumstances. It's the most horrible programm ever written for web development. PPS: Learn to use a linux text editor like vim/gvim or *shudder* emacs. When you get into serious development you will do most of your development on a remote server via an SSH connection instead of the tedious "edit file, transfer to server, test if it still works". EDIT: For PHP, the suggestion of vek is very recommended, though i strongly suggest you read into templating systems like Smarty (Yes, they cost performance, but unless the page gets a million hits a day it doesn't matter). Don't ever mix logic, data and presentation (usually you use MVC(Model-View-Controller) or similar patterns). Also, use a single php file as entry point to your application, don't make one PHP file per page, it's a hell to maintain later on. I suggest you first get comfortable with the frontend desgin and use PHP just to do some basic logic, like changing a title, including sub-templates (for example the page header and footer common to all pages) or showing a different page when the user clicks a link. Start slowly, programming is the hardest part of Web Development and if you didn't start learning programming before your 12th birthday you will have an extremely hard time learning it as it requires a very specific mindset. I learned programming when i was 8 - 21 years ago - and i'm still a novice, eventhough i never stopped learning more about it.
I understand it takes along time to learn all of this but hopefully I still have a lot of that but you misled yourself a bit, I want to learn webdesign, I don't want to be a web designer by occupation only by hobby, Im actually going to school to be an Audio Engineer at the moment. I still really appreciate all the information you given its very helpful and helped me as a guideline in where I can start. Im also using Notepad++ right now because everyone said dreamweaver wasn't very good to learn on because you could end up autopiloting code also lol.
Ill try just uploading a premade forum like PHPBB when the time comes for that since its 1.) easier and actually coding a forum is out of my league. As for the brackets like I said its not really necessary, I can just make a Graphic of a bracket myself for tournies the bracket creator would have been more like a community tool but yeah.
again thanks for all the information ill probably post back if I have anymore problems or Questions xDDDD
|
|
|
It just depends on what you really want to do. Writing the things you posted from scratch makes no sense if you ask me. There are enough CMS with countless of modules out there that would do the job just fine.
As a Screendesigner myself I never touch PHP & co. We have 3 designers with more than 10 Developers. Our PHP coders aren't even on the same floor, that's how separated these fields are.
Yes you could study like a madman writing your own forum, but why? Just go check the internet, download, install (all in all 10minutes max) and then do some modifications from there.
|
Best way to learn is through just experimenting with code. I'm self-taught, never bought any web design or web development books, never took classes or went to college for either, and have zero prior professional working experience. Today, as of 5 months ago, I am now employed by Trion (trionworlds.com) as a full-time web developer and completely loving the job -- at the age of 23 while my colleagues are all 30-40 on average. So if you keep your mind to it and don't give up I'm sure you will become good at web design and hopefully successful in whatever endeavor you're after.
Here are some websites I frequent for design inspiration..
http://www.smashingmagazine.com/
http://dribbble.com/
http://www.awwwards.com/
http://abduzeedo.com/
|
On March 31 2011 18:07 Morfildur wrote:The screen layout reminds me of the productivity booster number 1: Use 2 monitors, if possible even 3. It's a thousand times more comfortable to have one screen with code, one with the browser and if you use it, the third with the ticket/task/requirement/image-of-how-it-should-be
I prefer just working with one screen
|
On April 01 2011 07:01 vek wrote:Show nested quote +On March 31 2011 18:07 Morfildur wrote:On March 31 2011 16:31 vek wrote: The screen layout reminds me of the productivity booster number 1: Use 2 monitors, if possible even 3. It's a thousand times more comfortable to have one screen with code, one with the browser and if you use it, the third with the ticket/task/requirement/image-of-how-it-should-be I prefer just working with one screen
Im poor and can't afford a second screen kekeke
|
|
|
|
|
|
EPT
