Reference sites: Can I Use, Modernizr, W3C

HTML Fundamentals

HTML (HyperText Markup Language) is a markup language used to define the structure of web content. It consists of a series of elements that render different effects on a webpage.

Document Structure

``: Declares the document type to the browser.

<html>: The root element containing all page content.

<head>: Contains metadata and links to external resources.

<body>: Contains all visible content displayed to users.

<meta charset="UTF-8">: Specifies character encoding for the webpage.

<meta name="viewport" content="width=device-width">: Ensures responsive design across different screen sizes.

<title>: Sets the page title shown in the browser tab.

CSS Integration Methods

Inline Styles

<p style="color: blue;">Hello World</p>

Internal Styles

<style type="text/css">
  body {
    color: red;
  }
</style>

External Styles

<!-- index.html -->
<head>
  <meta charset="UTF-8">
  <meta name="author" content="Developer">
  <meta name="description" content="Sample Page">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <link href="main.css" rel="stylesheet">
</head>
<body>
  <p>Welcome to my website</p>
</body>

/* main.css */
body {
  font-family: Arial, Helvetica, sans-serif;
  color: teal;
}

Text Elements

<h1> through <h6>: Define headings and subheadings.

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Section Title</h3>
<h4>Subsection Title</h4>

<p>: Paragraph tag for text blocks.

``: Displays computer code in monospace font.

<hr>: Creates a horizontal rule to separate content sections.

<p>First paragraph content</p>
<hr>
<p>Second paragraph content</p>

Links and Lists

<a>: Creates hyperlinks.

<a href="page.html">Click here</a>

Ordered and Unordered Lists:

<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>

<ul>
  <li>Bullet point one</li>
  <li>Bullet point two</li>
</ul>

Definition Lists:

<dl>
  <dt>Term Name</dt>
  <dd>Term description</dd>
  <dd>Additional details</dd>
</dl>

Tables

<table border="1" cellpadding="5" cellspacing="0">
  <tr>
    <th>Name</th>
    <th>Skill</th>
    <th>Notes</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Programming</td>
    <td>Senior Developer</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>Design</td>
    <td>UI/UX Specialist</td>
  </tr>
</table>

Cell Merging: Use rowspan for vertical merging and colspan for horizontal merging.

<table border="1">
  <tr>
    <td>Name</td>
    <td colspan="2">Skills</td>
  </tr>
  <tr>
    <td>Charlie</td>
    <td>HTML</td>
    <td rowspan="2">CSS</td>
  </tr>
  <tr>
    <td>Diana</td>
    <td>JavaScript</td>
  </tr>
</table>

Forms and Input Elements

<form>: Container for form controls.

<input>: Various input types for user data collection.

<form>
  Username: <input type="text" name="user" accesskey="u"><br>
  Password: <input type="password" name="pass" accesskey="p"><br>
  <input type="submit" value="Login">
</form>

Input Types:

<input type="text"> <!-- Text field -->
<input type="password"> <!-- Password field -->
<input type="radio" name="gender"> <!-- Radio button -->
<input type="checkbox"> <!-- Checkbox -->
<input type="color"> <!-- Color picker -->
<input type="date"> <!-- Date picker -->
<input type="email"> <!-- Email field -->
<input type="file"> <!-- File upload -->
<input type="number" min="0" max="100"> <!-- Number input -->
<input type="range"> <!-- Slider -->
<input type="search"> <!-- Search field -->
<input type="url" placeholder="https://example.com"> <!-- URL field -->

Drpodown Selection:

<select id="taskSelect">
  <option value="" disabled selected>Select an option</option>
  <option value="task1">Morning routine</option>
  <option value="task2">Afternoon work</option>
  <option value="task3">Evening exercise</option>
</select>

Text Area:

<textarea rows="4" cols="50" spellcheck="true">
  Enter your message here...
</textarea>

Container Elements

<div>: Block-level container for grouping elements.

class and id: Attributes for styling and identification.

<div id="header">Header Content</div>
<div class="content-section">Main Content</div>

/* CSS */
#header {
  color: navy;
}
.content-section {
  color: crimson;
}

Special Characters

&lt;  &#60;  <!-- Less than: < -->
&gt;  &#62;  <!-- Greater than: > -->
&amp; &#38;  <!-- Ampersand: & -->
&copy; &#169; <!-- Copyright: © -->
&reg;  &#174; <!-- Registered: ® -->
&trade; &#8482; <!-- Trademark: ™ -->

---

CSS Fundamentals

Selectors

Basic Selectors:

• Element Selecter: Targets HTML tags directly.
• Class Selector: Uses . notasion.
• ID Selector: Uses # notation.
• Universal Selector: * targets all elements.

/* Element Selector */
p {
  color: teal;
}

/* Class Selector */
.highlight {
  background-color: yellow;
}

/* ID Selector */
#main-title {
  font-size: 24px;
}

Combinator Selectors:

• Descendant: div p {} (space between selectors)
• Child: div > p {}
• Adjacent Sibling: div + p {}
• General Sibling: div ~ p {}

Pseudo-class Selectors for Links:

a:link { color: blue; }      /* Unvisited link */
a:visited { color: purple; } /* Visited link */
a:hover { color: red; }      /* Mouse over */
a:active { color: orange; }  /* Active link */

input:focus {
  border-color: blue;        /* Focused input */
}

Importing External Stylesheets

/* main.css */
@import url('components.css');

body {
  font-family: Arial, sans-serif;
}

Emmet Abbreviations

• div + Tab → <div></div>
• div*3 → Creates 3 div elements
• ul>li → Nested child element
• div+p → Sibling elements
• .classname → Element with class
• #idname → Element with ID
• .item$*3 → Numbered classes (item1, item2, item3)

---

JavaScript Basics

Embedding JavaScript

Internal Script:

<head>
  <script>
    console.log('Hello, World!');
  </script>
</head>

External Script:

<head>
  <script src="app.js"></script>
</head>

Comments

// Single-line comment

/*
  Multi-line
  comment
*/

Comparison Operators

JavaScript provides two types of equality comparison:

• == (loose equality): Converts types before comparing. Can produce unexpected results.
• === (strict equality): Compares both value and type without conversion.

// Loose equality (avoid)
0 == '0'   // true
0 == false // true

// Strict equality (recommended)
0 === '0'   // false
0 === false // false

Special case with NaN:

NaN === NaN  // false

// Use isNaN() to check for NaN
isNaN(NaN)  // true

Best practice: Always use === for comparisons to avoid type coercion issues.