"You have gone through HTML/CSS, now go make websites!" any good approaches?

Just a clean and simple site to show work in my opinion. Now about JS and PHP. All you need is a free script for the photo gallery (lightbox for example ). You need PHP for the contact form but it is very simple no need to learn hours of PHP. Keep it simple. Remember, doing and taking action is more important than learning.

You probably weren't intending for this, but Smashing Magazine has an unbelievable, comprehensive guide to planning a website.

I mean, you could probably just start wireframing a site - the Treehouse blog had a great Wireframing story a few years ago - but to really get the grasp of getting a good site up from the ground upwards, I believe project management goes a long way. Plus, you'd be able to use it in interviews when they ask you questions specifically about a site, or a client seems unsure that you'd put the same level of effort in their local underwater dog-grooming site that you did on that thousand-employee human resource portal.

Hope this was helpful and at least marginally answered your question...

Get a piece of paper, draw something, then try to make it happen in code. Let us know if you have issues.

This is a good step by step design workflow

Here are a few videos you can watch

• Responsive Workflow Conference talk
• Web Site Planning and Wireframing: Hands-On Training Lynda Video Course
• Foundations of UX: Prototyping Lynda Video Course

My suggestion is to make yourself a simple "business card" site. Who you are, what you do, other info you want others to know.

Something like this template ...

For building your first site I recommend the following process...

• Make a wireframe using an online wireframing tool, something like Cacoo
• Write the semantic HTML, don't worry about the CSS yet
• Build a fixed width site
• Keep it simple to start with, don't try to solve problems you don't have yet
• Add in some small CSS3 if the design calls for it, maybe border-radius or box-shadow
• If you need a form add in some HTML5

• Try to stay away from a lot of Javascript for now

• Once you've got the first version fully working post it here and get some critiques on your design

Then it's time for version 2

• Make it responsive
• Check it out using the responsinator
• Then post it here to get some feedback on the responsive version

Time for version 3

• If you are sick of cutting and pasting your header and footer on every page
• It's time to add in some templating using PHP.
  Very basic PHP is all you need, it makes it easier to not repeat yourself (see also: DRY).
• Post it here to get some feedback on the responsive version

Thank You! All very helpful and some new resources to boot! I will try and put these into practice :)

Just to extend what I have asked here, regarding using grid.css and normalize.css from the "Build your first website" project, should I use these? as grids are confusing at the moment. let alone the detail of normalizing, should I be using these in my own projects? are they a standard?