Explore Free HTML Tutorials – GameDev Academy https://gamedevacademy.org Tutorials on Game Development, Unity, Phaser and HTML5 Fri, 24 Feb 2023 21:14:38 +0000 en-US hourly 1 https://wordpress.org/?v=6.1.1 https://gamedevacademy.org/wp-content/uploads/2015/09/cropped-GDA_logofinal_2015-h70-32x32.png Explore Free HTML Tutorials – GameDev Academy https://gamedevacademy.org 32 32 Understanding How the INTERNET Work https://gamedevacademy.org/internet-protocols-tutorial/ Fri, 05 Aug 2022 01:00:58 +0000 https://gamedevacademy.org/?p=18447 Read more]]>

You can access the full course here: JR CODERS – INTRO TO NETWORKS

How Does the Internet Work

When using the Internet, we’re both sending and receiving packets over the network.

Internet Protocols

It’s important to know that there are different types of packets, they are not all the same. These are known as  Internet Protocols. A common one on the Internet is the HTTP (Hypertext Transfer Protocol). This protocol is used to transfer web pages across the Internet, while the FTP (File Transfer Protocol) is used for transferring files across a network (e.g., to upload files to a server).

The TCP (Transmission Control Protocol) and IP (Internet Protocol) are the ones we use to define how the data will be sent. IP is responsible for establishing a connection between two devices, then TCP is in charge of sending the data across the connection:

TCP and IP

Say you want to open up a website on your computer, here’s what is going to happen:

  1. A connection between you and the server is defined by the IP
  2. TCP breaks the web page into several small chunks (i.e., packets)
  3. TCP sends these packets over to your requesting device
  4. Your computer reads the packets and can reconstruct the final page

And that’s how communications are established and held over the Internet.

Transcript

When using the internet, we are both sending and receiving packets over the network. It’s important to know that these packets are not all the same, there are different types. These are known as internet protocols and determine how data is sent across the network.

When using the internet, a common one is the Hypertext Transfer Protocol, also known as HTTP. This protocol is used to transfer webpages across the internet.

FTP, which stands for File Transfer Protocol, is used for transferring files across a network, okay, so if you wanted to upload some files to a server, you would most likely be using FTP.

Now, this is how we define the data. TCP/IP, which stands for Transmission Control Protocol and Internet Protocol, is what we use as the means of transmitting that data.

IP is responsible for establishing a connection between the two devices, then TCP is in charge of transmitting that data across the connection. It works like this. Let’s say you want to open up a webpage on your computer.

A connection between you and the server is defined by the IP, then the TCP chops up that webpage into a number of different small chunks and sends them over via packets. Your computer can then read these packets and form the final webpage.

Interested in continuing?  Check out our all-access plan which includes 250+ courses, guided curriculums, new courses monthly, access to expert course mentors, and more!

]]> How to Add Google Fonts to Your Websites and Webapps https://gamedevacademy.org/google-fonts-html5hive-tutorial/ Sat, 12 Mar 2022 01:00:39 +0000 https://coding.degree/?p=1058 Read more]]>

You can access the full course here: Intro to Web Development with HTML and CSS

Tutorial

In this lesson, we look at a great resource for adding different fonts to your website.

Google Fonts

