How to create a website step by step for free

Today we are going to show you how you can have your personal or professional website step by step, without spending (almost) anything on it and without needing to know programming.

Hi, if this is your first time here, our content is focused on INNOVATION FOR LAWYERS and, in particular, this series is focused on LEGAL MARKETING.

I also present to you guys and girls the video I made on this topic from my YouTube channel, which is where I share some thoughts, tips and projects I am currently working on with other tech-fanatics, whether you are a developer, lawyer or enthusiast. Please also consider subscribing to my channel to not miss future videos and to join our live "coding sessions" and a nice, relaxing tech-related chat -- I promise to keep things interesting. The content is in Portuguese, but you can watch my videos with subtitles (maybe I will switch to English in the future, if this makes sense).

All set? Then tag along.

When we talk about having a digital presence, one of the first thoughts that comes to mind is having a personal page, a website.

It seems natural since a website represents your business card on the Internet, a place where everyone can see your profile with beautiful photos of your office, in addition to your academic and professional background.

Therefore, today we are going to focus on creating a professional website, which in my opinion should be one of the first things you need to do to establish your digital presence, right after defining your target audience, domain and e- mail.

>> Still haven't thought about your target audience? Read our article on the subject here: Why and How to set your TARGET AUDIENCE | LEGAL MARKETING

>> To learn how to register a professional domain, read here: Como registrar um endereço de internet profissional

>> And if you haven't configured it yet, follow this article here to learn how to use professional email in your Gmail without the need for Google Workspace

** Note: please don't bother the domain I'm using in this article (bbeer.com.br) which is a domain I registered some time ago for a side project and which is currently in hold. It has nothing to do with the subject, but I created it so that I don't need to register another one to show what we'll do.

HOW TO CREATE A PROFESSIONAL WEBSITE ACCORDING TO MOST INTERNET TUTORIALS¶

There are now numerous ways to put a professional website online, including the service of several companies (very good by the way) that for a very viable price offer hosting with website building tools so that you can build your page without having to program, and you've certainly heard of at least one of them: GoDaddy, Hostgator, iPage, Locaweb…

There are many hosting options out there.

Usually, you can get hosting services in these companies for very affordable prices, and sometimes even the domain registration costs are already included.

However, be careful, there are cases where the domain registrar's name is the hosting company itself and not you, so take a good look at the contract before signing it, so that you don't be held hostage after you decide to change providers.

