Phoenix Project #1 - Basic HTML Skeleton

Objective

Today, we're going to generate the basic template of an HTML structure document.


Process

What we are going to make here is assuredly mandatory for every HTML document that you will most likely create.

We start off by adding the DOCTYPE declaration. This is to denote that your HTML document is an HTML5 document.

<!DOCTYPE html>

Then we add the html-element. The html-element is important because it is root element, meaning, nothing can come before this (with the exception of the DOCTYPE declaration of course,) and everything in the HTML document must be in-between this element's opening and closing tags.

<!DOCTYPE html>
<html>
</html>

Next, we're going to add the head-element. You need a head-element because this is where all of your meta and detailing information about your website goes in this section. I'll get more into what goes in here later on. Just know that whatever is entered here is never displayed on the screen, and is only read by browsers and people who open your site using their browser's developer tools.

<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

Lastly, we add the body-element, this is where you put the viewable content of your site.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

What you have now is the basic HTML skeleton of every HTML document.


Uh-oh's and WTF's

Okay, for the most part, you shouldn't have any troubles here, but if you did, it most likely has to do with a possible missing closing tag or a misspelling.

Check your document for such errors. 

It's important you don't beat yourself up about these simple mistakes, because I'm going to promise you, that a huge bulk of your mistakes and head pounding against a desk will be attributed to missing a comma, an angle bracket, a quotation mark, or a parenthesis. I promise. Just like in middle school and high school, it's always best practice to proofread your document to find such errors.


Final Thoughts

This right here was your first HTML document. While, yes, it's not actually a website because it lacks body content and metadata...knowing the information in this post is a good headstart 


The Code

<!DOCTYPE html>
<html>
  
  <head>
    
  </head>
  
  <body>
    
  </body>
</html>

Highlighted Features

This is where it all comes together.

The Phoenix Projects are case studies means of learning and teaching the fundamentals of programming in a practical hands-on sense.

I will start off with an objective, the process of implementing those features, we'll troubleshoot any familiar issues that may come up and then a list of recent terminologies and principles we've been discussing,.

At the end of each project will be either a code summary, a GitHub link to the files, or a CodePen to the project snippet