So, I want to learn PHP, HTML and CSS. Where do I start?
- Thread starter Dev!l
- Start date
The problem is using it as a crutch. You are less likely to actually learn what you doing by using such a tool. HTML/XHTML is not that hard of a thing to grasp vs other programming concepts which is why it's almost ridiculous to advise such things.
This is also why I hate OO programming and frameworks. Although overall I understand why there is OO programming and I can even give it credit to a few uses. Most frameworks only give you a crutch on how to write programs.
To keep a long rant short, in order to know what you're doing and how to do it you need to separate the crutches from your learning experience (call it tough love). This actually will enable you to learn not only quicker but give you a better overall understanding of what's going on. This is a long term strategy that will pay dividends.
That's not even mentioning the cost of getting said piece of software (Dreamweaver) assuming you're not going to pirate it. This is why I mention Netbeans. Netbeans has excellent code completion and debugging (among many other things) and you'd be a fool not to use it.
Then again, what do I know? I only write code for a living.
After you learn the basics probably the fastest way to understand programming is to hack around on others code. See what they do and figure out how their script works. Wordpress is quite extreme off the bat IMHO.
As for coding tutorials nothing much has changed in the last 5 years or so, so go crazy with what you can find. Best bet is to study up on PHP 5.0-5.2, PHP 5.3 is still considered pretty new and really doesn't add many features nor is it widely deployed.
You're going to want to focus on HTML and CSS before you get into PHP. I can't say what would work best for you, but for me it wouldnt make sense to start by reading up on w3 schools (even though its a great resource) because it's difficult to imagine how all of the elements fit together to make an actual website. The most effective, at least for me, is to go through tutorials that take you through the whole process so that you can catch on to the proper way of doing things.
Resources
As mentioned before, PSDtuts and Nettuts are great resources that are a part of the Tuts+ Network network of blogs. They started another one recently called Webdesigntuts that's also got some good stuff.
Some more great sites to find info/tutorials are:
Tools
Other than informational websites you're going to want to get your toolbox straight so that you can work effectively. As previously mentioned, I'd stay away from Dreamweaver simply because of the temptation to overuse the design view, which would prevent you from really getting to know the HTML and CSS as much as possible. You might struggle with it at first but using a texteditor will eventually make much more sense as you'll be better able to do exactly what you want and troubleshoot what's going wrong when you can't figure it out.
So, you're going to want to find a texteditor that is built for web languages. I use a Mac so I'm not very in touch with what to recommend if you're on windows but if you're also on a Mac I would recommend using either Coda or Espresso. Personally I use Espresso and CSSEdit. CSSedit is from the same guys that make Espresso and is really helpful if you have trouble remembering the CSS syntax in the beginning. It's also got a great feature that helps you find out which styles are affecting specific HTML elements. There's also Textmate which a lot people seem to love. All of these will do the job, just slight differences and personal preference really.
If you're using Windows, I've heard that Notepad++ is good but I've never used it. I'm sure you can do a little Googling and find a good texteditor. if all else fails you can stick with Dreamweaver, just try not to rely on the Design view if you really want to learn the code.
Another essential is Firebug which is an extension for Firefox that lets you inspect the code in the browser in a much better way than just viewing the source. It'll let you see how other people do things if you're unsure. Shows you which CSS styles are affecting which elements on the page and allows you to edit/mess with them in real time and see their effects.
Let's see what else... Design
Not sure where you stand on designing the pages but clearly (and I'm sure you know) Photoshop is where it's usually done. Before the actual graphical designing of the page its good to do some planning so that you spend less time having to redo things or try to squeeze in things that you might have forgot.
Sitemap Diagram
A lot of people hate doing things like this because it's not really all that fun but you'll thank yourself if you take the time to do it. It's also really helpful SEO wise to figure out how your pages are going to be laid out. It's basically just a diagram that shows the flow of the pages on your website and their relationship to each other. I use OmniGraffle because it makes it really easy to do make the diagram but you can make it any way you want. Here is an example of Sitemap Diagram that I made using Omnigraffle.
Wireframe
After you've got your Sitemap Diagram you might want to just jump into Photoshop and start designing but there is another step that is very useful to do before you get into PS, which is a wireframe. There's tons of different ways that people do these and it's really up to you. It's basically a low-fidelity mockup of your website that is made focusing on the actual layout rather than the "design". The goal is to really work on the websites usability by figuring out where certain elements are going to be on the page without having to waste time deciding what these elements are going to actually look like.
Ultimate Guide to Website Wireframing will give you a better understanding of what I'm trying to say if I'm (most likley) not describing it well enough.
Recently I've been using Keynote (Apple's version of Powerpoint) to make my wireframes. It might seem like a strange tool to use but there are some great already made Wireframe toolkits like Keynote Wireframe Toolkit: Wireframes and Prototypes, Fast! that come with premade elements that can be easily resized and arranged without having to spend time creating these elements yourself. Supposedly Keynote Kungfu works with Powerpoint too, and it comes with the same files in .ppt but I've never tested it so i can't comment on that. Some other tools that people use for making wireframes are Photoshop, Illustrator, InDesign, FireWorks, and some others talked about at 15 Desktop & Online Wireframing Tools | UX Booth. If you decide to try out OmniGraffle, here is another Toolkit that can be used with it OmniGraffle Wireframe Stencils, Version 3 | Konigi
Here's an example of a Wireframe that I did using Keynote and Keynote KungFu
Too Long and Unorganized
My bad, this post isn't very organized and is kind of just me rambling. If there's anything that didn't make sense that you want to know more about let me know. Or, if you have specific questions about something that I didn't mention, let me know. I usually just lurk here on WF and don't contribute much because I'm not very experienced yet in regards to SEO, but I know a good amount about Web Design so I'm willing to share it if people want to know something.
Resources
As mentioned before, PSDtuts and Nettuts are great resources that are a part of the Tuts+ Network network of blogs. They started another one recently called Webdesigntuts that's also got some good stuff.
Some more great sites to find info/tutorials are:
- CSS-Tricks
- Smashing Magazine
- Six Revisions - Web Development and Design Information
- Los Angeles Web Designer | Web Designer & Front-end Developer - Soh Tanaka | Servicing All of Los Angeles County, South Bay Torrance, and more. (this guy also has some great jQuery tutorials if you're just starting out for making the usual things like Tabs, accordions, image sliders, tooltips etc)
Tools
Other than informational websites you're going to want to get your toolbox straight so that you can work effectively. As previously mentioned, I'd stay away from Dreamweaver simply because of the temptation to overuse the design view, which would prevent you from really getting to know the HTML and CSS as much as possible. You might struggle with it at first but using a texteditor will eventually make much more sense as you'll be better able to do exactly what you want and troubleshoot what's going wrong when you can't figure it out.
So, you're going to want to find a texteditor that is built for web languages. I use a Mac so I'm not very in touch with what to recommend if you're on windows but if you're also on a Mac I would recommend using either Coda or Espresso. Personally I use Espresso and CSSEdit. CSSedit is from the same guys that make Espresso and is really helpful if you have trouble remembering the CSS syntax in the beginning. It's also got a great feature that helps you find out which styles are affecting specific HTML elements. There's also Textmate which a lot people seem to love. All of these will do the job, just slight differences and personal preference really.
If you're using Windows, I've heard that Notepad++ is good but I've never used it. I'm sure you can do a little Googling and find a good texteditor. if all else fails you can stick with Dreamweaver, just try not to rely on the Design view if you really want to learn the code.
Another essential is Firebug which is an extension for Firefox that lets you inspect the code in the browser in a much better way than just viewing the source. It'll let you see how other people do things if you're unsure. Shows you which CSS styles are affecting which elements on the page and allows you to edit/mess with them in real time and see their effects.
Let's see what else... Design
Not sure where you stand on designing the pages but clearly (and I'm sure you know) Photoshop is where it's usually done. Before the actual graphical designing of the page its good to do some planning so that you spend less time having to redo things or try to squeeze in things that you might have forgot.
Sitemap Diagram
A lot of people hate doing things like this because it's not really all that fun but you'll thank yourself if you take the time to do it. It's also really helpful SEO wise to figure out how your pages are going to be laid out. It's basically just a diagram that shows the flow of the pages on your website and their relationship to each other. I use OmniGraffle because it makes it really easy to do make the diagram but you can make it any way you want. Here is an example of Sitemap Diagram that I made using Omnigraffle.
Wireframe
After you've got your Sitemap Diagram you might want to just jump into Photoshop and start designing but there is another step that is very useful to do before you get into PS, which is a wireframe. There's tons of different ways that people do these and it's really up to you. It's basically a low-fidelity mockup of your website that is made focusing on the actual layout rather than the "design". The goal is to really work on the websites usability by figuring out where certain elements are going to be on the page without having to waste time deciding what these elements are going to actually look like.
Ultimate Guide to Website Wireframing will give you a better understanding of what I'm trying to say if I'm (most likley) not describing it well enough.
Recently I've been using Keynote (Apple's version of Powerpoint) to make my wireframes. It might seem like a strange tool to use but there are some great already made Wireframe toolkits like Keynote Wireframe Toolkit: Wireframes and Prototypes, Fast! that come with premade elements that can be easily resized and arranged without having to spend time creating these elements yourself. Supposedly Keynote Kungfu works with Powerpoint too, and it comes with the same files in .ppt but I've never tested it so i can't comment on that. Some other tools that people use for making wireframes are Photoshop, Illustrator, InDesign, FireWorks, and some others talked about at 15 Desktop & Online Wireframing Tools | UX Booth. If you decide to try out OmniGraffle, here is another Toolkit that can be used with it OmniGraffle Wireframe Stencils, Version 3 | Konigi
Here's an example of a Wireframe that I did using Keynote and Keynote KungFu
Too Long and Unorganized
My bad, this post isn't very organized and is kind of just me rambling. If there's anything that didn't make sense that you want to know more about let me know. Or, if you have specific questions about something that I didn't mention, let me know. I usually just lurk here on WF and don't contribute much because I'm not very experienced yet in regards to SEO, but I know a good amount about Web Design so I'm willing to share it if people want to know something.
I agree with what you're saying, especially for someone first starting out. Speaking from personal experience, going back to version 3 / ultradev 1.0 or so when I was first getting started, I think learning stuff initially from a GUI vs. writing the code by myself definitely slowed down the learning curve. I guess I was just taking exception to you saying that its an application for noobs that don't know what they are doing. Its code editor is very good for html, javascript and CSS. Given the theme of the thread though, I think you're right and I'll STFU now.
Disclaimer: I'm not a developer per ce, but have been involved in a lot of large scale software projects at a management level.
I think there is a massive difference between frameworks and OO techniques. You said it earlier yourself, a good developer spends 90% of their time thinking about their code and 10% actually writing it. OO (in my opinion anyways) is what this is all about. Creating a logical framework that is well thought out and is scalable, maintainable and lends itself to code reuse. On a random sidenote, I think that refactoring is probably the least valued component of good development practices by management who don't "get it", but also one of the most valuable activities a dev team can do (when executed correctly).
I get your argument about frameworks, because I think it could easily make lesser developers lazy...but it can also make good /great developers more efficient.
Sorry to derail your thread OP.
You sound like me before I took an Html, CSS and dreamweaver class at the local Community college. Yes I got alot of shit for it from the nerds around here, but keep in mind I'm not trying to be a hardcore programmer. My coding skills were like a giant jigsaw puzzle with half the pieces missing. I knew alot of stuff but it just wasn't all fitting together in my head. People gave me a hard time because I went to a physical class but you just need to understand your own learning style first. I need: 1) to hear, see and do to learn best 2) be surrounded by other people learning the same stuff 3) and a set time that I know I will put my work aside and do this.
Anyways, it helped tremendously. Suddenly alot more was clear and it boosted my coding confidence ten fold. I'm actually making more money as a direct result.
Hi thanks for sharing the information regarding to designing tools .Really these tools such as html,php,css,dreamweaver are very helpful in designing the website.I think(www. w3schools.com) is more informative for this purpose for a beginner.
Website designer Denver
Website designer Denver
find an interesting project you want to build, and build it in the languages you choose, and ask a lot of questions on sites like stackoverflow.com
PHP is unique in the sense that you can just throw some procedural code between some tags and you've got a dynamic web page. People hate it for that, but I love it and don't feel any guilt as long as it runs. It runs efficiently too.
The real problem I see is people don't know when they're going to really need to use an object oriented design. They're used to writing short bits of code that works but then they overestimate what they can do without understanding the difference between the paradigms. That's why there are so many PHP sites out there that are nightmares of spaghetti and horrible databases.
Frameworks are great. If you want real functionality it's almost always worth it to use one. What could be wrong with proven design patterns and well known conventions? I mean I'm used to apps with around 100 database tables, so you can imagine how many ADT's. With that sort of thing a framework can save tons of money.
Yeah, I think learning style (as a couple of others have mentioned) plays a huge role. I personally learn a lot by example. A lot of people will just send you straight to php.net which is helpful but when you don't know what a function is and all you see is:
function ($var) { $num = $var + 1; }
That kind of blows your mind a little bit unless you understand the concept of how a function works. I need to know... how and when would I ever use it? For me, thats why I like Sitepoint.com's books. They teach by example and giving you a real world project like scenario where you might need to use whatever it is you are learning. I have Kevin Yank's book and learned a lot about jQuery by reading "jQuery: Novice to Ninja" which is also sold there. I highly recommend their books.
You can download 4 sample chapters to see if it fits your reading / learning style which I also recommend before purchasing the book.
Obviously, if you aren't confident with HTML and CSS, that is the place you should start and there are books available on that topic too.
function ($var) { $num = $var + 1; }
That kind of blows your mind a little bit unless you understand the concept of how a function works. I need to know... how and when would I ever use it? For me, thats why I like Sitepoint.com's books. They teach by example and giving you a real world project like scenario where you might need to use whatever it is you are learning. I have Kevin Yank's book and learned a lot about jQuery by reading "jQuery: Novice to Ninja" which is also sold there. I highly recommend their books.
You can download 4 sample chapters to see if it fits your reading / learning style which I also recommend before purchasing the book.
Obviously, if you aren't confident with HTML and CSS, that is the place you should start and there are books available on that topic too.
Here is a long list of video training resources some are paid some are free I haven't mastered PHP yet and still consider myself a novice but maybe one day I can finally go full throttle with the learning Good luck getting through all this training:
PHP Video Tutorials - Like to watch the video instead of reading the book? - This guy does a great job of teaching users through creating actual projects like photo voting, Job websites shopping cart invoicer application etc etc.
Lynda.com - this site is solid for all sorts of different video learning but for PHP focus on:
PHP with MySQL Essential Training (2007)
PHP with MySQL Beyond the Basics
Dreamweaver CS5 with PHP and MySQL
SQLite 3 with PHP Essential Training 6 hr
Killer PHP .com- Various training vids
Learning Nerd.com - Not super informative but the fact that she breaks it down into days and easy to understand basic non tech english helps
http://cartoonsmart.com/-This shows how to integrate php and mysql with flash. Several movies are:
PHP Basics –
PhP and MySQL Basics
FLASH PHP and MySQL –
GuestBook or Blog
High Scores and Members Login.
ECards –Flash polls
PHP | Nettuts+ -Sorts all of the php training they have.
In the Woods – Diving into PHP: Video Series - Diving into PHP Series that breaks it down into different days.
PHP Video Tutorials - Like to watch the video instead of reading the book? - This guy does a great job of teaching users through creating actual projects like photo voting, Job websites shopping cart invoicer application etc etc.
Lynda.com - this site is solid for all sorts of different video learning but for PHP focus on:
PHP with MySQL Essential Training (2007)
PHP with MySQL Beyond the Basics
Dreamweaver CS5 with PHP and MySQL
SQLite 3 with PHP Essential Training 6 hr
Killer PHP .com- Various training vids
Learning Nerd.com - Not super informative but the fact that she breaks it down into days and easy to understand basic non tech english helps
http://cartoonsmart.com/-This shows how to integrate php and mysql with flash. Several movies are:
PHP Basics –
PhP and MySQL Basics
FLASH PHP and MySQL –
GuestBook or Blog
High Scores and Members Login.
ECards –Flash polls
PHP | Nettuts+ -Sorts all of the php training they have.
In the Woods – Diving into PHP: Video Series - Diving into PHP Series that breaks it down into different days.
Are we still talking?
First read a book on your chosen language. That way you know what to expect. I reccomend for dummies etc.. Nothing too heavy. Avoid reference books and go for something with exercises. Do some of the exercises if you want... Then head over to w3 schools and do the quizzes till you are getting high scores. THEN... do some tutorials. Then do your own stuff using w3 as a reference. That is how i did / do it anyways... If stuck for ideas take an existing open source script and modify it and post it on your website. Then take work on. The fact that you HAVE to do it somehow increses ability!!
I would also reccomend using notepad++ as opposed to IDE at least until you find your feet.
I found it easier to start with javascript as a programming language. They are all essentialy the same under the hood and once you 'get it' you can move between languages.
edit: also, tutorials / books that are old are no good really as things change quickly.
First read a book on your chosen language. That way you know what to expect. I reccomend for dummies etc.. Nothing too heavy. Avoid reference books and go for something with exercises. Do some of the exercises if you want... Then head over to w3 schools and do the quizzes till you are getting high scores. THEN... do some tutorials. Then do your own stuff using w3 as a reference. That is how i did / do it anyways... If stuck for ideas take an existing open source script and modify it and post it on your website. Then take work on. The fact that you HAVE to do it somehow increses ability!!
I would also reccomend using notepad++ as opposed to IDE at least until you find your feet.
I found it easier to start with javascript as a programming language. They are all essentialy the same under the hood and once you 'get it' you can move between languages.
edit: also, tutorials / books that are old are no good really as things change quickly.