To use different style fonts on your website, Google Fonts ( https://fonts.google.com/ ) is a great resource. This site offers a wide variety fonts beyond those installed by default in your browser or operating system. You can scroll through many different examples or even type something in the text box provided to see how your specific text would look with various font styles.

Screenshot of Google Fonts with Type something field highlighted

Selecting Google Font

For an example, scroll down and select Goldman.

Google Fonts with Goldman font circled

This takes you to a detail page for this font where you can make selections on exactly what style of this font you want. For this example, select the Regular 400.

Goldman font on Google Fonts with Regular 400 selected

Linking to Google Font

Next, click the button in the top right corner of the Google Fonts website that allows you to view your selected font families.

Google Fonts with cursor on Selected Families button

This opens a side panel where you can select how you want to access your selected font. From this panel copy the link tag information, then go back to index.html and paste the links in the Head (<head></head>) section of our web page.

Google Fonts with link area circled for Selected family

<!DOCTYPE html>
<html>
    <head>
        <title>Learn web development on ZENVA.com</title>
        <meta charset="UTF-8">
        <meta name="description" content="This is what Google will show!">
        <link rel="icon" href="favicon.ico">
        <link rel="stylesheet" href="style.css">
        <!-- Link to Google Fonts -->
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Goldman&display=swap" rel="stylesheet">
    </head>
    <body>
        <p>This paragraph contains <span class="keypoint">everything</span> you've always wanted to know!</p>
    </body>
</html>

Using Google Font

Back in the Google Font side panel below where we just copied the link information is instructions on how to include the font in your CSS Stylesheet. Copy this information and paste it into style.css in place of the font-family we setup in the last lesson.

Google Fonts with Selected Family's CSS rule circled

body {
    font-size:20px
}

p {
    font-size:2rem;
    /* new Google Font */
    font-family: 'Goldman', cursive;
}

.keypoint {
    font-style:italic;
    font-weight:bold;
    text-decoration:underline;
}

Website example of Goldman font applied from Google Fonts

Our Paragraph text now appears with our newly included Google Font. Notice that the <span>everything</span> styling still applies.

 

Transcript

Hey everyone, and welcome back.

Google Fonts is a great resource if you want to use a large number of different fonts inside of your webpage. Because computers do have quite a large library of fonts pre-installed. But there is still a number of different fonts that are more specific to different styles, to handwritten styles that you might want to include on your website. And in that case, you can visit fonts.google.com, and this is a website where you can get a large number of different fonts, okay.

As you see, you can scroll down, see a preview of what they look like. You can even type something up here and it can basically preview what that text looks like. Okay, so let’s just say we wanna pick a text right here. Let’s just say we want this text right here, Goldman. We can select that, and it’ll bring us to this page here, okay. We want to go get the regular. So we’ll click Select this style right here.

This is then going to allow us to click on this button up here, at the top right, View your selected families. We’ll click on that. It’ll open up this side screen right here. And as you can see, we have this code right here, or this tag, this link tag that we can actually select. We can copy that with Control + C or Control + V.

We can go over to our HTML document, and add this just under where we specify the style sheet, okay. Paste that in with Control + V or Command + V. And there we go. So we are now able to use this Google font now that we have actually applied it to our webpage or to our HTML document, okay.

So how do we actually use it? Well, if we return to the Google Fonts site, you’ll see down here that it says CSS rules to specify families. And what we can do is copy that font-family CSS rule right there, go back to our CSS document. And I’m gonna replace this in the paragraph right here with that new one. So I’m gonna paste that in like so, click Run.

And there we go. We’ve got the new font, now applied to our text right here. And of course you can go through Google Fonts, choose all different ones. You can mix and match them with different spans, with different containers. Google Fonts is a great resource if you’re looking for a specific font, a specific style for your website. Thank you for watching.

Interested in continuing?  Check out our all-access plan which includes 250+ courses, guided curriculums, new courses monthly, access to expert course mentors, and more!

]]> How to Do an HTML Redirect: Beginner’s Web Tutorial https://gamedevacademy.org/html-redirect-tutorial/ Tue, 22 Feb 2022 10:37:03 +0000 https://html5hive.org/?p=2682 Read more]]> The easiest way to have your users automatically redirected from an old URL to a new one is by using an HTML Redirect. Whether you’ve changed your domain name, restructured your website, or simply reorganized some of your web pages, avoiding the dreaded 404 Page-Not-Found error is paramount.

Regardless of your reason for website changes, in this HTML Redirect tutorial, we’ll show you through simple examples how to confidently enhance your website, while protecting your user’s experience and the SEO you have built over time.

Let’s dive in!

About HTML Redirects

HTML redirects are one of three techniques that provide instructions to your visitor’s web browser to automatically take your user from the URL they keyed into their browser to the URL where your content now resides. In this way, you can retire an old HTML page and send users to a brand new HTML page entirely.

How to Code HTML Redirects

Modern websites have a formally structured HTML file, often called index.html, that serves as the main entry point to your site. Your site then has zero to many less formal web pages, HTML fragments, or components that return HTML which varies depending on if you’re using no JavaScript (JS), vanilla JS or one of the many JS libraries or frameworks that are so popular today (React, Angular, and Vue, just to name a few). In its simplest form, the HTML structure consists of three HTML tags: html, head, and body.

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
  </body>
</html>

HTML redirects are coded with a <meta> tag inside the <head> section which contains the metadata written for web browsers rather than the <body> section which contains the HTML elements visible on the displayed webpage.

HTML Redirect Syntax Explained

An HTML redirect,  sometimes referred to as meta redirect or meta refresh, has two attributes containing three pieces of information important to the web browser.

<meta http-equiv="refresh" content="time_delay; url=new_url">

