Notes from HTML Tutorial for Beginners: HTML Crash Course [2021]

Anatomy of a Website

3:42 to 9:30
Every website has 2 parts: The front end and the back end

Front end - The part you see in your browser and interact with.

HTML - Defines the building blocks of webpages.
CSS - Used for styling webpages and making them beautiful.
JavaScript - Used for adding funtionality or behavior to webpages.

Back end - The behind the scenes part that powers the front end. Its mainly about storing data in databases and providing it to the front in.
Full stack - Both the front and back end together. Everything required for a website.

Framework or Library - Comes with alot of code that we can reuse in our website so we can get the job done faster.
Examples: React (Library), Angular (Framework), VUE. React is the most popular tool in this space.

Version Control System - Allow us to keep track of our project history and work collaboratively with others.
Examples: Git, Subversion, and Mercurial. Git is the most popular Version Control System.

The client or browser (blue circle)/ Server (red circle) relationship:
An image demonstrating client server request and response relationships.

An image demonstrating client server request and response relationships.

HTTP Request -
HTTP Response -
DOM (Document Object Model) - This is a model that represents the objects or elements in our html document.
What are these elements - All the building blocks of our page such as paragraphs of text, images, links and other stuff.

Breakdown of Tags and Elements

18:30 to 30:36
index.html - often represents the homepage of html websites.

The difference between tags and elements explained!

Elements:

<!DOCTYPE html> - This is a doctype declaration. It tells the browser that this is an HTML5 document.
<html> -
<head> - gives the browser information about the page.
<title> - gives the browser the title of the page that appears in the browser.
<img> -
<style> - is where the css goes

Attribute -
Class -
ID -

30:36

HTML and CSS validation

35:05
HTML and CSS can be validated prior to posting to the internet.
This helps you find errors that can cause the page to display funky.
Validate HTML here!
Validate CSS here!

39:05
The upcoming part of the video covers:

Text
Links
Images
Lists & tabels
Container elements
Structural elements

Boilerplate HTML, meta tags, and Visual Studio Code Tricks

39:45
In visual studio code type "!" then press "tab" to get the basic "HTML boilerplate" as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

<meta charset="UTF-8"> - defines the character set to UTF-8
Computers don't understand letters and only understand binary numbers such as 1s and 0s.
Using a character set we can map a letter to a numeric value
ASCII was the first character set designed and only contains English characters.
UTF-8 is now used most often and has most characters in the world!

<meta name="viewport" content="width=device-width, initial-scale=1.0"> - This element is needed so our webpage looks good on all devices.
The viewport is the visible area of a webpage. The viewport can be adjusted on a computer by dragging the browser windows.

Text

43:36 :text
<p></p> is the paragraph element where you can put text.

Styling should always occur in CSS rather than HTML.

As a result some older HTML elements have been depricated and should not be used:

use <em></em> for emphasis instead of <i></i> for italics
use <strong></strong> instead of <b></b> for bold

Headings such as <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, and <h6></h6> should be use to create a hierarchy.
This helps search engines determine what different parts of the website are about.
Headings should never be chosen based on their size. If a different size is desired, it should instead be changed in CSS.
A webpage should have exactly one <h1></h1> element should search engines can determine what the page is all about.

HTML entities allow you to display specific characters such as "<", ">", " ", "&", "÷", "©", and more!
HTML entities list here!

Hyperlinks

53:43 :hyperlinks
The <a href=""></a> anchor element is used the create hyperlinks and should always have an href="" attribute.
relative url -
absolute url - start at the root of the website file structure.
This anchor jumps to a section of the page:
Jump to HTML and CSS validation notes.

This anchor is used for downloadable files
Download the httpRequestAndResponse.png

This anchor jumps to the very top of the webpage:
Jump to top of page

This anchor takes you to a new URL:
Its Google!

Images

1:03:14 :images