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!
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
Jon Myers239 Points
How to Move From Visual Designer to Designing with Code?
A little background.
I'm a visual designer (UI/ UX) who can't code. There are a lot of us out here. Tons.
The last 10 years or more I've been prototyping designs in Photoshop, and Fireworks. Though, Fireworks has been my main prototyping tool for a while now. I love that application. It's fast and efficient.
I know enough very basic HTML and CSS to tweak designs. Again, I know the basics, I know what an H1 is, I know what a text editor is, have one, and so on.
I'm loving Treehouse, but...
I want a clear online education path of going from a PSD or PNG to a properly marked up CSS based layout.
I feel like there's a gap here in the library to get you there.
Does anyone have any suggestions on how to use Treehouse to better make that leap from just visual designer to visual designer who can take his PNGs and turn them into a nice marked up page?
James Barnett39,199 Points
- Make a wireframe
- 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 only if the design calls for it
- Maybe border-radius or box-shadow
- If you need a form add in some HTML5
- Once you've got the first version fully working post it here and get some critques on your design
- Now it's time for version 2 ...
- Make it responsive
- Add in a few bits of HTML5
- Get some more feedback on the new responsive version of your site
- Now on to version 3 ...
- Have you gotten sick of pasting your new on every page yet?
- If so add in some basic PHP, don't worry about a database for now
- Make your navigation, and any sidebars you use on multiple pages into PHP so that you only have to configure them in one place
- Finally, get some feedback on the new template-based version of your site
Jody AlbrittonCourses Plus Student 5,497 Points
Look at the underlying code on sites you like. The inspector tool on your web browser is your new best friend. If you go through all of the CSS stuff on tree house you will be off to a pretty good start.
Ryan Carson23,287 Points
We're about to release a Learning Adventure called "Become a Frontend Developer ". It'll be perfect for you! :)
Hoping to set that live mid-Jan.
Thanks for being a Student!
Joe HirstCourses Plus Student 6,489 Points
Treehouse are also going to be releasing a "Photoshop Foundations" Deep dive.
"Our Photoshop Foundations Deep Dive will release a new badge next month on Photoshop Slices and Saving for Web, which will teach you how to create and manage slices for user interface elements. It will also cover the basics of the Save for Web feature."
Jon Myers239 Points
Loving the Treehouse.
You guys are awesome.
Thank you very much for the help.