Kevin, I do this all the time. The Photoshop mockup I presented in getting the “Go ahead” approval to start the project, is the same PSD file I use to create the first html/css template for that project. I might even let the client play with this html/css template so they can see how it finally looks in a real browser, be able to scroll, see the mouse-over/tabbing or another animation effects.
Of course, if you’re working in a big company where duties are subdivided, then a person may not do this kind of task. But if you’re running your own solo dev biz, well, you’ll be doing this and a lot more (writing proposals, quoting the project, closing the sale, billing the client, etc).
I just keep getting stuck.
How do you eat a big elephant? One bite at a time!
Look at a page (or your photoshop mockup), and divide it into the typical header, content, footer. Just get the big picture. That’s 3 div sections. Then write the CSS for those 3 Div section. Is it supposed to be centered, or fluid? What’s the background-color for each div? Is there a specific height for the header and footer? If yes, specify it in the css, etc… you get the picture?
So now, concentrate at your header section… typically, there’s a logo and other stuff, maybe social icons, a menu, etc. Write divs for those items. Then style them in your css, position them, apply colors, etc. Apply an id so you know your css styling will only affect this particular id. Like div id=“sitelogo” and in your css, create the specifics for #sitelogo.
And you just plow through it, one section at a time. That’s the idea.
But you really need to be familiar with CSS to do this easily, the limited CSS covered in fCC won’t do. There’s a lot, lots and lots of CSS properties not even covered by fCC. So google it up, go to w3schools, or buy a CSS reference manual/book and familiarize yourself with what’s available. — then just practice, practice, practice. Pretty soon, you’ll look at another website or PSD mockup and have a general idea of what to do.