The first property is http-equiv. For HTML redirects, its value is set to “refresh”. Since browsers work within an HTTP Request-Response cycle, this attribute provides information to the browser “equivalent” to what can be found in a similarly-named HTTP header.

The second attribute is content which has two values. Its syntax may seem a little odd so it’s important to note that you have two values inside a single set of double quotes separated by a colon (“time-delay; new_url”).

HTML Redirect Syntax Example

In the code below, the browser redirects to the URL provided (https://example.com) after a delay of 3 seconds.

<meta http-equiv="refresh" content="3; url=https://example.com">

If you changed the first value in content to 0, the page would immediately redirect. If you changed the value to 10, the browser would wait 10 seconds before going to the new URL (in this case the website example.com). Always set this value to zero for accessibility compliance unless you have a strong use-case not to. If you do need to introduce a delay, it is important to keep the user top of mind. Too short a delay may be frustrating while a longer delay should probably be accompanied by a “click here” link that allows the user to manually perform the redirect. This can easily be accomplished in the <body> section using an anchor <a> tag.

<h3>My Important Message...</h3>
<p>You will be automatically redirected in 5 seconds.</p>
<p>Please <a href="https://example.com">click here</a> to be taken immediately.</p>

Essential HTTP Status Codes

What is HTTP?

HTTP is an acronym for Hyper Text Transfer Protocol. In simple terms, web technologies communicate using an HTTP Request/Response cycle.

Why is this Important for Redirects?

When working with web technologies, it’s good to know the meaning of at least a few of the many HTTP Status Codes that are returned when a user enters a URL into the browser or in our case redirects one web page URL to another.

Essential HTTP Status Codes for Redirects

HTTP Status Codes contain three digits with the first number indicating response type (1xx – 5xx). Within this block, there are many codes that you can learn over time. If we ignore for the moment codes that start with 1 (informational) and codes that start with 5 (server-side) there is a small subset of the remaining codes that are essential to redirects:

  • 200 – success
  • 301 – permanent redirect
  • 302 – temporary redirect
  • 404 – page not found

Our goal in redirects is to receive 200 (our web page loaded successfully) and avoid 404 (our web page could not be found). If our content has been permanently moved, we want our redirect strategy to send the browser a 301 status code (known as a permanent redirect). If our content is only temporarily residing at a different location we want our redirect strategy to send the browser a 302 status code (known as a temporary redirect).

HTML Meta Redirect Website Example

An HTML redirect is actually quite simple and best illustrated with an example. In the first code snippet, we add the meta refresh tag redirecting visitors to our new URL after a delay of 3 seconds.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="refresh"
      content="3; url=http://127.0.0.1:5500/new_url"
    />
    <title>Old Website</title>
  </head>
  <body>
    <h1>Old Website URL</h1>
    <h3>http://127.0.0.1:5500/old_url</h3>
  </body>
</html>

Screenshot of a website showing the old website URL

Note the HTTP Status Code of 200 in the browser’s Network tab indicating our old website loaded successfully. After the 3 second delay we coded, the new website is loaded.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>New Website</title>
  </head>
  <body>
    <h1>New Website URL</h1>
    <h3>http://127.0.0.1:5500/new_url</h3>
  </body>
</html>

Screenshot of a website showing the new website URL and Status Codes

Note the two HTTP Status Codes for our new website. The code of 301 indicates a successful redirect while code of 200 indicates our new website was successfully loaded.

Alternative Methods to Perform Redirects

While HTML redirects may be the easiest way to perform redirects, it is not the only way or even the best. As we mentioned in the opening “About HTML Redirects” section, there are two other ways to define redirections. The two other methods are:

  1. HTTP Redirects
  2. JavaScript Redirects

HTTP Redirects

HTTP redirects (also known as 301 redirects, URL forwarding, or URL redirection) are done server-side and are the most powerful and reliable way to ensure that users and search engines are directed to your new content location with no loss of traffic or SEO page ranking.

For Google’s guidance on using 301 redirects where SEO is an important consideration, you can watch this video from Google Search Central YouTube channel.

Important note: In cases where your content is at a new location temporarily it is important to use a 302 (temporary redirect) instead of the 301 (permanent redirect).

While all the concepts we’ve discussed in this article apply, when it comes to HTTP redirects there are so many combinations of technology stacks, hosting services, and domain providers your best approach is to search “301 redirect” followed by “your-technology-stack” followed by “your-service-provider” and follow the guidance of official sources when possible.

JavaScript Redirects

JavaScript redirects provide another simple option to automatically take your user from the URL they keyed into their browser to the URL where your content now resides. At first glance, JavaScript offers a lot of cool benefits for triggering redirections. Let’s explore the JavaScript way by mirroring the results we accomplished above using the HTML redirect technique.

In the code below, the browser redirects to the URL provided (https://example.com) immediately.

window.location = 'https://example.com';

The following are other techniques you may use to achieve the same result.

window.location.href = 'https://example.com';
window.location.assign('https://example.com');

In the code below, the browser redirects to the URL provided (https://example.com) immediately as above. The difference from using the assign() method is that after using replace() the current page is not saved in history which simply means the user cannot navigate back to the original page using the browser’s back button.

window.location.replace('https://example.com');

Another interesting thing with using JavaScript is that you can make the URL dynamic, update the URL in response to events, and basically provide any programming logic to determine which URL to navigate to.

let urlBase = 'https://';
let domainExtention = '.com';
window.location.assign(urlBase+'example'+domainExtention);

In the HTML redirect section above we also showed how you could introduce a delay in redirecting to a new URL. This can be easily accomplished in JavaScript as well by using a setTimeout()  function. In the code below, the browser redirects to the URL provided (https://example.com) after a delay of 3 seconds.

let urlBase = 'https://';
let domainExtention = '.com';

setTimeout(() => {
   window.location.assign(urlBase + 'example' + domainExtention);
}, 3000);

Learning Resources

Learn more about HTML, JavaScript and HTTP Redirect details from the Mozilla Developer Network documentation and from this insightful article from CSS-Tricks.

Continue your HTML learning with this free HTML & CSS 101 – Web Development Fundamentals course or take your skills to the next level in just over an hour with this free COMPLETE COURSE – Learn HTML and CSS in 80 MINUTES. You might also consider trying this HTML Tutorial for Beginners from Programming with Mosh or decide to master the foundations of all web development with this premium Full-Stack Web Development Mini-Degree.

Conclusion

There are many reasons why you might want to provide URL redirection and send people to another page – including seamlessly transitioning to a new domain, restructuring your existing website, directing visitors to a secure version of your site (from http://example.com to https://example.com), allowing people to access your site from multiple domain names (there are now well over 1000 domain extensions and it’s still growing), and many other scenarios.

Regardless of your reason, ensuring that users and search engines are directed to your new content, maintaining other internet sites’ backlinks to your content, user’s bookmarks and of course, no loss of traffic or SEO page ranking make awareness of this topic essential in today’s world. Just think of how many times you’ve been frustrated trying to access an old HTML page that no longer exists.

In this article, we focused on the simplest of three techniques, HTML redirects, and briefly discussed the other two (HTTP and JavaScript). While HTML redirects are a simple solution and JavaScript provides a powerful developer experience, it’s important to keep your end goal in mind when deciding which approach to take. One site’s best way for sending someone to another page may not work for you.

With this foundational knowledge, you can confidently enhance your website by finding and implementing the steps that match your requirements and technology stack ensuring people continue to find you and your valuable content!

BUILD GAMES

FINAL DAYS: Unlock 250+ coding courses, guided learning paths, help from expert mentors, and more.

ACCESS NOW

]]> Free Course – Master HTML & CSS https://gamedevacademy.org/free-course-master-html-css/ Wed, 27 Jan 2021 01:00:07 +0000 https://coding.degree/?p=905 Read more]]>

Prepare to build websites and web apps from the ground up by exploring HTML and CSS – two of the core pillars of all web development! You can also download the project files used for the course below.

Download the project files

About

Following the teachings of Daniel Buckley, and with no prior experience required, you’ll explore the necessary fundamentals needed to pursue web development. You’ll first discover HTML, or HyperText Markup Language, and the processes for laying out webpages via tags for text, images, forms, and more. After, you’ll dive into the world of CSS (Cascading Style Sheets) and master techniques for adding new aesthetics to your web projects.

By the end, you’ll have the in-demand foundations to start building your own web projects and be able to expand your knowledge into more advanced web development technologies.

BUILD GAMES

FINAL DAYS: Unlock 250+ coding courses, guided learning paths, help from expert mentors, and more.

ACCESS NOW

]]> Free eBook – A Guide to Development with the Web https://gamedevacademy.org/free-ebook-development/ Wed, 14 Oct 2020 09:51:02 +0000 https://coding.degree/?p=415 Read more]]> Become a developer with in-demand skills by exploring our free ebook: A Guide to Development with the Web

Following the tutorials of Ashley Menhennett, you will take your first steps into becoming a developer by learning to code for websites – one of the most beginner-friendly fields to get started with in terms of development. You will cover the foundations of both HTML and CSS, two of the core pillars of web development, and learn how you can use them to both lay out your webpages, and style them in unique ways with simple attributes.

Whether you stick with web development or pursue another field of development altogether, this introductory look will help you develop the fundamentals before you expand your skills even further.

Download the eBook here

]]> How to use Media Query Breakpoints https://gamedevacademy.org/media-query-breakpoints-tutorial/ Fri, 24 Apr 2020 15:00:20 +0000 https://html5hive.org/?p=2579 Read more]]>

