Learning HTML, CSS, & Photoshop

I am trying to professionly learn HTML and CSS. What is a good route to take to learn them? I have some basic stuff down, and have used some stuff on multiple websites.

While I am on this subject, how much does one earn when creating a website for a company? I started making a website for someone and have been paid $100. Is this to much, or to less?

When creating a website, all that matter is if you make the site nice, and satisfy the owner correct? They don’t care how it’s done, just if its what they want correct?

How do you guys like our website so far: team323z.com

I think if I want to go into web design, I need to learn graphic design to. Is Photoshop the best route for that?

Thanks!

I believe that Photoshop and Indesign is used most of the time for website. I do not make websites so I would double check. I took a photoshop class this semester and I remember my teacher talking alot about indesign. Just look into it, and if its possible pick up a web design textbook and start doing the projects insdie.

From what I have done and had done I would say that Photoshop is very important with many platforms. As for the customer preference as far as platforms goes I think they might have some preferences based on future expansion of the website or business. We had several storefronts using prestashop that required some manual inventory adjustment due to using a single fulfillment center. We ended up switching to Magento, if we had done the websites with Magento to begin with we would have saved time and money to begin with. A knowledgeable customer will be a bit more demanding, and having the foresight to be an advocate for the customer may dictate that you use what is best for the customer and not easiest for you.

By the way, your website looks really good. Once Cody weighs in you should have some pretty detailed information.

I don’t use anything other than my head and Notepad++ for my websites. I only use Photoshop for images.
I think the best way to learn is through experience. Learn as you go. You’ll find it gives you a lot better understanding of what is going on, and is a lot more fun than, say, taking a course.

If your looking for a cost effective method, using Gimp always works, however Photoshop/Illustrator I would say is most desirable. As for programming, I would strongly advise that you use something like Eclipse, as it’ll help keep your websites organized nicely and you don’t get lost in your own code. Also, if you have the money/resources, Dreamweaver is a very good and professional program to use, as it’s combines programming and drag/drop type of interfaces.

Html and css on it’s own is pretty easy and I’m sure you’ll pick it up pretty quick. If you want to professionally learn it, I would suggest you take a professional class somewhere, however I have a strong feeling if you were to just follow a tutorial series online, you’ll be fine.

At the end user will see is what you give them. They probably couldn’t care less how it was made, as long as the result it good. In some cases, it could be a good idea to just use something simple like .webs or .weebly to create a website really quickly and pay for the domain.

Hope that helps ~ and perhaps Cody can give more tips :wink:

i know HTML and basics of CSS and i know how to use fireworks (i use photoshop but i prefer fireworks)

now two very good books that you will find useful are the the two books for dummies …

HTML for dummies
CSS for dummies

^they are very good :smiley:

fireworks/photoshop can be learned via youtube

also programs for writing HTML in, i use Dreamweaver in code view, this means that you can code all the website that you want, then click a button and view what it would look like, it is a very nice piece of software

Also cost for websites … in the UK people can be charged for a 1 page website about £50. and 10 page websites like £250, but it all depends what is on it, if it has an e-commerce it can sell for £800-£1000 … and if you are doing photography / designing logos etc, you can charge more.

With your website, i like it, the only thing i would say that is not professional looking is the blocks of text that are all caps … with text on a website, most of it should be the same font, and same size, then titles can be the same font, underlined and slightly bigger in size …

^that is what i generally go for

But all in all your website looks great :smiley: i like it

good luck with learning HTML/css/graphical editing

Also … about graphical editing, just remember that all the files on a website need to be as small as possible, so if you are in Photoshop, i recommend saving a PSD file and a GIF file as they are so small,

and for fireworks, suggest saving a PNG and a GIF file

  • oh. remember to get your domain sent off to search engines … and include lots of META TAGS !

Regarding payment: The best advice I can give is to think about how much you’re being paid for your time.

If you got paid $100 and work 5 hours in total on the site, you’ve made $20 per hour. That’s pretty good, considering minimum wage is ~$7/hr (state dependent). If you have to work 20 hours on the site, then you’re getting paid $5/hr–it would have been better (monetarily) for you to work at the local fast food joint for those 20 hours.

Also, make sure that you have a plan for upkeep on the site. Do you get paid when they call you up to say “can you make this teensy change?” and the change doesn’t turn out to be so teensy? :wink:

Regarding graphics software: Photoshop is incredible. However, you don’t really need the full version–I have Photoshop Elements 5.0 (yeah… it’s a super old version), and I do all kinds of stuff in it. However, Photoshop does have its limits–it’s not a vector graphics software. The curves in my avatar were drawn using Expression Design (student/not-for-profit version, so I can’t be paid to use it). The nice thing about vector graphics is its great for drawing curvy things, and it doesn’t lose quality when you blow it up. I made our team logo on a image smaller than an 8.5"x11" sheet of paper, and then was able to print it on a ~6-8ft banner without changing the resolution at all.

Regarding HTML/CSS software: Whatever floats your boat, preferably something with syntax highlighting. :slight_smile: I like Notepad++; I don’t like big code editors.

Regarding Learning: I recommend the only way I’ve learned how to program or use any computer package: use it a lot! :slight_smile: Go and make up a bunch of mock-up websites; when you get stuck, look on StackOverflow for help (chatrooms are great for quickie questions (I do recommend staying away from the C++ lounge–it’s not as nice as the other chatrooms), bigger questions are better on the main site). Play with features. Try to re-create the (simplified) design of a website you like.