Most of these hosting services provide some type of resource management system that you can use to "step up" your page, such as the famous cPanel, which makes access to resources such as Database, FTP server (which is for you to upload files to your site using other programs) and even installers for programs like WordPress (which is a ready-made system for you to create a blog, website or online store, with many plugins -- we'll talk more about it in future posts ).

cPanel

And many of the tutorials on how to build a professional website out there follow this line: hire a hosting, buy your domain through the hosting service itself and install WordPress.

I don't think this strategy itself is wrong, but if you've never really used a program like WordPress, it might be something a little too complicated to just create your digital presence.

Also, these hosting plans typically offer features that you may not even need (such as PHP programming language support, required for WordPress) and, while affordable, can become a heavier expense over the years. It's a cannon shot to kill mosquitoes, in many cases.

I, on the other hand, understand that there are different, easier and cheaper alternatives depending on what you need for your professional website. And that's what I'm going to show you here.

WHAT TYPE OF WEBSITE DO YOU NEED?¶

A big criticism I have on other contents I found on the Internet on the subject is that few are careful to ask the user what TYPE OF SITE he needs.

When you don't have a digital presence yet, it's hard to know where to start when there are so many options available in the market, with so many jargons, companies and software that you've never heard of: WordPress, Wix, Google Sites, Hostgator, …

Obviously, no solution is perfect for all types of needs and therefore you need to ask yourself first of all, "What is my goal in putting together a professional website?"

Nope. But yeah...

For this article I'm going to focus more on my current target audience: service professionals (especially lawyers) who want to have a digital presence but don't have much knowledge of how to do it yet. Knowing programming is not a requirement to follow what I'm going to post here.

So, I ask: what is your goal when putting a website up?

If you simply answered “to have a digital presence, like a business card”, I believe you want to rethink that opinion. Just as a business card doesn't bring you customers, it just provides those you've already “conquered” an easier way to locate your contact details, having a professional website just to show your address, phone and email seems a bit of a waste.

More than a business card, your website should be seen as a PORTFOLIO. A portfolio of your knowledge, references from other clients and more information about the type of professional you are, all with the concrete goal of converting that visitor into another client.

In this sense, having a well-populated LinkedIn, with good publications and references can be even more important than having a professional website without any information other than your logo. Maybe that's your intention: to have a simple website with just the contact and a link to the social networks where you are really active, and that's fine! But if you want to have a professional website just for the sake of it, you could be throwing away a very good opportunity to build reputation and attract new customers.

You might want a professional website for a number of reasons, but generally speaking, your website will likely lean towards the following:

• Business Card, so that my client has my contact details;
• Portfolio, with content and information that can attract new customers and retain old customers; and
• Showcase of products, in cases where you work with goods and need to have a place to sell them (usually not your case, Mr. Lawyer who just wants to set up a website).

So, we will cover the first and second options here, leaving out the third option as in principle it will not be used by our target audience.

WHY SHOULD I DEFINE WHAT TYPE OF PROFESSIONAL WEBSITE I NEED?¶

In the past, putting a personal website online was not such a simple task for a beginner. At the very least, you would need to know the basics of HTML and still have a hard time putting together something that doesn't look like a poorly edited word document or poorly done schoolwork.

Ah, a Internet 😌

Today, fortunately, reality is different. It is now possible to build professional websites without programming and with a really professional look. In fact, it's even possible to launch relatively complex mobile apps without programming anything.

The trend of building solutions without programming is on the rise, and if you are interested in innovation, be sure to follow the news that arise in this “no code” area. Doing my #ads here, my startup Mevio does exactly that: workflow automation using “no code” technology.

Therefore, since there are many different technologies and solutions out there, it makes sense to analyze what your professional website is for before venturing into any of them, paying for hosting or even hiring a web designer.

That said, let's get to the step by step on how to create your professional website (almost) for free.

REGISTERING A PROFESSIONAL DOMAIN¶

Having your own professional domain is something you should consider, and I personally believe you MUST do.

The value for a “.com” domain is very small, in the order of $12.00 PER YEAR, being such value even cheaper if you register it for more than a year. Honestly, if you believe that this amount is too expensive to have a professional domain (and, above all, a professional email), you might even be better off not putting a professional website up and focusing your efforts on creating good, engaging profiles on the social networks where your customers are present.

Register your domain as soon as possible

So register your domain as soon as possible.

Have never registered a domain? See our content on the topic here: How to register a professional internet domain

Take the opportunity to also see how to create your professional email address

HOW TO CREATE A PROFESSIONAL WEBSITE¶

Now that you've read about the importance of securing a domain with a good, short, and easy-to-remember name, let's get our hands dirty and really create a professional website.

As we mentioned above, one of the ways is simply to hire a hosting company that has the WordPress installation available and try to configure it to look good, although it is a fact that numerous tweaks will be needed before leaving it to your liking .

Now let's choose which route we'll follow in building your professional website and, for that, let's understand what your goal is: to have only an online business card, a portfolio or an e-commerce.

0. BEFORE CREATING YOUR WEBSITE: VERIFYING YOUR DOMAIN ON GOOGLE¶

Before I show you how you can create your website for the purpose you need, since I'll show you two options below to create your website using Google tools, I'll show you first how to verify your domain on Google for all purposes.

This is important because without verifying your domain you cannot use that internet address that was purchased.

To verify your domain on Google, go to Google Search Console. 

Input your domain in Google Search Console

Enter your domain (without www) in the first option box. It will ask you to make some changes to your registrar records to add a new TXT entry.

Copy the Verification Code of the Google-generated TXT record

And create a new TXT entry in the DNS setting of your registrar, putting the provided value

If you can't verify it at first, wait a few minutes

Afterwards, everything should be OK.

I've tried to verify domain ownership directly from other Google services like Google Sites and Blogger when I tried to add a custom address, but even waiting a long time it just wouldn't verify. So I decided to do it directly through Search Console and everything worked.

Anyway, now we can finally create our page.

1. CREATING A PROFESSIONAL WEBSITE TO DISPLAY MY PROFILE (BUSINESS CARD ONLY)¶

If you just want to have a simple website on the Internet to put your contact details, some photos of the office, section on partners and associates, areas of expertise and everything else, the path is quite smooth. For this you can use online website creation tools, such as the Wix platform, for example.

Your static website is a place where you will provide your "business card"

SOME BASIC CONCEPTS WHEN CREATING A PROFESSIONAL WEBSITE THAT YOU MUST OBSERVE

Have you ever thought about what elements a web page should have?

When I look at law firms' pages, I always see the same thing: a huge picture (banner) right on the cover, with some links to "The Firm", "Partners", "Areas of Practice" and that's it. In fact, this pattern seems so common that doing anything other than that could be considered wrong. 

However, there are ways to create a page that converts more views into customers and I'm going to show you some important concepts here that you should consider. 😎

Above the Fold

When you visit a page on the Internet, there are a series of actions that take place: you go to the homepage, scan the page to see what it is about, and you can click on links, read more text or simply leave the site.

Therefore, making it clear what value you bring to your page is essential: you have less than 3 seconds before the visitor loses interest and clicks the back button.

In this sense, there is the concept of "Above the Fold" content, which states that you must be able to convey your value proposition in a short content (a title and maybe a subtitle, very brief) as well as a call to action (more about this) in the initial space of your page, the one that loads first and that the user will see.

The idea is that if your visitor stays on your page for less than 3 seconds, you have to present all your value in that time and, if successful, convince your user to visit other content and finally get in touch to find out about your services.

Information about what we are offering is above the fold

Most law firm websites I've seen in my life (including large firms) only have a few images of the office, usually in a "slider" format in which the images change, but without any information that allows the visitor immediately identify the differential of the service provided there.

So, when creating your website (and here, both static and portfolio), be sure to briefly highlight your value proposition just above the fold.

Call to Action or CTA

An important element beyond the value proposition that you will place above the fold is the Call to Action.

A Call to Action or CTA is a button, text field or something that invites your visitor to do something: sign up, subscribe to a newsletter, send an email, call you.

It is important that in addition to the value proposition you use, you have clear on your homepage, visible and easily accessible what you expect that customer to do.

For example, you can place a call to action for a customer to download a free PDF about some specific topic that led them to that page. You can alternatively leave a call to action for that visitor to talk to you right on WhatsApp. Or send you an email.

What is essential is that you make clear what action you expect from him and how he should act. In the case of HubJur mentioned above, I used as a Call to Action a button with the text "Submit your problem for free" which when clicked takes the visitor straight to the app.

Not too much text on the home page

Pages with a lot of text, few pictures and that resemble a Word document should have been left there in 1995. Today, a website asks for concise information, pictures and elements that explain well what is being offered. It's no use clogging up your homepage with text and hoping that an unsuspecting visitor will like the result.

It is possible, indeed, to create pages with specific purposes to reach certain audiences (landing pages) in addition to your homepage, and we will see that later.

As a general rule, therefore, keep everything organized and with as little information as possible.

The above concepts, however, do not imply that you should not contain the other sections of your website (such as information about the firm, partners and practice areas) as they are important to identify your business. You should just organize this information in such a way that navigation on your page is intuitive and retains the visitor long enough for them to understand the type of work you offer.

CREATING YOUR PROFESSIONAL WEBSITE WITH GOOGLE SITES

In my case, when I need to create a static site, simpler and faster, I end up choosing Google Sites, which has drag-n-drop tools and allows me to build a site in a few minutes.

Assembling a basic website

When accessing the Google Sites page, you have access to a Templates Gallery that allows you from the beginning to have a structure set up for what you need and that you can modify according to your needs. See for example the "Team" template from this gallery.

"Team" Template

As you can see, this model already has an image that marks the "above the fold" and a title. You can put your value proposition there, with a simple phrase and subhead, and also a Call to Action to encourage your visitor to do something. Something like that:

Google Sites is very intuitive, and you basically need to drag the elements on the left side and snap them to the canvas. Define some texts about what you do in the language you want to reach your customer and BAM! Ready!

Far from perfect, but good enough and made in under 20 min

For those thinking of creating a professional website just to have something to show when their domain is accessed, a static page like this may be the best solution: little work, zero cost and allows you to make available the main ways of contacting you.

In my case I simplified it and removed all the additional pages that came with the template (I left everything in one page), but feel free to create as many pages as you think necessary. Just remember to have a homepage with enough information to make customers want to find you.

Note that you can (and I recommend) creating additional pages on your page by clicking the "Pages" tab on the right side of Google Sites and adding a new page, and they will appear in your links menu.

When adding a new page you can put a custom title and path, and this is very good: you can create specific pages targeted at your segment, bringing information about a topic relevant to your target audience, and can be used as a direct access to your services without the visitor having to access your home page.

This type of page with the specific purpose of targeting a certain subject and becoming a gateway to your services is also called a "landing page", and can be a great strategy to leverage your future ads or  content boosts. We'll talk more about landing pages in future content in this series.

If you want to see what my simple page prototype looks like, click here: https://sites.google.com/view/ietsuguadvocacia/

For the purposes of this article, however, we'll just keep the home page. This is what I put on this simple page:

a. Above the Fold:

Concise title bringing the main service I offer, in this case "Corporate Law", but you can obviously be more creative;

Subtitle with more information in two lines, detailing a little more what a person can expect when hiring my service;

A background image to give some context and it could be a photo of your office for example. I used an image that I got from pexels.com and that I treated in Gimp to darken it;

A CTA, which is a button with a link that in this case opens whatsapp for the person to talk to me. The Call to Action is clear: "Talk to me now" and asks the visitor to get in touch.

B. Below the fold

On the rest of the site, you can put whatever you think you need: details about your office, team, areas of expertise, awards, whatever.

If the above-the-fold content is to immediately get the customer's attention and explain in 3 seconds what you do, the rest of the page is where you're going to convert that visitor into a customer.

In my case, I have included some information about my areas of expertise, a photo with a short presentation and an email list so that visitors receive communications when I post something that interests them.

Adding a custom domain to your website

Once your website has been set up, we will link our professional domain to it. If you try to publish your site, you will have the option to link a "Custom Domain", which is nothing more than the professional internet address you have previously registered.

You will be able to use your internet address registered here

Alternatively, you can manage this custom domain by clicking the Settings button and going to the "Custom Domains" tab:

Click the Setting button

And select Custom Domains

You must select "Start Configuration" and then "Use a third-party domain" to choose your domain that was registered in a registrar other than Google Domains.

After entering your address, you will see an "approved" sign next to it. If it shows an image that you need to verify your domain, go back to step 0 above and do the property verification via Google Search Console.

I tried to do it directly here on Google Sites but it just didn't verify (probably some change that happened in Google and they didn't update the service properly), so verify your domain first through Google Search Console.

