How to Code a Website from Scratch

If you’re wondering how to code a website from scratch, this blog post will show you the basic steps and some tips and tricks.

Checkout this video:

Introduction: Why you should learn how to code a website from scratch

In an increasingly digital world, coding skills are in high demand. Jobs that didn’t exist a decade ago nowrequire coding knowledge, and even jobs that have existed for centuries are starting to use code in new ways. If you’re not a coder, that can feel like you’re being left behind.

But it doesn’t have to be that way! Anyone can learn to code, and it’s actually not as difficult as you might think. In this article, we’ll give you a crash course in coding a website from scratch using HTML and CSS. By the end, you’ll have a basic understanding of how code works and be able to create your own simple website.

So why should you learn how to code? There are lots of good reasons:

Coding skills are in high demand. Like we said, jobs that didn’t exist a few years ago now require code knowledge. If you want to stay ahead of the curve, learning to code is a great way to do it.

Coding is a great way to make extra money. Even if your main job doesn’t require coding skills, you can use your coding knowledge to start freelancing on the side and make some extra cash.

Coding can help you automate tedious tasks. Do you have a task that you do every day that feels like a waste of time? Coding can help you automate it so you don’t have to do it anymore!

Learning to code can be fun! Once you get past the initial learning curve, coding can be enjoyable and even addictive. It’s creative and allows you to build things from scratch.

Once you understand the basics of HTML and CSS, you can create simple websites entirely on your own — no need for expensive web development software or services. Not only is this great for personal projects or hobbies, but it can also be useful for business purposes; if you need to create a website for your small business or side hustle but don’t want to spend hundreds or even thousands of dollars on professional web development services, learning how to code it yourself will allow you to get the job done for far less money.

The basics: What you need to know to get started

Have you ever wanted to create your own website, but didn’t know how to code? It’s actually not as difficult as you might think. With a little time and effort, anyone can learn the basics of coding and create a simple website.

To get started, you’ll need a text editor (like Notepad++ or Sublime Text) and a web browser (like Google Chrome or Mozilla Firefox). Once you have those installed, you’re ready to start coding!

The first thing you need to do is create a file called “index.html” in your text editor. This will be the main page of your website. Then, you’ll want to add the following code to that file:



My Website


Hello, world! This is my first website.

Save the file, and then open it in your web browser. You should see a simple page that says “Hello, world!” Congrats – you’ve just created your first website!

HTML: The foundation of all websites

Every website is built on a foundation of HTML, which stands for HyperText Markup Language. HTML is the standard markup language for creating websites and web applications. It consists of a system of tags, or elements, used to structure content on a webpage.

HTML tags are usually represented by <> symbols, with the opening tag being the symbol followed by the element name, and the closing tag being the element name followed by a / symbol. For example, the opening tag for a paragraph element is

, and the closing tag is

.

All HTML elements must have a opening and closing tag, though some elements may not require any content between the tags. For example, an empty tag to create a line break would be written as
with no content between the opening and closing tags.

In addition to content, HTML tags can also be used to apply style or format to your text, as well as adding links, images, and other media to your webpage.

CSS: Adding style to your website

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in a markup language. A style sheet is a collection of rules that tells a web browser how to display a document written in HTML or XML.

CSS is used to style all HTML tags, including the document’s body, headings, paragraphs, and other pieces of text. CSS can also be used to style the display of table elements, grid elements, and images.

In order to add CSS to a website, you’ll need to create a CSS file. This file should be saved with a “.css” extension and placed in the same directory as your HTML file.

Once you’ve created your CSS file, you can link to it from your HTML file using the “” tag. This tag should be placed between the “” tags in your HTML file. The “href” attribute of the “” tag should be set to the URL of your CSS file.

Here’s an example of how to link to a CSS file:

JavaScript: Making your website interactive

JavaScript is a programming language that is run by most modern web browsers. It can make your website interactive, meaning that it can respond to user input. For example, you can use JavaScript to create forms that validate user input, create drop-down menus, or display pop-up messages.

In order to use JavaScript on your website, you will need to include it in your HTML code. The easiest way to do this is to use a “script” element. Script elements must be placed within the “head” element of your HTML code:

