You NEED a Website

Feb 27, 2021 Alana Jen

graphic of an entrepreneur sitting on a couch with a laptop

Synopsis

Don’t want to pay a small fortune for a website every month?

You can create your own modern website without breaking the bank.

It can have all of the elements for a good website and can be easily customized to fit your specific needs, including contact forms, Google Analytics, Facebook Pixel, and social media feeds.

And unlike website builders, you won’t have to build your website all over again if you decide to move to another provider (I’m looking at you Squarespace and Wix).

Sound good?

Well, keep reading to get step-by-step instructions on how to DIY your own website.


Overview

I want to start with an overview of all of the pieces we’ll need to fit together to get a functioning website.

In this article, we’re going to download our HTML Editor and write our HTML and CSS.


Writing Our HTML

First up is our HTML file. Although HTML can be written in most basic text editors, like Notepad or TextEdit, it’s preferable to use an HTML editor so that there is built-in support for the language. I think a great editor is Visual Studio. It’s available on both Windows and Mac and the community edition is free so it’s great for our purposes.

Install Visual Studio: Community 2019

Step One:

Navigate to visualstudio.microsoft.com, select “Download Visual Studio” in the left-hand card's dropdown box, select "Community 2019" to start downloading the executable for Windows.

Click "Download Visual Studio for Mac" in the right-hand card's column to download the Community 2019 for Mac.

Left-click the executable (.exe) file after it downloads and follow the installation instructions to install Visual Studio.

screenshot of visual studio community installation page

Step Two:

During installation, Visual Studio will ask you about which packages you wish to install. Feel free to select whichever ones you'd like, however for website development, be sure that "ASP.net and web development" is checked.

screenshot of plugin selection for visual studio community 2019 installation

Now we’re ready to write our HTML.


The HTML Code

Before we get started, you will need to make sure that the following remain true:

  1. The name of your HTML file is index.html
  2. The name of your CSS file is StyleSheet.css
  3. index.html and StyleSheet.css are in the same folder
  4. All of your images and resources are also in the same folder as index.html and StyleSheet.css

Create an HTML file in Visual Studio, name it index.html, and copy and paste the code below into your file.

                                        
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<!--TODO: Update Meta data-->
<!--Helps (a little) with SEO. Replace with your info -->
<meta name="author" content="Alana Jen" />
<meta name="copyright" content="Copyright Enora & Co., Inc. 2020. All Rights Reserved." />
<meta name="description" content="General basic website for cool people." />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!--CUSTOMIZE-->
<!--TODO: Update Page Title (Appears on tab) -->
<title> The Great Company </title>
<!-- Style Sheets (CSS) -->
<!--BOOTSTRAP-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"
integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<!--OUR CUSTOM STYLESHEET-->
<link rel="stylesheet" href="StyleSheet.css" />

<!--FAVICON -->
<!--For step-by-step instructions on how to create a favicon, visit: https://alanajen.com/create-a-favicon -->
<!--TODO: Replace the favicon-->
<link rel="icon" href="favicon.ico" type="image/x-icon" />

</head>
<body>

<!--CUSTOMIZE-->
<!-- Head to: https://getbootstrap.com/docs/4.5/components/navbar/ for more menu styles
and more information on customizing navbars -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand" href="#">
<!--TODO: Replace with your logo-->
<img src="logo.png" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<!--Navbar END -->

<!--HERO SECTION-->
<div class="bg jumbotron">
<div class="headliner">
<!--TODO: Update Headliner and Subliners-->
<h5 class="title">The Great Company</h5>
<p class="subtitle">Creating Something Great
<br />For People Who Are Great
<br /><span class="tagline">Because true greatness is truly great</span></p>
<a class="btn btn-primary" href="#features" role="button">Explore</a>
</div>
</div>

<!--FEATURE SECTION-->
<!--TODO: Update feature title and text-->
<a class="anchorTag" id="features"></a>
<div class="container section">
<div class="row">
<div class="col-sm-12">
<h2 class="sectionTitles">What We Do</h2>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Great Feature 1</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Great Feature 2</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Great Feature 3</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</div>
</div>

<!--ABOUT SECTION-->
<a class="anchorTag" id="about"></a>
<div class="container section">
<div class="row">
<div class="col-sm-12">
<h2 class="sectionTitles">Who We Are</h2>
</div>
<div class="col-sm-4">
<!--TODO: Update About image here-->
<img class="image-float img-thumbnail" src="AboutImage.jpg" />
</div>
<div class="col-sm-8">
<p>
This is a story about how we started, developed our values, determined our beliefs and realized we were great.
</p>
<p>
Then we decided to serve great people and we've never looked back.
</p>
<p>
And it's been great!
</p>
</div>
</div>
</div>

<div class="container"> <hr /> </div>

