Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Eric Cline
Eric Cline
1,769 Points

Creative Process

I am just getting started out with web development. I've done some tutorials from other places and am rapidly working my way through the learning adventures on Treehouse. I just wanted to ask about how much precoding work is done for a website. Obviously it will depend on the complexity and goals of the site, but it is seeming to me that you really are inviting all kinds of trouble when you start coding unless you have a very clear idea of what the final page will look like.

I say this because although HTML/CSS are supposed to separate content from presentation, the reality is that they do a really poor job of it. How you organize your content in HTML directly and greatly influences how you can present it with CSS.

So my question is, how much preplanning do you all do before starting to code? Also, what steps do you take in the preplanning stage? Every effort I've made when just launching into code causes headaches. I want to know that I'm not just inept in that regard. Thanks for your time!

4 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

You might find this article a worthy read

http://www.smashingmagazine.com/2013/06/25/workflow-design-develop-modern-portfolio-website/

Eric Cline
Eric Cline
1,769 Points

Great article, thanks! That's an excellent, thorough definition of his creative process. Very helpful!

Brad L'estrange
Brad L'estrange
2,085 Points
Brad L'estrange
Brad L'estrange
2,085 Points

Before I start coding I always have a design done already in photoshop if it is my own or someone elses I will have the PSD open. Then I would look at the PSD and see what I can and can't do with it what I mean is if there is any logo's or icons I then get them into there own image I should really put all the icons in the same image but I don't but I want to. Then once I got that I get he sizes for all the elements I need and the right colours. Then there are two ways I do it.

I usually just go down the pages and code it as I go down which can be very useful way. Another way I do it is I code all the buttons and forms first and then code the layout and have that done and then place them in and make some ajustments both methods work great.

I hardly ever code without some sort of design infront of me I have done it before with bootstrap just for fun.

John Locke
John Locke
15,479 Points
John Locke
John Locke
15,479 Points

The beautiful thing about HTML and CSS is you can always change it.

I code through a page in a modular fashion: take care of the header and footer, get down into the page, and the modules on the page.

When working from a mockup, you have a good idea of how the structure is going to be built, but sometimes you might find you need to adjust things if they don't work as intended.

As for Pre-planning, I don't spend a lot of time on it. I make decisions as I build it out.

Ben Tristem
Ben Tristem
9,978 Points
Ben Tristem
Ben Tristem
9,978 Points

As you can see from the contrast of the two responses so far, the way you approach this really depends on what suits you. Personally I believe that details and big-picture are two parts of the same thing... namely the whole. I believe that working out the details gives me more clarity and inspiration for the big picture, and the big picture gives me a focus and target for my work on the details.

I'm talking here in general terms as I'm not (yet) an experienced web designer. How do you approach a jigsaw? Do you meticulously lay-out the edges before starting in the middle? Do you put bits together as you find them, then put the clumps roughly where they appear in the whole? Answers to these sorts of questions will help you work out what suits you.

Ultimately get on and try it different ways, and remember that keeping things well structured and "as simple as possible but no simpler" will keep you out of trouble.