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 Peter Edward
Peter Edward
414 Points

My First Design

Since I will be finishing up the web development course tomorrow, I will be creating my first design. It's going to be a hosting template. For this template, my inspiration is coming from http://i.imgur.com/7RNqxqI.png . Since I did not make that image, and I want a slightly different template, I will be creating a new image which I'll work to convert into HTML & CSS. I will be posting updates here, and I'll probably be getting stuck a lot. I really hope people like James Barnett will be able to guide me throughout my first attempt at a site. Thanks, and I look forward to creating a nice design.

4 Answers

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

Well since you asked, here's my 2 cents on how to make your first website.

  • 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

James Barnett
James Barnett
39,199 Points

I generally suggest that after you finish the CSS Foundations course but before you make your first site you concentrate on the 2 most important parts of CSS:

I had my first ah-ha moment with CSS when I figured out how to do this using floats.

Now, no absolute positioning, that would be cheating :wink: Piet Mondrian - Composition II in Red, Blue, and Yellow - 1930

Peter Edward
Peter Edward
414 Points

Thanks, I'm going to follow all your steps, but I don't understand what Cacoo is used for. Is it basically a more general way of laying your site out so that your site is easier to design step by step?

Cody Brantley
seal-mask
.a{fill-rule:evenodd;}techdegree
Cody Brantley
Front End Web Development Techdegree Student 3,356 Points
Cody Brantley
.a{fill-rule:evenodd;}techdegree
Cody Brantley
Front End Web Development Techdegree Student 3,356 Points

Cool stuff man, good luck on your design! ;)

Peter Edward
Peter Edward
414 Points
Peter Edward
Peter Edward
414 Points

Thanks, I'm going to follow all your steps, but I don't understand what Cacoo is used for. Is it basically a more general way of laying your site out so that your site is easier to design step by step?

Riley Hilliard
PLUS
Riley Hilliard
Courses Plus Student 17,771 Points
Riley Hilliard
Riley Hilliard
Courses Plus Student 17,771 Points

Twitter Boostrap could help you get started with this quickly. The buttons on your mockup looks quite similar to those provided by the Boostrap framework, and it could help you prototype your project quickly.