How to build a website

If you read my post about failing before you succeed, you know that I built this website from scratch. As with most fields, there is infinite information on this subject, and I am only scratching the surface. I am still building this website and fine tuning things, and therefore will be adding to this post and changing things around as I go along. This post is meant to give a shallow overview of what went into building this website from start to finish, in case you wanted to start your own or were curious about the process.

Creating the website

Before logging into WordPress and adding all the features, the site has to be hosted and a domain name has to be chosen.

1. Buy a domain name (

2. Set up hosting (

3. Connect domain to hosting

  1. Go to namecheap account. Click ‘manage domain’.
  2. Name servers → custom DNS.
  3. Type nameserver 1 and 2 from geekstorage:
    • primary: secondary:
    • Should take effect in 24 – 48 hours.

4. Add domain

  1. Go to cPanel → Login → Domains
  2. Create a new domain
  3. Uncheck ‘Share document root’

5. Install WordPress on website

  1. Go to cPanel on Geekstorage.
  2. Type WordPress in search bar, and click WordPress Softalicious installer.
  3. Complete form.

5. Change http:// to https://

  1. In cPanel: add define(‘FORCE_SSL_ADMIN’, true); to cPanel → file manager → wp-config.php somewhere above “/* That’s all, stop editing! Happy publishing. */”.
  2. On WordPress, go to general settings and change from http:// to https:// for WordPress address (URL) and Site address (URL).


Below are some tips that have come in handy when using WordPress to build my website:


Not all headings are created equal, and they’re best used in the right way. This is the categorization I have learned is the best way to think of which heading to use when:

  • h1-title
  • h2-chapter
  • h3-subheadings
  • h4-sub-subheadings


I have come across several problems that I figure out a solution then forget it. Here is where I will document said problems so I don’t have to stress myself:

  • If the logo is missing from the front page:
    1. Go to edit.
    2. Scroll down to bottom settings, click header.
    3. Add a logo and retina logo image.


Once the website has been built and WordPress is active, plugins can be installed. Plugins add different features to create the user experience of the website once it has been hosted on a domain name. These are the ones I am using or have found useful in the past:

iThemes SecuritySecure website
UpdraftPlusBackup website
Yoast SEOSEO ranking and optimization
LoginizerProtect against brute force attacks on website
Akismet Anti-SpamAnti-spam
Legal PagesCreates templates for necessary legal pages
Create by MediavineRecipe/how-to cards
WPForms LiteSimple contact forms
(rather than mailto:)
Display PostsUses shortcode to display posts differently (website)
Secondary TitleAdds option for second title for posts
Ocean extra (if using OceanWP theme)Adds extra features
Smash Balloon Instagram FeedAdd Instagram feed to site
Insert Headers and FootersDomain verify if need to copy shortcode
(ex. From Smash Balloon Instagram Feed plugin)


HTML code that has come in handy when formatting pages and posts. More in depth information on HTML and CSS can be found here. Never heard of HTML? Read this. (Thanks Sophia!)

FunctionBeginning codeEnd code / Notes
Highlight<span style=”background-color:#2a9600; color:white></span>
Highlighted (marked)<mark></mark>
Crossed out<del></del>
Tab (5 spaces)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Line break<br>
Horizontal line<hr>
Ordered list<ol></ol>
Unordered list<ul></ul>
List point<li></li>
Hover (tooltip)<span title=”text here”></span>
Font size<p style=”font-size:30px”></p>
Text color<p style=”color:gray”> / <p style=”color:#60a500″></p>
Font family<p style=”font-family:verdana”></p>
Text align horizontal<p style=”text-align:right”></p>
Text indent<p style=”text-indent:50px”></p>
Border<h2 style=”border:3px; border-style:solid; border-color:#FF0000; padding: 0.35em></h2>
Scroll from<a href=#id”>text</a>
Scroll to<h2> <a id=”id”>text</a></h2>
Scroll to menu<ul><li> <a href= “#id”> text</a></li></ul>
Horizontal menu<p class=”has-text-align-center”><a href=”#id”>text</a> | </p>
Line spacing<p style= “line-height:20px”></p>
Button<center><button type=”button” style=”border-radius:3px; border:1px><a style=”color:white” href=”link”>Button text →</a></button></center>


For use with:ShortcodePurpose
Pinterest <a data-pin-do=”embedUser” data-pin-board-width=”150″ data-pin-scale-height=”800″ data-pin-scale-width=”60″ href=””></a>Sidebar
<center><a data-pin-do=”embedUser” data-pin-board-width=”1285″ data-pin-scale-height=”600″ data-pin-scale-width=”80″ href=””></a></center>
<script async defer src=”//”></script>In ‘Insert Headers and Footers’ plugin
Display posts customize how posts are display


Colors I use repeatedly around the website. A color code picker can be found here.

ColorColor codeUse
Dark gray#444444Body text
Light gray#797D7FSecondary title

Alt codes

Here are my most frequently used alt codes. More can be found here.

Right arrow26
One quarter¼0188
One half½0189
Three quarters¾0190
Vertical line separator|124

Connect social media accounts


Add a Pinterest widget

Add script to header section in ‘Insert Headers and Footers’ plugin


Use ‘Smash Balloon Instagram Feed’ plugin

Add script to header and body sections in ‘Insert Headers and Footers’ plugin

Adding them to the top bar

Appearance > Customize > Top bar > Social


Pinterest—your specific ‘’ code found when sharing the account and copying the link


Although this may not all seem relevant to you, these components are what build, and is the makeup for the webpage you are using right now. There is endless amounts of information out there, so if you want to create your own website, do more research and you’ll be able to find what you’re looking for.

I hope this was informative in some way (or at least entertaining!) Have you ever built a website or used HTML? How did you learn it? Let me know in the comments!

Leave a Reply

Your email address will not be published. Required fields are marked *

Latest posts