New Site, Who Dis?

Hi, my name is Will Forbes and this is my website.

I’m a web developer with a few years of experience and I really like working on websites. I’m also a skateboarder of 20 years, I play the bass and electric guitars, I like mathematics, chemistry, logic, religious studies, and many other topics. All of which I’d like to include here eventually.

I’ve held this web domain (wforbes.net) for a while now and I haven’t used it for much. I think now it’s time that I start creating some content for it. I’ve decided to go with using WordPress. This is a big change considering I just spent a quite a bit of time working on my own website framework using the PHP programming language. At the time this post was authored you can still find the framework I started working on at: http://github.com/wforbes/wforbes .

With that framework I was really trying to get into focusing on back-end web development. Following standards like PHP-FIG and incorporating JSON Web Tokens I was really dead set on building out my own PHP framework that I could use to quickly put together websites for others. However, after a few months of work I’d really started realized that my time would be better spent elsewhere. Like learning how to work on existing frameworks like Laravel or Symfony and CMS‘s like WordPress or Drupal.

Either way I’ve got a lot of learning to do and I plan to keep this site updated with what I’m working on. It makes sense to include tutorials and write ups on the things I know and learn in order to share the knowledge I gather with people that might be interested in learning the same stuff. Web site development is a huge industry with limitless potential. Anyone who is the least bit computer savvy can pick up learning how to build websites and with enough time and energy they can turn it into a career.

Stay tuned for more posts!

How To Build A Basic Website

So you’d like to learn how to build websites but you don’t know where to start. You’ve landed on the right page, my friend, because in this post I will try to break down how to produce a website; whether you’d like to use code or not.

Automated Website Builder Apps

First, let’s talk about automated website builders. Instead of taking all the time to learn how to code a website by hand nowadays it’s much more common for people to use what’s called a web builder or page builder to construct their website. These are offered by many different services that all either offer a free service or charge a subscription fee to use.

To name a few web builder apps, we have: Weebly, Wix, Webs, Duda, SiteBuilder, Squarespace, WordPress, Yola, IM Creator, Sitey, Jimdo, WebStarts, Moonfruit, Doodlekit, Voog, Webnode, emyspot, GoDaddy, Zoho Sites, and of course website.com . (ref: 20 free website builders for small business )

Many of these sites offer drag and drop interfaces that let the user take full control of where elements and items are arranged on the webpage; all without having to mess with the HTML, CSS or JS (website code). Equally many of them offer premade website templates that massively speed up the web creation process.

Is learning to code websites for you?

Web builders are great, but what about those of us who would like to take it a step further and code the website ourselves? Why would someone learn to manually code a website? This really depends on who you are and what your goals are.

If you’re a business owner looking to set up a website to sell your products or offer information for your services, then it just wouldn’t make sense to spend all the hours learning to code websites. If all you need is one website, then a web builder is perfect for you. However, if you’re interested in working on websites as a career Web Developer, perhaps with the goal of eventually working for a tech company then learning how to code is the way to go.

HTML Basics

Learning to code websites requires that you first understand the basics of HTML, this stands for HyperText Markup Language. What does that mean? A markup language is a way of typing text so that parts of it can be distinguished from the rest of the text being typed. For instance, an HTML document will make use of the less-than and greater-than symbols ‘<‘ and ‘>‘ . These are often called angle brackets when referring to them in HTML. They are placed around text so that they form what is called a tag. Some examples of HTML tags are <h1> for Heading Size 1, or <p> for Paragraph.

These HTML tags are meant to be put before and after some text like this:
<h1>This is a Heading size 1</h1>
<p>This is a paragraph</p>

Although in this article I’ll do my best to give a small primer tutorial on the subject; there are many, many, resources online that offer full sets of tutorials and guides to learn how to use HTML like w3schools, freecodecamp, Mozilla Developer, Codecademy, Htmldog, and of course html.com to name only a few.

Create your first HTML site with Notepad

So how do you make use of this HTML? A simple text editor like Notepad (on Windows computers) can be used to make your first webpage. On Windows 10 you can type the Windows Key on your keyboard to open the start menu search and type “Notepad” and hit the Enter key to open the notepad program.

Now with notepad open, let’s enter in some of the code from earlier:
an opening heading tag, then some text, and a closing heading tag;
then on a new line, an opening paragraph tag, some text, and a closing paragraph tag…

When you’re done, go up to the File menu and select Save As…

Now normally Notepad is used to save Text files using the *.txt file extension; however this time we’re going to want to save this file as a HTML file named ‘index’. So in the Save As dialog window enter ‘index.html’ in the File Name Field and select ‘All Files (*.*)’ in the Save As Type Field, like this:

To make it easier to find, I’m saving my HTML file into a folder on my desktop.

