Making Websites for Non-Web people, part 1

For those who have no direct experience with web development or web design, this simple tutorial will give you a hand in creating a functional website that you can later put up on the internet.

We will cover in part 1:

Grabbing a domain then using web hosting.

Basic HTML/CSS

PART two

Grabbing JQuery Plugins and Playing with Bootstrap

A bit of WordPress might be part of it


DOMAINS/WEB-HOSTING:

First things first, you’re going to either want to grab a web host or a domain, usually web hosting plans come with domains so its not as big a deal. If you already have some code and want to develop your website out before putting it on the internet, you can choose to do this step later.

The issue with web hosts is that you want to look at two things: 1) Is this company customer-friendly and how confident am I with dealing with my website on a regular basis? 2) How many people are going to use my website on a regular day?

Question 1 helps you choose what kind of web hosting company based on the sort of support you will be needing and how familiar you are with dealing with websites. Question 2 helps you determine your plan or the kind of servers you want. If you’re only looking for a personal website, consider Github Pages or using a Shared Server: the cheapest and “smallest” server. As you gradually move up, you’re going to use a virtual or even a dedicated server, take in mind however that these servers are definitely for major league companies.

If you want, web hosts are usually connected with website builders such as WordPress or other Content Management Systems (CMS) that makes building websites easy for the layman. However, if you want to get into more of the action, scroll down.

HTML/CSS

Now you’re getting into some of the nitty-gritty of developing a website. Take in mind that HTML/CSS/Javascript are still the basic skills of your average developer and mastering them only means you still got more to learn. If you’re really interested in learning web development, consider CodeSchool or CodeAcademy, I’m only going to go over some basics.

If you just want to find and use ready-made templates without getting into too much of the coding, skip this part and try the next section (Bootstrap Templates), else pay attention.

HTML stands for HyperText Markup Language, its what you would use to structure how your website looks like and is meant to be also used to help with the design/CSS as well. We won’t be covering HTML5 in this tutorial but if you’re interested, do search it up, its definitely more powerful than your average HTML.

HTML uses tags that are seen like this: < tag > and comments (things that don’t show up on the internet but on your code so that you can leave a comment) look like this <! — comment — > (its two dashs, medium doesn’t let me display two at the same time)

So a basic html file (save it as .html to turn it into html) starts like this:

<!doctype html>

<html>

</html>

where the dots represent the content. The tags here shows that this is a html file and follows web development industry standards.

The html file is separated into two “sections”: the <head></head> tag which holds things that would be used to describe your website and would not be displayed on the website itself, however things like the <title></title> tag is used to provide a name for the website which can be seen at the top of the browser.

What the <title></title> tag would display

Then, you have the <body></body> which holds the content of the website and is actually used to display the stuff you want on your website.

Here is a picture of what I was talking about by the html file for your website

Common tags you would end up using in the body tags are <p>…</p> which means that you are starting a paragraph and normally holds the text for your website.

The <br> tag means line break and is equivalent to what would happen if you pressed “enter” on Microsoft Word or any other word processor.

The <img> tag is for including a image or picture on your website. Remember to save it in the same folder/directory as your html file so that it can be accessed using the src= “filename” and you would need an alt= “description of image” which would appear if the image wasn’t able to be loaded on your website.

The <a> tag is called an anchor, it is used to link other things onto your website. So if you wanted to link to something.com, you would write “something.com” behind href= which means that it would move to that link you provided. Also between the beginning <a> and ending </a> you can include a short description of where the link would send to.

<img> tags hold your images and you use a source attribute “src=…” to link it to an image in the same folder as your html file or you use the whole path aka the things you would press to get to that file.

<script>…</script> tags hold your javascript and is there to make your webpage interactive whereas <style>…</style> holds your css and makes your webpage pretty.

CSS

CSS is there to handle the design of the webpage. However there are also certain commands to manipulate the content of the webpage but its generally not recommended as its much easier using javascript or just changing the html.

There are some beginner css “rules” that you might want to know. CSS rules are basically what you’ll be using to code your CSS and they generally look like this:

body {

color: yellow;

}

where they are referencing a tag that is on the html page and manipulating its certain properties such as in this case its font color and turning it into yellow.

Like what you read? Give Michael Ding a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.