“`html






//The rest of your HTML code goes here…

Web hosting and domain names: Where your website lives on the internet

Your domain name is your website’s address on the internet. It’s what people type in to find your site. For example, our domain name is www.w3schools.com.

You need two things to create a website: web hosting and a domain name.

Web hosting is a service that gives you access to a “web server”. A web server is a computer where your website files are stored. When people type in your domain name, they are directed to your web server, and your website files are then sent to them through the internet.

So you need to buy two things:
-Web Hosting: This is where your website files are stored on a computer (a “server”). When people type in your domain name, they are directed to this server, and then your website files are sent to them through the internet. You can think of it as renting space on a computer so that you can store your website files there.
-Domain Name: This is your website’s address on the internet (like www.w3schools.com). People type this into their browser’s address bar when they want to find and view your website. Once you have found a web hosting company, the next step will be registering a domain name for your website.

Putting it all together: How to code a complete website from scratch

Assuming you have a basic understanding of HTML and CSS, in this article we are going to show how to put all of the pieces together to create a complete website from scratch. The first thing you will need is a text editor. For the purposes of this article we will be using “Notepad++” but any text editor will do.

Once you have your text editor open, the first step is to create a file called “index.html” in the root directory of your website (this is the directory that contains all of your website’s files and folders). The root directory is typically named after your website (e.g. “www.example.com”) and is usually located on your computer’s hard drive (e.g. “C:\Users\Your Name\Documents\My Websites\www.example.com”).

Next, you will want to add the following code to your index.html file:




My Website


This code is the bare minimum required to create a valid HTML document. The declaration tells the web browser that this document is an HTML5 document (the latest version of HTML). The , , and tags are used to structure the content of an HTML document. The tag is used to specify the title of the document, which is used by the web browser when displaying the document in the browser’s tab bar or window title bar (depending on which browser you are using). In this case, we have set the title to “My Website”.<br /> ##Heading: Stylesheets (CSS)<br /> ##Expansion: In order to make our website look nicer, we are going to want to add some CSS stylesheet code. CSS (Cascading Style Sheets) is a language used for describing how HTML elements should be displayed onscreen. First, we need to create a new file in our root directory called “style.css” and add the following code:</p> <p> body { } /* This selector targets the <body> element */</p> <p></p> <h2 id="maintenance-and-updates-keeping-your-website-fresh">Maintenance and updates: Keeping your website fresh</h2> <p></p> <p> As your website grows, you’ll need to regularly update your content to keep it fresh. You may also need to add new features or make changes to the design. Monitoring your website’s performance and making sure it is up-to-date are essential tasks that will help you keep your visitors happy and coming back for more.</p> <p>Updating your content<br /> Your website’s content should be fresh, relevant, and engaging. Regularly adding new content will not only keep your visitors coming back for more, but it will also help you attract new visitors. If you have a blog, make sure to post new articles regularly. If you have a business website, keep your product descriptions and pricing information up-to-date. You should also periodically review all of your content to make sure it is still accurate and relevant.</p> <p>Adding new features<br /> As your website grows, you may want to add new features or functionality. For example, if you start selling products on your website, you will need to add a shopping cart and payment processing functionality. If you want to provide more information to your visitors, you might add a FAQ section or create an online resource center. As you add new features, be sure to test them thoroughly before making them live on your site.</p> <p>Monitoring performance<br /> It is important to monitor your website’s performance so that you can identify and address any issues as they arise. You should periodically check things like uptime, site speed, and error rates. You should also pay attention to how people are using your site so that you can improve the user experience. Use Google Analytics or another similar service to track visitor behavior on your site.</p> <p></p> <h2 id="troubleshooting-dealing-with-common-coding-problems">Troubleshooting: Dealing with common coding problems</h2> <p></p> <p>When you’re coding a website from scratch, there are bound to be problems. But don’t worry! With a little troubleshooting, you can typically find a solution.</p> <p>Here are some common coding problems and how to fix them:</p> <p>1. I can’t get my code to work!</p> <p>This is probably the most common coding problem. The best way to troubleshoot this is to go through your code line by line and make sure everything is correct. Additionally, you can try running your code in a different browser or on a different computer. Sometimes, this can help you spot the problem.</p> <p>2. My code looks fine, but it’s not working the way I want it to.</p> <p>There could be several reasons for this. First, check to make sure that your code is valid and that you’re using the correct syntax. Second, make sure you’re using the right tools for the job – sometimes, using the wrong tool can cause problems even if your code is valid. Finally, check to see if there are any errors in the browser console – this can often give you clues as to what’s going wrong with your code.</p> <p>3. I keep getting errors when I try to run my code!</p> <p>There could be several reasons for this as well. First, check your syntax and make sure everything is correct. Second, try running your code in a different browser or on a different computer. Finally, check the browser console for errors – this can often give you clues as to what’s going wrong with your code.</p> <p></p> <h2 id="resources-and-further-reading-where-to-go-from-here">Resources and further reading: Where to go from here</h2> <p></p> <p>Here are some great resources and further reading to help you continue your journey to coding a website from scratch: </p> <p>-The Coding Train: This YouTube channel is devoted to teaching people of all ages how to code.<br /> – Codecademy: Codecademy offers free web development courses on HTML, CSS, and JavaScript, as well as other programming languages.<br /> – freeCodeCamp: freeCodeCamp is a nonprofit organization that offers free, interactive coding lessons on their website.<br /> – W3Schools: W3Schools is a website that provides concise, code-based tutorials on web development topics.</p> </div><!-- .entry-content .clear --> </div> </article><!-- #post-## --> <nav class="navigation post-navigation" role="navigation" aria-label="Posts"> <span class="screen-reader-text">Post navigation</span> <div class="nav-links"><div class="nav-previous"><a href="https://robleydesign.com/how-to-copy-a-website/" rel="prev"><span class="ast-left-arrow">←</span> Previous Post</a></div><div class="nav-next"><a href="https://robleydesign.com/how-to-find-hidden-things-on-website/" rel="next">Next Post <span class="ast-right-arrow">→</span></a></div></div> </nav><div class="ast-single-related-posts-container"><div class="ast-related-posts-title-section"> <h2 class="ast-related-posts-title"> Related Posts </h2> </div><div class="ast-related-posts-wrapper"> <article class="ast-related-post post-1003 post type-post status-publish format-standard has-post-thumbnail hentry category-latest ast-article-single"> <div class="ast-related-posts-inner-section"> <div class="ast-related-post-content"> <div class="ast-related-post-featured-section post-has-thumb"><div class="post-thumb-img-content post-thumb"><a href="https://robleydesign.com/what-does-a-jr-web-developer-do/"><img fifu-featured="1" width="1024" height="1024" src="https://imagedelivery.net/FNIeVelzVpbuv4Ccsk3seg/e5ae8ca5-b0da-4201-8d6b-0a3b0de4bb00/public" class="attachment-large size-large wp-post-image" alt="" title="" title="" loading="lazy" /></a> </div> <a href="https://robleydesign.com/what-does-a-jr-web-developer-do/" > <div class="ast-date-meta square"> <span class="posted-on"><time class="entry-date published updated" datetime="2022-05-02T13:11:33+00:00"><span class="date-month">May</span> <span class="date-day">2</span> <span class="date-year">2022</span></time></span> </div> </a> </div> <header class="entry-header"> <h3 class="ast-related-post-title entry-title"> <a href="https://robleydesign.com/what-does-a-jr-web-developer-do/" target="_self" rel="bookmark noopener noreferrer">What Does A Jr Web Developer Do?</a> </h3> <div class="entry-meta"></div> </header> <div class="entry-content clear"> </div> </div> </div> </article> <article class="ast-related-post post-1005 post type-post status-publish format-standard has-post-thumbnail hentry category-latest ast-article-single"> <div class="ast-related-posts-inner-section"> <div class="ast-related-post-content"> <div class="ast-related-post-featured-section post-has-thumb"><div class="post-thumb-img-content post-thumb"><a href="https://robleydesign.com/what-can-i-do-with-a-degree-in-web-development/"><img fifu-featured="1" width="1024" height="1024" src="https://imagedelivery.net/FNIeVelzVpbuv4Ccsk3seg/5f514207-03c9-495f-f8d1-e6744f96ca00/public" class="attachment-large size-large wp-post-image" alt="" title="" title="" loading="lazy" /></a> </div> <a href="https://robleydesign.com/what-can-i-do-with-a-degree-in-web-development/" > <div class="ast-date-meta square"> <span class="posted-on"><time class="entry-date published updated" datetime="2022-05-02T20:16:04+00:00"><span class="date-month">May</span> <span class="date-day">2</span> <span class="date-year">2022</span></time></span> </div> </a> </div> <header class="entry-header"> <h3 class="ast-related-post-title entry-title"> <a href="https://robleydesign.com/what-can-i-do-with-a-degree-in-web-development/" target="_self" rel="bookmark noopener noreferrer">What Can I Do With A Degree In Web Development?</a> </h3> <div class="entry-meta"></div> </header> <div class="entry-content clear"> </div> </div> </div> </article> <article class="ast-related-post post-1007 post type-post status-publish format-standard has-post-thumbnail hentry category-latest ast-article-single"> <div class="ast-related-posts-inner-section"> <div class="ast-related-post-content"> <div class="ast-related-post-featured-section post-has-thumb"><div class="post-thumb-img-content post-thumb"><a href="https://robleydesign.com/what-is-the-typical-work-schedule-for-a-web-developer/"><img fifu-featured="1" width="1024" height="1024" src="https://imagedelivery.net/FNIeVelzVpbuv4Ccsk3seg/31217582-4823-4c0e-7dff-97adbb21d200/public" class="attachment-large size-large wp-post-image" alt="" title="" title="" loading="lazy" /></a> </div> <a href="https://robleydesign.com/what-is-the-typical-work-schedule-for-a-web-developer/" > <div class="ast-date-meta square"> <span class="posted-on"><time class="entry-date published updated" datetime="2022-05-03T03:21:03+00:00"><span class="date-month">May</span> <span class="date-day">3</span> <span class="date-year">2022</span></time></span> </div> </a> </div> <header class="entry-header"> <h3 class="ast-related-post-title entry-title"> <a href="https://robleydesign.com/what-is-the-typical-work-schedule-for-a-web-developer/" target="_self" rel="bookmark noopener noreferrer">What Is The Typical Work Schedule For A Web Developer?</a> </h3> <div class="entry-meta"></div> </header> <div class="entry-content clear"> </div> </div> </div> </article> <article class="ast-related-post post-1009 post type-post status-publish format-standard has-post-thumbnail hentry category-latest ast-article-single"> <div class="ast-related-posts-inner-section"> <div class="ast-related-post-content"> <div class="ast-related-post-featured-section post-has-thumb"><div class="post-thumb-img-content post-thumb"><a href="https://robleydesign.com/what-is-the-job-outlook-for-web-developers/"><img fifu-featured="1" width="1024" height="1024" src="https://imagedelivery.net/FNIeVelzVpbuv4Ccsk3seg/3194f058-52cd-4da5-3aff-eaacc8009000/public" class="attachment-large size-large wp-post-image" alt="" title="" title="" loading="lazy" /></a> </div> <a href="https://robleydesign.com/what-is-the-job-outlook-for-web-developers/" > <div class="ast-date-meta square"> <span class="posted-on"><time class="entry-date published updated" datetime="2022-05-03T10:26:05+00:00"><span class="date-month">May</span> <span class="date-day">3</span> <span class="date-year">2022</span></time></span> </div> </a> </div> <header class="entry-header"> <h3 class="ast-related-post-title entry-title"> <a href="https://robleydesign.com/what-is-the-job-outlook-for-web-developers/" target="_self" rel="bookmark noopener noreferrer">What Is The Job Outlook For Web Developers?</a> </h3> <div class="entry-meta"></div> </header> <div class="entry-content clear"> </div> </div> </div> </article> </div> </div><div class="ast-single-author-box" itemprop="author" itemscope itemtype="https://schema.org/Person"><div class="ast-author-meta"> <div class="about-author-title-wrapper"> <h3 class="about-author">About The Author</h3> </div> <div class="ast-author-details"> <div class="post-author-avatar"><img alt='' src='https://secure.gravatar.com/avatar/853d15c4e72db96e54214836e80474da?s=100&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/853d15c4e72db96e54214836e80474da?s=200&d=mm&r=g 2x' class='avatar avatar-100 photo' height='100' width='100' loading='lazy'/></div> <div class="post-author-bio"> <a class="url fn n" href="https://robleydesign.com/author/joseph/" itemprop="url" rel="author"> <h4 class="author-title" itemprop="name">joseph</h4> </a> <div class="post-author-desc"></div> </div> </div> </div></div> </main><!-- #main --> </div><!-- #primary --> <div class="widget-area secondary" id="secondary" itemtype="https://schema.org/WPSideBar" itemscope="itemscope"> <div class="sidebar-main" > <aside id="search-2" class="widget widget_search"><h2 class="widget-title">Search</h2><form role="search" method="get" class="search-form" action="https://robleydesign.com/"> <label> <span class="screen-reader-text">Search for:</span> <input type="search" class="search-field" placeholder="Search …" value="" name="s" tabindex="-1"> <button class="search-submit ast-search-submit" aria-label="Search Submit"> <span hidden>Search</span> <i><span class="ast-icon icon-search"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="-888 480 142 142" enable-background="new -888 480 142 142" xml:space="preserve"> <path d="M-787.4,568.7h-6.3l-2.4-2.4c7.9-8.7,12.6-20.5,12.6-33.1c0-28.4-22.9-51.3-51.3-51.3 c-28.4,0-51.3,22.9-51.3,51.3c0,28.4,22.9,51.3,51.3,51.3c12.6,0,24.4-4.7,33.1-12.6l2.4,2.4v6.3l39.4,39.4l11.8-11.8L-787.4,568.7 L-787.4,568.7z M-834.7,568.7c-19.7,0-35.5-15.8-35.5-35.5c0-19.7,15.8-35.5,35.5-35.5c19.7,0,35.5,15.8,35.5,35.5 C-799.3,553-815,568.7-834.7,568.7L-834.7,568.7z"/> </svg></span></i> </button> </label> <input type="submit" class="search-submit" value="Search"> </form> </aside><aside id="text-3" class="widget widget_text"> <div class="textwidget"> <div class="pk-toc "> <h5 class="pk-title pk-toc-title pk-font-block"> Overview: </h5> <ol ><li><a href="#introduction-why-you-should-learn-how-to-code-a-website-from-scratch">Introduction: Why you should learn how to code a website from scratch</a></li><li><a href="#the-basics-what-you-need-to-know-to-get-started">The basics: What you need to know to get started</a></li><li><a href="#html-the-foundation-of-all-websites">HTML: The foundation of all websites</a></li><li><a href="#css-adding-style-to-your-website">CSS: Adding style to your website</a></li><li><a href="#javascript-making-your-website-interactive">JavaScript: Making your website interactive</a></li><li><a href="#web-hosting-and-domain-names-where-your-website-lives-on-the-internet">Web hosting and domain names: Where your website lives on the internet</a></li><li><a href="#putting-it-all-together-how-to-code-a-complete-website-from-scratch">Putting it all together: How to code a complete website from scratch</a></li><li><a href="#maintenance-and-updates-keeping-your-website-fresh">Maintenance and updates: Keeping your website fresh</a></li><li><a href="#troubleshooting-dealing-with-common-coding-problems">Troubleshooting: Dealing with common coding problems</a></li><li><a href="#resources-and-further-reading-where-to-go-from-here">Resources and further reading: Where to go from here</a></li></ol> </div> </div> </aside> <aside id="recent-posts-1" class="widget widget_recent_entries"> <h2 class="widget-title">Latest</h2><nav aria-label="Latest"> <ul> <li> <a href="https://robleydesign.com/how-to-set-website-as-homepage/">How To Set Your Website As Your Homepage</a> </li> <li> <a href="https://robleydesign.com/how-to-start-my-own-website/">How To Start My Own Website?</a> </li> <li> <a href="https://robleydesign.com/how-to-search-a-website-for-words/">How to Use Keywords to Search a Website</a> </li> <li> <a href="https://robleydesign.com/how-to-sell-a-website/">How to Sell a Website: The Ultimate Guide</a> </li> <li> <a href="https://robleydesign.com/how-to-tell-if-a-website-is-safe/">How to Tell If a Website Is Safe?</a> </li> </ul> </nav></aside> </div><!-- .sidebar-main --> </div><!-- #secondary --> </div> <!-- ast-container --> </div><!-- #content --> <footer class="site-footer" id="colophon" itemtype="https://schema.org/WPFooter" itemscope="itemscope" itemid="#colophon"> <div class="site-below-footer-wrap ast-builder-grid-row-container site-footer-focus-item ast-builder-grid-row-full ast-builder-grid-row-tablet-full ast-builder-grid-row-mobile-full ast-footer-row-stack ast-footer-row-tablet-stack ast-footer-row-mobile-stack" data-section="section-below-footer-builder"> <div class="ast-builder-grid-row-container-inner"> <div class="ast-builder-footer-grid-columns site-below-footer-inner-wrap ast-builder-grid-row"> <div class="site-footer-below-section-1 site-footer-section site-footer-section-1"> <div class="ast-builder-layout-element ast-flex site-footer-focus-item ast-footer-copyright" data-section="section-footer-builder"> <div class="ast-footer-copyright"><p>Copyright © 2022 robleydesign.com | Powered by Digimetriq</p> </div> </div> </div> </div> </div> </div> </footer><!-- #colophon --> </div><!-- #page --> <a href="#top" class="pk-scroll-to-top"> <i class="pk-icon pk-icon-up"></i> </a> <div id="ast-scroll-top" class="ast-scroll-top-icon ast-scroll-to-top-right" data-on-devices="both"> <span class="ast-icon icon-arrow"><svg class="ast-arrow-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="26px" height="16.043px" viewBox="57 35.171 26 16.043" enable-background="new 57 35.171 26 16.043" xml:space="preserve"> <path d="M57.5,38.193l12.5,12.5l12.5-12.5l-2.5-2.5l-10,10l-10-10L57.5,38.193z"/> </svg></span> <span class="screen-reader-text">Scroll to Top</span> </div> <script type="text/javascript" data-cfasync="false">var bU="https://robleydesign.com/wp-content/plugins/wp-youtube-lyte/lyte/";var mOs=null;style = document.createElement("style");style.type = "text/css";rules = document.createTextNode(".lyte-wrapper-audio div, .lyte-wrapper div {margin:0px; overflow:hidden;} .lyte,.lyMe{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;background-color:#777;} .fourthree .lyMe, .fourthree .lyte {padding-bottom:75%;} .lidget{margin-bottom:5px;} .lidget .lyte, .widget .lyMe {padding-bottom:0!important;height:100%!important;} .lyte-wrapper-audio .lyte{height:38px!important;overflow:hidden;padding:0!important} .lyMe iframe, .lyte iframe,.lyte .pL{position:absolute !important;top:0;left:0;width:100%;height:100%!important;background:no-repeat scroll center #000;background-size:cover;cursor:pointer} .tC{left:0;position:absolute;top:0;width:100%} .tC{background-image:linear-gradient(to bottom,rgba(0,0,0,0.6),rgba(0,0,0,0))} .tT{color:#FFF;font-family:Roboto,sans-serif;font-size:16px;height:auto;text-align:left;padding:5px 10px 50px 10px} .play{background:no-repeat scroll 0 0 transparent;width:88px;height:63px;position:absolute;left:43%;left:calc(50% - 44px);left:-webkit-calc(50% - 44px);top:38%;top:calc(50% - 31px);top:-webkit-calc(50% - 31px);} .widget .play {top:30%;top:calc(45% - 31px);top:-webkit-calc(45% - 31px);transform:scale(0.6);-webkit-transform:scale(0.6);-ms-transform:scale(0.6);} .lyte:hover .play{background-position:0 -65px;} .lyte-audio .pL{max-height:38px!important} .lyte-audio iframe{height:438px!important} .ctrl{background:repeat scroll 0 -220px rgba(0,0,0,0.3);width:100%;height:40px;bottom:0px;left:0;position:absolute;} .lyte-wrapper .ctrl{display:none}.Lctrl{background:no-repeat scroll 0 -137px transparent;width:158px;height:40px;bottom:0;left:0;position:absolute} .Rctrl{background:no-repeat scroll -42px -179px transparent;width:117px;height:40px;bottom:0;right:0;position:absolute;padding-right:10px;}.lyte-audio .play{display:none}.lyte-audio .ctrl{background-color:rgba(0,0,0,1)}.lyte .hidden{display:none}");if(style.styleSheet) { style.styleSheet.cssText = rules.nodeValue;} else {style.appendChild(rules);}document.getElementsByTagName("head")[0].appendChild(style);</script><script type="text/javascript" data-cfasync="false" async src="https://robleydesign.com/wp-content/plugins/wp-youtube-lyte/lyte/lyte-min.js?wyl_version=1.7.19"></script><script id='astra-theme-js-js-extra'> var astra = {"break_point":"921","isRtl":"","edit_post_url":"https:\/\/robleydesign.com\/wp-admin\/post.php?post={{id}}&action=edit","ajax_url":"https:\/\/robleydesign.com\/wp-admin\/admin-ajax.php","infinite_count":"2","infinite_total":"100","pagination":"number","infinite_scroll_event":"scroll","no_more_post_message":"No more posts to show.","grid_layout":"1","site_url":"https:\/\/robleydesign.com","show_comments":"Show Comments","masonryEnabled":"","blogMasonryBreakPoint":"921"}; </script> <script src='https://robleydesign.com/wp-content/themes/astra/assets/js/minified/frontend.min.js?ver=3.9.2' id='astra-theme-js-js'></script> <script src='https://robleydesign.com/wp-content/plugins/powerkit/modules/scroll-to-top/public/js/public-powerkit-scroll-to-top.js?ver=2.8.0' id='powerkit-scroll-to-top-js'></script> <script id='powerkit-table-of-contents-js-extra'> var powerkit_toc_config = {"label_show":"Show","label_hide":"Hide"}; </script> <script src='https://robleydesign.com/wp-content/plugins/powerkit/modules/table-of-contents/public/js/public-powerkit-table-of-contents.js?ver=2.8.0' id='powerkit-table-of-contents-js'></script> <script id='astra-addon-js-js-extra'> var astraAddon = {"sticky_active":"","svgIconClose":"<span class=\"ast-icon icon-close\"><svg viewBox=\"0 0 512 512\" aria-hidden=\"true\" role=\"img\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" width=\"18px\" height=\"18px\">\n <path d=\"M71.029 71.029c9.373-9.372 24.569-9.372 33.942 0L256 222.059l151.029-151.03c9.373-9.372 24.569-9.372 33.942 0 9.372 9.373 9.372 24.569 0 33.942L289.941 256l151.03 151.029c9.372 9.373 9.372 24.569 0 33.942-9.373 9.372-24.569 9.372-33.942 0L256 289.941l-151.029 151.03c-9.373 9.372-24.569 9.372-33.942 0-9.372-9.373-9.372-24.569 0-33.942L222.059 256 71.029 104.971c-9.372-9.373-9.372-24.569 0-33.942z\" \/>\n <\/svg><\/span>","header_main_stick":"0","header_above_stick":"0","header_below_stick":"0","stick_header_meta":"","header_main_stick_meta":"","header_above_stick_meta":"","header_below_stick_meta":"","sticky_header_on_devices":"desktop","sticky_header_style":"none","sticky_hide_on_scroll":"0","break_point":"921","tablet_break_point":"921","mobile_break_point":"544","header_main_shrink":"1","header_logo_width":"","responsive_header_logo_width":{"desktop":"","tablet":"","mobile":""},"stick_origin_position":"","site_layout":"ast-full-width-layout","site_content_width":"1290","site_layout_padded_width":"1200","site_layout_box_width":"1200","header_builder_active":"1","component_limit":"10","is_header_builder_active":"1"}; </script> <script src='https://robleydesign.com/wp-content/uploads/sites/105/astra-addon/astra-addon-632bf5f1b8f654-49388479.js?ver=3.6.11' id='astra-addon-js-js'></script> <script id='fifu-image-js-js-extra'> var fifuImageVars = {"fifu_lazy":"","fifu_woo_lbox_enabled":"1","fifu_woo_zoom":"inline","fifu_is_product":"","fifu_is_flatsome_active":"","fifu_rest_url":"https:\/\/robleydesign.com\/wp-json\/","fifu_nonce":"d3648ecc3f"}; </script> <script src='https://robleydesign.com/wp-content/plugins/featured-image-from-url/includes/html/js/image.js?ver=3.9.2' id='fifu-image-js-js'></script> <script> /(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1); </script> </body> </html> <!-- Page generated by LiteSpeed Cache 5.2.1 on 2022-10-04 02:22:02 --> <!-- Guest Mode -->