Learn web design, how to code and choosing a content management system
More and more of us are going online for our general needs such as going on social media, buying shopping online or just generally browsing the internet.
More and more business are also getting their own website developed to sell products and services, especially during the recent lockdowns back in March 2020 and beginning of January 2021 to keep their business alive during difficult times.
Over the last 20 years web design has come a long way, we have needed to adapt with changes from search engines such as Google's algorithms and recent changes to include responsive websites or SSL (Secure Socket Layer) encryption.
In this blog we are going to be learning where to begin in terms of design, where to learn coding and testing out some of the examples from external websites and also content management systems you can use if you don't want to fully code the website yourself, although we will show other alternative options.
If you are new to web design this is a great starting block for you to learn from the beginning.
So, you have decided that you want to become a website designer but unsure where to start? This is the perfect opportunity to decide which route you would like to take.
Some of the options you can choose from include learning to fully code your own website, this is the most difficult route and will require a level of patience.
Another option is using a content management system or CMS, this allows you to manage your site more easy and make any changes to content, layout and images.
One example is WordPress, easy to use content management that allows you to change themes, add plugins and adapt to how you want it.
WordPress also has hundreds of free and paid themes to choose from, leaving you to just edit the content and layout.
A good starting point is learning HTML (Hyper Text Mark Up Language) which is used on all websites.
When using HTML you use the following symbols < and >
HTML is generally used for headings, paragraphs, sections, images and links.
These are the most common elements used with HTML, we are even using it now whilst you are reading this but you can't see it because it is how it is seen by search engines and browsers so that it can be shown correctly, otherwise it would look a mess!
For the examples given below you may want to use the following resources so that you can join in and practice yourself.
Atom.io - A free code mark up programme, easy to use.
Online HTML editor - Easy to use online HTML editor, doesn't require any downloading of software.
Domain and Hosting - You may want to practice your skills online using the WordPress CMS, recommended for users that have an understanding of how domains and hosting work.
Bootstrap - For intermediate users, requires downloading and uploading to a hosting provider or opening with Atom.
Lets have a look at some of the most common examples and test them below.
Headings break up different sections of text so you don't get confused about what you are reading.
Headings range from H1 which is the most important, commonly used for page titles to H6 which is least important.
Browsers also resize heading tags with h1 being the biggest and h6 being the smallest.
We have written below an example of how you would use the H1-H6 tags.
<h1>This is an example of a page title using H1 tag</h1> <h2>This is an example of a page title using H2 tag</h2> <h3>This is an example of a page title using H3 tag</h3> <h4>This is an example of a page title using H4 tag</h4> <h5>This is an example of a page title using H5 tag</h5> <h6>This is an example of a page title using H6 tag</h6> The H1 tag should only be used once as the title of the page and the rest depending on relevancy of the topic.
H2 tags are generally used to list subtopic titles after the H1 tag.
Creating paragraphs are essential, especially if you have a long piece of text you can break it up into sections to make it easier for the reader to understand.
Paragraphs are simple to create by simply using the </p> tag.
<p>This is an example of a sentence.</p> Images are great to break up text and also give the reader more of an understanding of the topic.
The image tag is slightly different to other HTML tags as it doesn't need closing at the end using </>
A standard format inserting an image would be as the following:
<img src="Insert URL to image">You can also add a name for your images so search engines such as Google understands the type of images by adding alt="" after the image link.
<img src="Insert URL to image" alt="Name of image">If the URL link is incorrectly specified the alt tag description will be used instead.
Links are used in menu headings and footers to show different pages on a website, they can also be used to link to external websites.
Creating a link is great if you want to link to a similar page or for the user to continue reading another topic.
Lets have a look at and example below.
<a href="Insert link here">Link text</a>Lets break this down, the a at the beginning is for anchor. When you link to another page this is also used for SEO purposes when another website gets the backlink.
Href stands for hypertext reference used for the location of a web resource. Check the external website begins with http:// https:// or www. so the link is entered correctly.
The link also requires some text so the reader can click the text to go to the linked page.
You can also use the target="_blank" within the link should you want them to go to an external page but also stay on your website, it will open up a new browser window.
<a href="Insert link here" target="_blank">Link text</a>Simply enter target="_blank" after the link.
Sometimes when formatting a page you might want to add extra white space to separate elements or text.
This can easily be done using the <br /> tag.
You may want to use this several times, just copy and paste to create more space.
Adding a simple line help break up sections of text.
Simply add <hr> to create a line like the one shown above our footer section.
A couple of other tags you may want to use to style your text include:
Bold text using <b> or <strong>
Underline text using <u>
Italic text using <i>
Some of the tags mentioned above are just the beginning and commonly used HTML, we've added some more resources below for further learning.
Now the you have some understanding of HTML and how it works you will want to move to learning CSS (Cascading Style Sheets).
CSS provides styling, making it look more attractive to users.
CSS can be created in two different ways:
For this blog we are going to use the first option, using a stylesheet.
Create a document and change the extension to .css
the easiest way to do this is if you are using Windows:
If you have file extension types hidden you will need to change this by typing in search (next to start menu):
Once you have created the stylesheet put it in the same folder as your index.html file.
Create a <header> section within your index.html file, it should look something like this:
<header>
<link href="CSS filename" rel="stylesheet"></header>
If you also require an index.html file you can create it the same way as you have done with your stylesheet but save the file as UTF -8 and with .html at the end.
You can also download an example from the Bootstrap website to save you having to create the files then use Atom.io to open the folder or you can upload the files to your hosting provider.
To understand CSS we need to break it down into two parts:
A div goes with your HTML and any classes are added to the stylesheet.
<div class="css-example"> Any text within the div
<div>The example shown above has a custom class named "css-example". you can now add this to your stylesheet and add any styling to it.
Using the class we've created above we can now add it to the stylesheet.
.css-example {font-weight: bold;}As you can see we have used the class .css-example and then CSS to make the text within the div bold.
Other common CSS examples include:
Using the class we have used above we will now change the text colour.
Using the HTML colour wheel we can choose the exact colour we want to use by going to HTML colour codes.
Let's use red as an example, the colour code for red is #FF3333.
.css-example {color: #FF3333;}Note: You need to use the American spelling which is "color".
Padding is used to add extra space around an element, useful if any elements are too close.
Lets use the example class again and add 10 pixels space to the top, right, bottom and left of the text.
.css-example {padding: 10px;}You can also only apply padding for the top, right, bottom or left rather than all.
This is done by breaking it down into 4 sections
.css-example {padding: 10px 20px 30px 40px;}In the example above we've added:
You can also just apply padding to the top and bottom, the example below shows 20 pixels of padding.
.css-example {padding: 20px 0px;}Or only to the left and right, we've added 30 pixels of padding below.
.css-example {padding: 0px 30px;}Margin uses the same technique as padding using the margin property.
.css-example {margin: 10px 20px 30px 40px;}Borders come in different styles using the border-style property, these include:
In the example below we will use the border-style property to create a solid border:
.css-example {border-style: solid;}Let's add a few more elements to our border, we want it red and the thickness at 5 pixels.
.css-example {border-style: 5px solid #FF3333;}This is the fastest way rather than having to add the extra properties:
border-width border-style border-color Background colors can be created by simply using the background-color property.
.css-example {background-color: #FF3333;}The above shows a background colour of red.
To upload your own image you can use the background-image property.
.css-example {background-image: url("imagename.png");}If the image that is too small, you can repeat the background by adding repeat.
.css-example {background-image: url("imagename.png") repeat;}
You can also position the background as by default it's in the top left, lets move it to the centre.
.css-example {background-image: url("imagename.png") center;}These are just a couple of many CSS examples to style your webpage, check out the w3schools CSS guide for a more in depth review.
If you already have an understanding of HTML and CSS it's likely you have already tested a content management system.
A CMS is used to easily maintain and edit a website without scrolling through endless coding, making it easier to maintain.
Although content management systems are the preferred choice, many web designers and web developers prefer to create their own websites so that it is error free and faster to load on browsers.
Some popular content management systems include WordPress, Drupal and Joomla.
WordPress has the leading market share with over 455 million created worldwide, considering they is around 1.3 billion thats nearly 40%.
WordPress is used with amateurs and professionals, it has everything you need including free themes and thousands of plugins in integrate into your website.
WordPress is also built on PHP, but don't let that put you off as you don't need to touch any of the PHP coding.
Other big names that use WordPress include:
If you are looking for an alternative and don't want to use a content management system a great starting point is to use Bootstrap.
After using WordPress for around 8 years we decided to move to Bootstrap as WordPress can become quite clunky and slow, especially when you start adding in loads of plugins.
We have noticed an increase in page load speeds and the CSS is ready made for you, saving you the time in having to create loads of custom CSS!
You can download the most recent Bootstrap on their homepage, the website also has loads of information on how to get started, icons to integrate into your website and coding examples.
Bootstrap is great if you have got the patience with coding, you can make your site exactly how you want it to be!
We hope that this guide is a good start for you in your journey to become a web designer and expand your knowledge.
Web design is a long road so you will need plenty of patience, pen and paper to make notes to remember all them properties and tags.
If you are looking to practice online and need your own domain and hosting, check out our DirectAdmin web hosting page.