One place for hosting & domains

      Website

      Get Beautiful Syntax Highlighting For Your Website Code with PrismJS

      Introduction

      For websites like ours, code blocks and pre tags are necessities. Making these code blocks look good and function well is a big part of having your tutorial or example understood and easily digestible by your users.

      We’ve been asked quite a few times what tool we use for syntax highlighting here at Scotch. Here it is!

      Today we’ll be looking at a great tool that some of you may have heard of: PrismJS. Prism is a simple, lightweight, and easy-to-use syntax highlighter. It is easily customizable and has support for some plugins to extend its functionality.

      Here’s a quick example:

          <p>For websites like ours, <code>code</code> blocks and <code>pre</code> tags are necessities. Making these code blocks look good and function well is a big part of having your tutorial or example understood and easily digestible by your users.</p>
      
          <p>We've been asked quite a few times what tool we use for syntax highlighting here at Scotch. Here it is!</p>
      
          <p>Today we'll be looking at a great tool that some of you may have heard of: <a href="http://prismjs.com" target="_blank">PrismJS</a>. Prism is a simple, lightweight, and easy-to-use syntax highlighter. It is easily customizable and has support for some plugins to extend its functionality.</p>
      
      • Lightweight Only 2kb minified and gzipped
      • Good Practices To be semantically correct when writing code, you should be using the actual code tag. Some other highlighters just tell you to use pre. Prism makes you use both for good code. It also uses the HTML5 recommended way of defining a language using class="language-xxxx".
      • Browser Support IE9+, Firefox, Chrome, Safari, and most mobile browsers
      • Easy to Extend Prism’s plugin architecture lets you extend the project.
      • Smart Highlighting Has support for embedded, nested, and inline languages (like CSS inside of HTML)
      • Line Highlights Exactly what you’d think. Also ranges of lines. (Plugin)
      • Invisible Characters Show tabs and line breaks (Plugin)
      • Invisible Characters Show tabs and line breaks (Plugin)
      • Autolink URLs and Emails Also use Markdown links in comments (Plugin)

      Implementing Prism into your site is an extremely easy process. Just link to the css and the js files and start highlighting!

      Go get your download from the Prism website.

      Download Prism

      Once you have the files you have configured Prism to your needs, download and include the files into your project.

      Now we will include these files in our project.

      <!doctype html>
      <html>
          <head>
              <meta charset="utf-8">
              <title>Look At Me Prism-ing</title>
      
              <link rel="stylesheet" href="css/prism.css">
      
              <script src="js/prism.js"></script>
          </head>
          <body>
      
          </body>
      </html>
      

      That’s it. Now we are ready to use Prism.

      After you have included the necessary files, using Prism is very easy. All you have to do is add a pre and code tag to your site. Then add a class to your code tag and you have beautiful syntax highlighting.

          <pre>
              <code class="language-markup">
      
                  look at my html stuff here
      
              </code>
          </pre>
      

      Just like that, you have beautiful syntax highlighting. Notice how we use language-markup to highlight HTML files. Here are the different classes to use for the different languages.

      LanguageClass
      HTMLlanguage-markup
      CSSlanguage-css
      JavaScriptlanguage-javascript
      CoffeeScriptlanguage-coffeescript
      PHPlanguage-php
      Rubylanguage-ruby
      Golanguage-go

      Prism lets you extend the features using plugins and it has some great ones ready to go.

      Line Highlight

      Highlight a specific line in your code. Use the data-line attribute on your pre tag.

          <pre data-line="4, 6, 10-13">
              <code class="language-css">
                  body                            { background:#F2F2F2; }
                  h1, h2, h3, h4, h5, h6          { font-family:'Raleway'; }
                  .container                      { width:90%; }
              </code>
          </pre>
      

      Line Numbers

      Add line numbers to your code blocks. Do this by adding a class to your pre tag.

      pre class="line-numbers"

      Other Plugins

      Using Prism is a quick and easy way to get beautiful syntax highlighting for your code. There are other alternatives out there, but we feel that Prism does the job well and is incredibly easy to use.

      If you have any favorite tools for showing off code or anything similar, sound off in the comments.

      How To Inspect A Website In Any Browser [Chrome, Safari, Firefox]

      Think of the internet as a giant iceberg. The average user only sees the tip of the surface: the website interfaces shown on our screens, but every webpage rests on massive foundations of code.

      Lines and lines of HTML, CSS, and JavaScript synthesize to construct the experiences we mindlessly scroll and tap through daily.

      What if you could peek behind the curtain?

      The ability to inspect website code lives directly inside your browser. Today’s popular browsers like Chrome, Firefox, and Safari contain built-in developer tools with the Inspect Element feature that helps you play around with the front-end technologies of any web page.

      This guide will teach you how to access and use the Inspect Element feature in all three browsers. We’ll also discuss what we can achieve using these browsers’ developer tools and how Inspect Element helps.

      Let’s dive right in!

      What Is Inspect Element?

      Inspect Element is a utility, usually found within your browser’s developer tools, that lets you view and manipulate the code — HTML, CSS, and JavaScript — that constructs any webpage.

      When you open Inspect Element, it shows you various code segments that build the website.

      You can highlight page sections to reveal the corresponding source code. Alternatively, clicking on a line of the original source code will highlight its matching visual element on the rendered page. This linking of front-end code and design lets you understand how websites are built.

      Inspect Element is a utility, usually found within your browser’s developer tools, that lets you view and manipulate the code — HTML, CSS, and JavaScript — that constructs any webpage.

      Nerd Note: Inspect Element allows digital marketers to see how specific changes will affect the appearance of a web page without making any changes to the live site. This can help test new CTA buttons, drop-down menus, color schemes, and other design elements. You can even see if your website is responsive on different devices.

      You can tweak text content, colors, fonts, layouts, animations, and more, to preview changes. The webpage remains unaltered externally, and refreshing returns your local view to the original state.

      Who Is It For?

      While Inspect Element is primarily considered a web developer tool, its practical uses span beyond coding. Here’s how various roles can benefit:

      • Developers: Debug layout issues, test code edit, and improve site performance.
      • Designers: Visualize new style ideas and preview designs across devices.
      • Marketers: Check SEO data, export icons/images, and modify text locally.
      • Writers: Anonymize screenshots and locally edit articles.
      • Support: Identify problems for documentation.
      • Students: Learn the implementation of web technologies.

      Essentially, anyone involved with websites whether it’s building, designing, running, writing about, or just using them, can discover new perspectives through inspection.

      Let’s look at exactly why you should start inspecting elements on the web.

      Why Inspect Websites?

      Let’s explore the key functions of the Inspect Element feature to understand how websites are constructed.

      1. Debug And Fix Problems

      Finding and fixing bugs is a massive use case for inspection tools. Developers can dive into the code to troubleshoot when a website appears broken to determine if it’s an issue with styling, layout, responsiveness, etc.

      Elements causing errors on the page are visually displayed in the inspector, allowing developers to narrow down the issue code quickly.

      DreamHost webpage with h1 highlighted and the corresponding code highlighted on the right in the inspect tool

      Since values can be tweaked live to non-destructively test fixes, it becomes easy to find the fix.

      Inspection tools also provide access to the Console panel. This allows for more advanced debugging and running custom JavaScript to see how the page reacts.

      So when tackling front-end and back-end website bugs, Inspect Element gives the power to unravel where problems originate.

      2. Understand Web Development

      For new developers still learning HTML, CSS, or JavaScript, inspector tools greatly assist the learning process. Inspect Element lets you see professional implementations of what you’re trying to achieve on your website. Ultimately, helping improve your implementation.

      You can also test how changing elements and content in HTML impacts the page.

      the same DreamHost page pointing towards the h1 and the page code called "font-weight"

      For example, adjusting margin values to observe spacing shifts or targeted nested elements using CSS descendant selectors. The real-world context also sticks better than reading through textbook examples.

      Plus, seeing how expert web developers structure and optimize sites provides a blueprint for coding your pages. The ability to experiment coupled with viewable source code from popular sites facilitates rapid growth.

      3. Test Designs and Content

      Web designers frequently use inspector tools to mock up style changes quickly. Testing variations — like new fonts, resized elements, color palettes, etc. — can be done instantly without affecting production code.

      the same DreamHost webpage with the h1 highlighted and the inspect code showing "font-family" changed to times new roman reflected in the h1

      For example, compare typefaces to determine ideal readability or change the button colors to see what they look like. With Inspect Element tools, you can do that right within your browser instead of making the changes in an external device like Photoshop or Figma.

      Similarly, for writers and marketers, modifying text locally helps preview content and layout adjustments. From testing paragraph widths to inspecting metadata, easy editing without needing access to Content Management System (CMS) backends is valuable.

      DreamHost Glossary

      Content Management System (CMS)

      A Content Management System (CMS) is a software or application that provides a user-friendly interface for you to design, create, manage, and publish content.

      Read More

      4. View SEO Data

      Browser developer tools provide vital insights when considering a web page’s SEO and social meta. Examining meta tags — descriptions, titles, open graph tags — most crucially influences how links appear in SERPs and when shared.

      long inspect element field pointing out "meta data" fields, one for DreamHost and one for twitter with og:titles

      For example, most social networks read the og:title og:description. All this information is in a website’s <head> elements.

      5. Check Performance

      Inspect Element tools also cater to web performance audits for improving overall site speed and loading behavior. In Chrome, the Network tab will give you a load timeline, which includes how long each element took.

      the same DreamHost web page showing the performance audits within Inspect Element on Chrome

      When inspecting pages, you can view total download times and resource requests and break this data into individual elements. Find out which images, fonts, or JavaScript files drag down performance. Then, address the issues directly: compress assets, implement caches, and defer nonessential scripts.

      Network inspection also allows throttling to mimic slow connections on mobile or poor wifi. Discover usability flaws by measuring loading times across simulated connections. Are pages still functional on 3G? Do some files block rendering? This information can help you improve your overall website page speed.

      6. And More

      This just scratches the surface of what’s possible through Inspect Element. We’ve mainly focused on use cases for developers, but designers, writers, and marketers can accomplish many goals discussed prior without coding expertise. You’ll also find analyzing accessibility and security vulnerabilities often leverages inspection capabilities.

      Now that you hopefully better understand all you can achieve by inspecting web pages, let’s quickly look at how these tools work before jumping into practical walkthroughs.

      How Browser Developer Tools Work

      The core of all major browser Inspect Element interfaces revolves around the Document Object Model (DOM).

      When a web page loads, the browser processes markup (HTML), presentation (CSS), and logic (JavaScript) to construct a DOM instance.

      The DOM essentially represents the page structure as a tree of parent-child node elements. Developers can instantly interact with this live representation using inspector tools to read, edit, and visualize corresponding changes.

      So when you toggle CSS declarations on and off while inspecting, rewrite conditional logic, or hide specific HTML nodes, for example, the matching DOM nodes update in real-time. This is how alterations display live without actually changing any source files externally.

      Behind the scenes, browsers apply changes made through inspection tools by temporarily overriding the default CSS and HTML. These modifications only exist for your browser and revert to normal once you refresh the page (or just close the tab and come back later).

      Inspecting Elements In Google Chrome

      As one of the world’s most popular browsers today, Google Chrome, accounting for over 70% of the browser market share, is equipped for nearly any inspection needed out of the box.

      Pressing Ctrl+Shift+I (Windows) or Command+Option+I (Mac) instantly launches Chrome’s DevTools interface to analyze any available webpage or web app. You can also inspect specific elements on the page.

      same DreamHost web page showing the inspect element pages in dark mode

      Let’s break down how to access Chrome’s Inspector, navigate page elements efficiently, and test joint manipulations – from editing text to simulating mobile devices, touchscreen devices, and more. You can use the phone icon on the top-left corner of the console window.

      1. Open Developer Tools

      Start by navigating Chrome (or any Chromium-based browser) to any webpage you want to inspect. Right-click anywhere on the page and select Inspect from the context menu.

      Alternatively, use the above keyboard shortcut.

      DevTools appears docked at the bottom of your browser window on larger screens as default. You can open it as a separate window or change docking locations, too — click on the three vertical dots in the upper-right corner of the Inspect Element window.

      Wherever it renders, the first thing you’ll see is the main elements panel which shows all the HTML code.

      inspect element window devtools view in html starting with <html class> into the <head>

      Various other analysis tabs can be accessed across the top: Console, Sources, Network, etc.

      Depending on where the Inspect element window opens, one portion will show the page source code starting with <html>. As you click on different things in the code, the right (or lower) side shows the styles, including fonts, colors, margins, paddings, etc.

      This linking between code and appearance facilitates understanding and experimenting with changes. But before manipulating anything, let’s see how to target elements for inspection efficiently.

      2. Find Elements To Inspect

      As pages grow long and complex, scanning visually for the element you want and locating its code in dev tools can become tedious. Instead, use the node selection tool.

      In Chrome DevTools, click the icon on the top-left corner (of the inspector window) that resembles the selector crossed with the cursor (or press Ctrl/Cmd+Shift+C).

      same dreamhost page with company logo highlighted and the corresponding code highlighted in the inspect element box

      Your mouse now toggles element selection mode. Hover over any visual entity on the page and notice how the inspector code automatically highlights its DOM node.

      Now, clicking any element on the page will directly highlight the code that makes the element appear on the page. You can also see the styles right or below the HTML code. You can also use the search box or search tab to find elements. Alternatively, Ctrl+F (Windows) and Cmd+F (Mac) work too!

      Let’s see what we can edit with the elements selected.

      3. Interact With The DOM

      The inspect element feature also provides a way of interacting with the Document Object Model (DOM) — the structured representation of page elements visible in the editor.

      Developers can leverage the DOM to reshape content, style, and interactivity directly within Chrome DevTools.

      Some common ways to manipulate elements include:

      • Editing text by making content fields directly editable.
      • Toggling CSS styles like colors and fonts to visually test styling changes in the CSS panel.
      • Modifying component attributes like links and buttons to reshape functionality.
      • Rearranging structural elements to prototype alternative layouts.

      The DOM updates live with changes made in the inspector view. So any tweaks preview instantly in the browser, then reset upon refresh, making experiments low risk during development.

      4. Test Responsiveness

      Beyond editing individual elements, inspector tools also provide environments to test responsiveness across a variety of devices and viewports.

      Chrome DevTools includes device mode simulation. You can select presets to emulate standard phone or tablet resolutions and touch capabilities. Or use the more advanced options to manually configure exact dimensions, pixel ratios, CPU throttling, and other metrics.

      This allows rapid validation of aspects like:

      • Layouts at various breakpoints.
      • Touch target spacing for mobile users.
      • Site performance on low-powered devices.
      • Accessibility on different hardware.

      The ability to preview pages on simulated mobile screens during development helps perfect responsiveness and progressive enhancement delivery. Testing across a wide spectrum of emulated devices ensures broad browser and device support.

      Inspecting Elements In Firefox

      Firefox provides its webpage inspection tools rivaling the functionality of Chrome DevTools. Access Firefox Inspector using the same Inspect Element shortcuts as Chrome: Ctrl+Shift+I (Windows) and Cmd+Opt+I (Mac).

      You can also use the keyboard shortcut Ctrl+Shift+C (Windows) and Cmd+Opt+C (Mac) to open the inspect element panel, allowing you to click on an element on the page to jump to the code directly.

      same dreamhost page showing the inspect element box in firefox

      1. View DOM Attributes

      When analyzing complex interfaces, focus states and dynamic effects rely on HTML attributes instead of CSS. Right-click any element within Inspector views and choose Show DOM Properties.

      right-click menu from inspector box highlighting the "Show DOM Properties" option

      This displays all native attributes associated with the node. You can directly edit values here to modify component behavior through the Inspector rather than requiring code changes.

      For example, adjusting the range slider min/max and step increments visually sets bounds, changing the checkbox/radio button names groups toggles, overwriting dataset properties hooks different remote data, and the list goes on and on.

      2. Work Visually With Box Model Diagrams

      Firefox eases inspection by showing the padding, borders, and margins right as you move your cursor around the website.

      same dreamhost webpage showing different elements (image, h1) within and overlapping grids

      When clicking any node, the Inspector panel cycles between three states: geometry off, box model overlay only, and both overlay plus markup outlines.

      This can be useful when you want to test if your spacing, padding, and margins have been appropriately applied to the elements.

      It also makes it more straightforward to fix any issues since you can click through specific elements and see precisely what CSS styling is affecting them. Geometric analysis here can help beginners grasp spatial relationships faster.

      3. Edit Colors With A Color Picker

      Within Inspector, click any color swatch next to any property accepting colors like background, border, etc. It’ll show you a color slider, alpha setting, and a color picker to pull colors from your open page.

      Within Inspector, click any color swatch next to any property accepting colors like background, border, etc. It’ll show you a color slider, alpha setting, and a color picker to pull colors from your open page.

      You no longer need to spend time guessing color codes or checking your design assets for the code being used. Pick it from existing elements or even images on the page.

      Inspecting Elements in Safari

      Safari offers the Webkit Inspector for inspecting pages on macOS systems primarily. However, you need to enable the development menu before accessing it.

      Open Safari and click Safari from the Menu > Settings > Advanced. Check the box for “Show features for web developers.

      show features for web developers shown at the bottom page of the advanced options

      Now you can visit any website and right-click to see the “Inspect element” option available,

      right-click menu showing the "Inspect Element" option

      You can also use the keyboard shortcut, Cmd+Opt+C, to access the Inspect Element feature.

      Timelines And Network Speed

      Similar to most other browsers, Safari offers powerful timelines within the Safari Inspector. The resources list helps you instantly identify which files are causing rendering delays and what the reason could be. You can also see what scripts are blocking the page load.

      3D View Of Website Layers

      right-click menu showing the "Inspect Element" option

      If you want to analyze the layers that make up the website, simply go to the Layers tab and you’ll be presented with a full 3D model of all the layers

      Ways To Use Inspect Element

      Now that we’ve set up inspector tools let’s discuss some practical ways they can be used. Here are just a few common usage examples:

      Change Text Or Images

      One helpful capability is modifying textual content or image assets directly within the editor. You can tweak headlines, swap logos, anonymize details, and more.

      To edit any text or images, inspect the element you want to change first, then double-click within its bounds in the code editor to make the content editable.

      Input anything you want, and press enter to make the changes live (temporarily).

      Change Colors, Fonts, And Styling

      When inspecting various elements like links, buttons, menus, or galleries — you’ll notice attributes that define associated behavior like href destination URLs, carousel view box data sources, and more.

      Much like editing textual content and CSS properties and style sheets, these HTML-level traits can be manipulated directly within Inspector.

      The DOM updates these changes on the spot. So you can immediately see how the changes reshape component functionality without coding:

      • Modify the href of links and buttons to redirect clicks elsewhere temporarily.
      • Adjust tab role and aria tags to test accessibility improvements.
      • Swap thumbnail image src attributes while building galleries.

      Change Element State

      Beyond basic styling, Inspector tools also allow modifying interactive element states like hover, focus, and active. Right-click elements and use the Force state options (Google Chrome) to visualize how components appear during usage.

      right click menu opened over inspect element with "Force state" option highlighted

      For example, toggle a button’s active state to ensure the pushed effect is visible to users. Check disabled field borders to see if they offer proper contrast. Validate menu links highlight appropriately on focus during keyboard navigation testing.

      Hide Or Delete Items

      Finally, bulk hiding or deletion of page elements is possible, too. It can help identify unnecessary code bloating page size, block elements from rendering correctly, or unexpectedly hide desired content from users.

      close up of dreamhost webpage with inspect element highlighting a <p class> code

      To try this, simply highlight any element in the code and press delete to remove it from the rendered view instantly.

      In the screenshot, we have deleted the DreamHost’s homepage heading from our view. You can do much more with Inspect Element as you explore it.

      FAQs

      Can you use Inspect Element on any website?

      Yes, Inspect Element works universally across all modern websites. However, some websites render code on the server side and only push JavaScript objects to the front end. This is generally done to prevent web scrapers from pulling data, and it can become difficult for you to understand the site structure using Inspect Element.

      Do changes made in Inspect Element save permanently?

      No. Any edits made via inspector tools only temporarily render locally within your browser view. Refreshing reverts to the default external page content. Changes will not impact actual source files whatsoever.

      Can other users see tweaks when inspecting websites?

      Inspect Element edits cannot be viewed by other users browsing websites, even while signing into the same browser profile across multiple devices. Think of changes as exclusive to your machine only.

      Are there other developer tools beyond Inspect Element?

      Absolutely. As mentioned earlier, Console, Sources, Network, and other analysis tabs also prove invaluable during development. Plus, browser extensions extend DevTools capabilities even further.

      Don’t Just View Websites, Interact With The Code

      Playing around with the Inspect Element feature peels back the curtain on how websites work. Letting you peek at the HTML, CSS, and JavaScript underneath any page you click can easily help you understand why something looks and feels the way it does.

      So, as you surf around, keep that Inspect Element tool handy. Let curiosity guide you as you click around to see what makes things appear as they do. Who knows, you might just pick up new methods to help the web become an even more accessible and fun place!

      Wondering How To Make A Website? Here’s A Complete Tutorial

      Creating your own website may seem daunting, but with the right guidance and tools, anyone can build an effective online presence. In fact, as of 2023, WordPress continues to dominate, being used by over 42 percent of all websites worldwide.

      Whether you pick WordPress or another website builder, this step-by-step guide will walk you through the key aspects of designing, building, and launching your fully functional website from scratch.

      We’ll cover everything from choosing a domain name to finding a web host, selecting the right platform, creating compelling content, and more. And by the end, you’ll have the confidence and knowledge to bring your web vision to life. So let’s get started!

      Can Anyone Build A Website?

      The short answer? Yes!

      While coding can allow advanced customization, it is by no means required to have a polished online presence.

      Thanks to intuitive drag-and-drop website builders offered by WordPress and most other platforms, creating a website is more accessible than ever, even for beginners. And with the pre-designed templates and point-and-click widgets to add features, you can build responsive, mobile-friendly pages in minutes.

      This means you can focus on bringing your vision to life instead of building your skillset.

      And with AI advancements like chatbots and copywriting tools, websites are only getting easier to craft for people from all backgrounds. If you have a passion project, small business, or simply want an online home for your thoughts, you have all the tools needed to make that happen on your own.

      The question now is, how do you build your website?

      How To Build Your Website In 7 Simple Steps

      While every website journey is unique, these seven steps form the typical workflow for crafting your own site from the ground up. Let’s explore each of these website-building steps in more detail.

      Step 1: Identify The Purpose Of Your Website

      Before purchasing a domain or signing up for web hosting, you must clearly define your website’s purpose.

      Understanding exactly what you want to achieve with your online presence will inform many choices: from site structure to platforms, features, and design aesthetics.

      Pinpoint Your Business Goals

      If building a business site, begin by narrowing down your goals.

      • Are you building a personal website for your freelance services?
      • Are you planning on selling products?
      • Creating a lead generation site growing your email list and contacts?
      • Or building an online course or membership site with gated content?
      Free AI Tools

      Business Name Generator

      Get a unique and memorable name that will make your business stand out from the competition. Try our free Business Name Generator now!

      Start Generating

      Clearly jotting down your objectives will guide your website setup process, ensuring you select platforms with appropriate functionality built-in.

      For example, ecommerce sites require shopping carts and payment gateways, while lead-generation sites need forms and marketing automation. Defining these details early allows you to pick the best tools for the job right from the get-go.

      Map Out Your Content Strategy

      four step content strategy: planning, creation, maintenance, unpublishing

      Once your objectives are pinned down, begin brainstorming the pages, posts, and media content you’ll need to execute your goals successfully.

      These elements form the beating heart of your website, useful tools for engaging visitors and potential customers and turning them into customers or adding their email addresses to your database.

      You can automatically send the collected emails to multiple inboxes using a service like ForwardMX. It also helps you create catch-all email addresses that consolidate every incoming email in a single inbox that you can sort based on custom rules.

      At this stage, don’t worry about the copy on the pages. Focus instead on structuring your information at a high level.

      For example, an ecommerce store might include pages like:

      • Homepage
      • Product category pages
      • Individual product pages for product descriptions
      • Shopping cart
      • Checkout pages
      • FAQ
      • Contact
      • About us

      Meanwhile, a personal site may have:

      • Homepage
      • About me
      • Blog
      • Services
      • Portfolio
      • Contact

      Pro Tip: Create a basic site map to visualize the connections between pages and how your target audience will navigate your content.

      With your site goals, purpose, and content pillars defined, you’ll have the right strategic foundation to start building. And you can move to the next step.

      Get Content Delivered Straight to Your Inbox

      Subscribe to our blog and receive great content just like this delivered straight to your inbox.

      Step 2: Choose A Domain Name

      Your domain name is one of the first impressions visitors will have of your brand. A domain is a unique web address that points visitors to your online destination. Think of this as your business address – it helps people know where your business exists online.

      For example, “dreamhost.com” or “johnsmith.blog.”

      Picking a short, memorable domain name relevant to your offerings can pay dividends when driving traffic and conversions.

      Here are some best practices for choosing a good domain:

      Keep It Short

      Shorter domains with fewer syllables are easier to convey verbally and remember.

      If your personal name or business name is long, consider abbreviating to the shortest unique and meaningful acronym.

      For example, Coastal California Fruit Farm -> CC Fruit Farm

      Make It Descriptive

      Short doesn’t necessarily mean vague. Try to pick a brandable domain that conveys what the site could be about without opening it.

      For instance, the domain “dreamhost.com” is designed to be brandable. But we include the word “host” to imply that it’s some sort of hosting.

      Similarly, add relevant keywords in your domain related to your niche, offerings, and potential customers. This helps visitors immediately understand your site’s purpose while boosting Search Engine Optimization (SEO) authority around your core topics.

      DreamHost Glossary

      Keyword

      Keywords are words or phrases that describe the content of a website or web page. They help search engines match these elements to relevant searches.

      Read More

      Choose A TLD (Top-Level Domain)

      The letters after the dot are known as the top-level domain, or TLD. Common options include:

      • .com – The most popular and versatile option
      • .net – Originally for network providers, now widely used
      • .org – Traditionally used by non-profits and organizations
      • .info – Focused on providing information
      • .blog – Implies that the site is a blog

      .com tends to be the default choice for businesses and personal sites. But review all options to see if another extension may be more fitting and available.

      Check Availability

      As you brainstorm potential names, verify domain availability in real-time before getting attached to an unavailable option.

      screenshot of dreamhost's domain checker showing an example search of "dreamhost.com" and "Dreamhot.com" is unavailable, but there are some other options

      It may be possible that your favorite .com domain is taken. Start by trying some variations in the search box. Try adding your location or an extra keyword relevant to your niche until you land on an available option you’re happy with.

      Register A Domain

      Once you’ve selected an available domain, it’s time to officially register it in your name. You’ll need to sign up with a domain name registrar like DreamHost, Google Domains, Namecheap, etc.

      The domain registration process only takes a few minutes and costs about $15 per year excluding any offers the registrar may have.

      If you plan to go with one of DreamHost’s hosting plans (discussed next), you can get the domain for free for the first year. You can skip this part and jump straight to getting hosting. 

      But if you still want to buy the domain separately, you’ll be asked for:

      • The domain name you want to register
      • Your contact details
      • Payment information

      Once purchased, you’ll fully own and control that custom domain name (as long as you keep renewing it).

      It’s time to shift gears to web hosting and servers to store your actual website files and data.

      Step 3: Pick A Reliable Web Host

      Now that you have a domain mapped out, it’s time to look at web hosting services.

      What’s a web host? A web host is a company that provides servers where your website’s files physically live. It takes care of serving the files to your visitors.

      When someone types your custom domain name into their browser, the web host pulls up the right site files to display based on that request.

      There are many types of hosting plans and services, but we’ll focus on the three most common options relevant for small sites and online stores:

      three main hosting solutions: shared (like an apartment), VPS (like a townhome) and dedicated (like a house)

      Shared Hosting

      With shared hosting, your site lives on a server that also hosts hundreds or thousands of other websites owned by a hosting provider.

      Resources like disk storage space and memory are pooled together and shared by all sites using that server. It’s by far the most budget-friendly hosting option but offers less control.

      DreamHost, for example, offers reliable shared hosting plans starting around $2.59 a month. These basic shared hosting plans are ideal for personal sites, blogs, and small business pages just getting off the ground.

      VPS Hosting

      Short for Virtual Private Server hosting, VPS plans allocate a certain portion of a physical server dedicated just for your site.

      DreamHost Glossary

      VPS Hosting

      A Virtual Private Server (VPS) is a virtual platform that stores data. Many web hosts offer VPS hosting plans, which give site owners a dedicated, private space on a shared server.

      Read More

      So while the underlying machine is shared, your site is quarantined with its own partitioned resources like storage, memory, and processing power.

      This balances robust performance and control with affordability compared to dedicated servers. Prices start around $5 per month at Digital Ocean and Vultr.

      If you find the above VPS services too technical, DreamHost’s VPS plans are managed for you so you get the benefit of dedicated resources without having to manage the server updates, security, etc.

      VPS hosting works well for medium traffic sites that need more juice than basic shared hosting provides.

      Dedicated Hosting

      As the name suggests, dedicated hosting gives your website its very own physical machine accessible only by you. These can be expensive and are generally not required for sites just starting out.

      However, dedicated hosting offers maximum control of your site and data. They generally start at $100+ per month depending on the server configuration you choose.

      The isolation and raw power make dedicated servers ideal for large, high traffic sites and mission-critical web apps that need the highest performance and security.

      Key Hosting Factors

      As you evaluate options, look for hosts that offer:

      • High uptime – The % of time servers are live and accessible should be 99%+
      • Fast page load times – Quick server response for snappy visitor experience
      • SSL certificates – Free HTTPS encryption for secure sites
      • CDN support – For accelerating static content delivery
      • Managed support – 24/7 service via chat, email addresses, phone

      Step 4: Choose Your Platform

      Your website building platform powers how you’ll design, manage, and update your site over time.

      There are two primary options: self-hosted CMS software like WordPress, or dedicated SaaS website builders like Wix or Squarespace.

      Let’s compare the pros and cons of each approach.

      Self-Hosted CMS

      A content management system (CMS) is software for publishing and modifying website content without needing to code everything from scratch.

      DreamHost Glossary

      Content Management System (CMS)

      A Content Management System (CMS) is a software or application that provides a user-friendly interface for you to design, create, manage, and publish content.

      Read More

      While platforms like WordPress and Joomla require more technical lift to initially configure, they offer a variety of customizable features and scalability down the road.

      Let’s focus on self-hosted WordPress since over 62% of all CMS sites run on this open source software.

      The term “self-hosted” means you independently install WordPress software on server infrastructure you control, rather than using WordPress.com’s hosted service. This allows full ownership over your site’s fate.

      Here are the main advantages of using self-hosted WordPress:

      Total Design Flexibility

      screenshot of a design page showing customization options for navigation, styles, pages, templates, and patterns

      With open-source WordPress, both your site’s HTML/CSS code and SQL databases are under your control locally. This allows endless customization options for tailoring page design and functionality exactly how you like using code, themes, and plugins.

      Robust Features Via Plugins

      screenshot of WordPress plugins, featuring YITH Slider for page builders and Easy restaurant menu manager

      WordPress grants access to over 55,000+ plugins. This means you can expand your site’s capabilities using ecommerce plugins, forums plugins, contact form plugins, security plugins, and more without needing to code extensive functionality from scratch.

      Mature Platform With Long-Term Viability

      With a vibrant community having supported WordPress for 20 years and counting, you can rest assured it has staying power if you ever pause working on a site and pick it up years later. The platform will still be there.

      The main downside is WordPress has a steeper learning curve compared to some website builders. But with the right host, it’s very manageable for most motivated beginners.

      Website Builders

      No coding or configuration required. Website builders allow you to launch a site in minutes by tweaking settings rather than needing to install software.

      screenshot "WordPress, Your Way:" Build and grow your website with the best way to WordPress. LIghtenting-fast hosting, intuitive, flexible editing, and everything you need to grow your site and audience, baked right in. Get started."

      With intuitive drag-and-drop interfaces and built-in mobile responsiveness, all you have to focus on is pumping out content that engages a wider audience.

      Some of the most popular website builder platforms include:

      • WordPress: Over 42% of all sites worldwide use WordPress. Available as a one-click installable application from the control panel of most hosting providers.
      • Wix: Over 200 million sites published and best for visual customization
      • Squarespace: Hundreds of templates and excellent multi-media support
      • Weebly: Easy to use with deep commerce features
      • Godaddy Website Builder: Easy and built into the Godaddy

      Website builder platforms make launching sites fast and frustration-free, but you should know their convenience and simplicity comes at the cost of long-term flexibility.

      Over time, modifying templates or needing advanced features not part of integrated offerings may prove challenging compared to open-source CMS software.

      But for launching beautiful sites in record time that “just work” builders can’t be beat.

      Step 5: Build Your Website

      Site purpose defined? Check. Domain purchased? Done. Web hosting selected? All set. Platform chosen? Yes.

      Time for the fun part — bringing your website to life!

      Start With Themes Or Templates

      Most CMS systems and website builders include a gallery of professionally designed themes and templates to apply to new sites.

      screenshot showing different website themes, with the "business" tab selected

      These act as foundations which determine default page structure, layout, fonts, colors, and more based on the type of site you want to build.

      For example ecommerce store templates versus personal portfolio themes.

      Rather than build pixel-perfect designs from absolute scratch, these templates give you the creative freedom to start designing and reach closer to your vision as quickly as possible.

      The template can be modified and enhanced by:

      • Adding/restructuring content blocks
      • Choosing a different color palette
      • Tweaking fonts
      • Importing images and graphics

      Built-in customization settings also make fine-tuning templates fast and easy without needing design expertise. Many modern website builder platforms make templates fully mobile responsive out of the box, meaning they dynamically resize and reflow to look great on any device.

      Pro Tip: Resist overstuffing templates with custom elements that detract from your core message. Find one perfect theme for your site, then focus on best practices for clean, scannable layouts relevant to your niche.

      Add Plugins To The Mix

      One advantage of open-source platforms like WordPress is being able to enhance the built-in, essential features using the hundreds of add-on plugins.

      screenshot of plugin options featuring Yoast SEO Premium, Sensei Pro, Woo Subscriptions, and WPBakery Page Builder

      Plugins are bits of third-party code you activate to add functionality without needing extensive development.

      There are plugins for everything imaginable — SEO plugins, slideshows, contact forms, pop ups, social sharing, reviews, audio embeds, and 50,000+ more free and premium options.

      Browse plugin dashboard on the platform you choose to find relevant tools, read reviews. Then install them with one click from your WordPress dashboard.

      Pro tip: It’s easy to go overboard with plugins and install too many of them. Keep a weekly or monthly schedule where you deactivate and delete any unused plugins to avoid cluttering up your website.

      Optimize For Mobile Devices

      Over 58% of all website traffic comes from smartphones and tablets versus desktops. If your site isn’t focusing on mobile responsiveness, you are alienating the majority of visitors.

      statista graph from 2023 showing optimization for mobile devices with a huge percentage growth around 2017, slight drop in 2019, and then steadily climbing through Q1 of 2023

      Thankfully, most modern platforms make mobile optimization turnkey through responsive frameworks and templates that intelligently adapt screen layouts based on a visitor’s device.

      You should still test your final site across various devices to catch any formatting hiccups. Use Google’s free Mobile-Friendly Test to catch issues.

      For additional guidance, Google’s Mobile Site Design covers core principles for flawless mobile experiences.

      Step 6: Add Engaging Content

      For visitors to stick around and convert into leads and customers, your website needs compelling content that speaks to their problems and interests. Here are a few tips to create engaging content in 2023 and beyond.

      Using Visual Media

      Instagram showed the world how powerful visuals and images can be. While text continues to be the primary medium for communication, images, infographics, animations, and video breathe life into websites while catering to different learning styles.

      When adding visuals:

      For video and audio, turn to multimedia-focused platforms like YouTube, Vimeo, Spotify, and SoundCloud. Their embedded players let you feature rich media while leveraging each network’s delivery infrastructure.

      Optimize Your Site For Search Engines

      Beyond visitors that type your URL directly into the browser, most discover websites through search engines like Google surfacing relevant results.

      That’s why SEO should be part of your strategy from day one.

      The good news is SEO strategies are largely about ensuring your content provides value around keywords and topics people actually search for. Do that well, and search engines will eventually surface your content. Here are some core SEO best practices to weave in as you build out your site:

      • Conduct keyword research to identify terms and questions with sufficient search volume that align with your offerings. Keyword planner tools like SEMRush and Ubersuggest help uncover SEO opportunities.
      • Create useful, original long-form content that answers search queries in more depth than competitors. Include related keywords throughout naturally.
      • Use descriptive slugs with target keywords when naming site pages rather than generic IDs.
      • Format content for scannability with bullets, bolded keywords, sub-headers, short paragraphs, etc. Break up dense blocks of text.
      • Enable SSL Encryption via HTTPS which boosts SEO rankings and breeds visitor trust.
      • Seamlessly embed multimedia like YouTube videos and Spotify podcasts. External media drives search visibility.
      • Build backlinks by having other reputable sites link back to your content over time, spreading domain authority.
      • Engage social media to amplify visibility as fans share your link. Encourage social actions with follow/share buttons.

      SEO can feel overwhelming, but if you just focus on providing genuine value around your niche topics, search visibility will come in time.

      Connect Google Analytics

      Understanding how visitors interact with your content is key for continually optimizing it. Install Google Analytics to identify visitor metrics like:

      screenshot of Google Analytics dashboard focusing in on "users in last 39 minutes" with a total of 38

      • Traffic source
      • Pages visited
      • Bounce rates
      • Conversion actions
      • Location demographics

      These behavioral insights and many more provided by Google Analytics can help you double down on popular pages while improving or removing underperforming sections based on real user data.

      Step 7: Review And Publish Your Site

      Before releasing your slick new website to the public internet, be sure to thoroughly test and review all pages to catch any lingering hiccups.

      • Check page speed metrics using Google PageSpeed Insights and GTmetrix. Optimize images and use cache plugins to hit site loading benchmarks.
      • Verify all page links and site navigation menus work as expected on both desktop and mobile. Fix broken paths.
      • Spell-check all text content and test embedded media formats to prevent crashes.
      • Confirm security protections like SSL certificates are active and using the latest platform versions.
      • Review site on multiple browsers like Chrome, Safari, and Firefox to catch CSS quirks.

      When everything looks polished and performs snappily, hit the publish button within your admin dashboard to move your site from staging to live.

      Give yourself a high five for all the vision, strategy, and elbow grease you’ve poured in. You’re now sharing your website with the world!

      Now focus on creating stellar content that attracts visitors while finding marketing opportunities to drive qualified organic traffic over time. You can also consider launching social channels to further amplify your web presence.

      Website Building FAQs

      Let’s wrap up with answers to some commonly asked questions about crafting your website:

      Is it easy to make a website?

      Thanks to intuitive drag-and-drop website builders and themes, anyone can build their site in 2024 without needing to code or hire a professional. And with the artificial-intelligence-based copywriting tools that are available, it’s all the easier to get started.

      That said, while launching a basic online presence is more accessible than ever, continually growing, optimizing, and sustaining a site in the long run still requires some learning and effort.

      Should I make my website or pay a web designer?

      If you have a strong vision and want full control over every aspect of your online presence and user experience, then designing your website can be incredibly rewarding.

      However, if designing is not your thing, hiring a web designer may be money well spent, allowing you to simply handle content and promotion.

      For simple personal sites and early-stage commercial projects, DIY site building is likely sufficient.

      If you’re launching a business website supporting your enterprise products and services, the upfront cost of custom development pays dividends in the long run.

      How much does it cost to build a website?

      The cost to build a website runs a huge gamut from $0 to millions depending on complexity, custom features, visual design needs, and whether you take the DIY approach.

      • At the low end, using WordPress Content Management System (CMS) and shared web hosting allows you to launch your site for less than $100/year.
      • Professionally designed WordPress sites tend to run $2,000 – $5,000+ with custom features and themes.
      • For an online store with product inventory, expect an investment between $6,000 – $15,000 to cover ecommerce functionality.
      • Large enterprise websites with extensive custom codebases and infrastructure needs can soar over $100k.

      Let’s Bring Your Website Vision To Life

      And that wraps up our complete, step-by-step guide on making your website from start to finish!

      By now, you should have a firm handle on crafting an effective site strategy, registering the perfect domain, finding affordable web hosting, and other steps for building a website.

      So, rather than feel intimidated looking at other amazing sites, know that everyone starts somewhere on their web-building journey. Stick with it month after month, continually experimenting and learning, and you’ll make incredible progress.

      The key is to not get overwhelmed but rather take the first step with an initial idea. Things will start coming together faster than you think. So now, it’s your time to take action!

      Create a Website for All

      We make sure your website is fast and secure so you can focus on the important stuff.

      shared hosting