Now that you’ve made your website you’re going to want to open it in a web browser to see it.
So navigate to your newly created website file and right click on it’s file icon.
Now in the context menu hover your mouse over the ‘Open With >‘ option until the list of programs is visible and select one of the internet browsers on your computer. Some browsers that might be on your computer include Firefox, Chrome, Opera or Microsoft Edge. Click on one of these to view your new basic website… In the example image I’m opening mine with Firefox…

Now you can see the formatting of the text on the webpage, the Heading is larger than the paragraph and they both have some extra space around them.

Congratulations! You’ve built a basic HTML webpage!

Good job! But, that’s only the beginning!

There is a lot more to learn and practice before you’re able to code a professional website with colors and a full layout that you see on most websites online today. HTML is only the first language you will use when creating a website, there are much better Code Editors that you can use instead of a text editor like Notepad, and then there are more steps that need to be taken to put your website up online so that other people can view it at a web domain address like www.yourwebsite.com. If I could, I would include all of this valuable information in one blog post here – but sadly, I don’t think that’s possible.

HTML has gone through a few different versions throughout the years and it’s gotten better and more functional with each iteration. We are now, in 2018, on our 5th version of HTML, so you may see it called HTML5 in other places online. HTML5 often is termed to include CSS (Cascading Style Sheets) and JS (JavaScript) when it is mentioned. These two other programming languages help give the website it’s color, layout, design, formatting, interactivity, and animation.

In the next blog post we will look more deeply into the proper syntax for an HTML page, Cascading Style Sheets, JavaScript, Code Editors, and how we can use these to improve the website that we’ve started here.

Thanks for reading and stay tuned for the next installment of How To Build A Basic Website

How To Build a Basic Website 2

In the previous article we went over the basics of creating a very small website page using Notepad, HTML, and opening it a web browser. Now in this article I’d like to dig deeper and go over some topics that will expand your abilities to create a more standard and professional webpage.

Downloading and using A Code Editor

First, let’s consider what tools we can use to build and view our webpage. In the previous article we used Notepad, but that’s not an ideal solution for creating a website. It’s mostly meant for… well… small Notes, saved into a Text file. Since we will be creating HTML related code files it would make sense for us to use an app that’s meant to be used with code files like HTML. These take the form of a Code Editor.

There are many options when it comes to finding the right Code Editor for you. Some of these options include Visual Studio CodeNotepad++, Sublime Text, Atom, Brackets, and Coda (for Mac/OSX) . For a more full list of editors with Pros and Cons check out this article: https://mythemeshop.com/blog/code-editors/

For this article I’ll be using Visual Studio Code.

Code Editors often offer a wide variety of advantages over more simple text editors like Notepad. It’s common for them to change the coloring of the code you write to help identify segments of the code in relation to others. Let’s look at a comparison between Notepad and Visual Studio Code with the HTML file open from the previous article

As you can see, first the code editor on the right highlights the colors of the code so that we can more easily see the difference between the HTML tags and the text inside them. The <h1> and <p> tags are grey and blue, while the text is colored white. On the left side of the window in the Visual Studio Code editor, we see the file name and folder that’s open in a what’s called the Explorer. There are also many more options like searching, debugging and adding extensions to the editor; but these are a little ahead of where we are. Instead now let’s look at adding more details to our index.html code file from the previous article.

The Doctype tag

An HTML file usually begins with a Doctype tag. This is normally typed like:
<!DOCTYPE html>“.

The doctype tag should be the very first thing in the HTML file. If you’ll recall in the last article that I mentioned we are currently using HTML version 5. Well, the Doctype tag is an instruction for your web browser that lets it know we are using HTML5. In previous versions of HTML the doctype tag was longer and included more information like:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

Thankfully, now in HTML5 we only need to type <!DOCTYPE html> and the browser will know that we are using version 5 of HTML on the page.

The HTML tag

Directly after the doctype tag there should be an opening HTML tag in the code file. The opening HTML tag looks like this:
<html>“.

This will tell the web browser that everything after the opening HTML and before the closing HTML tag will be HTML which it can read and use to display our web page. It holds all the other HTML tags in the document (except for the doctype tag). So that means we add “</html>” to the very end of the document to tell the browser that there isn’t any more HTML afterward.

The head tag

The first tag inside the HTML tag should be the head tag. The opening head tag looks like this:
“<head>”.

The title tag

The head tag can contain all the elements that let the browser know about the title of the page, how to style the page, and how to make the page interactive. For now let’s just add the title tag “<title>” inside our head tag, like this:

Here I’ve added the title “Basic Website Tutorial” to the page but you can title your webpage whatever you’d like!

The Body Tag

The body tag contains everything on the webpage that’s visible. That means the <h1> and <p> tags that we already have on the page should go inside the body tag. Along with those, all other tags and page elements that we want to show up on the page should be put inside the body tag; after the opening “<body>” and before the closing “</body>” tag.

Save and View the web page

Ok now that you’ve added the doctype, html, head, title and body tags to the page you should save the document with CTRL+S and open the file in the internet browser again. You should be able to see the title on the internet browsers tab.

