Tech Tutorial: Learning HTML for Web Documents/Pages – Episode 04: Creating Elements

In this video, we walk through adding/creating HTML elements in an HTML document.


Personal Recommendation (unpaid)
Programming and software development are awesome! Being that you are learning along with me, there is a really good chance you can make this a career. Based on my own life experience, let me suggest to you that you go get a Computer Science degree from Neumont College of Computer Science and kick your life into hyper-drive.

visit: https://www.neumont.edu/

Tech Tutorial: Learning HTML for Web Documents/Pages – Episode 03: HTML Structural Elements

HTML defines the structure of a web document and this is its primary responsibility. In this video, we walk through the elements provided by HTML that are primarily used to determine the structure and layout of an HTML document.


Personal Recommendation (unpaid)
Programming and software development are awesome! Being that you are learning along with me, there is a really good chance you can make this a career. Based on my own life experience, let me suggest to you that you go get a Computer Science degree from Neumont College of Computer Science and kick your life into hyper-drive.

visit: https://www.neumont.edu/

Tech Tutorial: Learning HTML for Web Documents/Pages – Episode 02: First HTML Page

In this video, we walk through how to create your first HTML document. We are introduced to the basic HTML document structure, commit it to our GitHub repository, auto-deployment by Netlify, and view it in our browser.


Personal Recommendation (unpaid)
Programming and software development are awesome! Being that you are learning along with me, there is a really good chance you can make this a career. Based on my own life experience, let me suggest to you that you go get a Computer Science degree from Neumont College of Computer Science and kick your life into hyper-drive.

visit: https://www.neumont.edu/

Tech Tutorial: Learning HTML for Web Documents/Pages – Episode 01: Netlify Setup

When learning web development, it is important to understand the markup and programming languages used to create websites and web applications. In addition, becoming comfortable with servers and hosting services that run and allow access to our websites and web applications is just as important.

In this video, we begin our deep dive into HTML by first setting up a web server to host our HTML website as we build it. We will use a freemium service called Netlify that will provide the hosting and serving of our website. Netlify will then be connected to a GitHub account from which it will pull our source code as we updated it.


Personal Recommendation (unpaid)
Programming and software development are awesome! Being that you are learning along with me, there is a really good chance you can make this a career. Based on my own life experience, let me suggest to you that you go get a Computer Science degree from Neumont College of Computer Science and kick your life into hyper-drive.

visit: https://www.neumont.edu/

JavaScript: Unobtrusive

It all comes down to separation of concerns. When programming, separation of concerns deals with creating clear and concise boundaries between application components that have different responsibilities but work together to carry out a common overarching goal. So it is with the development of web user interfaces using HTML5, CSS3, and JavaScript. Each of these technologies work together to create interactive and beautiful user interfaces within the browser, but they each have very specific jobs that make these interfacesย possible.

HTML: structures content in a very semantic (meaningful) and ordered way.

CSS: beautifies HTML by adding visual enhancements such as color, gradients, borders, padding, margin, fonts, animations, andย ย positioning.

JavaScript: adds behavior to HTML, allowing HTML to respond to DOM events as users interact with the web page within the browser.

Together these three technologiesย create a very powerful tool set for the modern web developer and web user interface designer. The difficult part for most web developers is not allowing the three, very closely related technologies, to bleed across their boundaries into each other creating tightly coupled code. This tightly coupled code is usually a result of CSS and JavaScript being placed directly in the HTML.

Unobtrusive method to the rescue. Merriam-Webster defines the word unobtrusive as not attracting attention in a way that bothers or annoys. Well, mashed together HTML, CSS, and JavaScript is bothersome and extremely annoying, especially when it comes to maintainability and defect repair. For this reason developers have begun to make sure their web user interfaces are completely separated. This is accomplished by following a few specific rules:

HTML

  1. keeping HTML markup in separate files

CSS

  1. keeping CSS markup in separate files
  2. referencing those files in the ‘head’ element of the HTML files
  3. never use ‘style’ elements in HTML
  4. never use ‘style’ attributes on HTML elements

JavaScript

  1. keeping JavaScriptย markup in separate files
  2. referencing those files in the ‘head’ element or at the bottom of the ‘body’ elementย of the HTML files
  3. never use ‘script’ elements to hold JavaScript code in HTML
  4. only use ‘script’ elements to references a JavaScript file
  5. never use HTML element attributes that bind to DOM events such as ‘onclick’ or ‘onmouseenter’

Unobtrusive JS Example:

<!--DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>JavaScript Event Binding</title>
    <script src="jsEventBinding.js"></script>
</head>
<body>
    <div id="click-me">Click Me</div>
</body>
</html>
/**
 * Created by Tim on 9/9/14.
 */

'use strict';

var elem = document.getElementById('click-me'); // a DOM element
elem.onclick = function () {
    // Do something nifty here
};