So I've always had an interest in designing and developing websites and I want to start now, at 15 because for the next 2 years at school the only thing we learn about coding is HTML using WYSIWYG editors and I think that'll be too easy.

 

So I currently operarete on Mac and am using Brackets for coding and Photoshop CS6 for designing. I would like to know how to transfer Photoshop designs and then into code. I think I know quite a lot about HTML but I know some CSS and can't memorize a lot of CSS code yet and theres still a bunch of things I don't know yet in CSS.

 

So does anyone know where I can get started with putting Photoshop designs into code?

Measuring, copying and guesstimating.

 

In a nutshell - you want that button to be 20 pixels wide, 30 pixels tall and have a blue background? { width: 20px; height: 30px; background: blue; }. For the record, I'm deadly serious.

Measuring, copying and guesstimating.

 

In a nutshell - you want that button to be 20 pixels wide, 30 pixels tall and have a blue background? { width: 20px; height: 30px; background: blue; }. For the record, I'm deadly serious.

 

Which guides/measurement settings should I be using on PS6? Also is there a size that I should set my Photoshop document when I design a website? And I also get stuck on what I should be saving as an image and what I should be writing out as code when transferring over to code.

Before you start any CSS, you'll definitely want to use the box-sizing: border-box property for any and all divs you are programming for. Just a pro-tip.

 

The best way to start, I do believe, is similar to what Jak said above me. Starting out you'll probably not be doing responsive or dynamic websites and that's going to save you a lot of headaches.

 

I would break down a photoshop website into its most basic elements (simply by hiding layers). So you've got your whole site, now break down to the background. Save that using your "Save for Web" option, usually as a jpeg with medium compression for photographic, or png for transparent. Each as its uses. Now throw just the isolated background element into your images folder where you're developing your site and link it using your css, usually into the "body" property to begin with.

 

Next step is to just start moving up the layers. Sometimes you wont need to save an image for each part, you can just replicate using css. Each part of your design has a size, so it wont be too hard to code for pixels, it's just not the best way to learn.

 

I'd say get Chrome if you've not already and start using the code inspector (F12) to look at other peoples CSS and sites to get a feel for what type of site you want to make.