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 Michael Reyes
Michael Reyes
Courses Plus Student 749 Points

Web Designers / Developers: Taking a Final Design / Image, and bringing it to Life / HTML

After some online research and talking to a couple of people with experience. I found at the what i TRUELY am looking to do is web design. I found out how to word exactly what is i am trying to do as well...

This is a final image of a web design made in photoshop... http://psd.fanextra.com/wp-content/uploads/2010/02/redport20.jpg

Now, How in the world do you bring that to life!?

How can i convert that into html code, or into CSS styling. How can i make this responsive or adaptive?

2 Answers

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

Go through the Learn HTML & CSS learning adventure

After you finish with the learning adventure, it's time to code up your site.

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

  • make it responsive
  • 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).
  • Post it here to get some feedback on the responsive version
Michael Reyes
PLUS
Michael Reyes
Courses Plus Student 749 Points
Michael Reyes
Michael Reyes
Courses Plus Student 749 Points

Thanks a lot i appreciate your reply. I will get that going and post it up here.