Introduction to Web Programming
This is going to be a series of articles dedicated to teaching the basics of web programming. Articles in this series are going to be posted twice every week.
Article 1
Why is learning web programming important?
Computer Science is a newer discipline springing to existence within the last 100 years. Advancements in technology are being made every day and tech jobs are in demand right now more than ever. That means it's intuitive that we see the value in learning how to develop and utilize these technologies.
Other than that, learning this stuff can help you can make the big bucks!
So Where do we start?
I've decided to begin this series with some basic knowlege of HTML and CSS.
HTML - Hypertext Markup Language
CSS - Cascading Style Sheets
These are a couple of the standard programming languages used for web development.
What is a programming language?
A programming language is a special language programmers use to develop software programs, scripts, or other sets of instructions for computers to execute. - Source
We can learn these languages much like we could French or Spanish. While in Spanish we might be conjugating our verbs, in programming languages we are debugging, evaluating runtime, and optimizing functions. Once we learn these languages we can use them to build cool things on the web like websites and web applications.
There are dozens of cool programming languages to learn and they all have their differences. I recommend checking out this article where I wrote about what programming languages people should be learning.
Im ready to build my first website
Not so fast. First we need to talk about file extensions.
Everyone should know what a text file is. Google defines a file extension as a group of letters occurring after a period in a file name, indicating the format of the file.
For example: When we create a pages file and save it, our file extension will be .pages. When we create a text file the extension will be .txt.
So when we create an html or css file, we are going to need to use the .html and .css file extensions.
Okay, now I'm really ready
If you'd like to follow along with my video series you are also free to do that. I know some people are able to learn better visually. I will say that I'm new to the process of making videos so you might just want to stick to the article series.
Anyways, everyone open up a blank file.
I don't care what text editor you use. On mac, you can use textEdit, which is the built in text editor. If you want to feel like a professional coder you can look up stuff like sublime text, brackets, or atom.
Once we have our file opened we're going to want to go ahead and immediately save our file. I recommend saving the file to your Desktop so that you can find it and open it quickly and easily.
Hello World
Now that we have our file saved with the correct file extension we can add some html code. The first application that every programming tutorial will teach you is the hello world application.
Hello world is one of the easiest things we can possibly build.
To begin, we'll add the template html code that every html file needs.
<!Doctype html>
<html>
<head><title>Hello World</title>
</head>
<body><h1>Hello World</h1>
</body>
</html>
This is basically just some standard template code that you can copy and paste directly into your file.
Once you've copied the code, make sure to save your file, then select it from your desktop. The file should open up in whatever browser you have installed (Chrome is the best) and you should see something like this.
If you got to this point successfully then congratulations! You've just built your first web app.
What does the code mean?
There are two important things you need to know about what we have so far.
HTML is made up of tags. For example, <html></html> is one set of tags. <head></head> is another. Tags are nested within each other, much like Matryoshka dolls. (see pic to left)
Every tag has it's own meaning and almost all tags are a pair of two opening and closing tags. The closing tag is always denoted by the forward slash. (ex: </head> is the closing tag of the <head></head> pair.)
The html tags are the outermost tags of our code. They are going to be the container any other tags we add to our file. So that means that the opening <html> should always be at the top of our file, while the closing <html> should always be at the bottom.
The head tags are going to hold important information about our web app/website such as links to styles, links to javascript files, metadata, the title, and much more. As of right now we've added our <title></title> tags with the title Hello World. The title of a web app is always displayed in the little tab bar on whatever browser you're using.
The body tags are going to hold all of the solid content that is displayed on our page. Right now we have some header tags in our file. (<h1>Hello World</h1>) h1 means header 1. There are 6 different header tags. Header 1 (<h1>) is the largest and header 6 (<h6>) is the smallest. We'll get more into this kind of stuff in the next article.
The final thing you guys need to know is that all of these tags are going to be elements of our web app/website. These elements are technically objects of the HTML DOM. There are a ton of cool resources for you guys to learn about the DOM, but basically the people that invented the WWW (the web) created a standard model for how people would program websites and stuff. I'm trying not to dive to deep into detail in these articles because some people can get really confused by too much information at once.
One of my favorite resource when I was first learning this stuff was w3schools.com. If you have any questions about this stuff, they'll have your answers. Here's a link.
End Article 1
I hope everyone enjoyed and could understand this post. If you're interested in learning more about web programming then stay tuned. I'll try and post another article in a couple of days.