Creating Your First HTML Document/Webpage

Note: I am a Windows user, so I will educate you on how I code as a PC user.

By: Leon “2K” Asare

To start your first html web document go to the programs section on your computer.

Finding Notepad on your PC.
Or if you can’t find it, type in the name Notepad in the programs section.

The simplest and easiest way to get started is to go to your All Programs section and select Notepad.

Note: there are also free text editors that are much better and easier to use than Notepad. My favorite is Visual Studio Code,  but there are many more.

Why HTML?

The building blocks of websites and apps and web development is HTML, which stands for Hypertext Markup Language. With this language alone, you can code your website and upload  it to the internet. Obviously,  your website won’t look very pretty with out CSS (Cascading Stylesheets) and won’t be that functional without Javascript,  but with HTML alone, you can add text, images, links, create lists, etc.

Note: how to add links from W3schools.com
Adding pictures with HTML,  courtesy of W3schools.com
Adding a basic table with HTML

Getting Started Coding

Note: Most Html elements, also called tags have an open < and > closing bracket.

These are meta tags, these will not be seen by a visitor to your website.  They will be explained more later.  Picture courtesy of W3schools.com
The tags within the <body> tags </body> will be seen by the visitor,  unless they are comments <!–comment–>. comments are used to remind you of something you placed in your code.

How HTML tags are used

The meta tags within the head will not be seen by your visitors to your website.  Meta tags or metadata are what tell a browser how to perceive or view your website.  Here are some examples:

Every HTML document starts with the <DOCTYPE html> tag, it tells the browser this is an HTML document.

The <html lang=”en-us”> tag, tells the browser what language you are using in your document.

The <meta charset=”utf-8″> tells the browser what characters or alphabet you are using in your document.

The <meta name =”viewport” content=”width=device-width, initial-scale=1.0″> tag tells the browser to scale your website based on the size/scale of the screen.

The <meta name=”description” content=”This is an example”> tag tells your browser what the webpage/website is about.

The <meta name=”keywords” content=”your, keywords, go, here”> are where you put keys words that help your website place higher with search engines.

The <meta name=”author” content=”your name”> This tells the browser who wrote the Website.

The <title>Example</title> is were you place the name of your webpage.

The opening <body> and closing </body> tags are where you put your content that you want to be viewed by the website visitor.

The headings tags, which start at <h1> heading</h1> and  ends with <h6> Heading </h6>. Heading one is the largest and most important,  Heading six is the smallest and least important Heading.

The <p> tag is where you put your paragraph it ends with the </p>. Everything in between will be seen by the website visitor.

The <a href=”leontheprogressivecoder.com”>The Progressive Coder Website link</a>. The (a) anchor  and href tells your browser where to go. The so-called “href” or “anchor” tag, ends with </a>. Note : the text in between the opening <a href> and closing tag </a> is where your visitors will click on to go to the site or page you want your visitors to go.

How to Save Your First HTML Document

Saving your Website on Notepad.

Go to file menu and select save as. For your first page it will be index.html. Each additional page will saved according to their title and function, for example: about.html will be your about page.

Visual Studio Code is a little different,  instead of using All Files, you would choose the “save as type” as HTML.

Note: If you intend to utilize more than one page for your project,  you will want to create a folder for that specific project.

To The Aspiring Web Developers….

By: Leon “2K” Asare

So, you want to be a freelance web developer, but where do you start first? In my opinion, if you’re starting from scratch, I would start with HTML: Hyper-Text Markup Languages (which is the building blocks of a website). The next language I would suggest you learn is another markup language called CSS: Cascading Style Sheets (which helps to style your HTML and gives your website a more aesthetically pleasing design). The programming language of Javascript, would be the next language on my list, Javascript gives your website functionality, and makes it easier for users to interact with it.

HTML, CSS and Javascript are Front-end development languages, if you believe you would like to experiment with back-end web development, there are languages like Node.js (back-end Javascript), Python, PHP, and Java would be languages that you would have to learn (you only have to learn one, so see which one is in demand in your area).

A great free online learning resource is W3schools.com, it’s like having your own coding bootcamp in your phone or laptop/desktop. W3schools.com has hundreds of chapters you can read and exercises that you can perform. One of W3schools.com best features is its code editor, which you can use to practice your coding.

That being said, you don’t have to complete the courses at W3schools.com or any other website or book before you start working on your first web developer project, here is a list of free and or cheap text editors for web developers:

1. Visual Studi Code : Code.VisualStudio.com (my choice).

2. Sublime Text 3 (SublimeText.com)

3. Atom (Atom.io)

4. Coffecup.com (coffeecup.com/html-editor)

5. NotePadd++ (Notepad-plus-plus.org)

6. Vim (Vim.org)

Here are some great online learning resources:

1. https://www.w3schools.com/

2.https://www.youtube.com/user/TechGuyWeb

3. https://stackoverflow.com/