From a big PSD - to HTML (bootstrap)

Question

0.00/5 (No votes)

See more:

Hi a PSD is created with 1900px PSD. Unfortunately, the client and PSD designer want the page same as PSD but they have no HTML background, so no further feedbacks from them.

2 questions:

1.1) Do I set a max-width (a bootstrap breakpoint, a container)? If so, which bootstrap max breakpoint is the most acceptable on desktop (to not bypass it)?
1.2) Or do I have the page as container-fluid (no max width) but set a left and right padding? In this way the page will look the same on laptop and bigger screens.

2) A general question: How do translate the horizontal spacings between elements from the 1900px PSD? Do I use percentage? Or Media Queries? Or some other way?

Please I don't want to be laid off because I'm stuck at this & will be much thankful.

What I have tried:

About the 1st question, I listed my approaches but not sure which is best.
About 2nd question, no idea on how to approach it.

Posted 12-Jul-21 1:07am

Member 13410005

Updated 12-Jul-21 4:56am

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Chris Copeland · Answer 1 · 2021-07-12T04:56:00

convert psd to html - Google Search[^]

If you've been provided a PSD and it needs converting into HTML, well, you're more than likely going to have to do this manually. How you implement it comes down to user requirements. If the expectation is that the website needs to be responsive then you'll probably need the browser + tablet/mobile versions of the PSD.

You'll have to go through the process of using whatever tools are available to you (ie. Bootstrap) and use the provided or custom media queries to make the HTML content match what is defined in the PSD itself.

As a good starting point, these days a lot of modern CSS design rely on units like em and rem, which are responsive to the parent or root element. You can absolutely use percentages or pixels, it boils down to personal preference. I believe Bootstrap makes use of em and rem. I'd also recommend avoiding adding inline CSS where possible, as this can make your HTML documents unreadable fairly quickly.