Comments on: The Most Detailed PSD to HTML Tutorial

By: Abb

Abb — Sat, 01 Jul 2017 07:43:36 +0000

In reply to Abb.

Ok. I figured it out. I was using span4 and span6 which is deprecated in newer version of Bootstrap. For people who might get stuck with the same issue here is the explanation – As of bootstrap 3.0…spanX has been deprecated,instead,col-xx-## is used now where xx can be lg, md, sm or xs and # ranges from 1 to 12 so in above html markup change to and it should work.

For more info checkout –
https://stackoverflow.com/questions/20727714/span4-class-is-not-working-with-twitter-bootstrap
I give credit to the person who wrote the reply on stackoverflow.

Thanks

By: Abb

Abb — Sat, 01 Jul 2017 07:18:17 +0000

Michael John Burns,

I am trying your tutorial to convert PSD to HTML, Step 1 – HTML markup. In the first part you show a simple HTML with classes container, row and span4 and span6. After including only bootstrap.css the result is two rows with respective spans (shown in video at 11minutes 55 seconds) But when I try to do the same my result shows Row-1 with two columns one below the other, Row-2 with three columns one below the other. They are not shown in one line. I haven’t touched the css file yet. Can you or someone help me to try and figure out what I might be doing wrong or what I am missing?

Thanks

By: Catia

Catia — Thu, 20 Apr 2017 17:08:21 +0000

Amazing list of tutorial it will really helpful for newbies like me
Thanks alot !!

By: Serajul mustafa

Serajul mustafa — Fri, 17 Feb 2017 05:40:19 +0000

Really important tutorial and I have learned many option

By: Karen

Karen — Sat, 21 Jan 2017 00:22:03 +0000

the link to download the .png file doesn’t work. it just opens up in the browser rather than downloading an actual PNG file. is this the intention? I would like to download an actual file that I can use in Photoshop. Can you change that link to let us download a PNG file, rather than have it open a new tab in my browser?

By: Cammy

Cammy — Sat, 13 Feb 2016 16:47:09 +0000

In reply to Michael John Burns. Why not just use Export Kit and convert your PSD to a responsive website without coding it by hand? This is 2016, why are you creating a GUI by hand when you can export it? Much faster and easier!

By: Dainis Graveris

Dainis Graveris — Tue, 02 Feb 2016 12:24:34 +0000

In reply to Jolyllb. Hey Joly, thanks! :)

By: Jolyllb

Jolyllb — Mon, 01 Feb 2016 11:50:09 +0000

Though I am a wordpress theme developer, i still need to do psd to html work.This post always come in my work.

By: Dainis Graveris

Dainis Graveris — Sun, 27 Dec 2015 20:33:56 +0000

In reply to Rafael. Dipped source files are on top of the article, before actual tutorials, right where Part 3 starts! Thanks Rafael.. :) Ah, good tip, new Bootrstrap is out already, hope to do changes soon.

By: Rafael

Rafael — Sun, 27 Dec 2015 15:25:45 +0000

Hey! Awesome tutorial man. Just a few things, can you put the source files from the Dipped website here? And also, I think you are using Bootstrap 2 on that tutorial, you can also put here the changes needed to make it work with Bootstrap 3, for example, ‘hero-unit’ is now ‘jumbotron’.

Cheers and congratulations on the awesome job!