Re: Your site: I really do like it. :slight_smile: Keep up the good work.

Ooops, sorry I missed this (well kind of, I skimmed it).

Jesse,

Web design is fun, I started when I was twelve and have found it to be a very rewarding and useful skill. I was actually accredited by my city council for writing a school website back in the day, they were impressed at how young I was (as I mentioned, I was only twelve and still in middle school).

Back then in the lovely HTML 4.1 days, CSS was new and it was still widely acceptable to use tables for site layouts. Tables were simple and everyone loved them, but alas a little thing called IE made knowing exactly how anything would render impossible so the W3C people decided to make DIV’s and the whole world was never the same. Doctypes everywhere, browser specific hacks, IE6 sucking out loud, etc.

So I learned HTML the old way, then quickly started using CSS for simple things (mostly text and background colors), but over time I learned to use CSS for more complicated matters and eventually I even realized why DIV’s are at least somewhat good for layouts.

Then, actually more recently I finally bit the bullet and started learning JS. Long story short, I held out on JS for forever, only including pre-build scripts when the time called for them. I generally dislike JS, but at least with Chrome’s V8 engine things aren’t that bad (V8 compiles JS to much more efficient code most of the time, which makes the language somewhat reasonable).

Now for graphics design, this is basically Photoshop work plain and simple. Learning PS is more than just working with a program, like most things it involves being creative and the more you know the tool, and the longer you use it the better you get. So my advice, start as early as possible!

Now getting PS is a bit tricky, unlike Autodesk, Adobe charges even for the student versions of their programs. I wish they didn’t but oh well - they do. Many colleges have it on certain machines, and some schools offer discount programs. If all else fails, there is always a way, ask your friends to help, they can probably hook you up if you catch my drift.

Now charging people. Well this is tricky, I’ve done sites now that range from $150 to $20,000 (seriously). It all depends on the client, the project and how much work there is to be done, and how fickle they are about it.

My best advice is to regularly make them approve something, if you let them keep changing their mind all the time without pinning them down with milestones and layouts, etc - you are sure to have a bad time and have to do way more work. More work is equivalent to making less money, so every time they change their mind and you let it happen, it is effectively costly you bank and delaying the project.

Then there’s the legal side. I got screwed on a $500 project once, I did a super-high-res render (it was a 48" x 60" banner at 300 DPI) for a datacenter that was being built in my area. It was a simple job, take the Revit file, make it pretty and make a huge render in a crazy short amount of time.

Easy enough but after the work was done the guy simply paid me half, said that’s all he felt like doing and that was that. I was crazy angry, but I had to take it, I failed to get anything in writing beforehand and that was my mistake, simple as that - I messed up, he screwed me. Worse things have happened, valuable lessons learned. And of course I’ll never work for him again.

So yeah, project management is a big deal, knowing how to make the deal, how to pitch yourself and how to keep the client in line are all learned skills. Don’t get too caught up in it, just start out small with people you trust and try to be as professional as possible. Do good work and lean as much as you can.

One of the biggest problems I have had was my age. A lot of people wont turn to a teenager for web work or animation work, or any work for that matter. They think they need someone more qualified and that’s that. Best thing you can do is develop a portfolio and show them previous work. When they see stuff that looks good, they tend to warm up to the idea much faster.

And finally, try to always best yourself. If you have pride in your work it will show. It’s that simple.

I like to believe that this simple fact is why my animation work has been so popular, I just do my best and fiddle with things until everything looks right to me and if I don’t like the way it looks, I keep messing with it. It’s actually not that complicated. Most things aren’t once you get the jist of it.

Your site looks great. It needs a little layout work to really organize the content, and I noticed a few Javascript errors in Chrome’s Javascript debugger (see attachment), but otherwise it is really good.

You can get to Chrome’s JS console by hitting: ctrl + shift + J

Congrats on the site and good luck with any future endeavours! -Cody
error.jpg

Nice site. It looks like you use weebly. I have not used them before but it seems to give some pretty good contorls over the website look and feel. I am not sure how much under the covers you can get to add more functionality though.

You also already have one of the most powerful JavaSrcipt libraries on your site that you might want to explore more - JQuery. So many of the fancy elements of sites are now wrapped elements of the JQuery library it’s incredible.

From site building tools, I am personally a fan of Wordpress as you can host it yourself, it’s open source so you can see what’s going on, you can trick it out using a myriad of plugins yet still keep control of the site. I’ve helped a few friends with their small business sites and it has helped them nicely.

Since it’s not my day job, my goal was ot make it so they can do the updates themselves and not have to bother me for a page update and keeping a site fresh is critically important if you want repeat visitors. Shortcodes in my mind are the key to allowing complex layout elements for the non-technical user. Once you see the shell of most shortcodes, you can pick up the PHP yourself. I don;t know how much weebly allows you to do that.

I also try and run the site locally on a PC so you;re not playing around in a production environment. WAMP is a good tool for PC’s and there’s a Mac version too. Suck everything locally and code to your heart’s content and then upload it all.

You may also want to learn the apache web server and some of the tricks and configuraiton items there. Once you get the web page design down, the next place would be security and how poeple want to maliciously break into your site. Protect it and learn the places to watch for patches and upgrades. Nobody wants their site hacked.

Next is search engine optimization and techniques for tagging your pages so they get found. It’s nice to have a great looking site but if no one can find it, they may go with someone else to build it.

It’s a great journey and can lead to a very lucrative job. Keep learning and keep programming.