You can access the full course here: Bite-Sized Responsive Web Design

 

In this lesson, you will learn how to create media query breakpoints.

Creating Media Queries

For this exercise, you will be setting what are referred to as media query breakpoints. Typically for web design, you will want to set three different media queries. One for desktops, one for tablets, and one for smartphones. As discussed in the previous lesson, this will be done by specifying different screen widths in pixels for the appropriate CSS rules.

You will want to open up the media-queries.html file that is included in the Course Files, in the Project (Start) folder. You will also want to activate the Live Preview so that you can see what is happening as you add code to the file.

The first thing you will want to do is disable mobile browser scaling. As you are going to be doing this with the media queries yourself, you don’t need to have the browser doing it for you. You will be adding code in the <head> block. See the code below:

<head>
  <meta charset="utf-8">
  <title>CSS Media Queries</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

To fully explain what this code does would take a long time and is outside of the scope of this course. The important thing is that this will turn off what is called browser zoom, or mobile browser scaling, which will ensure that the media queries function properly.

For this course, each of the different CSS topics will be done using internal style sheets. In actual practice, it is usually better to use an external style sheet, but for educational purposes, this will allow you to more easily refer to each topic individually.

The next step for creating the media query breakpoints is to add the <style> block. This will also go in the <head> block and will be where all of the CSS rules go for this HTML page. You’ll be setting up rules for a few different elements of the HTML page. See the code below:

<head>
  <meta charset="utf-8">
  <title>CSS Media Queries</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        * { margin: 0; }

        body { background: rgba(255,0,0,0.25); }

    </style>
</head>

The first CSS rule has an asterisk (*) selector. This means that it will apply to every element. The margin property controls the margins of the page, and setting it to zero will ensure that the full page is used. The next rule is for controlling the body element. The background property is used to set the color of the background for anything in the body of the HTML page. You can use the rbga system to set the color, or any of the numerous other methods CSS provides for setting colors. The order of numbers for rbga is red, green, blue, alpha, with the rgb values from 0 to 255 and alpha from 0 to 1. If you are not familiar with this system, alpha is used to set the transparency of the color. Feel free to adjust the numbers to see the effect it has on the color of the background.

Now you can make your first media query. This will be done in the style block. See the code below:

<style>

    * { margin: 0; }

    body { background: rgba(255,0,0,.25); }

    @media screen and (min-width: 768px) {

      body { background: rgba(0,255,0,.25); }
    }

</style>

This code will make it so that when the specified condition is met, meaning that the screen is above the minimum width of 768 pixels, the new body CSS rules will be applied.

The next step is to make a second media query. Copy and paste the first one, then change the value for the min-width and for the rgba of the background. See the code below:

<style>

    * { margin: 0; }

    body { background: rgba(255,0,0,.25); }

    @media screen and (min-width: 768px) {

      body { background: rgba(0,255,0,.25); }
    }

    @media screen and (min-width: 1200px) {

      body { background: rgba(0,0,255,.25); }
    }

</style>

Save the file, then go to your live preview. If you adjust the scale of the window, you should see the three different colors at the different size values you have specified. If the window is at or below 768 pixels, it will be red. If it is between 768 and 1200 pixels, it will be green. Above 1200 pixels, it will be blue.

This particular CSS rule set up is referred to as a mobile-first approach. This is because there are rules that are above the intentional media queries in the style block. These rules will be what is used for smartphones and will be the default unless they are overridden elsewhere.

Now that you have set up some basic media queries, feel free to adjust some of the values to get a better understanding of how the rules are applied. Make sure to save your file before moving on.

 

Transcript