<!--CONTACT SECTION-->
<a class="anchorTag" id="contact"></a>
<div class="container anchorTag" style="margin-top: 50px;" id="contact">
<div class="row">
<div class="col-sm-12">
<h2 class="sectionTitles">Where to Find Us</h2>
</div>
</div>
<div class="container" style="margin-bottom: 200px">
<div class="row logoRow">
<div class="col-sm">
<a href="https://www.instagram.com" target="_blank">
<img src="InstagramLogo.png" width="75" />
</a>
</div>
<div class="col-sm">
<a href="https://www.facebook.com" target="_blank">
<img src="FacebookLogo.png" width="75" />
</a>
</div>
<div class="col-sm">
<a href="https://www.linkedin.com" target="_blank">
<img src="LinkedInLogo.png" width="75" />
</a>
</div>
</div>
<div class="col-sm-12" style="margin-top: 50px;">
<h4 style="text-align: center;">Or Email Us!<br />[email protected]</h4>
<p> 
<h4 style="text-align: center;">Our Address<br />1234 Great Streat, GS 12345</h4>
</p> 
<p> 
<h4 style="text-align: center;">Or Call Us!<br />1-800-weGreat</h4>
</p> 
</div>
</div>
</div>

<div class="row">
<div class="col footerTxt">
<!--TODO: Update to your copyright-->
&copy; The Great Company 2020
</div>
</div>

<!--SCRIPTS-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>

</body>
</html>

                    
                

Writing Our CSS

Create a new Style Sheet file in Visual Studio, name it StyleSheet.css, and copy and paste the code below into your file.

                                        

body, html {
    height: 100%;
    margin: 0;
}

a.anchorTag {
     display: block;
     position: relative;
     top: -200px;
     visibility: hidden;
}
                
.hero-textHolder {
     position: absolute;
     top: 60%;
     left: 60%;
     transform: translate(-50%, -50%);
}
                
.headliner {
     font-family: 'Arial Black', Arial, sans-serif;
     text-align: left;
     position: absolute;
     top: 60%;
     left: 60%;
     transform: translate(-50%, -50%);
}
                
.title {
    color: white;
    font-size: 3.5vw;
}
                
.subtitle {
    font-size: 2vw;
    color: lightblue;
}
                
.tagline {
     font-family: Arial, sans-serif;
     font-size: 2vw;
     color: lightblue;
     font-style: italic;
}
                
.bg {
     background-image: url(HeroImage.png);
     height: 100%;
     /*width: 100%;*/
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
}
                
.spaceButton {
    margin-top: 30px;
}

.section {
    margin-top: 150px;
    margin-bottom: 100px;
}

.sectionTitles {
     font-weight: 700;
     text-align: center;
     margin-bottom: 50px;
}

.logoRow {
     text-align: center;
}

.footerTxt {
     margin-top: 25px;
     margin-bottom: 25px;
     text-align: center;
}
                
                    
                

Adding Our Images

Now we’ve got one last part left, and that’s replacing all of the images. You’ll want to use your own images and you can do so using Canva. The 4 images that you will need to replace are the favicon, the logo, the "Hero" image, and the "About" image.

  1. The Favicon
    The favicon is a bit tricky so I will create a separate tutorial for it. You can check out how to make your Favicon in Canva, here. Once you've created your favicon, save it as "favicon.ico" into your website folder.
  2. The Logo
    To update your logo, you can create a logo using Canva, keep the height to around 100px. If you already have a logo, it should look fine as-is. But if you find you need to resize it, you can use Canva for that as well. Put a copy of your logo in your website folder and make sure it’s named "logo.png".
  3. The Hero Image
    The default Hero image size is 2880px by 1200px but any size will work. The image should be a jpg since you shouldn’t need transparency here. Jpg file sizes are smaller than png, so using jpg wherever possible will help to save on page load times, which is a good thing. Once you’ve found an image you like, save it as "HeroImage.jpg" in your website folder.
  4. The About Image
    Finally, we need the About image. This should be a jpg as well. This default image is a 1080px by 1080px but yours can be any size. Save it as "AboutImage.jpg" and put it in your website folder.

And You're Done!

index.html is Currently Local

You can easily preview what your site will look like by using your browser to open your HTML file. Keep in mind that in order to view your page properly, you will still need an internet connection because your browser will need to request the style data from Bootstrap’s servers.

You've Got Options with Bootstrap

You’ve got plenty of customization options at your fingertips with Bootstrap. When you’re ready, you can head over to Bootstrap's website (getbootstrap.com and navigate to the "Documentation" section) and check out how you can make further customizations fairly easily. Although I’ve found their instructions to be clear and simple, you should still create a backup of your file before you get to tinkering…just to be on the safe side 😉.


Conclusion

In the next post, we’ll compare four different hosting providers: HostGator (which I use personally), Bluehost, Ionos and DreamHost.

I’ve chosen to compare these four because they have the most competitive pricing and packages.

However, aside from HostGator, I’m unsure of their server speeds and user experience, so those will be some of the main elements I’ll compare between them to help you make an informed decision.

In the meantime, have fun customizing your new website!

Whichever you choose to do, good luck, have fun and thanks so much for reading!

Until next time...

🙋🏽

<< return to all posts