Do you want to create a website for yourself or your business? Or learn how to improve an existing website? Here’s everything you need to know to become your own web developer.

This course, written for students of the one-day website workshop, takes you through the whole process, step by step. With a special emphasis on content.

I am making it available to the world because not everyone can afford to pay. If you find this information valuable in any way, please do something nice for someone else today.

Building a website, with WordPress or another website builder, is the easy bit. But what words should you use? And what pictures? That’s what this is all about.

Alex Crowe – yourwebsitecourse.com tutor

Please click this button (redirects to Paypal) if you recognise the value of this course and would like to thank the creator:

Before the course, you should complete a “brief” to the best of your ability. The brief contains the essential elements you need to create a website that’s right for you. Whatever website you are building – e-commerce, non-profit, personal, corporate, educational, community, portfolio, resumé, business directory or something entirely new – you must start with a brief.

The different sections of this document force you to think about:

• Why you need to create a website
• Who the website is for
• How many pages it must have
• Which words are essential
• What images it must include
• How often you should update it

Above all, the brief will reveal the single most important message of your website – the foundation on which your entire website will be built – the unique selling proposition (USP).

The first practical exercise on yourwebsitecourse relates to keywords and demonstrates why choosing the right keywords is so important. There are several useful tools available online, including:

• trends.google.com
• answerthepublic.com
• keywordseverywhere.com [Now a paid service]

You can use these tools to research the keywords your website needs to rank highly in search engines like Google, Yahoo and duckduckgo.

Keywords are so important, they appear throughout one-day workshop – and this website. You will use them to create website headlines and subheads, captions and tags for images, and body copy (advertising industry jargon for text like this).

Ten years ago, using keywords on websites was repetitive and frustrating from a creative point of view. Happily, search engines now recognise words related to your keywords, which means writing websites is more natural – and more fun.

Open a new document in the word-processing software on your computer. Welcome to the blank page. (It doesn’t stay blank for long, so enjoy the moment.)

Have another look at your brief and start by typing “(Homepage)” – including the brackets. Under this, type the “Proposition” (USP) from the brief, which will act as a working headline. (All of this will change before you are finished. You are just arranging the pieces of the jigsaw before putting it together.) You can underline this headline, or put it in bold, or increase the size of the text (aka “point size”) – or a combination of these. It won’t affect the website, but it will make you feel professional.

You’re a writer now.

On a new line, type “(Pic of XXXX)”. [Instead of XXXX, type something that makes sense with your headline. More on this, later.]

Now select everything you have typed so far and centre it all (aka “align centre”). Now save the document in the “Words” folder you created a moment ago. You’re off. You can now reward yourself with, as the genius Douglas Adams would say, a nice, hot cup of tea.

You, you, you

As you write, you will use “you” almost exclusively – and you will almost never use “us”, “we” and “our”. No one is interested in hearing you talk about yourself (sorry) they want to know what’s in it for them. (This will change when humans realise that loving everyone and everything – without exception – is what life is really about. But this falls outside the scope of yourwebsitecourse.)

Your first paragraph will be filled with keywords relevant to your website and your target audience, and words related to those keywords. Eventually, you will link to all the other pages on your website. Include them now and you can create internal links later. Like this one, to my “About” page. 

You will write the first paragraph many times. You may even start it and come back to it later.

True story: I once spend a day and a half working on the first sentence of a letter, for a car launch. The effort paid off, when the work won an international copywriting award. (Note: This is totally meaningless outside the ad industry. And barely meaningful inside.)

I used to play a game when I wrote advertising material. I would try and get the word “You” as close to the beginning of the piece as possible. One of my most successful opening lines, in a letter, was this: “Let’s talk about you.”

Alex – yourwebsitecourse creator

Sometimes, when writing your website, you can feel stuck when faced with a computer screen. If so, reach for a pen and paper and write the old-fashioned way. There are two great things about this method:

• You will not lose any of your work. When you cross out a word or phrase, you can still see it. (When you delete a sentence in a word processing document, it may be gone forever.)
• As you transfer your handwritten work onto a computer, you will naturally edit the text. Your second draft (the one going onto the computer) will be better. It will improve with every edit until it is “finished”. (Narrator: It will never be finished.)

“You” may be the most important word in the world of advertising. But other important words, which you already know (but didn’t know you knew) are:

• Free
• Now
• Today
• Discover
• How
• Easy
• Win

Next time you see a headline that says something like, “Now you can discover how easy it is to win a free <whatever>” you will know the writer was too lazy or hungover to come up with anything original that day.

