Learning the Fundamentals of Web Development

In my understanding, there are three things you need to know in order to build your basic web page on the internet. Those things are:

1. HTML
2. CSS
3. A programming language

We can narrow the above to just two items if we wanted a website without any character (just HTML and a programming language), but where would the fun be in that?

Here is a quick down and dirty on what the different parts of these three items do:

HTML

This is basically the “skeleton” of a web page, it stands for “Hypertext Markup Language”. This is what structures the web page, it does this by introducing different tags that signify what kind of content will go on a specific section on the page.

For example: in order to write out a simple paragraph on a page you would use a ‘p’ tag within an html document. See below:

This code will spit out a simple page that will look like this:

Yea I know, boring right? Well that’s exactly what “p” or <p> tags do, create paragraph-like structure on a page. There are many more tags like the “p” tag and many other different ones, for more info and to learn more on that click here.

I could go on and on about HTML, but I want to keep this blog post relatively short. So let’s move on!

CSS

If HTML was the skeleton, then CSS is the skin and clothing. This is where the websites “character” comes into play. Most of designing what a website looks like is with CSS or Cascading Style Sheets. Usually web developers will create a separate .css file that their .html file references to in order to style the web page. There is a thing called “in-line CSS” but most of the time its just better to use a separate file for styling. Let’s try some CSS styling with the example above.

First we must create a CSS file and link it within our HTML, I’ve done it here on line 5:

Basically this line is just saying “Hey there are some style elements that are in another file, lets grab those elements from there and use those to style our page.”

Within my CSS file I just have this:

Here’s what the output looks like:

It’s really simple, but as you can see we changed the font size, color, and center aligned the paragraphs on the page. There are so many more CSS elements that it would be impossible to go over in a single blog, so here is a link to a page that explains more in detail: click me

Ruby (our programming language)

If HTML was the skeleton and CSS was the skin and clothing, our programming language is the organs and brain. It’s what gives life to our static website.

The programming language is what makes a website dynamic such that actions are performed when the user clicks around it. Like when a user is navigating a map website such as Google Maps. When the user is zooming in and out, and entering specific addresses into the site, the site is updating with real time data of locations, what businesses are nearby, and loading up images of what the area looks like overhead, all of this happening within milliseconds of each other (Amazing right?!).

Ruby is a programming language that I am currently using while attending a boot camp here in Texas (UT Austin). So far I have used it to define methods, do math, spit out user inputs, and more. Here is an example of a program I wrote (proud to say that I didn’t use stack overflow or google anything for this) after going over our software engineering module for my boot camp.

This was for a challenge in our boot camp called “The Ordinal Challenge”, we were challenged to write a script (program) that would ask the user to input a number and then spit out what suffix ordinal that number has attached to a sentence. So for example, say a user entered the number “1006" into the program, your code is supposed to run and spit out, “That’s the 1006th item!”. Notice the ‘-th’ suffix on the number, that was the bread and butter of the code.

Here’s what my code looked like:

Code written in Cloud IDE “Codenvy”

I will go more into detail about the specific nuances of this code in a later blog post, of which I will link here.

But for now just know that this code works, and will spit out what we want it to spit out, in our case with the 1006 example:

output after running the program

So to summarize: HTML is the skeleton, CSS is the appearance (skin & clothing), and Ruby is our brains. Each of these items combined with one another will create a nice and dynamic website if styled and programmed correctly.