What I’m gonna do here, this is inside the head area, is I’m gonna open angle bracket, meta, followed by a space and then name equals. And then in quotes, viewport. And then outside of the closing quote there, throw in a space. And I’m gonna go content equals, and then I’m gonna open up another pair of quotes. And then let’s go width=device-width followed by a comma and a space. And then initial-scale=1, just like that. And then close off your angle bracket. This is a self-closing tag here.

So again, you and I could get into a pretty lengthy and detailed conversation about what exactly is going on here but the most important thing here is essentially, what we’re doing is we’re turning off this thing called browser zoom or mobile browser scaling, ensuring that our media queries are going to work and function properly.

What’s the second step? Well, the second step is gonna be to establish our media query breakpoints. And what I’m gonna do here, and I should have mentioned this earlier is I’m gonna build everything here with you inside of an internal style sheet. The first thing that I’m gonna do here is I’m gonna blow out my default browser margins here, so I’m just gonna type in an asterisk here and then a pair of curly braces. And I’m gonna say margin: 0 followed by a semicolon. No big deal, this is something that I do all the time.

The next thing that I’m gonna do is I’m gonna go and set a body rule here. So body and then a pair of squiggly brackets. And I’m gonna say background. And I’m gonna use my RGBA color value. And here’s what I’m gonna specify. I’m gonna go 255,0,0,.25. Now, as soon as I save up my file, there’s Chrome previewing what I’ve done.

Now, what we’re gonna do next is we’re gonna go and establish our media query. So I’m gonna type in an at symbol, this is how we do it, and I’m gonna type in media followed by a space and then screen and, and then a pair of regular brackets. And here’s the first condition, min-width: and then I’m gonna say 768px. And then after the closing bracket there, throw in a pair of curly braces like this.

So as you can see here, all I did is I took body from above, outside of the media query, and pasted ’em into first media query that you and I have established. And all I’m gonna do is I’m gonna change this guy’s background color. What I’m gonna do next is I’m gonna grab the media query that we just inserted and the body rule, and I’m gonna copy that. And then what I’ll do is I’ll paste just below.

And what you and I are gonna do is go and set up a second intentional media query. But I’m gonna change this to 1,200 pixels, change his background color as well. Let’s save up our work. We see a change inside Chrome. As a matter of fact, if I scale my browser window wider, we get kind of this purplish color. If I scaled down, there’s green. If I continue scaling down, that’s what we get.

Interested in continuing? Check out the full Bite-Sized Responsive Web Design course, which is part of our Bite-Sized Coding Academy.

]]> A Bite-Sized Guide to HTML https://gamedevacademy.org/bite-size-html-tutorial/ Fri, 11 Oct 2019 15:00:23 +0000 https://html5hive.org/?p=2156 Read more]]>

You can access the full course here: Bite-Sized HTML

Part 1

In this lesson we will be getting the development environment ready. We will be going step by step and will have a Hello World HTML project.

Prerequisite One

You will need a current web browser, I will be using Google Chrome throughout this course. Feel free to use Firefox or even Edge if you desire.

URL to download Google Chrome

Prerequisite Two

You will need a proper code editor to complete this course.

You will not be able to use Microsoft Word, or the Notepad version that comes with Windows, you will NEED a proper code editor.

I will be using the code editor called “Atom” throughout this course, and it works on all platforms: Windows, Mac, and Linux. Atom is a free code editor and can be downloaded from the web.

The link to download Atom is here: https://atom.io/

Atom IDE

Atom IDE website

There are other free versions out there, so feel free to use anyone of them that suits you the best, the other alternative code editors are listed below:

Another great option is Adobe Brackets.

The link to download Brackets is here: http://brackets.io/

Brackets IDE

Brackets IDE website

Notepad++ is a particularly simple code editor.

The link to download Notepad ++ is here: https://notepad-plus-plus.org/download/v7.6.2.html

Notepad++ IDE

Notepad++ IDE website

Komodo Edit.

The link to download Komodo Edit is here: https://www.activestate.com/products/komodo-ide/downloads/edit/

Komodo Edit IDE

Komodo IDE website

 

Sublime Text is a highly popular code editor and has a free evaluation version as well.

The link to download Sublime Text is here: https://www.sublimetext.com/3

Sublime Text IDE

Sublime Text IDE website

Creating the Project Folder

Once you have downloaded and installed your chosen code editor that suits you best, you will need to create a project folder.

I will be saving mine in My Documents, and I have already created a folder called “Learn To Code.” 