Or the headline was written by the client.

Possibly both.

Create a website tip: Do not use exclamation marks “!” or leader dots “…” in headlines. (Or even body copy.)

You will not finish writing your website in one day. (Great news!) Or even in one week. (Even better news! The fun goes on!) But little by little, it will come together. (Satisfaction guaranteed!) (That tip about not using exclamation marks… As soon as you make a rule, it tries to get broken.)

When you feel frustrated, take a break. Or change your activity. When you come back, go through your document from the beginning. Keep referring back to your brief. Remember your target audience. Draw from your research – or do some more. 

The office between the ears is never closed

Steve Warrell—Art director

Even if you think you have created the best website page ever written, leave it overnight and come back to it in the morning. With fresh eyes, you will see something that could be improved. (Professional writers do this every day.)

Final draft?

When you have finished working on your copy, read it out loud. Does it sound natural? If you were having a friendly drink with your target audience, would you say it like that? Would they understand? Does the proposition from your brief appear at the top of the page? (Although not necessarily exactly as it appears on the brief.)

If so, finally – and importantly – are there any:

• Spelling mistakes?
• Mistakes in grammar?

Your word-processing software may be able to help. But it might not catch  everything. (There is a double space between those last two worms. And that should be “words”. Argh!) You can use an online grammar checker like grammarly.com (which caught the double space but not the “worms”), or pay a professional poofreader. (Did you see what I did there?) 

You want to create a website that’s as good as possible. Or better.

1. Use short words
2. Use short sentences
3. Use short paragraphs
4. Use lists
5. Use links
6. Use images
7. Use keywords
8. Use the save button

Its or it’s?
“It’s” is only ever used instead of
“it is” or “it has”.
The rest of the time, it’s always “its”.
Isn’t it?

Alex—yourwebsitecourse grammar police

Go through the same process for every page of your website. Each page will have its own keyword or key phrase (aka “focus phrase” in SEO speak*). Depending on your business, it may even have its own target audience.

Try and link every page to every other relevant page using internal links. So you can show your readers everything you want them to see. And show Google your website is worth including nearer the top of their results page.

*We will come back to SEO a bit later.

If you are creating a website to sell something, can you answer these 10 questions with “Yes”?

Does your website:

1. Describe the problem it will solve?
2. Show you understand the problem?
3. State the solution?
4. Introduce the product?
5. Say how the product solves the problem?
6. Show how the product is different from the competition?
7. Show how the product is better than the competition?
8. Describe the result of using the product?
9. Overcome the barriers to purchase?
10. Tell your reader what to do next?

If so, congratulations!

Images are not there to fill up white space and make your page look pretty, they are an opportunity to:

• Establish and reinforce your brand
• Show your product or service
• Support the point you are making
• Help the reader understand the benefits
• Generate a positive emotional response
• Attract readers via online image searches 

Your images must be relevant to your target audience and chosen with the same degree of care as your words. They will also use keywords (or related words) in their names, captions and tags, as you will see.

Because you have made notes while writing your pages, you have a list of images to find or create. That list may be quite long. Don’t be alarmed. This is normal.

If you want a slider at the top of a page, you will need at least two images for that. And another image for your introduction. Then another image or two, to illustrate your story. (For example.)

In the world of film, a scene might start like this: 

• “Wide” shot – a city with famous landmark (to establish the location)
• “Tighter” shot – a café on a street (drawing you in)
• Close-up – sugar poured into a cup (more intimate)
• Medium shot – two people talking (back to the plot)

How can you draw the reader into your story using images? A mix of wide shots and closeups could be good. 

1) One world-famous airline solved this problem by using images that showed the presence of people, without showing the actual people. For example, footprints in the sand on a beach.

2) One housebuilder used illustrations of puppies and kittens in their advertising. Foot traffic to the showhomes was good. As an experiment, they tried illustrations of human babies. Foot traffic dropped off dramatically. The animals were back within a week.

Here are four ways you can find the images you need to create a website.

1. Take them yourself
2. Employ a photographer
3. Use a photo library
4. Online image search

Creating your own photos makes perfect sense. Who better to photograph the subject you love than you? It’s free. It’s fun. You know where the light is best. You’re guaranteed to learn something – and you might find out you have real talent.

Here are six tips to get you started:

1. Use the same camera for every shot (your mobile phone might be ideal)
2. Consider everything that will be in the shot – not just the main subject
3. Use props that are relevant to your target audience
4. Take wide shots (you can crop them later on the computer)
5. Take photos using natural light (ie, next to a window)
6. If you see something wrong later, shoot it again (it only costs time and effort)

