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

Finished Build a Simple Website

Hey all, I just finished "Build a Simple Website" and I started HTML in deep dives.

I am not feeling the same sense of progression. In build a website, I did everything step by step in an html editor and had the final product when I was done.

In these html lessons, I am following along, and I understand a base of examples has to be set but what is the best way to practice these tags, headlines, etc?

Is there a blank "Build a Simple Website" package where it gives you some images, documents etc but without the step by step guide, just here are a few images and tools you may need, here's the finished product, now do it?

I feel this is the best way to test the "build a simple website" tutorial, I know I'd feel much better knowing if I could do 100% by myself. I know I could just recreate the one provided in the How to build a simple website series but, I would much rather do something completely new.

Any suggestions? Is there one o teamtreehouse?


7 Answers

I now mainly work with WordPress but back in my HTML years if found the best way to practice was to find whatever website I liked (obviously it needed to be HTML) and simply saved it by right clicking 'Save As' 'Webpage, Complete and played around with it to my heart's content. The internet is also filled with free templates. Just google 'free html templates'

In the words of Picasso "Good artist copy, great artist steal" I rarely start with a blank canvas. I usually look for something I like and by the time I've played around with it very little remains from the original.

James Barnett
James Barnett
39,199 Points

I recommend the following progression:

  • Build a Simple Website
  • HTML Deep Dive
  • CSS Deep Dive

Now that you've covered the basics of webdesign it's time to focus in on the most important part ...

I had my first ah-ha moment with CSS when I figured out how to do this using floats. No absolute positioning, that would be cheating. Piet Mondrian - Composition II in Red, Blue, and Yellow - 1930

Source: Piet Mondrian Composition II

James Barnett
James Barnett
39,199 Points

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

  • Make a wireframe using 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 critques on your design

Then it's time for version 2

  • Watch the Build a Responsive Website course
  • Transform your website into responsive version
  • 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).
  • Watch the Build a Simple PHP Website course
  • Convert your site to using PHP templates
  • Post it here to get some feedback on the new templated version
James Barnett
James Barnett
39,199 Points

If you want to get some ideas about designing a portfolio site for yourself check out some of the best selling templates for vcards and CVs over on Theme Forest.

Pick and choose design elements you like and add them into your mockup.

Thanks so much for the input! I'm going to look into all of these later tonight after work, can't wait!

I found this as well, great little game! http://coderace.me/