You don’t have to save your folder in My Documents, but be sure to put it somewhere where you won’t forget where its saved at.

New project called learn to code

Opening the File in the Code Editor

Next, open up the code editor you have installed.

Navigate to File>Open Folder, and find the newly created folder you just created.

File menu with Open Folder selected

The Learn To Code folder is currently empty, but we will create out first HTML file.

Creating the First HTML File

Navigate to File>New File.

File Menu with New File selected

On line number one I will type “Hello World.”

Hello World

This is what we want to display in the browser.

Save the file, and name it “index.html” HTML files always have the HTML extension.

Single HTML line with Hello World written

Now if you navigate back to your Learn To Code folder you will see the newly created file.

Index.html file

If you double click the file, it should show up in the web browser, but I am going be more specific and go to Open With>Google Chrome.

Navigate to the Chrome web browser and as you can see we have our Hello World up and running.

If you have followed along and reached this point, you have successfully setup your developer environment.

You are now ready to begin your coding journey.

See you in the next lesson!

Part 2

In this lesson you will create your very first HTML tags.

The role of HTML in a website is to specify the content you will see in the web browser.

Websites contain text, forms, tables, images, and many other things. So how do we tell the browser what it is we want to show?

This is where tags come into play. For example, I want to tell my browser that this “Hello World” is actually a main heading in my document.

Split window with code editor and browser open

In an ideal world, we would be able to just talk to the browser and have what I want displayed as the main heading. This doesn’t work for now, so we need to use tags.

The Main Heading Tag

The first tag we will be learning is the main heading tag.

Tags are a bit like a sandwich: a tag has an opening, tags have the filling, and tags have a closing. This example below using the heading sandwich shows the h1 tag, which is a main heading.

HTML tags demonstrated with hamburger

We will begin by adding the h1 tag to the Hello World code we already have:

<h1>Hello World</h1>

Make sure and save this.

If we look at Google Chrome and refresh the page, we now have the main heading displayed:

Hello World stored in header tags

What if I want a secondary heading?

Secondary Heading

If I want a secondary heading I can use the h2 tag.

<h2>The sky is blue</h2>

Always make sure to close the tag, just like the sandwich, save, then refresh the page:

HTML with heading 2 style

Now we have a secondary heading displayed.

How would i just add some other text?

Adding Text

You just type the text below the main and secondary headings:

The water is cold.

HTML with heading 1, heading 2, and plain text

HTML tags are the way for us to tell the page how we want to display are content.

Part 3

In the lesson we will be talking about new lines and text paragraphs in HTML. We are seeing two different headings here:

HTML file demonstrating different heading styles

These headings show on different lines. This makes us think that because they are shown on different lines its because they are on different lines in our code.

The truth is the browser does not care about the amount of times you press the enter key in your code.

The amount of times you press the enter key in your code will not effect the line spacing in your browser.

Even if you put everything on the same line and then refresh the page, it will still show separated on different lines:

HTML with different headings moved to the same line

The reason why we want to separate the line is because we want to make it more readable for humans.

Showing Paragraphs

What if I wanted to show two different paragraphs of text? See the code example below:

<p>I want to learn coding</p>

<p>Find free resources on zenva.com</p>

The <p> tag is used to tell the browser we want a paragraph. These work just like the main and secondary headings. You must have an opening, the filling, and then the closing.

The <p> tag for the opening tells the browser we are starting a paragraph here, and then the </p> tag for closing tells the browser we have finished the paragraph, please skip a line.

HTML file using paragraph tags

This is the basic of text paragraphs in HTML, and new lines in the browser.

Remember, it is the HTML tags that tell the browser how to display the content we want displayed in the browser, but when we learn CSS is when we will really have the capacity to modify these default behaviors. With CSS we will be able to make elements show the way want with regards to spacing, how much separation there will be between them, this is all handled by CSS.

For now, we are relying on a default style that the browser provides, and we are learning how to tell the browser what it is we want to show.

 

Transcript 1

Prerequisite number one is to install a current web browser.

Prerequisite number two is a proper code editor. The one I’ll be using is a free option called “Atom”. It works on all platforms; Windows, Mac, and Linux.

Another great option is Adobe Brackets, Notepad++, Komodo Edit, and Sublime Text is high popular editor and it has a free evaluation version as well. We need to create a folder for our project, so I’m gonna go to My Documents, and I’ve already created a folder called “learn to code”. Next, I’m gonna open up my newly installed code editor, and go to File, Open Folder, and find this newly created folder.

