|
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.
|
Canada1213 Posts
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.
|
Hyrule19188 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.
|
|
|
|
|
|
EPT
