Phoenix Project #1: The Global Structure

If you want to be good at anything, you need to escape your comfort zone, take the training wheels off, and actually try what you desire in life.

The Phoenix Projects provides a guided educational simulation environment to assist in the world of programming and computer science.


The Briefing

Okay, if you've been reading up on the Encycodepedia entries I've posted, you now know enough to actually create one of the basic templates for creating a webpage.

What I'm going to have you create is known as a global structure HTML document. 

It's nothing fancy, nothing pretty, if this was on Instagram, you'd call it a basic bitch in the comment section. The main focus I want you to draw from this is how to perform some of the primary disciplines of markup, and get you acquainted and accustomed to working with a developer's mindset.


Line by Line

Okay, are we ready to start this bad boy? Let's do this...

The first thing you're going to want to do is create a folder somewhere on your hard drive. I, myself, usually keep my project folders on a specific thumb drive that I have to store all of my projects...if I don't have this thumb drive on hand, the desktop is usually a good spot, just so it doesn't get lost in the crazy jungle that is my documents folder.

Now you're going to open up your text editor of you choice. From there, you'll want to start up a new HTML file, and save it in your brand new project file. It doesn't matter what you name this file, as long as you end it with the file extension of .html, to signify that it's an HTML file.

Alright, now that we get that going, let's go line by line...

  • Line 1 - DOCTYPE element...This will designate to your browser that you're creating an HTML5 document.
     
  • Line 2 - Opening html tag...This is here to define that everything between this tag and its closing tag will be HTML coding.
     
  • Line 3 - Opening head tag...This will be where all of the data that describes and defines the parameters of your site will go, but none of this will be on display to the viewing user.
     
  • Line 4 - Character set element...You need to let the browser know what language's characters you'll be needing to display.
     
  • Line 5 - Opening and closing title tags...This is where you will display the name of the page you are designing...remember, it's not the name of the site, but the name of the particular page you are displaying.
     
  • Line 6 - Closing head tag...This concludes the head section.
     
  • Line 7 - Opening body tag...This will begin the body section, the portion of our HTML document that will be displayed on the browser.
     
  • Line 8 - h1 element...This is the first-level headline.
     
  • Line 9 - Paragraph element...Where you're going to put your common text content.
     
  • Line 10 - Closing body tag...This concludes the body section.
     
  • Line 11 - Closing html tag...This closes up the HTML element from Line 2 and also concludes this HTML document.

Run/Execute

Yeah, now let's see what damage you've done. Go on your computer, locate the file you just created, and once you find it, drag the file onto your browser window to open the document in a real-world view.

What you should see is this...

If you don't see this, you might have missed a closing tag somewhere, or missed a backslash or something. Don't panic, most of what coding and programming is is finding the small errors you make and correcting them.

Now, if your code is correct, congrats and good job...you've just created your first website. A website so awesome, that the year 1994 would be "meh."

Here's the thing about a global structure document, what you created today, is actually a basic template you can keep forever, well, until a new iteration of HTML comes out...and use this as a starting point to create infinite projects.

Yay for laziness that we can label as efficiency.


Conclusion

I will leave you with this...this wasn't too bad was it? Well, it's going to get more challenging as we move along.

As always, keep learning, keep practicing, and keep believing in what you're doing. A lot of what programming and coding is is nothing but a testing of one's will and cognitive fortitude.

Alrighty, I'm off to create more Encycodepedia entries and lessons. 

The next batch of entries I'll work on will introduce you to the concepts of CSS and adding styling to your website, along with more structural syntax to give your website more depth.