Our folder is empty for now, so let’s create our first HTML file. File, New File. I’m gonna type in this file, “Hello World”, which is what we wanna see in the browser, and I’m gonna save. I’m gonna call this file “index.html”. HTML files always have the .html extension. If you go back to your folder, you’ll see your newly created file. And if you double-click on it, it should probably show up on a web browser. You can also be more specific, and I’m gonna go to Open With, Google Chrome.

And, as you can see, we have our Hello World up and running. If you’ve followed along and reached this point, you have successfully set up your development environment, and you’re all ready to begin your coding journey. See you in the next lesson.

Transcript 2

In this lesson, you’ll create your very first HTML tags.

The first tag we’ll be learning will be the main heading tag. Tags are a bit like a sandwich, a tag has an opening, and then a lot of tags have a filling as well, and a closing. You begin by opening your tag, and just like a sandwich you always need to close it. For that, you type the same tag as well but you add the forward slash before the name of your tag. And then you save. If we look at Google Chrome and refresh the page, this is now a main heading.

What if I want a secondary heading? I can use the h2 tag and type something like the sky is blue. Save, refresh the page, we’ve got a second heading. The water is cold will be some other text that we’ll be adding. So HTML tags are the way for us to tell the browser to tell the page how we want to display our content.

Transcript 3

What if I wanna show two different paragraphs of text? For example, say I wanna have this in two different lines.

As you’ve probably guessed, it’s gonna show in a single line, even if I add as many enters as I want.

So the way for us to actually create paragraphs is by using the p tag, which is a HTML tag that stands for paragraph, and that allows you to tell the browser, hey, browser, we’re about to start a paragraph here. So, everything that comes after the p is a paragraph.

And when you close the paragraph, you’re basically telling the browser, hey, browser, we’ve finished our paragraph, now just please skip a new line. So, as you can see, that gives us two different paragraphs of text.

Interested in continuing? Check out the full Bite-Sized HTML course, which is part of our Bite-Sized Coding Academy.

]]> Full-Stack Web Development Mini-Degree https://gamedevacademy.org/full-stack-web-development-mini-degree/ Sat, 17 Nov 2018 00:30:58 +0000 https://html5hive.org/?p=1961 Read more]]> Go from Zero to Full-Stack Engineer as you build web apps with HTML5, JavaScript, NodeJS, MongoDB, React, GraphQL, Angular, Git, AWS, and Azure. 

This project-oriented curriculum begins by covering the foundations of programming and web development. You’ll learn to create responsive and interactive websites as you get familiar with the basics. We’ll then move on to the server-side and introduce Node.js, Express, Mongo and other frameworks. You’ll be building webapps, REST API’s and scripts.

Following the server-side, we’ll delve further into front-end, this time covering modern frameworks for creating robust applications such as React and Angular. You’ll learn how to integrate these projects with Node.js back-ends and API’s. Finally, you’ll be shown how to use important tools such as Git and Github, and the deployment process to popular platforms such as AWS, Azure and Heroku.

Access this Mini-Degree on Zenva Academy

]]> The Complete Programming and Full-Stack Bundle – 20 Course Smart Curriculum https://gamedevacademy.org/the-complete-programming-and-full-stack-bundle-20-course-smart-curriculum-html/ Fri, 02 Nov 2018 23:30:00 +0000 https://html5hive.org/?p=1967 Read more]]> ???????? Go from beginner to full-stack developer!

The Complete Programming and Full-Stack Bundle is the world’s most effective way to go from beginner to professional coder. Whether your goal is to advance your career, start your own business or expand your existing skill-set, our 20-course Smart Curriculum has something in store for you.

This bundle is suitable both for absolute beginners and more advanced developers. Projects cover a wide range of different topics including:

  • Crafting interactive websites and web applications with Bootstrap, Angular, React, Node and Express
  • Coding in Python and building smart Machine Learning and AI applications
  • Building games with Unity, Phaser and JavaScript
  • Creating stunning Virtual Reality games and applications
  • Game artwork creation with Blender and Gimp

Access The Complete Programming and Full-Stack Bundle on Zenva Academy

]]> Source Code – HTML & CSS Course https://gamedevacademy.org/source-code-html-css-course/ Wed, 26 Oct 2016 06:46:01 +0000 https://html5hive.org/?p=1982 Download the source code here.

BUILD GAMES

FINAL DAYS: Unlock 250+ coding courses, guided learning paths, help from expert mentors, and more.

ACCESS NOW

]]>