The Style Tag

Now that we’ve got the head tag on the page we can start to think about how we’d like to ‘style’ the page. By that I mean, how we can better color, format and layout the page. We do this by using the style tag. Inside of style tags we are able to specify how elements in the body tag show up on the page. We do this by writing CSS (Cascading Style Sheets), which is a different type of programming language that’s meant to work with our HTML.

Let’s say we want to make the H1 tag that says ‘This is a heading” show up as the color Green. First, let’s add a “<style></style>” tag inside of the “<head></head>” tags, after the “<title></title>” tag, like so:

Inside of the style tags is where we want to write our CSS. CSS is made up of what are called ‘rules‘. Each CSS rule has a selector and a declaration. You use the selector to select which HTML tag you’d like to change, and you use the declaration to describe how it should be changed.

Since we are selecting our h1 tag and changing it’s color to green, the following CSS will work for us:

h1{
    color: green;
}

As you can see in the image, the h1 selector is followed by an opening ‘curly brace’ { . The curly brace is what begins the declaration.
The declaration uses the ‘color’ property to tell the web browser that we’re changing the color, and it uses the ‘green’ value to specify that the color should be green.

There are over 300 different properties that are all able to change something having to do with items on a web page, color is only one example!
(ref: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Syntax )

Now when we SAVE our code file in the code editor, then go to the web browser and refresh our web page by either pressing F5 or clicking the refresh button at the top, we should see the heading now as the color green!

We will keep working with CSS in future tutorials, but now let’s take a look at JavaScript programming.

Basic Javascript Programming

So far in these tutorials we have seen and written code in the HTML and CSS languages, but there is another language that is very important for creating a web page: JavaScript. When you write Javascript you do so within the “<script>” tags. The Script tags are normally placed inside either the <head></head> tags or at the very bottom of the <body></body> tags. This topic is up for debate depending on when you’d like the web browser to load your Javascript. For the purposes of this article we will be putting our Javascript at the bottom of the <body></body> tag so that it will load AFTER the rest of the items on the page.

Javascript is often made out of blocks of code called functions. To get our page ready for our first javascript function, we need to add a button and some attributes. Then we will write our first Javascript function inside of the script tags.

The Button Tag

Let’s add a button to the page by using the “<button></button>” tag, right below our <p></p> tag within the <body>. Since our button will change the color of the heading, add the text “Change Color” inside of the button tag, like so:

Now our goal is to make it so that when someone clicks on the Change Color button, the h1 tag changes color from green to blue. We can do this by adding what is called an attribute to our button tag and our h1 tag.

HTML Attributes

An attribute goes inside of the < > tag area, just after the tag’s name. It usually then also has an equal sign followed by a value. We will use the id attribute to identify our h1 tag with a custom name of “heading“.

Next, we need to add an attribute called ‘onclick‘ to the button. It’s value will be equal to the name of our first Javascript function, surrounded by quotes. Let’s just say our function will be called “changeHeadingColor()”. We use the parenthesis at the end of the function name to denote that it is a javascript function. So, we can write our button’s attribute like so:

Every javascript function begins with the word “function“, then a unique name of the function, then open/close parenthesis ‘()‘, then open/close curly braces ‘{ }‘. Inside of the curly braces, we type the code that the function will do.

Our function will need to look at our webpage with the document keyword, then get the element by the Id attribute of “heading“, and finally change it’s style to the color blue. The function that does that and matches the name in our button’s onclick attribute will look like this:

function changeHeadingColor(){
    document.getElementById(“heading”).style.color = “blue”;
}

Here we can see that the function is inside the script tags, it’s named the same name we added as the value in the button’s onclick attribute, and it goes through the steps just described to access the document, get the element “heading”, access the element’s style, access the style’s color and finally set it equal to Blue.

Now remember to SAVE the code file after adding this function to it, refresh the page and try clicking the button – the heading should change colors from green to blue!

Now that we’ve covered some ground you may begin to see how HTML is the structure of the web page, CSS is the look and feel of the webpage, and Javascript provides the dynamic interactivity on a web page. Below are a list of links to get you started with taking tutorials and following further instruction in building a website:

w3schools – By far one of the most comprehensive list of tutorials and guides on building webpages, I still use this as a reference when working on most projects. It’s definitely worth checking out

freecodecamp – Goes through a step by step path through everything you need to know to get hired as a web developer in the form of interactive tutorials. They have amazing support through their community forum and youtube channel.

Codecademy – Offers a great set of free tutorials but also has a set of paid tutorials that come at the cost of a monthly subscription. They have an interactive step by step model that breaks down all the details of learning web technology.

Teamtreehouse – Another great site with interactive tutorials, workshops and many more programming topics than just websites. They offer a 7 day free trial and then a subscription fee after that.

With whatever you choose to learn more about creating websites, I just want to say thank you very much for reading my blog posts and make sure you check back later for more! Have a great day, night, week, weekend, month and year! Cheers!