What is the best way to plan a HTML/CSS website project?

Hi Gavin, I suppose there is no right or wrong answer but I can tell you how I go about my work, as I mainly use HTML, CSS and WordPress, hopefully it will help. After setting up my job folder etc, I usually create a variables/config partial (using SASS) and list out everything I need, fonts, paths to images etc, colour maps, widths and font sizes. Working in WordPress I will usually start with the main homepage / landing page and follow the usual template hierarchy by building out the header and footer, as more often than not these will be universal throughout the site.

I treat each part as its own module, markup first then apply styling. Then move onto the next module. I find breaking it down keeps things organised and your code cleaner and more reusable. With class names I try to keep it as descriptive as possible, but at times it can be challenging. Have you checked out Guil Hernandez CSS course here, Modular Sass? - really great course helped change my approach. You can learn about BEM that will really help you structure your markup and classes. Good luck man.

Thanks Craig!

I think that was one of the big questions that I was looking for - whether to build it all at once or language-by-language (roughly). I think I might start with something like:

1 - Draw a wireframe on pen/paper. Rough notes on layout, dimensions, classes. 2 - Create empty CSS Classes 3 - Create entire HTML (5-10 pages) 4 - Create CSS for Mobile 5 - Create CSS for Desktop

... I assume that'd be a decent starting point and then add any Javascript or integrate with WordPress after that?

That sounds pretty good starting point Gavin, see how it goes. Sorry, I didn't touch on the mobile first or wireframe. I always wireframe, even if just a rough sketch and I always build mobile first and just add in styles for larger devices as you go. I personally haven't separated by doing all of the HTML, then all the CSS, but it's a personal thing (and probably project size dependent) you will know what works for yourself after a few builds with trial and error. I think you will find success as you seem to have it planned out logically...always good to have a plan! Good luck and sorry if I didn't really help your initial question! Be interested to see what you build and how it turned out.

I build all my sites with Foundation 6, pretty much saves having to make media queries yourself.

<div class="row> <div class="small-12 medium-6 large-4 columns" </div> </div>

easy game :')