I'm a graphic design student, just coming up to the end of the first year of my foundation degree course. I've had a good think about what specific area I'd like to go into once I've finished my degree (May 2013, I'll be 20), and I think Web could be the one.

 

One of the sections of my course is digital stuff, but this is only for 2 hours per week, and with my class, it takes 2 hours just to mock up a footer design in Photoshop. I emailed my tutor about advice on where to start in web design, to get a head start, and she recommended w3schools.

 

I'm just wondering if anyone can recommend any other resources for absolute beginners, like brief overviews of what everything actually is, like CSS, jQuery, HTML, PHP etc. I've also seen people coding in Notepad, is this just for practising or 'the real thing'?. I have the full Adobe CS5 Master Collection, are there any other tools I need?

 

Another (maybe stupid) question - Are Web Design and Web Development two completely different things?

 

One more thing. How long does it take to know web design inside out? We have to go on work placements next year, and a lot of companies I've checked out require web design knowledge (of which I currently have none). It'd be nice to know the basics to start.

 

Thanks for your time!

Hi Saunders,

 

I'm not on my main PC at the moment where I have access to all my resources but when I am I will come back to post them for you. In terms of learning the basics of HTML and CSS w3schools is very good. However it won't piece all the parts together for you, so I would also recommend a basic HTML/CSS book. It's all personal preference so go on Amazon, look at the reviews and find one that suits you. Notepad isn't great to code in, it is the most basic of basic text editors. But you can download a program called Notepad++ which is free and very widely used by PC web designers. CS5 Master Collection is all you need and a good text editor. A lot of people advise not to use Dreamweaver because when you're new and not familiar with code. It auto completes open tags so you aren't learning when it's doing things for you.

 

Design is generally known as front end coding which is making the designs in Photoshop and coding the HTML and CSS. Development is known as back end coding which is PHP and ASP type stuff with databases. Things like building shopping carts. Both terms can be used very loosely though and sometimes someone will say developer and mean designer and vice versa.

 

Welcome to the forum by the way.

If you're a complete beginner start with HTML and CSS as that is the basis. HTML Dog is a great place to start for the basics. Ignore everything else best to concentrate on one thing first. I'm doing HTML and CSS.

 

If you're confident using photoshop and dreamweaver you can create web layouts in photoshop and convert them into code plenty of tutorials around to help with that.

 

I've only been learning for few months after on-off for few years, but there are guys on here who been doing this a lot longer and I don't think you ever really stop learning. Hope that helps there are lots of guys on here available to help and also in a similar position to you.

Web Design - Literally the design, and not the code.

 

Web Development is split into two separate areas:

 

Front-End Development - This is the code that runs in the browser. HTML, CSS, JavaScript - usually.

 

Back-End Development - This is the code that runs on the server that dynamically generates the front-end code depending on the user requests. This is your PHP, Ruby, etc.

 

That isn't to say that these three areas do not cross-over, they do. Some people try their hand at all of it. But they are still separate areas, and should be treated as such. I would also advise to anybody starting out that for the first few months at least you concentrate in one of those areas. If you try to do it all at once straight away, it's just all too much to take in.

 

What creates the confusion with the terminology is that these days, most Web Designers are also Front-End Developers. Generally speaking, the person who designs the website, also writes up the front-end code. However, you should still treat them as separate practises.

 

This is why, on my personal website, I refer to myself as a "Web Designer & Front-End Developer".

Edited March 14, 201214 yr by brightonmike

Are Web Design and Web Development two completely different things?

 

That would depend who you asked.

 

http://www.netmagazine.com/features/net-strip-22-job-titles

Edited March 14, 201214 yr by oakleaves

I emailed my tutor about advice on where to start in web design, to get a head start, and she recommended w3schools.

 

 

That would not be the best way in all honesty.

 

Find a site that has some sort of video tutorials - I remember that being invaluable for me when I started out. When I look at what the guy was saying now most of it seems so basic but it got me going and from there you just keep learning.

 

You say you have the full Adobe Creative suite - that's great for when you start out. As you get more advanced you will probably move to something like notepad++ for the code editing but you may not be comfortable with that just yet.

 

You'll find you always use thing's like Photoshop and Illustrator regardless of how long you have been in the game so these are well worth having and getting to grips with.

It's tricky coming from a Graphic Design background into a Web one because while a lot of the design principles you've learned can (and should be) applied to the web, you have an entirely different set of challenges to deal with.

 

When you are working in print you have a single, static page to convey your message which limits what you can say, but also limits the scope how you have to convey your message. With the web you (typically) have multiple pages that have to work together as a design system to accomplish the same goal.

 

Usability also comes into play. When you are designing let's say a poster you have one "screen size" (a 20x30" poster), one "device" (a piece of paper) and no problems delivering images and fonts. When you work on the web you have to consider how things look and behave on a wide array of devices and viewport sizes.

 

You also need to understand User Experience. You're no longer designing a static experience, you have to design the whole system, making sure every piece is easy to use and understand to people who might have a very different level of computer competency.

 

I'd say you can pick up a lot in 6 months or a year if you really spend your free time learning. I did a ton work outside of my Design certificate to get to an ability level that enabled me to find a job.

 

The nice thing about being your age is there is absolutely no rush on trying to find work. Spend every spare moment you get learning something new and refining your technique and style and you should be able to launch a successful career.

Treehouse is pretty good.

 

I also can't recommend this enough. Ignore the pretty pictures and fancy Javascript effects; when you get down to it the Web is primarily a medium for communication. Communication means text, and text means typography. If you haven't already, pick yourself up a copy of Bringhurst.

Edited March 14, 201214 yr by Renaissance-Design

I use lynda.com to learn the basics.

W3Schools is the best resource that I used when I was learning HTML and CSS. It took me 5 weeks to get from my first view of W3Schools to a completed WordPress website I created at creativeshelf.co.uk which I created through college. Unfortunately as I learnt it all online, my web design part of my course became something I already knew.

 

If you want to learn WordPress, get down and dirty with themes after reading up on the Codex at Wordpress.org

 

I hope this helps.

 

Jake.

I use lynda.com to learn the basics.

 

Lynda.com is a grea tool but VERY costly to unlock the other resources.

Great definition from brightonmike and sound advice from porkchops. Especially as I came from a graphic design background too. Best thing I did was drop dreamweaver for Notepad++ as for the reasons previously mentioned as it helped me to get a better understanding of the coding side and its structure.

 

W3Schools is a great resource to refer back to as mentioned already. I personally found Trial and error was the way I learnt, very much a self taught experimental way of doing things. Practice, practice, practice.

Lynda.com is a grea tool but VERY costly to unlock the other resources.

 

Yes very true, although you do get what you pay for and personally it helped me way more than W3schools.

 

Also you cant leave out good, old fashioned reference books (up to date ones of course), I have a large collection. Good because you can go back to them time and again.