If you have the budget, you could employ a professional photographer. You might still do a lot of the work, arranging props and setting up the shots. Or pay more and the photographer will provide a stylist, a model and whatever else is needed. Retouching may also be required.

This option can be expensive, but will give you the excellent results. Depending on ability and reputation, photographers can cost a few hundred per day to thousands (GBP).

I once asked a roomful of art directors in a major London ad agency how much the most expensive photographer they'd ever employed was. I think it was well over £20,000 – per day. A famous car photographer. He came out of retirement to work for a week or more. Many people would.

For many years, advertising agencies have used photo libraries instead of employing photographers. The picture libraries they use (like these) can be expensive, because of copyright and usage fees.

Agencies just pass these costs on to their clients, which are passed on again to the consumer.

Happily, there are photo libraries where we can all find images that are free to use. Here’s a blog post that includes details on usage rights so we won’t get into trouble. (The yourwebsitecourse website uses images exclusively from pixabay.com. Apart from the one above of the site plan, which I shot in front of a window, and some screen grabs.)

QNow you have access to millions of images, how are you going to find the few you need?

AOne at a time.

Here’s an example of how to find an image quickly and easily, using a photo library. (Written as it happened.)

You decide your website needs a cup of coffee (probably because you do). You go to pixabay.com and type “coffee cup” in the search bar. You select “photos” from the “images” drop-down menu (because you are not interested in illustrations, vector graphics – whatever they are – or video). You are shown 37 pages of coffee cups. Lots of them are great, but it will take ages to look through all those images. Nothing grabs you on Page 1. 

Then you have an idea. You type “empty coffee cup” into the search bar. There’s only one page of results (happy face) but none of them are inspiring (sad face). 

Another idea: you search for “espresso cup”. There are 12 pages of results. Most of the images are excellent – and there’s a photo on the second page that stops you in your tracks. A headline idea arrives that works with the image and – voila! Job done. 

To save the image, click on it and download it to your “Images” folder. You can register to download large file sizes.

Search engines like Google give you the option to finding images on the web. (This is why you include keywords in the title of your images. You never know where a new reader will come from.) 

If you are not familiar with this, go to Google and click on “Images” at the top of the page on the right. Now type the image you want into the search bar (eg, “coffee cup”). And you will be presented with an enormous number of images.

Click on “Tools” just under the search bar on the right (at the time of writing) to refine your search. Under “Size”, you will want the larger file sizes. Under “Type”, you will want photos. You can also include usage rights so you don’t accidentally breach someone’s copyright.

Your website will need images in various formats (shapes). Such as:

• Long, thin images for banners
• Square images
• Standard formats (eg, 5:7)
• Contemporary formats (eg, 16:9)

Choose a few formats you like and stick with them. The yourwebsitecourse website generally uses these, except the 5:7, which is a bit ordinary for me. But for your site, you are the photo editor – and what you say goes. Consistency is important, for a professional look and feel. (The same applies to colours, fonts, and font sizes.)

While on the subject of images, avoid having light coloured text on a dark background when there is a lot to read. White text on black is 90% harder to read than black text on a white background. The reader’s mind may treat your important words as an image and not even read them. Or give up half way through because it is too difficult to read.

While on the subject of images, avoid having light coloured text on a dark background when there is a lot to read. White text on black is 90% harder to read than black text on a white background. The reader’s mind may treat your important words as an image and not even read them. Or give up half way through because it is too difficult to read.

Your computer probably has all the photo-editing software you need. You can crop images, adjust the colour, brightness, contrast, add filters and reduce the image file size with a few clicks of the mouse.

Cropping images is another chance to explore your artist side. Here’s a short video that will give you a few ideas about how to improve the image you will use to create a website. Don’t forget your target audience – your website is for them more than you. 

Image names are important – for you and search engines like Google. One reason the coffee cup above was on page two of the pixabay results was its file name (other reasons include tags – more on that, later).

Every time you crop and save an image, give it a name that makes sense without looking at the image. For example, “coffee-cup-banner”, “coffee-cup-square”, “coffee-cup-16×9”. You do not want a folder full of files called “DSC-0974” and “IMG-427”. 

Create a new folder in your website “Images” folder, called “Images-FINAL” (for example).

Make a copy of every image and move the copies into the “Images-FINAL” folder.

