Design a high fidelity pixel-perfect mockup in Photoshop of exactly what you want your site to look like.
Use the slice tool to divide your website’s imagery and then export it for the web.
Write HTML and CSS that utilizes the imagery you exported from Photoshop.
At first glance, this might seem like a good idea. It can be difficult to start coding if you don’t know what the final result is going to look like, so experimenting in Photoshop first and then “exporting” it to HTML sounds like a granular and sensible process.