{"id":14718,"date":"2022-06-02T14:06:17","date_gmt":"2022-06-02T14:06:17","guid":{"rendered":"https:\/\/getdevdone.com\/blog\/?p=14718"},"modified":"2026-04-13T00:36:24","modified_gmt":"2026-04-13T00:36:24","slug":"convert-psd-html","status":"publish","type":"post","link":"https:\/\/getdevdone.com\/blog\/convert-psd-html.html","title":{"rendered":"How to Convert PSD to HTML: A Beginner&#8217;s Guide"},"content":{"rendered":"\n<p>In this post we will demonstrate to you how to convert PSD to HTML based on a simple Web 2.0 design example. To convert our design, I will apply modern solutions using CSS3, HTML5, and Flexbox Layout. Feel free to familiarize yourself with all the features of Flexbox <a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">here<\/a>.&nbsp;<\/p>\n\n\n\r\n\r\n    <section class=\"banner-block bg-info\">\r\n                    <div class=\"bg-stretch\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/20170024\/Banner-1.1.png\" alt=\"image description\" \/><\/div>\r\n                <div class=\"text-holder\">\r\n            <h2>5-Star PSD to HTML Conversion Service <\/h2>            <p>Pixel-perfect code. Instant start. ASAP delivery. <\/p>\n                            <a class=\"btn btn-md btn-warning-alt text-uppercase\" href=\"https:\/\/getdevdone.com\/psd-to-html-conversion.html\" target=\"_blank\">GET STARTED<\/a>\r\n                    <\/div>\r\n                    <div class=\"image-holder default\">\r\n                <img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/20170011\/Group-330.png\" alt=\"\" \/>\r\n            <\/div>\r\n            <\/section>\r\n\r\n\n\n\n<p>I will not be using any frameworks such as Bootstrap or Tailwind CSS. I will simply show you how to transform your PSD to HTML step by step.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"932\" height=\"1024\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/02144616\/psd-to-html-conversion-tutorial-main-screen-932x1024.png\" alt=\"\" class=\"wp-image-14766\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/02144616\/psd-to-html-conversion-tutorial-main-screen-932x1024.png 932w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/02144616\/psd-to-html-conversion-tutorial-main-screen-273x300.png 273w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/02144616\/psd-to-html-conversion-tutorial-main-screen-768x844.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/02144616\/psd-to-html-conversion-tutorial-main-screen-1398x1536.png 1398w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/02144616\/psd-to-html-conversion-tutorial-main-screen.png 1536w\" sizes=\"(max-width: 932px) 100vw, 932px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading advgb-dyn-77f62861\" id=\"lets-convert-psd-to-html-together-1308d6a3-be4c-4d79-9215-190e3faefb3f\">Let\u2019s Convert PSD to HTML Together<\/h2>\n\n\n\n<h3 class=\"wp-block-heading advgb-dyn-4a23dd7a\">PSD to HTML Conversion: Part 1 (the Header)<\/h3>\n\n\n\n<p>A website header is a crucial element located at the top of every webpage. It&#8217;s the first thing visitors see when they land on your site, making it an essential component in creating a strong first impression.&nbsp;<\/p>\n\n\n\n<p>When building the header of our web page, we\u2019re going to take these and other steps:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create directories and files&nbsp;<\/li>\n\n\n\n<li>Structure and populate index.html<\/li>\n\n\n\n<li>Add icons&nbsp;<\/li>\n\n\n\n<li>Download and use Google Fonts<\/li>\n\n\n\n<li>Add buttons&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>To get started, please download this <a href=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/02132604\/design.zip\" target=\"_blank\" rel=\"noreferrer noopener\">design file<\/a>.<\/p>\n\n\n\n<p>In this PSD to HTML tutorial, you will need a text editor that can highlight code (I prefer<a href=\"http:\/\/www.sublimetext.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"> Sublime<\/a>) and a graphic editor where you will do most of the work. (I will be using Adobe Photoshop, which works best for opening files in a .psd format)&nbsp;<\/p>\n\n\n\n<p>First off, open the designs in Photoshop.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full advgb-dyn-bc7d8f53\"><img decoding=\"async\" width=\"597\" height=\"367\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28094951\/design-in-photoshop.png\" alt=\"\" class=\"wp-image-22595\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28094951\/design-in-photoshop.png 597w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28094951\/design-in-photoshop-300x184.png 300w\" sizes=\"(max-width: 597px) 100vw, 597px\" \/><\/figure>\n\n\n\n<p>Create a new directory with a project name. Inside, create two more directories: <strong>CSS<\/strong> (for your CSS files) and <strong>images<\/strong> (for your images).<\/p>\n\n\n\n<p>Now, let\u2019s write this simple code in index.html. You will find it in most HTML slicing projects.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">\n&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&nbsp; &lt;meta charset=\"utf-8\"&gt;\n&nbsp; &lt;title&gt;Insight&lt;\/title&gt;\n&nbsp; &lt;link rel=\"stylesheet\" href=\"css\/style.css\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&nbsp; &nbsp; Sample text\n&lt;\/body&gt;<\/code><\/pre>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow advgb-dyn-f2a6aa86\"><\/div>\n\n\n\n<p>Here I have added &lt;!DOCTYPE html&gt; that will notify the browser that this is HTML5. I have specified the site\u2019s title inside the tag &lt;title&gt;&lt;\/title&gt; and linked the file to style.css, which is in the <strong>CSS<\/strong> directory. Now I have the following tag with two attributes &lt;link rel=&#8221;stylesheet&#8221; href=&#8221;css\/style.css&#8221;&gt;.<\/p>\n\n\n\n<p>Type the words \u201c<em>Sample text<\/em>\u201d between the &lt;body&gt; and &lt;\/body&gt; tags.<\/p>\n\n\n\n<p>Open the index.html in a browser (I prefer Google Chrome). You should see the following text in the browser: \u201c<em>Sample text<\/em>.\u201d<\/p>\n\n\n\n<p>Now take a look at the designs and try to define separate areas.<\/p>\n\n\n\n<p>At the top you\u2019ll see a black bar with a logo and navigation menu. You can call it .header.<\/p>\n\n\n\n<p>Then you will see a block with a big image and some promo text. Let\u2019s call it .hero.<\/p>\n\n\n\n<p>In addition, there is a white area with the main content. I prefer calling it .main but you can choose any title you find suitable.<\/p>\n\n\n\n<p>The last block will be labeled as .footer.<\/p>\n\n\n\n<p>All the content is centered. The first two blocks and the footer are stretched across the whole width of the screen. The main content on the white background has the same width as the stretched areas do.&nbsp;<\/p>\n\n\n\n<p>Since the blocks with content and not their visuals (the dark background and hero image) have the same width, you can use containers of the same width to center them. Let\u2019s start with the HTML code for the main blocks.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;!doctype html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&nbsp; &lt;meta charset=\"utf-8\"&gt;\n&nbsp; &lt;title&gt;Insight&lt;\/title&gt;\n&nbsp; &lt;link rel=\"stylesheet\" href=\"css\/style.css\"&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n&nbsp; &nbsp; &lt;header class=\"header\"&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=\"container\"&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; header is here\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;\/div&gt;\n&nbsp; &nbsp; &lt;\/header&gt;\n\n&nbsp; &nbsp; &lt;section class=\"hero\"&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=\"container\"&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hero content is here\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;\/div&gt;\n&nbsp; &nbsp; &lt;\/section&gt;\n\n&nbsp; &nbsp; &lt;main class=\"main\"&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=\"container\"&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; middle content is here\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;\/div&gt;\n&nbsp; &nbsp; &lt;\/main&gt;\n\n&nbsp; &nbsp; &lt;footer class=\"footer\"&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=\"container\"&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; footer is here\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;\/div&gt;\n&nbsp; &nbsp; &lt;\/footer&gt;\n&nbsp; &nbsp; &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>First, let\u2019s use the<a href=\"https:\/\/meyerweb.com\/eric\/tools\/css\/reset\/\"> <\/a><a href=\"https:\/\/necolas.github.io\/normalize.css\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Normalize.css<\/a> to reset all tag properties. To do that just copy and paste the code to the top of the CSS file. Then add the following CSS code. You can read more about it<a href=\"https:\/\/css-tricks.com\/inheriting-box-sizing-probably-slightly-better-best-practice\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"> here<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">html {\n&nbsp; &nbsp; box-sizing: border-box;\n}\n\n*, *::before, *::after {\n&nbsp; &nbsp; box-sizing: inherit;\n}<\/code><\/pre>\n\n\n\n<p>Now, remove underlines from the links since they are not underlined in the design.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">a {\n&nbsp; &nbsp; text-decoration: none;\n}<\/code><\/pre>\n\n\n\n<p>For frequently used colors in the layout, we will use CSS custom properties or CSS variables. Let&#8217;s add them via the inline tag &lt;style&gt; at the end of the tag &lt;head&gt;.&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;head&gt;\n&nbsp; &nbsp; &lt;meta charset=\"UTF-8\"&gt;\n&nbsp; &nbsp; &lt;title&gt;Insight&lt;\/title&gt;\n&nbsp; &nbsp; &lt;link rel=\"stylesheet\" href=\"css\/style.css\"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;\n&nbsp; &nbsp;&nbsp;&nbsp; :root {\n&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; --body-bg: #fff;\n&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; --base-text-color: #55606e;\n&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; --btn-color: #fff;\n&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; --green: #83c129;\n&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; --dark-green: #518719;\n&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; --blue: #068fd5;\n&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; --dark-blue: #046b9f;\n&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; --light-text-color: #fff;\n&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; --nav-link-color: #fff;\n&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; --soc-link-color: #fff;\n&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; --gray-100: #d9dbdf;\n&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; --gray-200: #8e959c;\n&nbsp; &nbsp;&nbsp;&nbsp; }\n&nbsp; &nbsp; &lt;\/style&gt;\n&lt;\/head&gt;<\/code><\/pre>\n\n\n\n<p>They are often added as we cut our layout but I selected this set by going through all the colors and then using them in the code.&nbsp; What benefits do CSS variables bring us in contrast to standard color specification in CSS code? We can easily change and customize our colors without editing the CSS code itself.&nbsp;<\/p>\n\n\n\n<p>In fact, there are many more advantages to this approach but let\u2019s just stick to the basics in this PSD to HTML conversion guide. This is an example of using variables in the CSS code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">\/* specify the value of the variable *\/\n:root {&nbsp;&nbsp;&nbsp;&nbsp;--example-color: #fff;}\n\/* We use a variable in the code that can be applied to an unlimited number of selectors. The value changes in one place and is applied to all selectors that use this variable. *\/\n.example-selector {\n&nbsp; &nbsp; color: var(--example-color);\n}\n.example-selector-2 {\n&nbsp; &nbsp; color: var(--example-color);\n}<\/code><\/pre>\n\n\n\n<p>In Photoshop, measure the width of the main content by selecting the \u201cRectangular Marquee Tool\u201d or pressing M.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full advgb-dyn-aaaac68e\"><img decoding=\"async\" width=\"900\" height=\"186\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28095330\/measure-width-in-photoshop.png\" alt=\"Measure Width using Marquee Tool\" class=\"wp-image-22598\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28095330\/measure-width-in-photoshop.png 900w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28095330\/measure-width-in-photoshop-300x62.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28095330\/measure-width-in-photoshop-768x159.png 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure>\n\n\n\n<p>On the information panel or by the cursor point, you will see that the width is <strong>1140px<\/strong>. Now you know the width of .container.<\/p>\n\n\n\n<p>If you take a closer look at the design, you\u2019ll notice that the header and footer have the same checked texture in the background. Disable the grid by pressing Ctrl + H and zoom in on the design to find the repeating element of the texture. Select and copy it to the buffer by pressing Ctrl + Shift + C.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full advgb-dyn-f64ba015\"><img decoding=\"async\" width=\"485\" height=\"383\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28095608\/element-of-texture.png\" alt=\"Select and copy element of the texture\" class=\"wp-image-22601\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28095608\/element-of-texture.png 485w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28095608\/element-of-texture-300x237.png 300w\" sizes=\"(max-width: 485px) 100vw, 485px\" \/><\/figure>\n\n\n\n<p>Then create a new document, paste the texture there, and save it for the Web with the following combination: Ctrl + Alt + Shift + S. Choose preset \u2013 JPEG High and set the quality to 60% then click \u201cSave\u201d. In the pop-up, select the images folder. Name the image <strong>bg-texture.jpg<\/strong>. Then enable the Eyedropper Tool and click on the footer. Now you have the code for the color of the dark blocks which you\u2019ll specify in styles so that these areas are a dark color while the image with the texture hasn\u2019t been uploaded yet.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full advgb-dyn-aa4e54b7\"><img decoding=\"async\" width=\"797\" height=\"513\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28095657\/color-code.png\" alt=\"Find color code using Eyedropper tool\" class=\"wp-image-22602\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28095657\/color-code.png 797w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28095657\/color-code-300x193.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28095657\/color-code-768x494.png 768w\" sizes=\"(max-width: 797px) 100vw, 797px\" \/><\/figure>\n\n\n\n<p>Write down your measurements in CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.container {\n&nbsp;&nbsp;&nbsp; width: 1170px;\n&nbsp;&nbsp;&nbsp; margin: 0 auto;\n&nbsp;&nbsp;&nbsp; padding: 0 15px;\n}\n\n.header,\n.footer {\n&nbsp;&nbsp;&nbsp; background: #15181f url(..\/images\/bg-texture.jpg) repeat;\n&nbsp;&nbsp;&nbsp; color: var(--light-text-color);\n}\n\n.main {\n&nbsp;&nbsp;&nbsp; background: var(--body-bg);\n}<\/code><\/pre>\n\n\n\n<p>If you refresh the browser, here\u2019s what you will see:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full advgb-dyn-dbb151ef\"><img decoding=\"async\" width=\"435\" height=\"81\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28101149\/basic-structure.png\" alt=\"Basic page structure.\" class=\"wp-image-22609\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28101149\/basic-structure.png 435w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28101149\/basic-structure-300x56.png 300w\" sizes=\"(max-width: 435px) 100vw, 435px\" \/><\/figure>\n\n\n\n<p>The text in dark areas is white because I wrote the following property color: #fff.<\/p>\n\n\n\n<p>Now save the image from the .hero block. Simply select the layer with the image and left-click on the eye icon while holding down Alt.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full advgb-dyn-69fa5eb6\"><img decoding=\"async\" width=\"434\" height=\"212\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28095910\/select-layer.png\" alt=\"Select the layer with the image.\" class=\"wp-image-22605\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28095910\/select-layer.png 434w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28095910\/select-layer-300x147.png 300w\" sizes=\"(max-width: 434px) 100vw, 434px\" \/><\/figure>\n\n\n\n<p>Select the missing layer with the image. Now select the required image area and save it as <strong>bg-hero.jpg<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full advgb-dyn-7b670f6c\"><img decoding=\"async\" width=\"635\" height=\"612\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28100000\/bg-hero.png\" alt=\"Save bg-hero image\" class=\"wp-image-22606\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28100000\/bg-hero.png 635w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28100000\/bg-hero-300x289.png 300w\" sizes=\"(max-width: 635px) 100vw, 635px\" \/><\/figure>\n\n\n\n<p>Measure the height of the saved image (it\u2019s <strong>465px<\/strong>) and encode this height in your CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.hero {\n&nbsp; &nbsp; background: #333;\n&nbsp; &nbsp; height: 465px;\n}<\/code><\/pre>\n\n\n\n<p>Let&#8217;s add our image to the HTML code and give it the .bg-image class. And also let&#8217;s add a property to our .hero&nbsp; position: relative;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;section class=\"hero\"&gt;\n&nbsp; &nbsp; &lt;img class=\"bg-image\" src=\"images\/bg-hero.jpg\" alt=\"\"&gt;\n&nbsp; &nbsp; &lt;div class=\"container\"&gt;\n&nbsp; &nbsp;&nbsp;&nbsp; hero content is here\n&nbsp; &nbsp; &lt;\/div&gt;\n&lt;\/section&gt;<\/code><\/pre>\n\n\n\n<p>The CSS will look as follows:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.hero .bg-image {\n&nbsp; &nbsp; position: absolute;\n&nbsp; &nbsp; top: 0;\n&nbsp; &nbsp; left: 0;\n&nbsp; &nbsp; width: 100%;\n&nbsp; &nbsp; height: 100%;\n&nbsp; &nbsp; object-fit: cover;\n}<\/code><\/pre>\n\n\n\n<p>Here you have added the image and placed it in the middle of the block by absolute positioning and specifying 100% width and height. The property object-fit: cover; tells the browser to stretch the image to its maximum size by either width or height. You can learn more about this property<a href=\"https:\/\/www.w3schools.com\/cssref\/css3_pr_background-size.php\"> <\/a><a href=\"https:\/\/www.w3schools.com\/css\/css3_object-fit.asp\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">here<\/a>.&nbsp;<\/p>\n\n\n\n<p>You may notice that our image overlaps the content. To fix this, we will raise the container above the image on the stack by adding the following properties:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.hero .container {\n&nbsp; &nbsp; position: relative;\n&nbsp; &nbsp; z-index: 2;\n}<\/code><\/pre>\n\n\n\n<p>Here\u2019s what you will see in the browser:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full advgb-dyn-564d369f\"><img decoding=\"async\" width=\"900\" height=\"417\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28100047\/bg-hero-in-browser.png\" alt=\"Background hero image in the browser.\" class=\"wp-image-22607\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28100047\/bg-hero-in-browser.png 900w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28100047\/bg-hero-in-browser-300x139.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28100047\/bg-hero-in-browser-768x356.png 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure>\n\n\n\n<p>Now, let\u2019s code the header elements. Save the logo in a PNG24 format and name it <strong>logo.png<\/strong><\/p>\n\n\n\n<p>Then write the code for the header in the HTML file:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;header class=\"header\"&gt;\n&nbsp; &nbsp; &lt;div class=\"container\"&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=\"logo\"&gt;&lt;img src=\"images\/logo.png\" height=\"25\" width=\"81\" alt=\"\"&gt;&lt;\/div&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=\"slogan\"&gt;your nice slogan&lt;\/div&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;nav&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ul class=\"nav\"&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;How it works&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;Sign up&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;Login&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;\/ul&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;\/nav&gt;\n&nbsp; &nbsp; &lt;\/div&gt;\n&lt;\/header&gt;<\/code><\/pre>\n\n\n\n<p>I gave the class .slogan to the site slogan and added the navigation as a list of links wrapped in the HTML5 tag nav.<\/p>\n\n\n\n<p>At this point, here is what you should be seeing in the browser:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large advgb-dyn-86046b88\"><img decoding=\"async\" width=\"1024\" height=\"120\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28095819\/navigation-no-css-1024x120.png\" alt=\"Navogation as an unordered list.\" class=\"wp-image-22612\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28095819\/navigation-no-css-1024x120.png 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28095819\/navigation-no-css-300x35.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28095819\/navigation-no-css-768x90.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28095819\/navigation-no-css.png 1327w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Now it\u2019s time to create styles for these elements. Measure the top and bottom margin between the logo and the top of the page in Photoshop. The CSS code will look like so:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.logo {\n&nbsp; &nbsp; margin: 19px 18px 14px 0;\n}<\/code><\/pre>\n\n\n\n<p>The property float: left; is necessary to wrap further elements around the current one.<\/p>\n\n\n\n<p>Now style the slogan:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full advgb-dyn-f8a352e5\"><img decoding=\"async\" width=\"900\" height=\"197\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28101322\/slogan-style.png\" alt=\"Styling the slogan.\" class=\"wp-image-22614\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28101322\/slogan-style.png 900w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28101322\/slogan-style-300x66.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28101322\/slogan-style-768x168.png 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure>\n\n\n\n<p>The font family is \u201cTimes New Roman\u201d, size 16, italic lettering and white color with an opacity set to 35%.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full advgb-dyn-5fb486f5\"><img decoding=\"async\" width=\"411\" height=\"223\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28101352\/opacity.png\" alt=\"Text opacity settings.\" class=\"wp-image-22615\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28101352\/opacity.png 411w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28101352\/opacity-300x163.png 300w\" sizes=\"(max-width: 411px) 100vw, 411px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.logo {\n&nbsp; &nbsp; margin: 19px 18px 14px 0;\n}\n.slogan {\n&nbsp; &nbsp; font: italic 16px \"Times New Roman\", Times, Georgia, serif;\n&nbsp; &nbsp; color: var(--gray-200);\n}<\/code><\/pre>\n\n\n\n<p>Let\u2019s move to the site navigation styling now. Each element has its own navigation icon. For icons, I prefer using the icon font <a href=\"https:\/\/icomoon.io\/\">icomoon<\/a>. This resource allows us to use ready-made icon sets and at the same time add our own. Go to the icons section.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large advgb-dyn-a65efe5d\"><img decoding=\"async\" width=\"1024\" height=\"306\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28155803\/icomoon-font-1024x306.jpg\" alt=\"Icomoon App\" class=\"wp-image-22617\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28155803\/icomoon-font-1024x306.jpg 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28155803\/icomoon-font-300x90.jpg 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28155803\/icomoon-font-768x230.jpg 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28155803\/icomoon-font-1536x459.jpg 1536w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28155803\/icomoon-font.jpg 1552w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>For this layout, icons from the Font Awesome set will suit us fine. To find an icon simply use the search feature. Let&#8217;s find the icons we are interested in by name and add them to our set with a simple selection. For this tutorial we will use social media icons for the footer.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large advgb-dyn-6e6a3963\"><img decoding=\"async\" width=\"1024\" height=\"373\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28160058\/facebook-icon-1024x373.jpg\" alt=\"Facebook Icon Editing\" class=\"wp-image-22619\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28160058\/facebook-icon-1024x373.jpg 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28160058\/facebook-icon-300x109.jpg 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28160058\/facebook-icon-768x280.jpg 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28160058\/facebook-icon.jpg 1375w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Here&#8217;s what we should get:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large advgb-dyn-f20fc8bf\"><img decoding=\"async\" width=\"1024\" height=\"230\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28160202\/social-media-icons-1024x230.jpg\" alt=\"Social Media Icons\" class=\"wp-image-22620\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28160202\/social-media-icons-1024x230.jpg 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28160202\/social-media-icons-300x67.jpg 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28160202\/social-media-icons-768x173.jpg 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28160202\/social-media-icons.jpg 1343w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Next, click the Generate font button on the bottom panel.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large advgb-dyn-a750edb4\"><img decoding=\"async\" width=\"1024\" height=\"163\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28160307\/generate-font-button-1024x163.jpg\" alt=\"Generate Font Button\" class=\"wp-image-22621\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28160307\/generate-font-button-1024x163.jpg 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28160307\/generate-font-button-300x48.jpg 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28160307\/generate-font-button-768x122.jpg 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28160307\/generate-font-button.jpg 1349w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Then download.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large advgb-dyn-5e08e46c\"><img decoding=\"async\" width=\"1024\" height=\"169\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28160409\/download-font-1024x169.jpg\" alt=\"Download Font\" class=\"wp-image-22622\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28160409\/download-font-1024x169.jpg 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28160409\/download-font-300x50.jpg 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28160409\/download-font-768x127.jpg 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28160409\/download-font.jpg 1301w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Save and unpack the archive. You will see the following set of files inside:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full advgb-dyn-88af82ad\"><img decoding=\"async\" width=\"231\" height=\"145\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28161557\/set-of-files.jpg\" alt=\"Set of files.\" class=\"wp-image-22627\"\/><\/figure>\n\n\n\n<p>Copy the fonts folder with font files to our project folder. Then copy the code from the style.css file and paste it at the top of our style.css file. The only thing that remains for us to fix is \u200b\u200bthe path to our font files. Add ..\/ at the beginning of the path for each file and you are done.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full advgb-dyn-d1a834bf\"><img decoding=\"async\" width=\"976\" height=\"304\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28160956\/fonts-path.jpg\" alt=\"Font paths.\" class=\"wp-image-22628\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28160956\/fonts-path.jpg 976w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28160956\/fonts-path-300x93.jpg 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28160956\/fonts-path-768x239.jpg 768w\" sizes=\"(max-width: 976px) 100vw, 976px\" \/><\/figure>\n\n\n\n<p>Let&#8217;s continue converting PSD to HTML. Go back to our header and add icons to our navigation. In order for the icon to be displayed in the browser, you need to add a tag &lt;i&gt;&lt;\/i&gt; with the appropriate class name. We can find the class name of each icon in the code that we added.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full advgb-dyn-b9fffc48\"><img decoding=\"async\" width=\"759\" height=\"433\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28161457\/icon-class-names.jpg\" alt=\"Icons classnames.\" class=\"wp-image-22629\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28161457\/icon-class-names.jpg 759w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28161457\/icon-class-names-300x171.jpg 300w\" sizes=\"(max-width: 759px) 100vw, 759px\" \/><\/figure>\n\n\n\n<p>We will get the following html after adding the icons:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;nav&gt;\n&nbsp; &nbsp; &lt;ul class=\"nav\"&gt;\n&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;&lt;i class=\"icon-question-circle\"&gt;&lt;\/i&gt;How it works&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;&lt;i class=\"icon-user\"&gt;&lt;\/i&gt;Sign up&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;&lt;i class=\"icon-lock\"&gt;&lt;\/i&gt;Login&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp; &lt;\/ul&gt;\n&lt;\/nav&gt;<\/code><\/pre>\n\n\n\n<p>The next step of our PSD to HTML conversion process is writing the CSS code for the menu. First of all, reset the default styles for the tag &lt;ul&gt;&lt;\/ul&gt;. We are interested in the outer margin and inner padding indentations and the markers themselves.&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.nav {\n&nbsp; &nbsp; list-style: none;\n&nbsp; &nbsp; margin: 0;\n&nbsp; &nbsp; padding: 0;\n}<\/code><\/pre>\n\n\n\n<p>Since it is a list and its items are arranged vertically by default, you need to wrap them using flexbox by applying these properties to the parent .nav. Each menu item has a gray border to the left, so set border-left: 1px solid #2c323d; for each element. The last element also has a right border and uses the :last-child pseudo-class to add a border to it.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.nav {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n}\n\n.nav li {\n    border-left: 1px solid #2c323d;\n}\n\n.nav li:last-child {\n    border-right: 1px solid #2c323d;\n}\n\n.nav a {\n    display: block;\n    line-height: 3.875;\n}<\/code><\/pre>\n\n\n\n<p>The results will look like this:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full advgb-dyn-6bdb881d\"><img decoding=\"async\" width=\"748\" height=\"188\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28161849\/border.png\" alt=\"Setting borders.\" class=\"wp-image-22630\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28161849\/border.png 748w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28161849\/border-300x75.png 300w\" sizes=\"(max-width: 748px) 100vw, 748px\" \/><\/figure>\n\n\n\n<p>Let&#8217;s put our elements in place in the .header itself. In order to do this, apply flex-box to the .container of our header because it is the parent of the rest of the elements.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.header .container {\n&nbsp; &nbsp; display: flex;\n&nbsp; &nbsp; justify-content: space-between;\n&nbsp; &nbsp; align-items: center;\n}<\/code><\/pre>\n\n\n\n<p>At this point, we see that our slogan is not quite in place, using a simple <strong>fix<\/strong> in combination with a flexbox, we add a margin-left: auto; rule to our .header nav tag which gives us the desired result.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large advgb-dyn-4dfe41d0\"><img decoding=\"async\" width=\"1024\" height=\"142\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162307\/header-nav-1024x142.png\" alt=\"\" class=\"wp-image-22633\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162307\/header-nav-1024x142.png 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162307\/header-nav-300x42.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162307\/header-nav-768x107.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162307\/header-nav.png 1294w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Everything should be looking fine now.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large advgb-dyn-a6a07405\"><img decoding=\"async\" width=\"1024\" height=\"101\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28161958\/header-final-1024x101.png\" alt=\"Header\" class=\"wp-image-22635\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28161958\/header-final-1024x101.png 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28161958\/header-final-300x29.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28161958\/header-final-768x75.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28161958\/header-final.png 1365w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Now let\u2019s get the menu styled. Set the white color to the links, specify margins (I applied display: block; to the links to increase the area of those) and remove underlines from the links.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.nav a {\n&nbsp; &nbsp; display: block;\n&nbsp; &nbsp; line-height: 3.875;\n&nbsp; &nbsp; padding: 0 24px 0 53px;\n&nbsp; &nbsp; color: var(--nav-link-color);\n}<\/code><\/pre>\n\n\n\n<p>Set the font family for the menu. If you click on the link, you\u2019ll see that there is no such font in the OS.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large advgb-dyn-ecfbb23a\"><img decoding=\"async\" width=\"1024\" height=\"289\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162107\/menu-font-1024x289.png\" alt=\"Menu font.\" class=\"wp-image-22636\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162107\/menu-font-1024x289.png 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162107\/menu-font-300x85.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162107\/menu-font-768x217.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162107\/menu-font.png 1464w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>No worries, the font is Open Sans and you can find it in the<a href=\"https:\/\/fonts.google.com\/\" title=\"\"> Google fonts library<\/a>. When you find it, select it by clicking:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large advgb-dyn-3cbed542\"><img decoding=\"async\" width=\"1024\" height=\"471\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162629\/google-fonts-library-1024x471.png\" alt=\"Google Fonts Library\" class=\"wp-image-22637\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162629\/google-fonts-library-1024x471.png 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162629\/google-fonts-library-300x138.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162629\/google-fonts-library-768x353.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162629\/google-fonts-library-1536x707.png 1536w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162629\/google-fonts-library.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Then click on the texts in the design to define the lettering and thickness.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full advgb-dyn-bd71d375\"><img decoding=\"async\" width=\"865\" height=\"619\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162706\/lettering-thikness.png\" alt=\"Define lettering and thikness\" class=\"wp-image-22638\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162706\/lettering-thikness.png 865w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162706\/lettering-thikness-300x215.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162706\/lettering-thikness-768x550.png 768w\" sizes=\"(max-width: 865px) 100vw, 865px\" \/><\/figure>\n\n\n\n<p>There you will have normal, semi-bold, and bold.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large advgb-dyn-3999c5c2\"><img decoding=\"async\" width=\"1024\" height=\"622\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162741\/normal-semi-bold-1024x622.png\" alt=\"Normal, bold, semi-bold\" class=\"wp-image-22639\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162741\/normal-semi-bold-1024x622.png 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162741\/normal-semi-bold-300x182.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162741\/normal-semi-bold-768x467.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162741\/normal-semi-bold.png 1341w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Copy the code from this block.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full advgb-dyn-dfe0fd38\"><img decoding=\"async\" width=\"789\" height=\"741\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162821\/copy-code.png\" alt=\"The code in the block\" class=\"wp-image-22640\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162821\/copy-code.png 789w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162821\/copy-code-300x282.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162821\/copy-code-768x721.png 768w\" sizes=\"(max-width: 789px) 100vw, 789px\" \/><\/figure>\n\n\n\n<p>Paste it to the &lt;head&gt; tag.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;!doctype html&gt;\n\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&nbsp; &lt;meta charset=\"utf-8\"&gt;\n&nbsp; &lt;title&gt;Insight&lt;\/title&gt;\n&nbsp; &lt;link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"&gt;\n&nbsp; &lt;link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin&gt;\n&nbsp; &lt;link href=\"https:\/\/fonts.googleapis.com\/css2?family=Open+Sans:wght@400;600;700&amp;display=swap\" rel=\"stylesheet\"&gt;\n&nbsp; &lt;link rel=\"stylesheet\" href=\"css\/style.css\"&gt;\n&lt;\/head&gt;<\/code><\/pre>\n\n\n\n<p>Now you can use this font in your CSS with font-family: &#8216;Open Sans&#8217;, sans-serif;. Since it is the main font on the page and the menu according to the design, you can set this font family for the entire document. Also, you can define the main color and set the font size to <strong>16px<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">body {\n&nbsp; &nbsp; font: 16px 'Open Sans', Arial, Helvetica, sans-serif;\n&nbsp; &nbsp; color: var(--base-text-color);\n}<\/code><\/pre>\n\n\n\n<p>Refresh the browser to see the updates. It is not that hard to convert PSD to HTML after all is it?<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large advgb-dyn-a7a1aec4\"><img decoding=\"async\" width=\"1024\" height=\"102\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162905\/header-final-2-1024x102.png\" alt=\"Tidied-up header\" class=\"wp-image-22641\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162905\/header-final-2-1024x102.png 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162905\/header-final-2-300x30.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162905\/header-final-2-768x76.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28162905\/header-final-2.png 1275w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Set the hover state for the menu link.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large advgb-dyn-4a5bcbfa\"><img decoding=\"async\" width=\"1024\" height=\"310\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163026\/set-hover-menu-1024x310.png\" alt=\"Set hover menu\" class=\"wp-image-22642\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163026\/set-hover-menu-1024x310.png 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163026\/set-hover-menu-300x91.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163026\/set-hover-menu-768x233.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163026\/set-hover-menu.png 1202w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">.nav a:hover {\n&nbsp; &nbsp; background-color: #13151a;\n}<\/code><\/pre>\n\n\n\n<p>Now add your buttons. Just add position: relative; to the tag &lt;a&gt; and encode the icons with the icons font.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.nav a i {\n&nbsp; &nbsp; position: absolute;\n&nbsp; &nbsp; top: 21px;\n&nbsp; &nbsp; left: 24px;\n&nbsp; &nbsp; font-size: 20px;\n}<\/code><\/pre>\n\n\n\n<p>You now have the following menu displayed in the browser:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full advgb-dyn-a89e417e\"><img decoding=\"async\" width=\"572\" height=\"142\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163152\/menu.png\" alt=\"Menu navigation\" class=\"wp-image-22643\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163152\/menu.png 572w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163152\/menu-300x74.png 300w\" sizes=\"(max-width: 572px) 100vw, 572px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading advgb-dyn-5562faa5\">PSD to HTML Conversion: Part 2 (the Hero Section)<\/h3>\n\n\n\n<p>A hero section is a large section placed at the top of a web page. It provides a succinct overview of the site&#8217;s content and purpose, encouraging visitors to explore further. When handling the hero section of our web page, we\u2019re going to do the following, among the rest:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add content to the hero block&nbsp;<\/li>\n\n\n\n<li>Style the hero block&nbsp;<\/li>\n\n\n\n<li>Add buttons with rounded corners<\/li>\n<\/ul>\n\n\n\n<p>Let\u2019s proceed with the section .hero. Add the content of this block to your HTML. You have a headline, one paragraph of text, and two buttons with the same style but different colors.<\/p>\n\n\n\n<p>The HTML is set up as follows:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;div class=\"hero\"&gt;\n&nbsp; &nbsp; &lt;div class=\"container\"&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Don't ignore your dreams&lt;\/h1&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;&lt;strong&gt;The 5 regrets&lt;\/strong&gt; paint a portrait of post-industrial man, who shrinks himself into a shape that fits his circumstances, then turns dutifully till he stops.&lt;\/p&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=\"#\" class=\"btn btn--green\"&gt;See how it works&lt;\/a&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=\"#\" class=\"btn btn--blue\"&gt;Join us&lt;\/a&gt;\n&nbsp; &nbsp; &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Now write the styles for the header and paragraph. Measure the size and thickness of the text, indentations and line heights in Photoshop. Since all the text in the block is white and located in the center, add color: #fff; and text-align: center; to .hero.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.hero {\n&nbsp; &nbsp; background: #333;\n&nbsp; &nbsp; height: 465px;\n&nbsp; &nbsp; position: relative;\n&nbsp; &nbsp; color: var(--light-text-color);\n&nbsp; &nbsp; text-align: center;\n&nbsp; &nbsp; padding: 60px 0;\n}\n\n.hero .bg-image {\n&nbsp; &nbsp; position: absolute;\n&nbsp; &nbsp; top: 0;\n&nbsp; &nbsp; left: 0;\n&nbsp; &nbsp; width: 100%;\n&nbsp; &nbsp; height: 100%;\n&nbsp; &nbsp; object-fit: cover;\n}\n\n.hero h1 {\n&nbsp; &nbsp; font-size: 52px;\n&nbsp; &nbsp; margin: 0 0 30px;\n}\n\n.hero p {\n&nbsp; &nbsp; font-size: 22px;\n&nbsp; &nbsp; line-height: 1.6364;\n&nbsp; &nbsp; max-width: 715px;\n&nbsp; &nbsp; margin: 0 auto 50px;\n}\n\n.hero p strong {\n&nbsp; &nbsp; font-weight: 700;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full advgb-dyn-df5a764a\"><img decoding=\"async\" width=\"827\" height=\"565\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163237\/dont-ignore-dreams.png\" alt=\"Don'tignore your dreams hero section\" class=\"wp-image-22644\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163237\/dont-ignore-dreams.png 827w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163237\/dont-ignore-dreams-300x205.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163237\/dont-ignore-dreams-768x525.png 768w\" sizes=\"(max-width: 827px) 100vw, 827px\" \/><\/figure>\n\n\n\n<p>Now I will show you how to add the buttons. I created them as an &lt;a&gt; tag with the general class .btn, where I will add general styling. I made the relevant class .btn&#8211;green and .btn-\u2013blue for each color.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.btn {\n&nbsp; &nbsp; display: inline-block;\n&nbsp; &nbsp; border-radius: 4px;\n&nbsp; &nbsp; line-height: 50px;\n&nbsp; &nbsp; color: var(--btn-color);\n&nbsp; &nbsp; font-weight: 600;\n&nbsp; &nbsp; font-size: 18px;\n&nbsp; &nbsp; line-height: 2.7778;\n&nbsp; &nbsp; padding: 0 55px;\n&nbsp; &nbsp; margin: 0 11px;\n}\n.btn--green {\n&nbsp; &nbsp; background-color: var(--green);\n&nbsp; &nbsp; box-shadow: 0 4px 0 var(--dark-green);\n}\n.btn--blue {\n&nbsp; &nbsp; background-color: var(--blue);\n&nbsp; &nbsp; box-shadow: 0 4px 0 var(--dark-blue);\n}<\/code><\/pre>\n\n\n\n<p>To create rounded corners, I will use border-radius and add a shadow to the lower border using box-shadow.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full advgb-dyn-7e0c17a1\"><img decoding=\"async\" width=\"900\" height=\"475\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163329\/box-shadow.png\" alt=\"Setting box shadows\" class=\"wp-image-22645\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163329\/box-shadow.png 900w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163329\/box-shadow-300x158.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163329\/box-shadow-768x405.png 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading advgb-dyn-0f8b4980\" id=\"wrapping-up-the-psd-to-html-conversion-process-the-footer-abaf73c2-ccb4-4c2d-b9fa-7b7eb597d3ff\">PSD to HTML Conversion Part 3 (the Footer)<\/h3>\n\n\n\n<p>The footer is a section at the bottom of a website. It serves as an area to provide information and navigation options that are essential but not the primary focus of the website. Typically, a footer includes the following components:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Navigation Links<\/li>\n\n\n\n<li>Contact Information<\/li>\n\n\n\n<li>Social Media Icons<\/li>\n\n\n\n<li>Legal Information<\/li>\n\n\n\n<li>Company Information<\/li>\n<\/ul>\n\n\n\n<p>Let\u2019s create our footer now. First, set the nav tag with a class of .footer-nav for the navigation and add columns with .column. Then to each of them add a title as a heading level h4 with the class .title and a list of links.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;footer class=\"footer\"&gt;\n&nbsp; &nbsp; &lt;div class=\"container\"&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;nav class=\"footer-nav\"&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=\"column\"&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h4 class=\"title\"&gt;MAIN&lt;\/h4&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ul&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;Start Here&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;Portfolio&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;Meet Us&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;Blog&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;\/ul&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;\/div&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=\"column\"&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h4 class=\"title\"&gt;COMPANY&lt;\/h4&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ul&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;About&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;Help&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;Support&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;Jobs&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;Directory&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;\/ul&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;\/div&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=\"column\"&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h4 class=\"title\"&gt;ONE MORE&lt;\/h4&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ul&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;Meetups&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;Handbook&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;Privacy&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;API&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;Equipment&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;\/ul&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;\/div&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=\"column\"&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h4 class=\"title\"&gt;THE LAST ONE&lt;\/h4&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ul&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;Meetups&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;Handbook&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;Privacy&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;API&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;Equipment&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;\/ul&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;\/div&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;\/nav&gt;\n&nbsp; &nbsp; &lt;\/div&gt;\n&lt;\/footer&gt;<\/code><\/pre>\n\n\n\n<p>Add margins at the top and the bottom of the footer and style the title and the list:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.footer {\n&nbsp; &nbsp; padding: 36px 0;\n}\n\n.footer-nav {\n&nbsp; &nbsp; display: flex;\n}\n\n.footer-nav .column {\n&nbsp; &nbsp; width: 136px;\n}\n\n.footer-nav .title {\n&nbsp; &nbsp; font-size: 12px;\n&nbsp; &nbsp; margin: 0 0 15px;\n}\n\n.footer-nav ul {\n&nbsp; &nbsp; font-size: 12px;\n&nbsp; &nbsp; list-style: none;\n&nbsp; &nbsp; margin: 0;\n&nbsp; &nbsp; padding: 0;\n}\n\n.footer-nav ul li {\n&nbsp; &nbsp; margin-bottom: 7px;\n}\n\n.footer-nav a {\n&nbsp; &nbsp; color: var(--gray-200);\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full advgb-dyn-1922d0ce\"><img decoding=\"async\" width=\"678\" height=\"352\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163546\/footer.png\" alt=\"Start working on footer\" class=\"wp-image-22646\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163546\/footer.png 678w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163546\/footer-300x156.png 300w\" sizes=\"(max-width: 678px) 100vw, 678px\" \/><\/figure>\n\n\n\n<p>Now, add the social media icons.<\/p>\n\n\n\n<p>HTML:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;ul class=\"soc\"&gt;\n&nbsp; &nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;&lt;i class=\"icon-twitter\"&gt;&lt;\/i&gt;&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;&lt;i class=\"icon-facebook\"&gt;&lt;\/i&gt;&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;&lt;i class=\"icon-vimeo\"&gt;&lt;\/i&gt;&lt;\/a&gt;&lt;\/li&gt;\n&lt;\/ul&gt;<\/code><\/pre>\n\n\n\n<p>CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.soc {\n&nbsp; &nbsp; margin: 0;\n&nbsp; &nbsp; padding: 0;\n&nbsp; &nbsp; display: flex;\n&nbsp; &nbsp; justify-content: flex-end;\n&nbsp; &nbsp; align-items: center;\n}\n\n.soc li {\n&nbsp; &nbsp; margin-left: 20px;\n}\n\n.soc a {\n&nbsp; &nbsp; color: var(--soc-link-color);\n&nbsp; &nbsp; font-size: 20px;\n}\n\n.soc a:hover {\n&nbsp; &nbsp; text-decoration: none;\n&nbsp; &nbsp; color: var(--gray-200);\n}<\/code><\/pre>\n\n\n\n<p>And here is the copyright. Add div.copyright and place the content inside.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;div class=\"copyright\"&gt;\n&nbsp; &nbsp; &lt;p&gt;(c) 2013 be happy&lt;br&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=\"#\"&gt;Privacy Policy&lt;\/a&gt; &lt;a href=\"#\"&gt;Terms of Service&lt;\/a&gt;\n&nbsp; &nbsp; &lt;\/p&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Add styles:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.copyright {\n&nbsp; &nbsp; text-align: right;\n&nbsp; &nbsp; line-height: 1.6667;\n&nbsp; &nbsp; font-size: 12px;\n&nbsp; &nbsp; color: var(--gray-200);\n}\n.copyright a {\n&nbsp; &nbsp; color: var(--gray-200);\n&nbsp; &nbsp; margin-left: 8px;\n}<\/code><\/pre>\n\n\n\n<p>On ul.soc, add a lower margin margin: 0 0 79px;. Here\u2019s what it looks on the page now:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large advgb-dyn-d0472d90\"><img decoding=\"async\" width=\"1024\" height=\"299\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163629\/footer-nav-1024x299.png\" alt=\"Footer nav\" class=\"wp-image-22647\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163629\/footer-nav-1024x299.png 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163629\/footer-nav-300x87.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163629\/footer-nav-768x224.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163629\/footer-nav.png 1262w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Let&#8217;s put the list ul.soc and div.copyright in a div and add rules for the footer .container.<\/p>\n\n\n\n<p>HTML:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;div&gt;\n&nbsp; &nbsp; &lt;ul class=\"soc\"&gt;\n&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;&lt;i class=\"icon-twitter\"&gt;&lt;\/i&gt;&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;&lt;i class=\"icon-facebook\"&gt;&lt;\/i&gt;&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;&lt;i class=\"icon-vimeo\"&gt;&lt;\/i&gt;&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp; &lt;\/ul&gt;\n&nbsp; &nbsp; &lt;div class=\"copyright\"&gt;\n&nbsp; &nbsp;&nbsp;&nbsp; &lt;p&gt;(c) 2013 be happy&lt;br&gt;\n&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;a href=\"#\"&gt;Privacy Policy&lt;\/a&gt; &lt;a href=\"#\"&gt;Terms of Service&lt;\/a&gt;\n&nbsp; &nbsp;&nbsp;&nbsp; &lt;\/p&gt;\n&nbsp; &nbsp; &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.footer .container {\n&nbsp; &nbsp; display: flex;\n&nbsp; &nbsp; justify-content: space-between;\n}<\/code><\/pre>\n\n\n\n<p>Result:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large advgb-dyn-fd95d36e\"><img decoding=\"async\" width=\"1024\" height=\"197\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163709\/footer-result-1024x197.png\" alt=\"Footer result\" class=\"wp-image-22648\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163709\/footer-result-1024x197.png 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163709\/footer-result-300x58.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163709\/footer-result-768x148.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163709\/footer-result.png 1267w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading advgb-dyn-46d927fc\">PSD to HTML Conversion: Part 4 (the Center Blocks)<\/h3>\n\n\n\n<p>Finally, it\u2019s time to create the three big blocks in the middle of the page. This task may seem straightforward, but it actually entails quite a bit of work. That includes these and some other tasks:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Placing images&nbsp;<\/li>\n\n\n\n<li>Creating borders&nbsp;<\/li>\n\n\n\n<li>Measuring the blocks&nbsp;<\/li>\n\n\n\n<li>Adding additional styling&nbsp;<\/li>\n\n\n\n<li>Setting transparency&nbsp;<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full advgb-dyn-670c463a\"><img decoding=\"async\" width=\"900\" height=\"231\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163749\/center-blocks.png\" alt=\"Center bocks\" class=\"wp-image-22649\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163749\/center-blocks.png 900w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163749\/center-blocks-300x77.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28163749\/center-blocks-768x197.png 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure>\n\n\n\n<p>If you look closely at the blocks, you will see that they are one and the same block but with different content. Therefore you need to create one block, style it, multiply it, and fill it in with the necessary content.<\/p>\n\n\n\n<p>I will save the photos in these blocks as .jpg images. The border and triple border at the bottom will be created with CSS.&nbsp;<\/p>\n\n\n\n<p>If the photos do not have transparency, they should always be saved in the .jpg format so that they do not create extra bloat and retain their maximum quality. As a rule, a compression ratio of 60% is enough. You will only need 70 to 80% if there is a text in a photo and you want to save it as an image.<\/p>\n\n\n\n<p>The top big images will be named photo1, photo2, etc.<\/p>\n\n\n\n<p>Now let\u2019s write HTML and paste the saved images into it. Create div.blocks and place three inner blocks (each called div.block) into it. You can see an example block below:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;section class=\"blocks\"&gt;\n&nbsp; &nbsp; &lt;div class=\"block\"&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=\"image\"&gt;&lt;img src=\"images\/photo1.jpg\" height=\"180\" width=\"319\" alt=\"\"&gt;&lt;\/div&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=\"person\"&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=\"photo\"&gt;&lt;img src=\"images\/person1.jpg\" height=\"50\" width=\"50\" alt=\"\"&gt;&lt;\/div&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=\"text\"&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h4 class=\"phrase\"&gt;You neglect your friends&lt;\/h4&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p class=\"info\"&gt;Valerie Adams. Moldova. 19.&lt;\/p&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;\/div&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;\/div&gt;\n&nbsp; &nbsp; &lt;\/div&gt;\n&lt;\/section&gt;<\/code><\/pre>\n\n\n\n<p>You\u2019ll need to add flexbox to the parent block to align them horizontally:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.blocks {\n&nbsp; &nbsp; display: flex;\n&nbsp; &nbsp; flex-wrap: wrap;\n&nbsp; &nbsp; justify-content: space-between;\n}<\/code><\/pre>\n\n\n\n<p>Measure the width of the blocks and margins between them. Their width is <strong>351px<\/strong> and the right margin is <strong>43px<\/strong>. Since there is only one row of blocks, it would be best to set the left margin and cancel it for the first one using the selector :first-child:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.blocks .block {\n&nbsp; &nbsp; width: 351px;\n&nbsp; &nbsp; margin-left: 43px;\n}\n.blocks .block:first-child {\n&nbsp; &nbsp; margin-left: 0;\n}<\/code><\/pre>\n\n\n\n<p>Now, add margin: 80px 0 75px; to div.blocks. Add a border to the div.block and set a margin. You can take the margin size and border color from the Photoshop file. Since the blocks have rounded corners, define the required border-radius. Also set the property vertical-align: top; to remove the unnecessary bottom margin from the images.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full advgb-dyn-92d0c8e0\"><img decoding=\"async\" width=\"423\" height=\"370\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28164415\/center-blocks-vertical-align.png\" alt=\"Center block vertical align\" class=\"wp-image-22651\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28164415\/center-blocks-vertical-align.png 423w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28164415\/center-blocks-vertical-align-300x262.png 300w\" sizes=\"(max-width: 423px) 100vw, 423px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.blocks .block {\n&nbsp; &nbsp; width: 351px;\n&nbsp; &nbsp; margin-left: 43px;\n&nbsp; &nbsp; padding: 15px;\n&nbsp; &nbsp; border-radius: 4px;\n&nbsp; &nbsp; border: 1px solid var(--gray-100);\n}\n.blocks .block:first-child {\n&nbsp; &nbsp; margin-left: 0;\n}\n\n.blocks img {\n&nbsp; &nbsp; vertical-align: top;\n}<\/code><\/pre>\n\n\n\n<p>Set the bottom margin to <strong>13px<\/strong> for the block with the photos of people. Add flexbox to block .person. Set the color and font sizes.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.blocks .image {\n&nbsp; &nbsp; margin-bottom: 13px;\n}\n\n.blocks .person {\n&nbsp; &nbsp; display: flex;\n}\n\n.blocks .photo {\n&nbsp; &nbsp; width: 50px;\n&nbsp; &nbsp; margin-right: 10px;\n&nbsp; &nbsp; flex-shrink: 0;\n}\n\n.blocks .phrase {\n&nbsp; &nbsp; margin: 0 0 2px;\n&nbsp; &nbsp; font-weight: 600;\n}\n\n.blocks .info {\n&nbsp; &nbsp; color: var(--gray-200);\n&nbsp; &nbsp; font-size: 14px;&nbsp;&nbsp;&nbsp;&nbsp;margin: 0;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large advgb-dyn-c9a4d9b3\"><img decoding=\"async\" width=\"1024\" height=\"313\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28164458\/center-blocks-again-1024x313.png\" alt=\"Center block again\" class=\"wp-image-22653\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28164458\/center-blocks-again-1024x313.png 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28164458\/center-blocks-again-300x92.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28164458\/center-blocks-again-768x235.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28164458\/center-blocks-again.png 1230w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>We\u2019re almost done.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full advgb-dyn-e693f98e\"><img decoding=\"async\" width=\"389\" height=\"340\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28164555\/center-blocks-styling.png\" alt=\"Center block styling\" class=\"wp-image-22654\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28164555\/center-blocks-styling.png 389w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28164555\/center-blocks-styling-300x262.png 300w\" sizes=\"(max-width: 389px) 100vw, 389px\" \/><\/figure>\n\n\n\n<p>To add additional styling to the bottom blocks, use the pseudo-selectors ::after and ::before. You can apply them to .blocks and position at the bottom. To do this add the following code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.blocks .block {\n&nbsp; &nbsp; position: relative;\n}\n.blocks .block::after,\n.blocks .block::before {\n&nbsp; &nbsp; content: '';\n&nbsp; &nbsp; height: 3px;\n&nbsp; &nbsp; border-radius: 0 0 4px 4px;\n&nbsp; &nbsp; border: 1px solid var(--gray-100);\n&nbsp; &nbsp; border-top: 0;\n&nbsp; &nbsp; position: absolute;\n}\n.blocks .block::after {\n&nbsp; &nbsp; bottom: -4px;\n&nbsp; &nbsp; left: 3px;\n&nbsp; &nbsp; right: 3px;&nbsp;&nbsp;&nbsp;&nbsp;opacity: .8;\n}\n.blocks .block::before {\n&nbsp; &nbsp; bottom: -7px;\n&nbsp; &nbsp; left: 6px;\n&nbsp; &nbsp; right: 6px;&nbsp;&nbsp;&nbsp;&nbsp;opacity: .5;\n}<\/code><\/pre>\n\n\n\n<p>Refresh the browser to see the results.<\/p>\n\n\n\n<p>Now let\u2019s code a news block. It consists of three pieces of news. Each of them has a round image, title and date. Like in the blocks above we will code one block and duplicate it.&nbsp;<\/p>\n\n\n\n<p>Crop some square images from the PSD file and make them round with the CSS property border-radius: 50%;. The date will be created with the tag &lt;time&gt;, the title with &lt;h4&gt;, and the paragraph with &lt;p&gt;.<\/p>\n\n\n\n<p>To cut a rectangular image, which is made round via mask in the design, you need to do the following: select the \u201c<strong>Move Tool (V)<\/strong>\u201c, then the checkbox \u201c<strong>Auto-Select<\/strong>\u201d and \u201c<strong>Layer<\/strong>\u201d in the selection.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full advgb-dyn-109cdda1\"><img decoding=\"async\" width=\"307\" height=\"192\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28164644\/move-tool.png\" alt=\"Move tool in PS\" class=\"wp-image-22655\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28164644\/move-tool.png 307w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28164644\/move-tool-300x188.png 300w\" sizes=\"(max-width: 307px) 100vw, 307px\" \/><\/figure>\n\n\n\n<p>Then click on a round image to select it in the layers.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized advgb-dyn-af679d6d\"><img decoding=\"async\" width=\"380\" height=\"230\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28164719\/select-in-layers.png\" alt=\"Select in the layers\" class=\"wp-image-22656\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28164719\/select-in-layers.png 380w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28164719\/select-in-layers-300x182.png 300w\" sizes=\"(max-width: 380px) 100vw, 380px\" \/><\/figure>\n\n\n\n<p>Carefully select the required area of the image. The image should be the same size as the area you select.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full advgb-dyn-0ae01eed\"><img decoding=\"async\" width=\"718\" height=\"366\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28164755\/round-image.png\" alt=\"Round image for author photo\" class=\"wp-image-22657\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28164755\/round-image.png 718w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28164755\/round-image-300x153.png 300w\" sizes=\"(max-width: 718px) 100vw, 718px\" \/><\/figure>\n\n\n\n<p>Press the combination of Ctrl + C and then Ctrl + N to create a new document, Ctrl + V to insert the image there, and Alt + Shift + Ctrl + S to save the image for the Web as a .jpg. I prefer naming images in the same way I do the blocks so I\u2019ll name it news1.jpg. Repeat the same thing for the two other images.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full advgb-dyn-95d5862d\"><img decoding=\"async\" width=\"711\" height=\"412\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28164846\/repeat.png\" alt=\"Repeat for other images\" class=\"wp-image-22658\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28164846\/repeat.png 711w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28164846\/repeat-300x174.png 300w\" sizes=\"(max-width: 711px) 100vw, 711px\" \/><\/figure>\n\n\n\n<p>Write the code for one of the blocks. Call the parent block section.news, and each news item article.one. Add a <strong>2px<\/strong> border to the main block, set the margins at the bottom and add <strong>flexbox<\/strong>.<\/p>\n\n\n\n<p>HTML:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;section class=\"news\"&gt;\n&nbsp; &nbsp; &lt;article class=\"one\"&gt;\n&nbsp; &nbsp;&nbsp;&nbsp; &lt;div class=\"img\"&gt;&lt;a href=\"#\"&gt;&lt;img src=\"images\/news1.jpg\" height=\"89\" width=\"89\" alt=\"\"&gt;&lt;\/a&gt;&lt;\/div&gt;\n&nbsp; &nbsp;&nbsp;&nbsp; &lt;div class=\"text\"&gt;\n&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;time datetime=\"2022-10-18\"&gt;Oct 18&lt;\/time&gt;\n&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;p&gt;&lt;a href=\"#\"&gt;I would like to avoid making these mistakes.&lt;\/a&gt;&lt;\/p&gt;\n&nbsp; &nbsp;&nbsp;&nbsp; &lt;\/div&gt;\n&nbsp; &nbsp; &lt;\/article&gt;\n&nbsp; &nbsp; &lt;article class=\"one\"&gt;\n&nbsp; &nbsp;&nbsp;&nbsp; &lt;div class=\"img\"&gt;&lt;a href=\"#\"&gt;&lt;img src=\"images\/news2.jpg\" height=\"89\" width=\"89\" alt=\"\"&gt;&lt;\/a&gt;&lt;\/div&gt;\n&nbsp; &nbsp;&nbsp;&nbsp; &lt;div class=\"text\"&gt;\n&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;time datetime=\"2022-10-08\"&gt;Oct 8&lt;\/time&gt;\n&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;p&gt;&lt;a href=\"#\"&gt;But how do you avoid mistakes you make by default?&lt;\/a&gt;&lt;\/p&gt;\n&nbsp; &nbsp;&nbsp;&nbsp; &lt;\/div&gt;\n&nbsp; &nbsp; &lt;\/article&gt;\n&nbsp; &nbsp; &lt;article class=\"one\"&gt;\n&nbsp; &nbsp;&nbsp;&nbsp; &lt;div class=\"img\"&gt;&lt;a href=\"#\"&gt;&lt;img src=\"images\/news3.jpg\" height=\"89\" width=\"89\" alt=\"\"&gt;&lt;\/a&gt;&lt;\/div&gt;\n&nbsp; &nbsp;&nbsp;&nbsp; &lt;div class=\"text\"&gt;\n&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;time datetime=\"2022-10-28\"&gt;Oct 2&lt;\/time&gt;\n&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;p&gt;&lt;a href=\"#\"&gt;Ideally you transform your life so it has other defaults.&lt;\/a&gt;&lt;\/p&gt;\n&nbsp; &nbsp;&nbsp;&nbsp; &lt;\/div&gt;\n&nbsp; &nbsp; &lt;\/article&gt;\n&lt;\/section&gt;<\/code><\/pre>\n\n\n\n<p>CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.news {\n&nbsp; &nbsp; border-top: 2px solid var(--gray-100);\n&nbsp; &nbsp; border-bottom: 2px solid var(--gray-100);\n&nbsp; &nbsp; padding: 31px 0;\n&nbsp; &nbsp; margin-bottom: 30px;\n&nbsp; &nbsp; display: flex;\n&nbsp; &nbsp; justify-content: space-between;\n}\n\n.news .one {\n&nbsp; &nbsp; display: flex;\n&nbsp; &nbsp; width: 352px;\n&nbsp; &nbsp; margin-left: 42px;\n}\n\n.news .one:first-child {\n&nbsp; &nbsp; margin-left: 0;\n}\n\n.news .img {\n&nbsp; &nbsp; width: 89px;\n&nbsp; &nbsp; flex-shrink: 0;\n&nbsp; &nbsp; margin-right: 24px;\n}\n\n.news .text {\n&nbsp; &nbsp; padding-top: 4px;\n}\n\n.news img {\n&nbsp; &nbsp; border-radius: 50%;\n}\n\n.news time {\n&nbsp; &nbsp; font-size: 14px;\n&nbsp; &nbsp; color: var(--gray-200);\n}\n\n.news p {\n&nbsp; &nbsp; margin: 4px 0 0;\n}\n\n.news p a {\n&nbsp; &nbsp; color: var(--base-text-color);\n}<\/code><\/pre>\n\n\n\n<p>Finally we have the following in our browser:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large advgb-dyn-b65661b2\"><img decoding=\"async\" width=\"1024\" height=\"184\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28164920\/round-images-block-1024x184.png\" alt=\"Round images block\" class=\"wp-image-22659\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28164920\/round-images-block-1024x184.png 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28164920\/round-images-block-300x54.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28164920\/round-images-block-768x138.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28164920\/round-images-block.png 1226w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>It\u2019s the news section so you can add links to the images too.<\/p>\n\n\n\n<p>The next part to complete is the \u201c<strong>Featured on:<\/strong>\u201d section. Use &lt;ul&gt; for the list of images and the usual &lt;h5&gt; with the class .title for a mini header. According to the design, the logos have hover states and their initial state has a 50% transparency. However, when saving images, you need to specify 100% transparency, i.e. disable it.<\/p>\n\n\n\n<p>In the markup you will implement this with the <strong>opacity <\/strong>property. You should save logos, icons and other non-photo elements in a .png format to ensure these images will remain high quality.<\/p>\n\n\n\n<p>The code will now look like this.&nbsp;<\/p>\n\n\n\n<p>HTML:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;section class=\"featured\"&gt;\n&nbsp; &nbsp; &lt;h5 class=\"title\"&gt;Featured on:&lt;\/h5&gt;\n&nbsp; &nbsp; &lt;ul&gt;\n&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;&lt;img src=\"images\/logo-new-texas-times.png\" height=\"28\" width=\"262\" alt=\"\"&gt;&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;&lt;img src=\"images\/logo-wooden.png\" height=\"29\" width=\"147\" alt=\"\"&gt;&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;&lt;img src=\"images\/logo-vremya.png\" height=\"22\" width=\"112\" alt=\"\"&gt;&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;&lt;img src=\"images\/logo-open-book.png\" height=\"29\" width=\"217\" alt=\"\"&gt;&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=\"#\"&gt;&lt;img src=\"images\/logo-twitter.png\" height=\"29\" width=\"36\" alt=\"\"&gt;&lt;\/a&gt;&lt;\/li&gt;\n&nbsp; &nbsp; &lt;\/ul&gt;\n&lt;\/section&gt;<\/code><\/pre>\n\n\n\n<p>CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.featured {\n&nbsp; &nbsp; padding: 26px 0;\n&nbsp; &nbsp; display: flex;\n&nbsp; &nbsp; flex-wrap: wrap;\n&nbsp; &nbsp; align-items: center;\n}\n\n.featured ul {\n&nbsp; &nbsp; display: flex;\n&nbsp; &nbsp; flex-wrap: wrap;\n&nbsp; &nbsp; align-items: center;\n}\n\n.featured ul li {\n&nbsp; &nbsp; margin-right: 40px;\n}\n\n.featured .title {\n&nbsp; &nbsp; font-size: 16px;\n&nbsp; &nbsp; margin: 0 20px 0 0;\n&nbsp; &nbsp; font-weight: 400;\n}\n\n.featured a {\n&nbsp; &nbsp; opacity: .5;\n}\n\n.featured a:hover {\n&nbsp; &nbsp; opacity: 1;\n}<\/code><\/pre>\n\n\n\n<p>Create the bottom margin for the block .featured.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.featured {\n&nbsp; &nbsp; padding: 26px 0;\n&nbsp; &nbsp; margin-bottom: 34px;\n}<\/code><\/pre>\n\n\n\n<p>That\u2019s it! Refresh the browser window to verify that the page looks exactly the way it does in the design. Now let\u2019s bring it to life and make it a little better by adding underlines as hover states for the links and subtle effects on the image and menu links.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">a {\n&nbsp; &nbsp; text-decoration: none;\n&nbsp; &nbsp; transition: all 0.3s;\n}\n\na:hover {\n&nbsp; &nbsp; text-decoration: underline;\n}<\/code><\/pre>\n\n\n\n<p>Remove the underlines from the navigation hover state and buttons in the .hero block. Add a slight transparency to the button hover states.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.btn:hover {\n&nbsp; &nbsp; text-decoration: none;\n&nbsp; &nbsp; opacity: .9;\n}\n\n.nav a:hover {\n&nbsp; &nbsp; text-decoration: none;\n}<\/code><\/pre>\n\n\n\n<p>We can also slightly optimize our CSS. All of our lists have the same 3 lines of code. Instead of repeating it, let&#8217;s write it once to simplify things. In order to do that, we will list the selectors separated by commas like so:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.nav,\n.footer-nav ul,.soc,\n.featured ul {\n&nbsp; &nbsp; list-style: none;\n&nbsp; &nbsp; margin: 0;\n&nbsp; &nbsp; padding: 0;\n}<\/code><\/pre>\n\n\n\n<p>Now let&#8217;s remove these lines in each CSS code block so that things will look cleaner and slightly minimized in size.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large advgb-dyn-78541ab5\"><img decoding=\"async\" width=\"1024\" height=\"295\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28165018\/minimize-css-1024x295.png\" alt=\"Minimize CSS\" class=\"wp-image-22660\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28165018\/minimize-css-1024x295.png 1024w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28165018\/minimize-css-300x87.png 300w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28165018\/minimize-css-768x221.png 768w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/28165018\/minimize-css.png 1304w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Hurrah, the page is ready! Now you know how to convert <a href=\"https:\/\/getdevdone.com\/psd-to-html-conversion.html\" target=\"_blank\" rel=\"noopener\" title=\"\">PSD to HTML<\/a>!<\/p>\n\n\n\n<p>I hope this tutorial was helpful. Please feel free to download the template <a href=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/02132617\/source-code.zip\" target=\"_blank\" rel=\"noreferrer noopener\">code<\/a>.&nbsp;<\/p>\n\n\n\n<div itemscope itemtype=\"https:\/\/schema.org\/FAQPage\" aria-label=\"PSD to HTML FAQ\">\n<h2>PSD to HTML conversion FAQs<\/h2>\n  <div itemscope itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\">\n    <h3 itemprop=\"name\">Is PSD to HTML still relevant in 2026, or is Figma to HTML usually the better handoff?<\/h3>\n    <div itemscope itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\">\n      <div itemprop=\"text\">\n        <p>PSD to HTML is still common, but Figma to HTML is a more popular approach nowadays. PSD to HTML conversion is used in legacy projects, enterprise design systems, and existing agency pipelines that are still based on Photoshop.<\/p>\n        <p>The choice largely depends on the needs of the team and the design ecosystem. Figma offers more flexibility with real-time collaboration and convenient inspection tools. PSD may be a preferred choice for advanced raster editing or working with older assets. Therefore, teams should generally use Figma for new projects and stick to PSD to HTML to support existing workflows.<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div itemscope itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\">\n    <h3 itemprop=\"name\">When does manual PSD to HTML conversion from GetDevDone make more sense than using an automatic converter?<\/h3>\n    <div itemscope itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\">\n      <div itemprop=\"text\">\n        <p>Based on our experience, manual conversion is better when accuracy, scalability, and code quality matter. Automatic converters are faster but often fail to process complex layouts, production-level quality, or responsive behavior. As a result, automated conversion output requires additional cleanup and may take more time in the end.<\/p>\n        <p>Overall, manual PSD to HTML conversion is better than automatic for:<\/p>\n        <ul>\n          <li>Complex designs with multi-layered layouts and custom elements<\/li>\n          <li>Conversions that require high code quality and reusable components<\/li>\n          <li>Responsive designs and cross-browser compatibility<\/li>\n          <li>Custom interactions or animations<\/li>\n        <\/ul>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div itemscope itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\">\n    <h3 itemprop=\"name\">What usually increases PSD to HTML cost the most: design complexity, responsiveness, or the number of unique elements?<\/h3>\n    <div itemscope itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\">\n      <div itemprop=\"text\">\n        <p>Design complexity typically has the most impact on the cost of PSD to HTML conversion. When the design has sophisticated layouts, custom typography, layered effects, and animations, converting them properly takes more time and manual effort.<\/p>\n        <p>Responsiveness also affects the cost, but it is partially related to complexity, because complex designs are usually more demanding in terms of responsiveness. Uniqueness is another significant pricing factor, particularly for designs that are not reusable.<\/p>\n        <p>That is why, if you are concerned about expenses, GetDevDone recommends limiting highly custom designs and focusing on reusability. It is important to find the balance between design quality and development efficiency.<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div itemscope itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\">\n    <h3 itemprop=\"name\">What hidden problems appear when PSD to HTML is done with automatic conversion tools versus GetDevDone&#8217;s approach?<\/h3>\n    <div itemscope itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\">\n      <div itemprop=\"text\">\n        <p>When conversion happens with automatic tools, code quality may suffer. Automatic converters generate code with hidden vulnerabilities, making it prone to breaking and inflexible. Other common issues with automatic conversions are poor SEO performance and increased security risks.<\/p>\n        <p>Automation offers convenience and speed, but creates technical debt. That is why GetDevDone prefers manual conversions and checks that ensure easily modifiable, clean code. Our developers thoroughly test pages to eliminate flaws and apply best security practices.<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div itemscope itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\">\n    <h3 itemprop=\"name\">Can a PSD to HTML build from GetDevDone be reused later inside WordPress or another CMS?<\/h3>\n    <div itemscope itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\">\n      <div itemprop=\"text\">\n        <p>Yes. Engineering teams can reuse PSD to HTML builds inside WordPress or another CMS with some adaptation. The delivered HTML follows standards and provides a front-end foundation that can be converted into themes or templates.<\/p>\n        <p>When reusing a build with a CMS, it still needs to be adapted to the target templating system. The better the quality of HTML, the easier future CMS integration will be.<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div itemscope itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\">\n    <h3 itemprop=\"name\">What should an agency prepare before sending a PSD file to a markup partner?<\/h3>\n    <div itemscope itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\">\n      <div itemprop=\"text\">\n        <p>Before sending a PSD for conversion, an agency should ensure the design is well-organized and documented. Clear inputs reduce delays and misinterpretation during development.<\/p>\n        <p>Preparation checklist:<\/p>\n        <ul>\n          <li>Organize layers with clear naming and grouping<\/li>\n          <li>Remove unnecessary or hidden layers<\/li>\n          <li>Document fonts, colors, and spacing<\/li>\n          <li>Provide responsive behavior guidelines<\/li>\n          <li>Export assets or mark them for export in proper formats<\/li>\n        <\/ul>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div itemscope itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\">\n    <h3 itemprop=\"name\">What quality checks does GetDevDone perform before approving a PSD to HTML delivery?<\/h3>\n    <div itemscope itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\">\n      <div itemprop=\"text\">\n        <p>GetDevDone applies multiple QA approaches, including cross-browser testing, rendering verification, and functionality testing. The QA phase involves project managers, QA engineers, and developers to ensure production-ready code.<\/p>\n        <p>Main checks include:<\/p>\n        <ul>\n          <li>Cross-browser and cross-device testing<\/li>\n          <li>Pixel-perfect comparison with the original PSD<\/li>\n          <li>Markup validation and HTML\/CSS structure review<\/li>\n          <li>Functionality and responsiveness testing<\/li>\n        <\/ul>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div itemscope itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\">\n    <h3 itemprop=\"name\">How long does PSD to HTML from GetDevDone usually take for a simple landing page versus a more complex multi-section build?<\/h3>\n    <div itemscope itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\">\n      <div itemprop=\"text\">\n        <p>Converting a simple landing page usually takes 1\u20132 business days, depending on requirements and level of detail. A more complex multi-section build can take from several days to weeks based on architecture, responsiveness, and unique elements.<\/p>\n        <p>Accurate timelines require evaluating the PSD file and project scope. More complex designs take longer due to increased manual work and testing.<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>This post is a detailed step-by-step PSD to HTML conversion tutorial for beginners. So if you&#039;re making your first steps as a markup developer and want to create your first web page using HTML and CSS, this guide will show you how to do that in the most efficient way.    <\/p>\n","protected":false},"author":4,"featured_media":14742,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[750,740],"tags":[780,825,829,856],"class_list":["post-14718","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-front-end-development-services","category-tutorial","tag-design-to-code","tag-html-css","tag-photoshop","tag-tooling"],"acf":[],"aioseo_notices":[],"author_meta":{"display_name":"Dmytro Mashchenko","author_link":"https:\/\/getdevdone.com\/blog\/author\/dima"},"featured_img":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/02113626\/Intro-preview-300x300.png","coauthors":[],"tax_additional":{"categories":{"linked":["<a href=\"https:\/\/getdevdone.com\/blog\/category\/front-end-development-services\" class=\"advgb-post-tax-term\">Front-end development services<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/tutorial\" class=\"advgb-post-tax-term\">Tutorial<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Front-end development services<\/span>","<span class=\"advgb-post-tax-term\">Tutorial<\/span>"]},"tags":{"linked":["<a href=\"https:\/\/getdevdone.com\/blog\/category\/tutorial\" class=\"advgb-post-tax-term\">Design-to-code<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/tutorial\" class=\"advgb-post-tax-term\">HTML &amp; CSS<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/tutorial\" class=\"advgb-post-tax-term\">Photoshop<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/tutorial\" class=\"advgb-post-tax-term\">Tooling<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Design-to-code<\/span>","<span class=\"advgb-post-tax-term\">HTML &amp; CSS<\/span>","<span class=\"advgb-post-tax-term\">Photoshop<\/span>","<span class=\"advgb-post-tax-term\">Tooling<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 4 years ago","modified":"Updated 4 days ago"},"absolute_dates":{"created":"Posted on June 2, 2022","modified":"Updated on April 13, 2026"},"absolute_dates_time":{"created":"Posted on June 2, 2022 2:06 pm","modified":"Updated on April 13, 2026 12:36 am"},"featured_img_caption":"","series_order":"","featured_image_urls":{"thumbnail_723x315":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/02113626\/Intro-preview-400x315.png","thumbnail_723x315-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/02113626\/Intro-preview.png","thumbnail_723x315-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/02113626\/Intro-preview.png","thumbnail_770x510":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/02113626\/Intro-preview.png","thumbnail_770x510-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/02113626\/Intro-preview.png","thumbnail_770x510-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/06\/02113626\/Intro-preview.png"},"featured_post_color":"#4d67e6","author_avatar":"https:\/\/secure.gravatar.com\/avatar\/97bd036a871c68c70de0956108719ad9489849769ee15e25e0bee81f3bdd7286?s=96&d=mm&r=g","author_position":"CEO of GetDevDone","reading_time":"<span class=\"span-reading-time rt-reading-time\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 25<\/span> <span class=\"rt-label rt-postfix\">min read<\/span><\/span>","prev_post":{"slug":"email-signatures-best-practices","name":"Email Signatures: Best Practices to Impress Your Recipients"},"next_post":{"slug":"icon-fonts-vs-svg-icons","name":"Icon Fonts vs SVG Icons: What Works Best for You?"},"related_posts":["how-to-duplicate-page-in-wordpress-advanced-and-simple-methods","interactive-map-for-fundraising-site-supporting-ukraine","our-faves-hover-effects-that-delight-and-amaze"],"_links":{"self":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/14718","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/comments?post=14718"}],"version-history":[{"count":60,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/14718\/revisions"}],"predecessor-version":[{"id":24963,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/14718\/revisions\/24963"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media\/14742"}],"wp:attachment":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media?parent=14718"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/categories?post=14718"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/tags?post=14718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}