Using the photo editing software on your computer, reduce the dimensions of each image to the size they will be on your website. This might be 300 pixels wide for an image on a page, or 1900 for a banner. (Do this later, after you have chosen your WordPress Theme). Then use free online image optimisation software like Kraken to reduce the size of your images further.

Save these new, optimised images, in a folder called “Images-OPTIMISED”. (You will see why, later.)

If an image loses too much quality, make a new copy of the original image and start again.

You will need images in various sizes, for your website and for other social media activity. Here is a really handy blog post that tells you the recommended image sizes for social media in 2020.

Last year, a designer told me to save images as .png files with a density of 72 dpi. I am exploring this and it seems to work. I still tend to save images as .jpg files. I wish this was all easier and maybe it will be in time. If you find it a bit overwhelming, take another short break. 

Here’s an excellent article with some website design tips backed by research. Five points worth mentioning, which are included in most WordPress Themes as standard, are:

• Logo in the top left
• Horizontal navigation in the header
• Search bar at the top
• Social icons at the bottom
• Mobile responsive design

Try and change the layout of the page as the reader scrolls down. Sometimes a small image on the right. Sometimes a big image running across the whole width of the “page”. Sometimes text in two columns etc. 

Short columns of text are read more than wide columns. Use the sketches you made on paper to inspire the designs you will complete on the screen. Scroll through this page again and see what you prefer.

If you already have a domain name (aka url), go to the next section.

If you haven’t decided on a domain name, it’s time to have some fun. You will see the domain name for this website begins with “you” and includes “websitecourse”. Which helps readers know what the site is about immediately. 

A short, memorable name makes sense (to me). To see if it’s available, type it into a search engine. Or use the domain name finder at someone like Penguin UK (go through this link and I will get a £5 referral bonus if you sign up with them).

Prices for domain names through Penguin UK are low and renewable every 12 months.

If you already have web hosting, go to the next section.

Before you can build a house, you need land. In a similar way, before you can build a website that people can find online, you need web hosting. 

The yourwebsitecourse site is hosted by Penguin UK – a company that offers packages from just a few pounds a month. For more information, click on this link (I will get a £5 referral bonus if you go on to buy.)

If you are paying more than that for your web hosting, you can transfer your hosting to Penguin UK – and save money – by clicking on the link. I’ve been using this company for years and their technical support (if needed) has been very good.

After you have a web hosting package, it will only take a moment to install WordPress. With Penguin UK, simply:

1. Go to your Control Panel
2. Scroll down to the Softaculous Apps section
3. Click on the WordPress logo
4. Click install
5. Complete the sections on that page (NB: delete “wp” in the “In Directory” section)
6. Select a Theme (any for now)
7. Click “Install”

Plugins are extra bits of software that help you create a website that works the way you want. Here are four essential Plugins to download before you even start build your site (live or with Wamp or Mamp). Trust me on this.

1. Akismet Anti-Spam (prevents spam attacks) 
2. Jetpack by wordpress.com (filled with brilliant features)
3. Smush (reduces image sizes for added speed)
4. Yoast SEO (your essential keyword helper)

To download a Plugin, in the black sidebar on the left of the WordPress Dashboard (currently under “Appearance”):

• Click on “Plugins”
• Click “Add New”
• In the search bar, type the Plugin name
• Click “Install Now”

Many Plugins are free but offer extras features when you upgrade to Premium. Start with the free version – you may never need to upgrade.

Read about the Plugins you want before you install them and delete the ones you don’t use. (Plugins take up web hosting space and you want your site light and fast.)

Because you done the work already, you can create a website media library in a couple of clicks of your mouse (or trackpad).

In the black sidebar on the left of the WordPress Dashboard:

• Click on “Media”
• Then click on “Add New”
• Click on “Select Files” (just like the picture here)
• Select all the files in your “Images-OPTIMISED” folder (hold down the SHIFT button and click on the first and last)
• Import them

While they are loading, congratulate yourself on a job well done. Now carry on, step by step.

In the black sidebar on the left of the WordPress Dashboard:

• Click on “Pages”
• Click on “Add New”
• In the box where it says “Add title”, type “Home” (for example)
• Click on “Publish”
• When asked if you are ready, click on “Publish” again now

Repeat the process for every page you have on your website plan (aka structure). Just type in the titles for now. You will add all the content later. (They will not all have “Home” in the title box.)

Creating a website Menu in WordPress is one of the easiest, most satisfying and exciting features. Yes – exciting!

In the black sidebar on the left of the Dashboard:

