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
Cezary Burzykowski
18,291 PointsPSD to HTML / CSS tutorial
Hello there!
I was wondering why there are no "PSD to HTML / CSS" tutorial on Treehouse. I saw a blog post by Nick Pettit about "PSD to CSS being dead" but it's a skill that is appreciated by most of the employers...And definitelly the skill every Front-End Developer should have
I would love is someone could help me (perhaps I didn't saw a specific course here on Treehouse?) If there are any good tutorials on how to convert PSD into HTML / CSS I would love to hear about them
2 Answers
Christian Andersson
8,712 PointsIt's generally a bad practice. I really don't think many employers value that skill (if you can call it that). There's so much that can go south with the process and nowadays front-end is developed with mobile and desktop in mind.
Cezary Burzykowski
18,291 PointsThank you very much for you honest opinions :)
At the very moment I'm working on turning a predesigned layout into a functioning webpage and I'll focus on recreating the layout rather than cutting PSD
Christian Andersson
8,712 Pointsglad I could help.
Aurelian Spodarec
10,801 PointsAurelian Spodarec
10,801 PointsWell, I agree with you. I'm not 100% sure what the PSD course is made of, because there are courses like that, but what i know that if you do Understand CSS, you should be able to do PSD to CSS or whatever.
I'd refactor the quesiton and ask, why isn't there are tutorial where we take existing website, or a design and make it real, that's something that happens in real life. I was just wondering what techniques they woudl use for it, alehtough I can make it, was just wondering lol
Christian Andersson
8,712 PointsChristian Andersson
8,712 PointsAurelian Spodarec, I'm a full-stack webdeveloper and, yes - if you know CSS well enough, you should be able to take any picture/screenshot/wireframe/etc and create a website with a layout similar to that reference. Perhaps it won't be an exact copy, but you should be able to get it really close.
I have done this multiple times, but this is completely irrelevant to PSD specifically. The format has no meaning in this context.
What I was referring to in my answer above is the ability to "convert" a file. Like use a program that generates the layout from an input PSD. Those have existed, and they are pretty much a no-no today.
Basically you should be able to create a layout from a reference, similar to how a painter makes a portrait from a live person/object. So yes, you're right that that is very useful.
However, I don't think it's really necessary to have a course for that. I have never taken such courses and I've never felt I ever needed to. If you have a reference, the first thing to do is to do the traditional way of solving programming problems - "divide and conquer". Basically, analyze all the components that are needed but only work on one at a time.
So if you are making an entire website from an idea drawn in photoshop or some wireframe, I'd start from the top and work my way down. First do the navigation-menu, then do the container for the main content, then do the footer. Once the skeleton is done, you move on to the page-specific stuff.
Aurelian Spodarec
10,801 PointsAurelian Spodarec
10,801 PointsI do that, but maybe I'm just missing some things. My site looks pretty much similar http://imgur.com/a/LZKjx , they did it with bootstrap, and im hand coding it, maybe im just confused with some concepts. i think i shoudl make a new thread for this.
Christian Andersson
8,712 PointsChristian Andersson
8,712 PointsAurelian Spodarec, yeah that looks quite close to the original. Nice!