If your domain ownership was verified in the previous step, it should look like this with the "check"

Google will still ask you to create one more record in your registrar, this time a CNAME record:

Google still asks for another CNAME record in your registrar

And in your registrar service, you should have something like this:

All set now

Publish the site through Google Sites and wait some time. Afterwards, your website must be accessible from the registered address.

Site made on Google Sites with your professional domain. Simple.

And that's it. If you want to build a website like you did in step 1, go ahead -- having an institutional page with your contact details to act as a "virtual business card" is super common, valid and sometimes necessary. However, even if you choose this path, I recommend that you also follow step 2, which sees your website as a professional portfolio.

2. CREATING A PROFESSIONAL WEBSITE AS A PORTFOLIO (RECOMMENDED)¶

Regardless of whether you chose to create an institutional website to serve as a business card, it is important that you have something clear: a visitor who comes to your site just to get your contact is possibly already someone you had some previous contact with and just need a reminder on how to find you.

However, someone who has never had contact with you is probably on your site for another reason: they are looking for information about a specific issue and stumbled across your internet address.

So, it's your job to make that visitor with a problem find a solution and get a lead with the content you make available and, if interested, get in touch for a potential hire. And the more relevant content you make available on your site, the more visitors you will have and, ultimately, the more chances you will have to effectively convert them into customers.

