{"id":9597,"date":"2019-10-26T01:55:12","date_gmt":"2019-10-26T06:55:12","guid":{"rendered":"https:\/\/krisbunda.com\/blog\/?p=9597"},"modified":"2019-10-26T01:55:20","modified_gmt":"2019-10-26T06:55:20","slug":"how-to-customize-your-error-pages-a-beginner-web-dev-project-part-1-back-end-basics","status":"publish","type":"post","link":"https:\/\/krisbunda.com\/blog\/2019\/10\/26\/how-to-customize-your-error-pages-a-beginner-web-dev-project-part-1-back-end-basics\/","title":{"rendered":"How To Customize Your Error Pages: A Beginner Web Dev Project (Part 1: Back-End Basics)"},"content":{"rendered":"\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\"><p> I came across one of my Error Pages and noticed it was missing images and looked bad. They&#8217;re fun to customize, and a great 1st-time web developer project. I&#8217;ll show you how!<\/p><\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\">Here&#8217;s how to customize your Error Pages&#8211;if you have a cPanel hosting interface. Or learn how to code it here, then figure how to deploy it on your non-cPanel hosting account. <\/h4>\n\n\n\n<p class=\"has-background has-kb-palette-1-background-color\">Over the course of writing this, it turned into a <strong><em><mark class=\"kt-highlight\">Beginner&#8217;s Intro to Responsive and Accessible HTML &amp; CSS tutorial<\/mark><\/em><\/strong>, so read on if you&#8217;re interested in that. <\/p>\n\n\n<style>#kt-layout-id_ddf4c9-7c{margin-top:5%;margin-bottom:5%;}#kt-layout-id_ddf4c9-7c > .kt-row-column-wrap{align-content:center;}:where(#kt-layout-id_ddf4c9-7c > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:center;}#kt-layout-id_ddf4c9-7c > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);max-width:86%;margin-left:auto;margin-right:auto;padding-top:var( --global-kb-row-default-top, 25px );padding-bottom:var( --global-kb-row-default-bottom, 25px );padding-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;grid-template-columns:minmax(0, 1fr);}#kt-layout-id_ddf4c9-7c{background-color:#bbd9e5;}#kt-layout-id_ddf4c9-7c > .kt-row-layout-overlay{opacity:0.30;}#kt-layout-id_ddf4c9-7c .kt-row-layout-bottom-sep{height:100px;}#kt-layout-id_ddf4c9-7c .kt-row-layout-bottom-sep svg{width:100%;}#kt-layout-id_ddf4c9-7c .kt-row-layout-bottom-sep svg{fill:#ffffff!important;}@media all and (max-width: 1024px){#kt-layout-id_ddf4c9-7c > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 1024px){#kt-layout-id_ddf4c9-7c .kt-row-layout-bottom-sep{height:px;}}@media all and (max-width: 1024px){#kt-layout-id_ddf4c9-7c .kt-row-layout-bottom-sep svg{width:%;}}@media all and (max-width: 767px){#kt-layout-id_ddf4c9-7c > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}#kt-layout-id_ddf4c9-7c .kt-row-layout-bottom-sep{height:px;}#kt-layout-id_ddf4c9-7c .kt-row-layout-bottom-sep svg{width:%;}}<\/style>\n<aside class=\"wp-block-kadence-rowlayout alignfull\"><div id=\"kt-layout-id_ddf4c9-7c\" class=\"kt-row-layout-inner kt-row-has-bg kt-layout-id_ddf4c9-7c\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-gutter-default kt-v-gutter-default kt-row-valign-middle kt-row-layout-equal kt-tab-layout-inherit kt-m-colapse-left-to-right kt-mobile-layout-row\"><style>.kadence-column_8bdb9e-19 > .kt-inside-inner-col{border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;}.kadence-column_8bdb9e-19 > .kt-inside-inner-col,.kadence-column_8bdb9e-19 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column_8bdb9e-19 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column_8bdb9e-19 > .kt-inside-inner-col{flex-direction:column;}.kadence-column_8bdb9e-19 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column_8bdb9e-19 > .kt-inside-inner-col{background-color:#bbd9e5;}.kadence-column_8bdb9e-19 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column_8bdb9e-19{position:relative;}@media all and (max-width: 1024px){.kadence-column_8bdb9e-19 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column_8bdb9e-19 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column inner-column-1 kadence-column_8bdb9e-19\"><div class=\"kt-inside-inner-col\" style=\"background:rgba(187, 217, 229, 1)\">\n<h2 class=\"wp-block-heading\">Error Pages&#8230; They grow up so fast!<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/leet_speak_meme_exclamation_points-into-ones_e52.png\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"276\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/leet_speak_meme_exclamation_points-into-ones_e52.png\" alt=\"leet speak meme: exclamation points into ones\" class=\"wp-image-9376\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/leet_speak_meme_exclamation_points-into-ones_e52.png 680w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/leet_speak_meme_exclamation_points-into-ones_e52-150x61.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/leet_speak_meme_exclamation_points-into-ones_e52-600x244.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/leet_speak_meme_exclamation_points-into-ones_e52-366x149.png 366w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/a><figcaption>leet speak meme: exclamation points into ones<\/figcaption><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Here&#8217;s what I saw when I came across my error page recently: <\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Missing image (I must have moved a folder and didn&#8217;t think it mattered&#8230;)<\/li><li>An <a rel=\"noreferrer noopener\" aria-label=\"old meme that I used to think was hilarious (opens in a new tab)\" href=\"https:\/\/knowyourmeme.com\/memes\/the-1-phenomenon\" target=\"_blank\">old meme that <em>was<\/em> hilarious<\/a> but isn&#8217;t working for me anymore.<\/li><li>An old branded image and more unstyled text. <\/li><\/ul>\n\n\n\n<p>I can do better. And if you&#8217;re reading this, so can you. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-Before.png\"><img loading=\"lazy\" decoding=\"async\" width=\"683\" height=\"684\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-Before.png\" alt=\"Create or Update 404 Error Pages - cPanel - Before\" class=\"wp-image-9341\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-Before.png 683w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-Before-150x150.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-Before-600x601.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-Before-366x367.png 366w\" sizes=\"auto, (max-width: 683px) 100vw, 683px\" \/><\/a><figcaption>Create or Update 404 Error Pages &#8211; cPanel &#8211; Before<\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Google does it too!!!!11 <\/h3>\n\n\n\n<p>I had to come back and post this screenshot when I noticed it the other day&#8211;apparently someone at Google thinks this meme is funny too.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"653\" height=\"436\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Wait-Google-Does-the-old-meme-on-their-404-page-too1111one.png\" alt=\"Google's 404 error page does the old meme too!!!!!!11111one11one!\" class=\"wp-image-9412\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Wait-Google-Does-the-old-meme-on-their-404-page-too1111one.png 653w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Wait-Google-Does-the-old-meme-on-their-404-page-too1111one-150x100.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Wait-Google-Does-the-old-meme-on-their-404-page-too1111one-600x401.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Wait-Google-Does-the-old-meme-on-their-404-page-too1111one-366x244.png 366w\" sizes=\"auto, (max-width: 653px) 100vw, 653px\" \/><figcaption>Google&#8217;s 404 error page does the old meme too!!!!!!11111one11one!<\/figcaption><\/figure><\/div>\n<\/div><\/div>\n<\/div><\/div><\/aside>\n\n\n\n<h2 class=\"wp-block-heading\">Let&#8217;s start with cPanel.  Where are your cPanel Error Pages? <\/h2>\n\n\n\n<p><strong>First, login to cPanel.<\/strong> It&#8217;s <strong>in your hosting account<\/strong> when you login, <strong>you&#8217;ll see<\/strong> something like &#8220;<strong>Manage your Hosting Account<\/strong>&#8221; or &#8220;<strong>Go to cPanel<\/strong>&#8220;. You may not have cPanel as your hosting server admin. You may have a Windows IIS hosting account, or a different admin OS. <em>Even if you don&#8217;t have cPanel, the basic HTML &amp; CSS tutorial below still works<\/em>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-find-Error-Pages-0-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"683\" height=\"649\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-find-Error-Pages-0-1.png\" alt=\"Create or Update 404 Error Pages - cPanel - find Error Pages 0\" class=\"wp-image-9350\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-find-Error-Pages-0-1.png 683w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-find-Error-Pages-0-1-150x143.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-find-Error-Pages-0-1-600x570.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-find-Error-Pages-0-1-366x348.png 366w\" sizes=\"auto, (max-width: 683px) 100vw, 683px\" \/><\/a><figcaption>Create or Update 404 Error Pages &#8211; cPanel &#8211; find Error Pages 0<\/figcaption><\/figure><\/div>\n\n\n\n<p>In the Admin Panel, scroll down to the <strong>&#8220;Advanced&#8221; card<\/strong>. Select <strong>&#8220;Error Pages&#8221;<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">cPanel Custom Error Pages: Step 1<\/h3>\n\n\n\n<p><strong>Select which domain you&#8217;re editing error pages for<\/strong> (in case you have multiple domains on this hosting account). I chose <code>krisbunda.com<\/code> for this exercise. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">cPanel Custom Error Pages: Step 2<\/h3>\n\n\n\n<p><strong>Select which type of error page you want to edit.<\/strong> I chose <strong>404<\/strong> for this example (and I plan on making code that can be pasted into all the other error types&#8217; pages). <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-find-Error-Pages-1-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"683\" height=\"649\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-find-Error-Pages-1-1.png\" alt=\"Create or Update 404 Error Pages - cPanel - find Error Pages 1\" class=\"wp-image-9351\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-find-Error-Pages-1-1.png 683w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-find-Error-Pages-1-1-150x143.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-find-Error-Pages-1-1-600x570.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-find-Error-Pages-1-1-366x348.png 366w\" sizes=\"auto, (max-width: 683px) 100vw, 683px\" \/><\/a><figcaption>Create or Update 404 Error Pages &#8211; cPanel &#8211; find Error Pages 1<\/figcaption><\/figure><\/div>\n\n\n\n<p><strong>Here&#8217;s where you paste your HTML \/ CSS \/ JS \/ etc. for this error page.<\/strong> I edit the code in <a rel=\"noreferrer noopener\" aria-label=\"Visual Studio Code (opens in a new tab)\" href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\">Visual Studio Code<\/a> and paste it back here when I want to view it live. It gets tedious, but ever since I started using Cloudflare for this site&#8217;s nameservers, it&#8217;s made the traditional web development method of uploading code via <abbr title=\"file transfer protocol\">FTP<\/abbr> difficult. <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Notice it is a file named &#8220;404.shtml&#8221;. <strong><a rel=\"noreferrer noopener\" aria-label=\"The S in SHTML stands for &quot;Server&quot; (opens in a new tab)\" href=\"https:\/\/www.computerhope.com\/jargon\/s\/shtml.htm\" target=\"_blank\">The S in SHTML stands for &#8220;Server&#8221;<\/a><\/strong>. <\/li><li><strong>Also notice the little &#8220;Select Tags to Insert&#8221; section<\/strong>, with an array of server-side include tags you can add to the page. <strong>These are good for making this code reusable<\/strong>, and something that can be pasted into the other error pages with minimal or no changes. <\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-find-Error-Pages-2-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"683\" height=\"652\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-find-Error-Pages-2-1.png\" alt=\"Create or Update 404 Error Pages - cPanel - find Error Pages 2\" class=\"wp-image-9352\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-find-Error-Pages-2-1.png 683w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-find-Error-Pages-2-1-150x143.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-find-Error-Pages-2-1-600x573.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-find-Error-Pages-2-1-366x349.png 366w\" sizes=\"auto, (max-width: 683px) 100vw, 683px\" \/><\/a><figcaption>Create or Update 404 Error Pages &#8211; cPanel &#8211; find Error Pages 2<\/figcaption><\/figure><\/div>\n\n\n\n<p>See what the code looked like before&#8211;notice the <code class=\"has-text-color has-virtue-primary-light-color\">&lt;!--#echo var=\"REQUEST_URI\" --&gt;<\/code> part. <a rel=\"noreferrer noopener\" aria-label=\"That's a SSI (opens in a new tab)\" href=\"https:\/\/www.computerhope.com\/jargon\/s\/ssi.htm\" target=\"_blank\">That&#8217;s a <\/a><abbr href=\"Server Side Include\" title=\"Server Side Include\"><a rel=\"noreferrer noopener\" aria-label=\"That's a SSI (opens in a new tab)\" href=\"https:\/\/www.computerhope.com\/jargon\/s\/ssi.htm\" target=\"_blank\">SSI<\/a><\/abbr>, and it shows in the error page as the URL that triggered the serving of the error page. I know that sounds circular, sorry. On the page, it reads like <code class=\"has-text-color has-virtue-primary-light-color\">krisbunda.com\/ Here's the NONEXISTENT FILE URL you entered<\/code>, no matter what that nonexistent file URL is. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-shtml-code-Before-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"628\" height=\"578\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-shtml-code-Before-1.png\" alt=\"Create or Update 404 Error Pages - cPanel - shtml code - Before\" class=\"wp-image-9353\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-shtml-code-Before-1.png 628w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-shtml-code-Before-1-150x138.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-shtml-code-Before-1-600x552.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-shtml-code-Before-1-366x337.png 366w\" sizes=\"auto, (max-width: 628px) 100vw, 628px\" \/><\/a><figcaption>Create or Update 404 Error Pages &#8211; cPanel &#8211; shtml code &#8211; Before<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Upload Images (Optional)<\/h2>\n\n\n\n<p>If you&#8217;re making custom error pages, you probably want to put an image or two on it. I&#8217;m going to put three: <\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>a <strong>Kris Bunda Design logo SVG<\/strong> at the top, <\/li><li>a <strong>cartoon eyes animated GIF<\/strong>  that&#8217;s supposed to be &#8220;looking&#8221; for the missing file that brought the user to the error page, <\/li><li>and I&#8217;ll put another <strong>branded animation at the bottom<\/strong>, because I like it. <\/li><\/ol>\n\n\n<style>.kt-accordion-id_5f50c0-88 .kt-accordion-inner-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:10px;}.kt-accordion-id_5f50c0-88 .kt-accordion-panel-inner{border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;border-color:#fff;background:#ffffff;padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);}.kt-accordion-id_5f50c0-88 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header{border-top-color:#555555;border-right-color:#555555;border-bottom-color:#555555;border-left-color:#555555;border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:6px;background:#7efcfc;font-size:18px;line-height:24px;color:#171717;padding-top:14px;padding-right:16px;padding-bottom:14px;padding-left:16px;}.kt-accordion-id_5f50c0-88:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle )  > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id_5f50c0-88:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle )  > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap .kt-blocks-accordion-icon-trigger:before{background:#171717;}.kt-accordion-id_5f50c0-88:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-icon-trigger{background:#171717;}.kt-accordion-id_5f50c0-88:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id_5f50c0-88:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-icon-trigger:before{background:#7efcfc;}.kt-accordion-id_5f50c0-88 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header:hover, \n\t\t\t\tbody:not(.hide-focus-outline) .kt-accordion-id_5f50c0-88 .kt-blocks-accordion-header:focus-visible{color:#ffffff;background:#888888;border-top-color:#eeeeee;border-right-color:#eeeeee;border-bottom-color:#eeeeee;border-left-color:#eeeeee;}.kt-accordion-id_5f50c0-88:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id_5f50c0-88:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger:before, body:not(.hide-focus-outline) .kt-accordion-id_5f50c0-88:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) .kt-blocks-accordion--visible .kt-blocks-accordion-icon-trigger:after, body:not(.hide-focus-outline) .kt-accordion-id_5f50c0-88:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) .kt-blocks-accordion-header:focus-visible .kt-blocks-accordion-icon-trigger:before{background:#ffffff;}.kt-accordion-id_5f50c0-88:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger, body:not(.hide-focus-outline) .kt-accordion-id_5f50c0-88:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible .kt-blocks-accordion-icon-trigger{background:#ffffff;}.kt-accordion-id_5f50c0-88:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id_5f50c0-88:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger:before, body:not(.hide-focus-outline) .kt-accordion-id_5f50c0-88:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible .kt-blocks-accordion-icon-trigger:after, body:not(.hide-focus-outline) .kt-accordion-id_5f50c0-88:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible .kt-blocks-accordion-icon-trigger:before{background:#888888;}.kt-accordion-id_5f50c0-88 .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible,\n\t\t\t\t.kt-accordion-id_5f50c0-88 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header.kt-accordion-panel-active{color:#7efcfc;background:#171717;border-top-color:#7efcfc;border-right-color:#7efcfc;border-bottom-color:#7efcfc;border-left-color:#7efcfc;}.kt-accordion-id_5f50c0-88:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle )  > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id_5f50c0-88:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle )  > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger:before{background:#7efcfc;}.kt-accordion-id_5f50c0-88:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger{background:#7efcfc;}.kt-accordion-id_5f50c0-88:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id_5f50c0-88:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger:before{background:#171717;}@media all and (max-width: 767px){.kt-accordion-id_5f50c0-88 .kt-accordion-inner-wrap{display:block;}.kt-accordion-id_5f50c0-88 .kt-accordion-inner-wrap .kt-accordion-pane:not(:first-child){margin-top:10px;}}<\/style>\n<div class=\"wp-block-kadence-accordion alignnone\"><div class=\"kt-accordion-wrap kt-accordion-wrap kt-accordion-id_5f50c0-88 kt-accordion-has-3-panes kt-active-pane-0 kt-accordion-block kt-pane-header-alignment-left kt-accodion-icon-style-basic kt-accodion-icon-side-right\" style=\"max-width:none\"><div class=\"kt-accordion-inner-wrap\" data-allow-multiple-open=\"false\" data-start-open=\"none\">\n<div class=\"wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-1 kt-pane_6694c0-77\"><div class=\"kt-accordion-header-wrap\"><button class=\"kt-blocks-accordion-header kt-acccordion-button-label-show\"><div class=\"kt-blocks-accordion-title-wrap\"><div style=\"display:inline-flex;justify-content:center;align-items:center\" class=\"kt-btn-svg-icon kt-btn-svg-icon-fas_images kt-btn-side-left\"><svg style=\"display:inline-block;vertical-align:middle\" viewbox=\"0 0 576 512\" height=\"24\" width=\"24\" fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M480 416v16c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V176c0-26.51 21.49-48 48-48h16v208c0 44.112 35.888 80 80 80h336zm96-80V80c0-26.51-21.49-48-48-48H144c-26.51 0-48 21.49-48 48v256c0 26.51 21.49 48 48 48h384c26.51 0 48-21.49 48-48zM256 128c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-96 144l55.515-55.515c4.686-4.686 12.284-4.686 16.971 0L272 256l135.515-135.515c4.686-4.686 12.284-4.686 16.971 0L512 208v112H160v-48z\"><\/path><\/svg><\/div><span class=\"kt-blocks-accordion-title\">Click for KBD SVG<\/span><\/div><div class=\"kt-blocks-accordion-icon-trigger\"><\/div><\/button><\/div><div class=\"kt-accordion-panel kt-accordion-panel-hidden\"><div class=\"kt-accordion-panel-inner\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"449\" height=\"82\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/07\/LOGO-Kris-Bunda-Design-SVG.svg\" alt=\"LOGO Kris Bunda Design SVG\" class=\"wp-image-9266\"\/><figcaption>LOGO Kris Bunda Design SVG<\/figcaption><\/figure><\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-2 kt-pane_ce2524-18\"><div class=\"kt-accordion-header-wrap\"><button class=\"kt-blocks-accordion-header kt-acccordion-button-label-show\"><div class=\"kt-blocks-accordion-title-wrap\"><div style=\"display:inline-flex;justify-content:center;align-items:center\" class=\"kt-btn-svg-icon kt-btn-svg-icon-ic_eye kt-btn-side-left\"><svg style=\"display:inline-block;vertical-align:middle\" viewbox=\"0 0 8 8\" height=\"24\" width=\"24\" fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M4.03 0c-2.53 0-4.03 3-4.03 3s1.5 3 4.03 3c2.47 0 3.97-3 3.97-3s-1.5-3-3.97-3zm-.03 1c1.11 0 2 .9 2 2 0 1.11-.89 2-2 2-1.1 0-2-.89-2-2 0-1.1.9-2 2-2zm0 1c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1c0-.1-.04-.19-.06-.28-.08.16-.24.28-.44.28-.28 0-.5-.22-.5-.5 0-.2.12-.36.28-.44-.09-.03-.18-.06-.28-.06z\" transform=\"translate(0 1)\"><\/path><\/svg><\/div><span class=\"kt-blocks-accordion-title\">Cartoon Eyes Animated GIF<\/span><\/div><div class=\"kt-blocks-accordion-icon-trigger\"><\/div><\/button><\/div><div class=\"kt-accordion-panel kt-accordion-panel-hidden\"><div class=\"kt-accordion-panel-inner\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"100\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/EYES.gif\" alt=\"EYES\" class=\"wp-image-9129\"\/><\/figure><\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-3 kt-pane_21fa35-7a\"><div class=\"kt-accordion-header-wrap\"><button class=\"kt-blocks-accordion-header kt-acccordion-button-label-show\"><div class=\"kt-blocks-accordion-title-wrap\"><div style=\"display:inline-flex;justify-content:center;align-items:center\" class=\"kt-btn-svg-icon kt-btn-svg-icon-fe_checkSquare kt-btn-side-left\"><svg style=\"display:inline-block;vertical-align:middle\" viewbox=\"0 0 24 24\" height=\"24\" width=\"24\" fill=\"none\" stroke=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"9 11 12 14 22 4\"><\/polyline><path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"><\/path><\/svg><\/div><span class=\"kt-blocks-accordion-title\">KBD Pixel Perfect Design<\/span><\/div><div class=\"kt-blocks-accordion-icon-trigger\"><\/div><\/button><\/div><div class=\"kt-accordion-panel kt-accordion-panel-hidden\"><div class=\"kt-accordion-panel-inner\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"100\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/ANIMATION-WRITING-BULLSEYE-600x100px.gif\" alt=\"Pixel-Perfect Design by Kris Bunda - animated GIF\" class=\"wp-image-8986\"\/><figcaption>Pixel-Perfect Design by Kris Bunda &#8211; animated GIF<\/figcaption><\/figure><\/div>\n<\/div><\/div><\/div>\n<\/div><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">I uploaded image files via the File Explorer utility in the cPanel admin panel:<\/h3>\n\n\n\n<p>In cPanel, scroll to the &#8220;Files&#8221; card, choose &#8220;File Manager&#8221;. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-File-Manager.png\"><img loading=\"lazy\" decoding=\"async\" width=\"833\" height=\"528\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-File-Manager.png\" alt=\"Create or Update 404 Error Pages - cPanel - File Manager\" class=\"wp-image-9381\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-File-Manager.png 833w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-File-Manager-150x95.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-File-Manager-600x380.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-File-Manager-80x50.png 80w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-File-Manager-732x464.png 732w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-File-Manager-366x232.png 366w\" sizes=\"auto, (max-width: 833px) 100vw, 833px\" \/><\/a><figcaption>Create or Update 404 Error Pages &#8211; cPanel &#8211; File Manager<\/figcaption><\/figure><\/div>\n\n\n<style>#kt-layout-id_acdd9a-23{margin-top:5vh;margin-bottom:5vh;}#kt-layout-id_acdd9a-23 > .kt-row-column-wrap{align-content:center;}:where(#kt-layout-id_acdd9a-23 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:center;}#kt-layout-id_acdd9a-23 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);max-width:60vw;margin-left:auto;margin-right:auto;padding-top:var( --global-kb-row-default-top, 25px );padding-bottom:var( --global-kb-row-default-bottom, 25px );padding-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;grid-template-columns:minmax(0, 1fr);}#kt-layout-id_acdd9a-23{background-color:#bbd9e5;}#kt-layout-id_acdd9a-23 > .kt-row-layout-overlay{opacity:0.30;}#kt-layout-id_acdd9a-23 .kt-row-layout-bottom-sep{height:100px;}#kt-layout-id_acdd9a-23 .kt-row-layout-bottom-sep svg{width:100%;}#kt-layout-id_acdd9a-23 .kt-row-layout-bottom-sep svg{fill:#ffffff!important;}@media all and (max-width: 1024px){#kt-layout-id_acdd9a-23 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 1024px){#kt-layout-id_acdd9a-23 .kt-row-layout-bottom-sep{height:px;}}@media all and (max-width: 1024px){#kt-layout-id_acdd9a-23 .kt-row-layout-bottom-sep svg{width:%;}}@media all and (max-width: 767px){#kt-layout-id_acdd9a-23 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}#kt-layout-id_acdd9a-23 .kt-row-layout-bottom-sep{height:px;}#kt-layout-id_acdd9a-23 .kt-row-layout-bottom-sep svg{width:%;}}<\/style>\n<aside class=\"wp-block-kadence-rowlayout alignfull\"><div id=\"kt-layout-id_acdd9a-23\" class=\"kt-row-layout-inner kt-row-has-bg kt-layout-id_acdd9a-23\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-gutter-default kt-v-gutter-default kt-row-valign-middle kt-row-layout-equal kt-tab-layout-inherit kt-m-colapse-left-to-right kt-mobile-layout-row\"><style>.kadence-column_9460d9-8a > .kt-inside-inner-col{border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;}.kadence-column_9460d9-8a > .kt-inside-inner-col,.kadence-column_9460d9-8a > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column_9460d9-8a > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column_9460d9-8a > .kt-inside-inner-col{flex-direction:column;}.kadence-column_9460d9-8a > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column_9460d9-8a > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column_9460d9-8a{text-align:left;}.kadence-column_9460d9-8a{position:relative;}@media all and (max-width: 1024px){.kadence-column_9460d9-8a > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column_9460d9-8a > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column inner-column-1 kadence-column_9460d9-8a\"><div class=\"kt-inside-inner-col\">\n<h3 class=\"wp-block-heading\">Know where your files live.<\/h3>\n\n\n\n<p>Wherever you upload your photos, just know their <abbr title=\"Uniform Resource Locator\">URL <\/abbr>addresses so you can make them show up in your custom error pages, <em>i.e.<\/em>, <code>&lt;img src=\"\/theURLofThisImage.JPG\"&gt;<\/code>. <\/p>\n\n\n\n<p>It&#8217;s assumed you know how a computer file system works, which is how a URL works. Forward slashes are usually folders, the text in between slashes are folder or file names. I saved my image files to a folder named &#8220;img&#8221; at the &#8220;root&#8221; of my domain (krisbunda.com). This means you should be able to go to <a rel=\"noreferrer noopener\" aria-label=\"krisbunda.com\/img\/EYES.gif (opens in a new tab)\" href=\"https:\/\/krisbunda.com\/img\/EYES.gif\" target=\"_blank\">krisbunda.com\/img\/EYES.gif<\/a> and see the eyes animation. Remember, spelling and even <em>case <\/em>is important. If I type <a href=\"https:\/\/krisbunda.com\/img\/eyes.gif\">krisbunda.com\/img\/eyes.gif<\/a>, it&#8217;s  likely to show the 404 error page because it &#8220;can not locate&#8221; a file named lower-case &#8220;eyes.gif&#8221; at that location. Some schema allow forgiveness and servers will look for different cases or files without the correct extension spellings, but don&#8217;t count on it.<\/p>\n<\/div><\/div>\n<\/div><\/div><\/aside>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-upload-new-images-to-site-1-1-e1565745165141.png\"><img loading=\"lazy\" decoding=\"async\" width=\"683\" height=\"653\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-upload-new-images-to-site-1-1-e1565745165141.png\" alt=\"Create or Update 404 Error Pages - upload new images to site 1\" class=\"wp-image-9378\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-upload-new-images-to-site-1-1-e1565745165141.png 683w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-upload-new-images-to-site-1-1-e1565745165141-150x143.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-upload-new-images-to-site-1-1-e1565745165141-600x574.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-upload-new-images-to-site-1-1-e1565745165141-366x350.png 366w\" sizes=\"auto, (max-width: 683px) 100vw, 683px\" \/><\/a><figcaption>Create or Update 404 Error Pages &#8211; upload new images to site 1<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">CSS: Inline Styling<\/h2>\n\n\n\n<p>I know <a rel=\"noreferrer noopener\" aria-label=\"inline CSS (opens in a new tab)\" href=\"https:\/\/www.codecademy.com\/articles\/html-inline-styles\" target=\"_blank\">inline CSS<\/a> is supposed to be grounds for a tar and feathering. But I started typing in some styling since this is a simple page and I wanted to get started. <strong>We can refactor<\/strong> out the glaring inefficiencies <strong>later <\/strong>(like styling multiple HTML elements the same way instead of just giving them a class and styling the class <em>one time<\/em> in the head of the document).<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-shtml-code-redo1a.png\"><img loading=\"lazy\" decoding=\"async\" width=\"423\" height=\"603\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-shtml-code-redo1a.png\" alt=\"\" class=\"wp-image-9382\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-shtml-code-redo1a.png 423w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-shtml-code-redo1a-105x150.png 105w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-shtml-code-redo1a-366x522.png 366w\" sizes=\"auto, (max-width: 423px) 100vw, 423px\" \/><\/a><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Elements and Styling them<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Wrapper &lt;div&gt;, background-color, font-family<\/h3>\n\n\n\n<p>I made an overall <strong>&#8220;wrapper&#8221;<\/strong> <code>&lt;div&gt;<\/code> as the first div inside the <code>&lt;body&gt;<\/code> tag. It&#8217;s going to set some style rules for other elements inside it. (Child elements will inherit some styles from their &#8220;parent&#8221; container, or in other words: some styles will &#8220;cascade&#8221; onto them <em>[<span style=\"text-decoration: underline;\">CSS<\/span> stands for <span style=\"text-decoration: underline;\">Cascading Style Sheets<\/span> ]<\/em>)<\/p>\n\n\n\n<p>The wrapper <code>&lt;div&gt;<\/code> has an aqua <strong>background-color<\/strong> and Arial <strong>font family<\/strong> (or any <em>sans-serif<\/em> fall-back choice of the device if the user doesn&#8217;t have that font installed).<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-shtml-code-redo1b.png\"><img loading=\"lazy\" decoding=\"async\" width=\"721\" height=\"603\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-shtml-code-redo1b.png\" alt=\"Create or Update 404 Error Pages - cPanel - shtml code redo - wrapper div\" class=\"wp-image-9383\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-shtml-code-redo1b.png 721w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-shtml-code-redo1b-150x125.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-shtml-code-redo1b-600x502.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-shtml-code-redo1b-366x306.png 366w\" sizes=\"auto, (max-width: 721px) 100vw, 721px\" \/><\/a><figcaption>Create or Update 404 Error Pages &#8211; cPanel &#8211; shtml code redo &#8211; wrapper div<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Element Styling and Hyperlinking<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">&lt;img&gt; size &amp; max-width, and image-as-link &lt;a href&gt; <\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">I want the logo image to link to the home page (all the images do).<\/h4>\n\n\n\n<p><strong>Link <\/strong>text is &#8220;<strong><em><span style=\"text-decoration: underline;\">a<\/span><\/em><\/strong>nchor text,&#8221; which is where the &#8220;<strong><em><span style=\"text-decoration: underline;\">a<\/span><\/em><\/strong>&#8221; comes in.  <br \/><strong><em>href<\/em><\/strong> stands for <strong><em>h<\/em><\/strong>yperlink <strong><em>ref<\/em><\/strong>erence.  <br \/>     E.g.: <code><strong>&lt;<em><span style=\"text-decoration: underline;\">a<\/span> href<\/em><\/strong>=\"\/some-url\"<strong>&gt;<\/strong><em><span style=\"text-decoration: underline;\">Text you see on webpage<\/span><\/em><strong>&lt;<em>\/<span style=\"text-decoration: underline;\">a<\/span><\/em>&gt;<\/strong><\/code>. <br \/>And that&#8217;s going to look like this on the rendered page: <a rel=\"noreferrer noopener\" aria-label=\"Text you see on webpage (opens in a new tab)\" href=\"\/some-url\" target=\"_blank\">Text you see on webpage<\/a>.  <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">I want the logo image to be 500 pixels wide <span style=\"text-decoration: underline;\">if it has the room<\/span>, or 80% the width of its parent container <span style=\"text-decoration: underline;\">if less room<\/span>.<\/h4>\n\n\n\n<p><strong>Images are placed using an <\/strong><code><strong>&lt;<span style=\"text-decoration: underline;\">img<\/span>&gt;<\/strong><\/code><strong> tag with <code><span style=\"text-decoration: underline;\">src=\"\/some-url\"<\/span><\/code> syntax.<\/strong> I&#8217;ve added inline styling to this image element tag using <code>style=\"\"<\/code> syntax. <\/p>\n\n\n\n<p><code><strong><em>&lt;img<\/em><\/strong> <em><strong>style=\"<\/strong><\/em><mark class=\"kt-highlight\">width: 500px; max-width: 80%;<\/mark> margin: 5px 0;<strong><em>\"<\/em><\/strong> <strong><em>src=\"<\/em><\/strong>\/img\/LOGO Kris Bunda Design SVG.svg\"<strong>&gt;<\/strong><\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Styling &#8220;Responsive Behavior&#8221;<\/h3>\n\n\n\n<p><strong>Image Size: <\/strong>In this example, the image should display at <mark class=\"kt-highlight\">500 pixels wide<\/mark>, or no larger than <mark class=\"kt-highlight\">80% the width of the <\/mark><code><mark class=\"kt-highlight\">&lt;div&gt;<\/mark><\/code><mark class=\"kt-highlight\"> container it&#8217;s in<\/mark>.  <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"860\" height=\"217\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/css_max_width_property_animation.gif\" alt=\"animation showing header logo styled to be 500 pixels wide or no wider than 80% of parent container's width.\" class=\"wp-image-9419\"\/><figcaption>animation showing header logo styled to be 500 pixels wide or no wider than 80% of parent container&#8217;s width.<\/figcaption><\/figure>\n\n\n\n<p style=\"background-color:#bbd9e5\" class=\"has-background\"><strong>Responsive Design:<\/strong> Being able to have elements scale up and down gracefully, so as not to display ridiculously large or small regardless of screen size or orientation, is a tenet of &#8220;Responsive Design&#8221;. You can go to <a rel=\"noreferrer noopener\" aria-label=\"krisbunda.com\/x (opens in a new tab)\" href=\"http:\/\/krisbunda.com\/x\" target=\"_blank\">krisbunda.com\/x<\/a> and shrink the width of your browser to see this in action (or look at the GIF animation above).  <\/p>\n\n\n\n<p><strong>Margin:<\/strong> I also styled the image to have a top and bottom margin (invisible spacer) of 5 pixels, and side margins of 0px, or: <code><mark class=\"kt-highlight\">style=\"margin: 5px 0\"<\/mark><\/code>. You&#8217;ll get to know &#8220;<strong>shorthand<\/strong>&#8221; tricks like this if you keep learning CSS. The non-shorthand version would be: <code><mark class=\"kt-highlight\">style=\"margin: 5px 0 5 0\"<\/mark><\/code>. I think of div border attributes as the cardinal compass points, starting with <em>North (Top Margin, 5px wide)<\/em> and going clockwise through <em>East (Right Margin, 0px wide)<\/em>, and so on. Just remember: <strong>Start at Top, Go clockwise<\/strong>. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"370\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/DIV-WITH-MARGINS-EXAMPLE-1200x370.png\" alt=\"DIV WITH MARGINS EXAMPLE\" class=\"wp-image-9425\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/DIV-WITH-MARGINS-EXAMPLE.png 1200w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/DIV-WITH-MARGINS-EXAMPLE-150x46.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/DIV-WITH-MARGINS-EXAMPLE-600x185.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/DIV-WITH-MARGINS-EXAMPLE-732x226.png 732w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/DIV-WITH-MARGINS-EXAMPLE-366x113.png 366w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><figcaption>DIV WITH MARGINS EXAMPLE<\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Where&#8217;s the file? Image Source. &lt;img src=&#8221;\/some.png&#8221;&gt;<\/h3>\n\n\n\n<p>I know we touched on this above, with hyperlinking an image, styling an image, and knowing the URL address of your image, which is its &#8220;src&#8221;&#8230; So let&#8217;s bring it on home again by telling the server where your files are located (their URLs or sources), and then let&#8217;s put it all together, <strong>source<\/strong>, <strong>link<\/strong>, and <strong>styling<\/strong>. <\/p>\n\n\n\n<p>The <code>&lt;img&gt;<\/code> tag must also show where the image file is located using <strong>source<\/strong> syntax, as in: <code>&lt;img <strong>src=\"https:\/\/your_site.net\/photo_name.jpg\"<\/strong>&gt;<\/code> <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Finally, here&#8217;s what the whole <code>&lt;img&gt;<\/code> tag wrapped in an <code>&lt;a&gt;<\/code> tag (<em>anchor <\/em>or <em>hyperlink<\/em>) might look like:<\/h3>\n\n\n\n<p><code><strong><mark class=\"kt-highlight\">&lt;a href=\"\/\"&gt;<\/mark><\/strong><\/code><br \/>     <code><strong><em><mark class=\"kt-highlight\">&lt;img<\/mark><\/em><\/strong> <mark class=\"kt-highlight\">style=<\/mark>\"width: 500px; max-width: 80%; margin: 5px 0;\" <mark class=\"kt-highlight\">src=<\/mark>\"\/img\/LOGO Kris Bunda Design SVG.svg\"<strong><em><mark class=\"kt-highlight\">&gt;<\/mark><\/em><\/strong><\/code><br \/><code><strong><mark class=\"kt-highlight\">&lt;\/a&gt;<\/mark><\/strong><\/code><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Note there are 4 important parts here: <\/h4>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>The link element <\/strong><\/li><li><strong>The image element<\/strong> (nested inside the link element)<\/li><li><strong>Style attributes<\/strong> (inside the image element)<\/li><li><strong>Source attribute <\/strong> (inside the image element) <\/li><\/ol>\n\n\n<style>#kt-layout-id_874b73-e1 > .kt-row-column-wrap{align-content:center;}:where(#kt-layout-id_874b73-e1 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:center;}#kt-layout-id_874b73-e1 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var( --global-kb-row-default-top, 25px );padding-bottom:var( --global-kb-row-default-bottom, 25px );padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, 1fr);}#kt-layout-id_874b73-e1{background-color:#bbd9e5;}#kt-layout-id_874b73-e1 > .kt-row-layout-overlay{opacity:0.30;}#kt-layout-id_874b73-e1 .kt-row-layout-bottom-sep{height:100px;}#kt-layout-id_874b73-e1 .kt-row-layout-bottom-sep svg{width:100%;}#kt-layout-id_874b73-e1 .kt-row-layout-bottom-sep svg{fill:#ffffff!important;}@media all and (max-width: 1024px){#kt-layout-id_874b73-e1 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 1024px){#kt-layout-id_874b73-e1 .kt-row-layout-bottom-sep{height:px;}}@media all and (max-width: 1024px){#kt-layout-id_874b73-e1 .kt-row-layout-bottom-sep svg{width:%;}}@media all and (max-width: 767px){#kt-layout-id_874b73-e1 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}#kt-layout-id_874b73-e1 .kt-row-layout-bottom-sep{height:px;}#kt-layout-id_874b73-e1 .kt-row-layout-bottom-sep svg{width:%;}}<\/style>\n<aside class=\"wp-block-kadence-rowlayout alignfull\"><div id=\"kt-layout-id_874b73-e1\" class=\"kt-row-layout-inner kt-row-has-bg kt-layout-id_874b73-e1\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-gutter-default kt-v-gutter-default kt-row-valign-middle kt-row-layout-equal kt-tab-layout-inherit kt-m-colapse-left-to-right kt-mobile-layout-row\"><style>.kadence-column_37a236-bb > .kt-inside-inner-col{border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;}.kadence-column_37a236-bb > .kt-inside-inner-col,.kadence-column_37a236-bb > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column_37a236-bb > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column_37a236-bb > .kt-inside-inner-col{flex-direction:column;}.kadence-column_37a236-bb > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column_37a236-bb > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column_37a236-bb{position:relative;}@media all and (max-width: 1024px){.kadence-column_37a236-bb > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column_37a236-bb > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column inner-column-1 kadence-column_37a236-bb\"><div class=\"kt-inside-inner-col\">\n<h2 class=\"wp-block-heading\"><strong>Why the &lt;a href=<\/strong><mark class=\"kt-highlight\"><strong>&#8220;\/&#8221;<\/strong><\/mark><strong>&gt;Forward Slash?&lt;\/a&gt;<\/strong><\/h2>\n\n\n\n<p>Why does the <code>&lt;a href=<mark class=\"kt-highlight\">\"\/\"<\/mark>&gt;<\/code> tag just have a forward slash (<code><mark class=\"kt-highlight\">\"\/\"<\/mark><\/code>) for the hyperlink address? Because that should take the user to the <strong>homepage at the root of the domain<\/strong>. In other words, to the very<em> <strong>top-level of the file system<\/strong> for the domain<\/em>. The <strong>domain <\/strong>in this tutorial is <code>krisbunda.com<\/code> . The forward slash is like a <strong>shorthand<\/strong>, and takes the user to <code>krisbunda.com<mark class=\"kt-highlight\">\/<\/mark><\/code>. See that forward slash at the end of the domain? <br \/><br \/>(Not to confuse you, but <strong>I have my domain to forwarded<\/strong> to <code><mark class=\"kt-highlight\">\/<\/mark>blog<\/code>. So even though <code>&lt;a href=<mark class=\"kt-highlight\">\"\/\"<\/mark>&gt;<\/code> sends you to <code>krisbunda.com<mark class=\"kt-highlight\">\/<\/mark><\/code>, you&#8217;ll then be <strong>auto-forwarded<\/strong> to <code>krisbunda.com<mark class=\"kt-highlight\">\/<\/mark>blog<mark class=\"kt-highlight\">\/<\/mark><\/code>, which is the folder my wordpress installation resides in, and therefore you will load the homepage of my wordpress installation, which I set to a summary list of my blogs.)<\/p>\n<\/div><\/div>\n<\/div><\/div><\/aside>\n\n\n\n<h2 class=\"wp-block-heading\">Notice the 2 Server-Side Includes in the code! <\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">One for <em>REDIRECT_STATUS<\/em> and one for <em>REQUEST_URI<\/em>.<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-shtml-code-redo1c.png\"><img loading=\"lazy\" decoding=\"async\" width=\"423\" height=\"199\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-shtml-code-redo1c.png\" alt=\"Create or Update 404 Error Pages - cPanel - shtml code redo - Server Side Includes\" class=\"wp-image-9384\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-shtml-code-redo1c.png 423w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-shtml-code-redo1c-150x71.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-shtml-code-redo1c-366x172.png 366w\" sizes=\"auto, (max-width: 423px) 100vw, 423px\" \/><\/a><figcaption>Create or Update 404 Error Pages &#8211; cPanel &#8211; shtml code redo &#8211; Server Side Includes<\/figcaption><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">&#8220;Error Number&#8221; SSI Code<\/h4>\n\n\n\n<p><code>REDIRECT_STATUS<\/code> is responsible for the <strong>&#8220;404&#8221;<\/strong> in the <code>&lt;H1&gt;<\/code> headline title &#8220;<code>That's a <span style=\"text-decoration: underline;\">404<\/span> Error.<\/code>&#8221; Why? Because then I can paste that code in all error pages, and they&#8217;ll all correctly say &#8220;<code>That's a <em>[correct code number; like <\/em><span style=\"text-decoration: underline;\"><em>400<\/em><\/span><em>, <\/em><span style=\"text-decoration: underline;\"><em>500<\/em><\/span><em>, <\/em><span style=\"text-decoration: underline;\"><em>403<\/em><\/span><em>, etc.]<\/em> Error.<\/code>&#8221; One of the tenets of programming is &#8220;<a href=\"https:\/\/en.wikipedia.org\/wiki\/Don%27t_repeat_yourself\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">DRY: Don&#8217;t Repeat Yourself<\/a>&#8220;. If I can reuse the code we write for the 404 error page on all the other pages, then let&#8217;s do it. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">&#8220;Error URL&#8221; SSI Code<\/h4>\n\n\n\n<p>The <code>REQUEST_URI<\/code> SSI code will inject the URL (without domain) of the file path that triggered serving the error page to the user. I like using this because it tells the user exactly which URL is probably no longer available to them, so hopefully there&#8217;s no confusion. The message I added says &#8220;<code>You were looking for krisbunda.com\/<span style=\"text-decoration: underline;\">some URL<\/span> and we're not seeing it anywhere.<\/code>&#8221; Honestly, I don&#8217;t see why this isn&#8217;t reusable for most other error pages also. <strong>That&#8217;s my goal, one page of markup\/styling, reused on all error pages. <\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-shtml-code-redo1-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1192\" height=\"603\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-shtml-code-redo1-1.png\" alt=\"Create or Update 404 Error Pages - cPanel - shtml code redo1\" class=\"wp-image-9354\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-shtml-code-redo1-1.png 1192w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-shtml-code-redo1-1-150x76.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-shtml-code-redo1-1-600x304.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-shtml-code-redo1-1-732x370.png 732w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/08\/Create-or-Update-404-Error-Pages-cPanel-shtml-code-redo1-1-366x185.png 366w\" sizes=\"auto, (max-width: 1192px) 100vw, 1192px\" \/><\/a><figcaption>Create or Update 404 Error Pages &#8211; cPanel &#8211; shtml code redo1<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>How we&#8217;re looking so far.<\/strong>.. I&#8217;ve got: <\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li>a text editor\/<abbr alt=\"integrated development environment\" title=\"integrated development environment\">IDE<\/abbr> on the left (Visual Studio Code), <\/li><li>the error page in the middle, <\/li><li>and the Chrome &#8220;Dev Tools&#8221; panel on the right, <ul><li>Dev Tools helps me inspect elements of the site and styling I&#8217;m creating (and figure out why when something looks an unexpected way.) <\/li><\/ul><\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">That&#8217;s Part 1: Backend Basics<\/h2>\n\n\n\n<p>I&#8217;m noticing this is getting very lengthy. This looks like a good spot to end a <strong>Part 1<\/strong> of this &#8220;Customize Your Error Pages while Learning Beginner Web Dev&#8221; blog, which now looks to have been about <span style=\"text-decoration: underline;\">Backend Basics<\/span> (getting into cPanel, uploading assets, learning about SSIs). <\/p>\n\n\n\n<p><strong>Part 2<\/strong> will be published shortly, and will get more into <span style=\"text-decoration: underline;\">Basic HTML &amp; CSS<\/span>. Probably touch on cross-browser and cross-platform testing to see if the User Experience you&#8217;re trying to present is consistent for most users. On that note, let&#8217;s show how CSS Preprocessors work to help you on that regard. <\/p>\n\n\n\n<p><strong>Part 3 <\/strong>will be after that, with a focus on <span style=\"text-decoration: underline;\">Responsive Design<\/span>, like Flex Box, Grid, and Viewport Breakpoints. Oh, and creating various sizes of visual assets for browsers to serve to people who don&#8217;t want to burn their data plan on 8K RETINA EVERYTHING. <\/p>\n\n\n\n<p><strong>Part 4<\/strong> will be simply <span style=\"text-decoration: underline;\">Refactoring<\/span>, or rewriting code to make it neater, more DRY (Don&#8217;t Repeat Yourself), and maybe add some notes in for Future You who discovers shamefully outdated error pages and wonders what Past You was even thinking.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>PART 1: Back-End Basics. Tutorial: Rebrand your error pages, learn intro web dev, make your first live app (Redo all your customized error pages using one page of code). <\/p>\n<p>Cover: HTML, CSS, Accessibility, Responsive Design (with Media Breakpoints), and Refactoring. <\/p>\n","protected":false},"author":1,"featured_media":9585,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","inline_featured_image":false,"kt_blocks_editor_width":"","_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[4],"tags":[773,782,781,36,105,772],"class_list":["post-9597","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-designer","tag-code","tag-ide","tag-responsive","tag-tutorial","tag-web-design","tag-web-development"],"aioseo_notices":[],"jetpack_publicize_connections":[],"taxonomy_info":{"category":[{"value":4,"label":"Designer"}],"post_tag":[{"value":773,"label":"code"},{"value":782,"label":"IDE"},{"value":781,"label":"Responsive"},{"value":36,"label":"tutorial"},{"value":105,"label":"web design"},{"value":772,"label":"web development"}]},"featured_image_src_large":["https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/10\/hero-Customize-Your-Error-Pages-and-Learn-Intro-Web-Development-1-1200x675.png",1200,675,true],"author_info":{"display_name":"Kris Bunda","author_link":"https:\/\/krisbunda.com\/blog\/author\/kris-bunda\/"},"comment_info":1,"category_info":[{"term_id":4,"name":"Designer","slug":"designer","term_group":0,"term_taxonomy_id":4,"taxonomy":"category","description":"Posts focusing on web, graphic, CAD, and other design.","parent":0,"count":91,"filter":"raw","cat_ID":4,"category_count":91,"category_description":"Posts focusing on web, graphic, CAD, and other design.","cat_name":"Designer","category_nicename":"designer","category_parent":0}],"tag_info":[{"term_id":773,"name":"code","slug":"code","term_group":0,"term_taxonomy_id":777,"taxonomy":"post_tag","description":"","parent":0,"count":4,"filter":"raw"},{"term_id":782,"name":"IDE","slug":"ide","term_group":0,"term_taxonomy_id":786,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"},{"term_id":781,"name":"Responsive","slug":"responsive","term_group":0,"term_taxonomy_id":785,"taxonomy":"post_tag","description":"","parent":0,"count":2,"filter":"raw"},{"term_id":36,"name":"tutorial","slug":"tutorial","term_group":0,"term_taxonomy_id":36,"taxonomy":"post_tag","description":"","parent":0,"count":33,"filter":"raw"},{"term_id":105,"name":"web design","slug":"web-design","term_group":0,"term_taxonomy_id":105,"taxonomy":"post_tag","description":"","parent":0,"count":19,"filter":"raw"},{"term_id":772,"name":"web development","slug":"web-development","term_group":0,"term_taxonomy_id":776,"taxonomy":"post_tag","description":"","parent":0,"count":5,"filter":"raw"}],"jetpack_featured_media_url":"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/10\/hero-Customize-Your-Error-Pages-and-Learn-Intro-Web-Development-1.png","jetpack_sharing_enabled":false,"jetpack_shortlink":"https:\/\/wp.me\/p1NcZe-2uN","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/posts\/9597","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/comments?post=9597"}],"version-history":[{"count":2,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/posts\/9597\/revisions"}],"predecessor-version":[{"id":9605,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/posts\/9597\/revisions\/9605"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/media\/9585"}],"wp:attachment":[{"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/media?parent=9597"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/categories?post=9597"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/tags?post=9597"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}