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

General Discussion

Posted by Stephen McMillan
.a{fill-rule:evenodd;}techdegree seal-36
Stephen McMillan
iOS Development with Swift Techdegree Graduate 33,994 Points

Best Steps to take when constructing from scratch?

Hey Guys,

I'm looking to build a site soon for a project im working on. Although, im a bit puzzled where to start. Do you guys have any specific or helpful process to building your websites. E.g (1. Design, 2. HTML ) Etc...

Thanks! :)

3 Answers

Eddy Valna
PLUS
Eddy Valna
Courses Plus Student 3,978 Points
Eddy Valna
Eddy Valna
Courses Plus Student 3,978 Points

I started using HTML5 BOILERPLATE for my websites (here is the link for that http://html5boilerplate.com/

also make the layout for the site in Photoshop or illustrator and slice it up properly.

so in order

1: design layout in photoshop or illustrator

2: slice up design

3: use boilerplate for html and css

4 upload to web

5: enjoy website

Paul Graham
Paul Graham
1,396 Points
Paul Graham
Paul Graham
1,396 Points

Paper. Start on paper, forget Photoshop.

Eddy Valna
Eddy Valna
Courses Plus Student 3,978 Points

I do photoshop so you don't use up all your paper. lol but yea paper is good start.

James Barnett
James Barnett
39,199 Points

Design in the browser, slicing images isn't used in modern web design.

Also as far as a boilerplate goes there's way too much. If you want to use normalize.css, moderizr, JQuery, Google Analytics then use them.

Learn how they work and intergrate them into your project.

Here's a good article offering some perspective on HTML5 Boilerplate

Eddy Valna
Eddy Valna
Courses Plus Student 3,978 Points

yea your so right, i do delete all the stuff i don't need and use basic. i just have it so i don't need to type stuff out.

Eddy Valna
Eddy Valna
Courses Plus Student 3,978 Points

why do they teach you to slice on treehouse if your not suppose to?

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

My thoughts:

+1 on what Paul Graham said about starting on paper. If you design in the browser, you'll think within the traditional constrains of the browser. Pen and paper are freeflowing. Lay your concept out out on paper, and than figure out how to code it.

I like frameworks and Boilerplate, but you need to be very specific how you use it, as both can leave a lot of bloat. I think still my biggest gripe about both are that I am always starting with the full project and subtracting stuff; I'd rather start with nothing and add in the parts I want.

As far as starting a new project - if your looking for a fast way to get going, I found this site http://www.initializr.com/ very helpful. You can get a HTML5 Boilerplate with Bootstrap template linked up quick. Just be aware of how much code this is already!

Jon Wood
Jon Wood
9,884 Points

Honestly, I prefer how 37Signals deals with designing a new UI.

Kevin Korte
Kevin Korte
28,149 Points

I like that article. Good find

Eddy Valna
Eddy Valna
Courses Plus Student 3,978 Points

I agree very informative, I guess i was hung up on photoshop because i love making graphics so much, Making websites is a very very new experience to me i am an illustrator so making vector graphics and psd's are my thing. but yea when it comes to web it's not the best way to go. i can see the logic it just takes too long.

Kevin Korte
Kevin Korte
28,149 Points

I certainly us too, as well. I still use PS a lot for colors, highlights, shadows, etc. The details of a site that put the polish on it.

I just use my new found coding skills to say convert a box shadow on a PSD doc, to a CSS3 box shadow. But I'll certainly lay a box with a shadow on it, over a background color to figure out the intensity I need to to be at, for example.

Jon Wood
Jon Wood
9,884 Points

To be fair, Jake, if you enjoy doing it in Photoshop, then I say keep on doing it. I think the reason 37Signals went the way they did was to help get quicker feedback from clients or project owners.

Paul Graham
Paul Graham
1,396 Points

I still design all elements in Photoshop, I just no longer to do page layouts. It's a waste of time.