• Click on “Appearance”
• Then click on “Menus”
• Click on “Create a new menu”
• Give the menu a name “Menu 1” is fine
• Add the Pages you just created to the Menu (by selecting them and clicking “Add to Menu”)
• Re-order the menu by clicking and dragging the boxes around in the list
• Click on “Save Menu”

Change the Menu labels

If your Page headline is quite long, you should replace it with a special short title in the Menu. (Aim for Menu labels of one or two words.)

In the “Menu structure” area:

• Click the arrow next to “Page”. This opens the box to reveal the “Navigation Label” field.
• Type what you want to appear in the Menu here. Then “Save Menu” to see your changes take effect. 

Change the menu order

Simple click and drag the boxes vertically. (I love this so much.) Then save.

Create sub-menu items

Sometimes, you will want several pages to appear under one Menu label. (These are called “sub-menu items”.)

To do this, click and drag the box one place to the right (as in the picture above). Click “Save Menu” to see what this looks like. You can easily change it back.

Create Menu labels that don’t link

If you want Menu labels that only have sub-menu items, you can create “Custom Links”. These are great.

In the “Add menu items” section:

• Click on “Custom Links”
• In the URL field, type “#”
• Click “Add to Menu”
• Drag the box to where you want this in the “Menu structure” area
• Change the “Navigation Label” to what you want the Menu label to say
• Drag the sub-menu items to the order you want under this
• Click “Save Menu” to see your changes take effect

For other enquiries, ask Google

If you want to know how to do something unusual with your Menu, there’s a good chance someone already has the answer. Google is your friend and ally.

(Other search engines are available.)

In the black sidebar on the left of the Dashboard:

• Click on “Themes”
• Click on “Add New”
• Check out the “Popular” Themes
• Click on “Latest” to see all 4,000(ish) Themes
• Try the “Feature Filter” too

Use your hand-drawn designs to find Themes that match your vision for your website. Write the names of those Themes down (so you can find them again) and look at the demos for further information. When you find a Theme you want to use (which may take hours), click on “Install”, then “Activate”.

The yourwebsitecourse Theme is “Customizr” and the Theme at yourwebsitecourse.wordpress.com is “Twenty Seventeen”. Both are free – and easy to set up. All Themes have tutorials, helpful documentation and, often, forums.

In the black sidebar on the left of the Dashboard:

• Click on “Appearance”
• Then click on “Customise”
• Click on “Global settings”, “Front page content”, “Header”, “Footer” and “Widgets” (or whatever it says here for your Theme).

Just spend a few minutes getting familiar with these sections and this new vocabulary. You will come back to this later.

Before long, you will be able to navigate your way around here quite happily. Right now it might seem quite alarming.

This is where it all comes together. The words you’ve written, the images you’ve found, made and loaded into the Media library – everything.

In the black sidebar on the left of the Dashboard:

• Click on “Pages”
• Then click on “All Pages”
• Click on the Page currently called “Home”

Then go to this example page to see how to add your content to your page using the WordPress block editor. Repeat for each of your pages. (That page was created in 2019 using an earlier version of the new WordPress block editor. Some of the blocks have changed, but you get the idea. It’s play time!)

Now you have content on all of your pages, you can complete the customisation process and see what your website will really look like. 

• Click on “Appearance”
• Then click on “Customise”
• Click on “Global settings” and go through every option for your Theme
• When you find “Front page displays” select “A static page”, choose your Homepage

Every Theme takes time to set up before it looks like the examples on the Themes page – and every Theme is different. But each Theme has documentation and tutorials that will guide you through the process.

You may spend some time customising a Theme before realising you don’t like it. Or it doesn’t do something that’s really important to you. That’s fine. Just go back and try one of the other Themes you liked. I’ve done this more than once and the knowledge is never wasted.

There are occasionally unexpected items in the baggage area challenges to overcome when learning a new Theme. Sometimes, you must walk away from your computer and have a cup of coffee. (Tea is also good.)

During your break, you may think of a solution to the problem. Or you will think of a question to ask Google, or the Theme Forum, or one of the other students on yourwebsitecourse. You have learnt a lot, but these are still the early days of your new job as a web developer. 

Be assured that all problems are solvable. And it is seriously satisfying when the one who solves that problem is you.

If you find the information on this page valuable – and it is – please do something lovely for someone else today. Failing that, do something lovely for yourself. We are all connected.

To show your appreciation for the time and effort that went into creating this course, click on the link on the right and buy me a coffee. Fairtrade organic Guatemalan is my blend of choice.