Thus, I believe that a good professional website should have content aimed at its target audience, bringing value so that visitors are attracted and become customers in the future. In other words, you should create quality content, and in good volume, thus building a virtual "portfolio" of subjects that you are expert in and that people can access for information purposes. This builds the authority you need to convert those contacts into customers.

If you haven't defined your target audience yet, I recommend that you check out our content here: Why and How to set your TARGET AUDIENCE | LEGAL MARKETING

There are several ways to create a virtual portfolio (social media, for example) but we will focus here on how to give a portfolio purpose to your professional website.

The simplest way to set up a professional website to work as your virtual portfolio is to create a BLOG, which will work as a REPOSITORY OF ARTICLES.

Note that you can, in theory, simply use the pages I mentioned in item 1 above to write your own content, but when we talk about continuously producing articles and content, always up-to-date, creating only landing pages becomes inefficient, because you'll want a simpler way to post content whenever you need it, and have post-organizing and article-search tools.

And what are the options for setting up an article repository?

To set up an article repository, you can install tools like WordPress on an Internet hosting service without major problems, or even buy a domain and hosting directly from WordPress.com.

But today we are going to show you how you can use some free blogging services to make your website look professional.

BLOGGER

Blogger is a very old Google service and has been around since the early days of blogging. It is a simple tool for blog posts and has a very intuitive text editor. It has good integration with other Google services and allows you to change its theme and layout to look like whatever you want.

