Write Your Own Code
You’d be amazed at how simple it is to code a simple website. Try it now:
- Open Notepad.
- Type a greeting wrapped in html tags. Put a slash on the closing tag: AMY: THIS WORKS WITHOUT THE HTML TAGS. START WITH JUST THE HTML FILE EXTENSION.
<html>Hi Amy</html> - Click File, Save. Name it whatever you want, but use .html as the extension. Click the Save as type dropdown list and choose All files (*). Don’t let Notepad’s .txt stay there. Save the file to your desktop.
- Move or minimize Notepad so you can see your html file on the desktop. Double-click it. Your browser should open it and show it to you as a web page.
- Congratulations! You have just written your first web page!
What? You want more? Want to make it bigger? Okay. Tell your browser it’s a heading. That’ll make it pop.
- Go back to the file in Notepad.
- Wrap the greeting in heading tags. H1 is the largest. But make sure you stay inside the HTML tags, and don’t forget to slash the closing tag:
<html><h1>Hi Amy</h1></html> - Save the file and refresh it in your browser.
- Did it get bigger? Congratulations! You just marked up your first web page!
What? You want more? You want it to do something? Okay. Let’s tell your browser to act out a script:
- Go back to the file in Notepad.
- Rearrange the tags so you can squeeze a script in there, like so:
<html>
<h1>Hi Amy</h1>
<script></script>
</html> - Hmmm. What tricks can a browser do? Oh. Here’s one. Tell your browser window to alert you. Write it INSIDE the script tags. And make sure to put quotes around the alert:
<html>
<h1>Hi Amy</h1>
<script>window.alert(“Some hacker is sending me commands from your computer”)</script>
</html>
What? You want more? Let me introduce you to W3Schools. For decades, that website has groomed many a professional web designer with no formal training. Even the trained pro’s use it for quick answers. If you’re inclined and have time, I think you’ll find yourself with a new hobby.
Hire it Out
If you’re not inclined or you don’t have time, hire one of the thousands of web designers waiting for your request. They’re waiting on Google, GoDaddy, Fiverr. Shop around. In professional web design, there are really three projects required to build a website. All of them can be accomplished in about a week. The base cost runs around $1,000.
| Design | The web designer learns your needs, creates a few mock-up designs for you to choose from, and works through any modifications. |
| Build | The web designer or a separate programmer builds clickable, functioning web pages that match your design. |
| Publish | The designer or programmer copies all of the components of your website into rented space on an internet computer. They assign your website address to it so that other computers know where to find it. If you don’t already have a web address, they register that for you as well. |
Professional web design
Tweak a Template
In the DIY template world, the process is reversed, and can happen in half a day, for free.
| Publish | Internet publishers have already set up the public platform. You simply open or close your doors with the flip of a switch. |
| Build | Your publisher offers you pre-built templates, just waiting for you to exchange their generic words and pictures for yours. |
| Design | You get a few design choices, like the color and size of your words. |
DIY template web design
Companies like Google, WordPress, and GoDaddy offer these sites for free so they can piggyback on them for ads, data collection, and your future appetite for advanced features. It’s a fine way to build your first website.
Are you ready? Give it a whirl. You can Google “free website” and pick from the slew of companies practically begging you write your book on their billboard. Choose one you feel safe with (WordPress, Wix, and Google Sites are old faithfuls). I would write a step-by-step here, but their own instructions are plenty simple already. Choose a template or blank page, then fill ‘er up with what you want to share. When you’re ready, click Publish. Voila! You just built a website, and anyone can see it, even if your own computer goes kaput.
Why does that sound too easy? Well, you probably want more than just a website. You probably want your own catchy, memorable web address. You might find yourself weeding through spam emails and phone calls and want a spam shield. Maybe you want to accept credit cards payments, or keep backup copies of your hard work, or move that picture just a little more to the left. You have already outgrown your own website, and you haven’t even started it yet. Start it anyway.
Why Build Your Own Website
I HIGHLY recommend you start with that inadequate, pitiful, plain little free website. It’s like camping. You don’t know what perks you need until you go without them. Should you buy a $300,000 RV to go camping? Indeed, some people get to that point. But they didn’t start there.
Like the RV, you will see some high-dollar opportunities to get a great website right out of the gate. If you have money to throw away, by all means, support the economy. But you are almost assuredly throwing away much of that money. That’s because you don’t know what you need, and you will inevitably be paying for things you don’t need or already have.
And here’s the kicker. No website starts or stays perfect. Reality sets in and your original plan was off a bit. Or your purpose expands or contracts or changes direction. With high-dollar websites, you also end up paying high-dollar for tweaks and maintenance. There’s that dang RV again. Painfully, these tweaks are usually reversals and do-overs of work already done. It’s painful even for the designer who is getting paid twice.
If you are happy to fund this trial-and-error process, you probably aren’t reading this DIY article titled, “How to Build a Website.” My guess is that people who read this article are frugal with their money. Paying for unnecessaries can leave you feeling regretful or resentful.
The only downside to building your own website is potentially wasting time that you didn’t have. If that is not your concern, then the upsides are huge:
- It is never a waste of time to learn exactly what you are paying for and why.
- You might end up liking your own creation enough to keep it and keep learning.
- If you decide to go with a pro, you already have your content ready for them.
- You learn how to make your own tweaks, even if you paid for a professional site.
How Not To Build Your Own Website
You might be a tweener like me. You might want more than a template and less than a pro. You might be such a diehard that you want to learn how to do what the pros do. For goodness sake, many of them make wonderful videos to teach us exactly that. And they make it look easy. Bravo and let’s go! But first, let me offer a birds-eye view of the potholes.
Don’t Follow the First Leader
There are many articles and videos on the internet that walk you step-by-step into building your own website. Those resources are a testament to the free education the internet has become. However, those resources are not free to produce and sustain. The creators have to cover their costs.
In the case of website how-to’s, many of the best instructors are covering their costs by promoting their favorite tools. They will actually walk you through the purchase of something you really need to shop around for. They are almost never price-gouging. They just have a favorite and know it well enough to walk you through it. I think they are well-meaning leaders, but they offer a quick fix you are likely to regret as you learn more about your particular needs.
Watch as many of these how-to’ videos as you can. You will see the vast range of product promotions, but also get familiar with the common denominators. You may get attached to one or two of those lay teachers. If so, support them by liking and subscribing to their channels. But don’t commit money until you truly understand the options.
Don’t Buy the First Domain
Picture the scene. You have a heyday with Google’s free website builder. You create your awesome masterpiece. You tell all your friends to go to your website. What’s the address? Say it with me now.
h t t p s : / / s i t e s . g o o g l e . c o m / v i e w / m y a w e s o m e m a s t e r p i e c e / h o m e
This address lets the whole world know that your web pages live in Google’s domain. Is that belittling? Can’t we be the master of our own domain? We can pretend. Google is happy to put a you.com mask over that web address, if you have one. It won’t be long before you’re rattling off variations of you.com. Especially when you find out how cheap it is.
Actually, you can’t buy your own domain. It’s like Britain’s ownership of Hong Kong. Or waterfront property in Costa Rica. You can only “own” them for a spell. If people aren’t already fighting over it, you’ll pay about $10/year for you.com. Don’t do it just yet. Let me explain.
Web domains are regulated by an international agency called ICANN. ICANN is protecting us from all sorts of internet abuse. At the very least, they make sure two websites don’t claim the same address. But they don’t actually handle the registration process. That’s a commercial function offered for a fee by many small and large internet companies.
As soon as you ask Dr. Google how to get you.com, you will be swimming in a sea of domain registration services. It seems so simple at first. Until they start offering to also “park” your domain and “host” your website!
Dazed, confused, and eager to grab up your dream domain name, you click on the cheapest offer and swipe your card for a two-year claim on that property.
Don’t do it. Not yet. They don’t just email you your domain. They hold it for you. You are tied to them. If you outgrow your free website in a week, your next step is to choose a paid host. If that is a different company than your domain provider, you now have to navigate between the two companies whom you have paid. Not only that, but your preferred host probably includes domain registration with their hosting. Ten dollars is not a big loss, but you’ll lose hours and maybe days bouncing between two internet companies.
See if you are content with your site before tying yourself to a domain registrar. If you expect to want an upgrade in less than a year, you’ll save a lot of headache by getting your domain from your future host.
Don’t Buy the First Host
The second premature decision you are likely to encounter is your web “host.” This is the landlord you must pay to keep your website visible like a billboard. This is no small task.
A host’s main function is to keep its internet computers up and running 24/7 while serving up your site pages without lag time. Your host also regulates robot traffic coming into your site, sifting the wheat from the chaff at its own level of discernment. It will tell you how many humans and robots access your web pages, and what website sent them there. It must integrate well with your design program so that changes are applied accurately. That’s what you SHOULD get for $3/month.
For a few more dollars, the host will also back up your data every day, give you a free SSL certificate, and provide one or more page design programs for you to use. Icing on the cake is customer support, especially for us average Jo’s.
GoDaddy is likely to jump right in front of you in your journey, offering your custom domain, hosting, and website builder. I love GoDaddy and paid them for years for more service than I needed, just because I was a novice and felt safe with them. Honestly, it wasn’t a ton of money, but I finally clarified my needs and cut the excess with another provider, SiteGround, who I also love.
On the flip side, most YouTube creators who teach us how to build a website are actually programming pros. They don’t need their hand held when things get deep or buggy. They think they are serving you best by guiding you to inexpensive host options like Hostinger or Bluehost. You could sorely regret that. When things get complex or buggy, where will you turn? Tech support generally is not available or reliable in a cheaper package. How could they afford a tech support staff when we only pay them $3 per month?
Once you graduate past free websites, hosting is your most important decision. It’s where the mind-boggling side of cyberspace enters your life. Actually, your host is your liaison to cyberspace. Your interpreter. The gatekeeper. You want one that is dedicated to staying ahead of the hackers, but remembers that customers are humans.
Do yourself a favor. Take the time now to learn how hosting works, and what makes the hosts different from each other. Try to get all of your website needs from one company. And make sure it’s a company who is there to answer your questions. Don’t get caught floating without a paddle in cyberspace. You will end up hating your website adventure.
Don’t Get Discouraged
At this point, you may feel frustrated at the onion layers I am peeling back. When will it stop?
I will stop with the Don’ts. But the layers will not stop. Technology is a perpetual frontier with new developments every day, for all time. We must pick our own stopping point, and delegate the rest to a trusted provider.
How to Design a Website
Whether you do it yourself or pay a pro, you still have to decide what you want before you start. Even when you browse pre-made templates, you will find the need to first brainstorm your needs. Some of the templates have two main categories, some have three, some have only one focus. Some are formal and structured, others are snazzy and edgy. The colors in one will attract your fancy, but then the sections don’t match your categories. You will probably change the colors anyway. You can try to dive in without a plan, but you won’t get far.
The fact is, you likely are not completely free to choose. You likely have a certain number of main points, a certain tone, and maybe even a certain color scheme to abide by.
Declare Your Purpose
When you search Google for something, Google answers your question with a list of web page titles. Beneath each title is Google’s best attempt at finding the website’s main purpose. As the person who asked for those results, you skim that list looking for whatever best answers your question.
What is your answer to that question? What question would your audience ask Google? What is this website about? Who should be attracted to that description in a Google listing? Why should they click through to your site? Can you sum it up in one sentence? Do it now. Like the elevator pitch, but shorter.
You’ll eventually run into a place to type that answer on your website so that Google finds it and displays it in a search list. For now, write it down for your own focus. It’s your mission.
| Purpose | PaperlessPonteVedra.com aims to help people transition into the digital world through educational content and paid services. |
Example
List Your Ingredients
What does your website need in order to fulfill its purpose? Write these on Post-its so you can move them around.
Example
| Front – public version | Back – purpose |
|---|---|
| Paperless Ponte Vedra | Company name |
| Logo | Shorthand symbol for recognition |
| Picture of Ponte Vedra Beach | Background for all web pages to make the visitor feel consistent and comfortable |
| Clean living. Information at your fingertips. Learn the digital life here. | Greeting |
| About this site | The purpose for this website |
| About Amy | Why I am qualified to teach and hire |
| Contact form | How to reach me |
| Contact confirmation | What a visitor sees after they submit the contact form |
| Learn page | List of all lessons and how-to articles |
| Paperless U list | Description and list of all lessons |
| Paperless U template | Form for all Paperless U lessons |
| Hire list | List of all hirable services |
| Service template | Form for all hirable services with link to quote |
| How-to template | Form for all how-to articles |
| Category page template | List of all articles in a category |
| Service page template | Form for full description and booking for all hireable services. |
| Quote | Form for customers to add up the cost for hirable services |
| Checkout | Form for customer to order and pay for hirable services |
| Chronicles | List of stories of my paperless life |
| Sidebar | Category selector, ad space |
| Footer | Copyright, About links |
| Header | Name, logo, main categories, search |
Example
Pre-arrange Your Pages
This step uses actual paper. Yes, I am still Paperless Ponte Vedra. However, I cannot visualize the organization of my website when I can only see one page at a time on a computer screen. Check that – part of one page at a time.
For the same reason, professional designers usually sketch out many ideas before designing a website. Some use a digital drawing program, but most I’ve seen still use paper. One girl even does it with Sharpie markers! The paperless side of me prefers to use one piece of paper per page, and move the ingredients to experiment with layout ideas.
Stick all of the ingredients on those two pieces of paper. Remember there’s plenty of room. Web pages are letter wide and runway long. Tape another piece of paper onto the end if you want it longer. Ponder what you want to repeat on every page in the header and footer. Let your mind roam free, freer than the girl with her Sharpies. Move ingredients whenever your hand is tempted. If you are sure a third web page would be better, declare a title for it and set it up with the same header.
Don’t stress about it – these things can change at any time, even after you build your site. That’s the beauty of a digital life. But do apply your best judgement for now. You don’t have to be right. You just have to get your brain thoroughly in the game before trying to pick a template. If you’re not there yet, leave it out like a puzzle and tackle it again tomorrow. Trust me. It’s a lot easier to move those Post-its than to re-design a web page.
Hang on to your paper site throughout the construction process, and for a long time after. You are likely to want it back when something needs to be re-evaluated.
Choose your color scheme
For something to feel comfortable to the eye and easy to read, it needs to be simple and clear. You cannot follow your color nose like the Froot Loops toucan and expect your website visitors to stay around long. Choose two colors to stick to throughout your site, one dark, one light. If you have a business logo, use those colors. If you have a main picture for your home page, match the major colors in that.
Computers identify colors by their alphanumeric code. In order to be sure you are choosing the same color each time, you need to use the code rather than eyeballing it. Here is a color wheel that Adobe leaves out for us to play with. When you find your colors, write down the alphanumeric code that represents them.
Now add one bright accent color for things that need to pop out on the page. Buttons often get this color.
| Black-blue | #1A2A33 | Logo computer screen and header fonts |
| Background sand | #CDCCBA | Background for mobile and tablet |
| Leaf green | #7BC238 | Accent color |
Sample color scheme
Choose Your Host
If you’ve designed your pages and chosen your colors, you are ready to build those pages. The true pros build web pages with code and databases. The semi-pros and the rest of the DIY world use a program called a “page builder.” There are several available. You don’t have to buy it because a website host provides it for their customers – even the free hosts. The page builder lets you choose things from a menu, and it slaps in the necessary code to make that choice happen on a web page.
But where will your web page be? If it’s on your computer, other people can’t see it. You have to build (or put) those pages on a computer that is set up to show your pages on the internet. That’s your host. This is where you have to fork out a few bucks for your DIY website. If your site is a simple one, hosting and domain are the only things you have to spend money on, and that’s only if you outgrew the free gigs.
As I said in the Short Answer at the top of this article, I recommend you buy (register) your domain name from the same company you buy (rent) hosting from. That way, you won’t be dealing with two different companies who are not dealing with each other. I really hope you will Google “website hosting” and read and read and watch YouTube videos and more videos until you feel like a pro. The many concerns and options related to web hosting can be maddening if you have to make those decisions blindly DURING your hosting purchase.
If you are already sick of the deep dive into tech world, you can take my recommendations:
Avoid the cheaper hosts because you are likely to end up buying add-ons that are already included with the more expensive hosts, such as security functions. Those cheaper ones are good for techies who know how to navigate the gaps.
For hosting, I recommend GoDaddy or SiteGround.
GoDaddy is focused on supporting amateurs. They do an excellent job of it. I hosted my website with GoDaddy for over 10 years, and bought quite a few domains with them. GoDaddy is like Mayo Clinic. They are top-notch, have all the bells and whistles, and as of the year 2021, the nicest human beings still answer the phone and answer your questions. However, like Mayo, they are pricey and they upsell. They are great about taking your first no for an answer, but what if you don’t know what your answer should be? It’s not a fortune, by any means, but if you’re on a budget, you’ll be almost as happy with SiteGround.
SiteGround is really popular among web designers. It has a ton of bells and whistles also included, but their support is mostly in the form of excellent how-to articles. They also offer nice bundles if you plan on building multiple websites. I think they include everything you’d ever want in hosting.
Side note for businesses:
If you are looking to sell products or services on your website, you are likely to run into rave reviews and hosting offers from Big Commerce, the largest eCommerce host. I was hired to add content to a website that was originally built and hosted with Big Commerce. In 2019, their page builder was so basic that I had to write code for almost all my formatting. I was thrilled when they upgraded their page builder in 2020, but most of its functions didn’t function. I tried for months, and still had to write code for most formatting.
As I added pages and pages of content, pictures, and products, I wanted to back up the site on regular basis, or at least download a copy of it. For me, that is standard procedure. But I couldn’t figure out how to do it with Big Commerce.
What gives? GoDaddy has a simple three-click process to download an entire copy of your site. SiteGround simply runs automatic backups for me every night. I couldn’t find either option with Big Commerce. Their support people informed me that I’d have to hire a separate service to run backups, and they had a company call me about it. Alternatively, I could download the website one page at a time, and the pictures and products could be downloaded in separate batches! It was a big site with many pages, and I needed my client to be able to do it on their own. I cannot recommend Big Commerce. If you are going to sell products, you can do that with the free and trustworthy WooCommerce program added to your website, if it is built with WordPress on a paid host.