This blog, dev.lawyer, is currently powered by Blogger.

You can use your own domain with Blogger too by setting it in the "Settings" and "Custom Domain" tab. If your domain is not verified with Google (as shown above), you will need to verify it as we did in step 0 and then enter the remaining records at your registrar.

You can add a custom domain in Blogger

Using a subdomain for our blog

In this case, we define a subdomain as a custom address (to be "articles.customaddress.com"). As we already have our address verified, we now need to create a new CNAME record there in our registrar, putting the prefix we want as a subdomain and the value with "ghs.google.com." (leave the final dot). It will look something like this:

How your registrar DNS service will look like

After a few minutes, your subdomain portfolio will be live:

Page is online, with the default theme so far

You can change the theme in the "Theme" tab of Blogger. All very simple. We'll cover ways to customize your Blogger theme and put some additional features in future content.

TUMBLR

Similarly, you can use Tumblr to create your blog, and also put your own address on it. I particularly like Tumblr as it has a very nice editor and it is very easy to configure.

To create your professional website on it, you will basically use the same steps and thoughts as we used for Blogger above, setting the custom address inside Tumblr. To do this, within Tumblr go to the menu "Edit Appearance" > "Tumblr URL" and click on the pencil to edit the section. There you can select the address you want to use.

You will need to add a CNAME record on your registrar

As with Blogger, you'll need to make adjustments to your DNS at Registro.br, just create a CNAME record that points the subdomain you want to "domains.tumblr.com".

And your registrar DNS records, if it is for a subdomain, will be like this

This process may take some time to update on the registrar side and on the Tumblr side. Afterwards, your blog will be online at the new url.

In this step, any of the two services above (Blogger or Tumblr) should serve you well. Both have themes to customize your site and can make your website/blog look more professional.

We'll better cover how to customize a theme for your Blogger and Tumblr in future content, but I recommend right away that you focus mainly on the content you're going to produce, as that's the most important thing and it's what will attract customers.

CONCLUSION¶

Having a professional website is something you can do today, without effort or programming. Do not avoid to set up your space to produce content and leave a contact channel with your potential customers under the pretext that you don't have the necessary knowledge to put a website online.

Today, tools like Google Sites and Blogger/Tumblr allow you to have your own website up and running in minutes, free of charge, and you should take advantage of that. Your only cost to get a website up and running today is a little time and a few bucks with your domain registration. It is worth it.

From the options I discussed here today, I actually believe that you don't even need to have your institutional static website. You can create your entire website in a blog format, putting a lot of interesting content designed for your target audience and using a clear CTA, so that anyone interested can send you an email, whatsapp or call you.

If you have chosen to create a static website (option 1 above), you can obviously put up a link to your blog. The important thing is to be clear, however, that your goal when setting up a website is to convert the visitor into a customer. Therefore, I would focus more on treating the blog as a visitor's entrypoint and instead of highlighting other content, highlight a very clear CTA: contact me!

In our next content, we'll show you how you can further customize your professional website, using themes and other tools that enhance its functionality. To not miss it, subscribe to our YouTube channel as well.

/* End of the post, see you next time */