HTML

Tags

• Websites are structured with HTML elements.
• Elements are defined by tags in .html files.
• Let’s learn the basic tags available!
  • Headings: <h1> ... <h6>
  • Paragraph: <p>
• Additional Resources:
  • HTML Tags on W3Schools
  • HTML Elements Reference - MDN (Recommended)
  • HTML Fundamentals - web.dev (Recommended)

Lists

• Lists are useful for displaying information on a webpage, like:
  • Search results (e.g., Google Search)
  • Contacts (e.g., LinkedIn)
• Unordered list: <ul>
• Ordered list: <ol>
• list item: <li> – Used to define each item within <ul> or <ol>.

Attributes

• Attributes provide additional information for HTML elements and can be directly manipulated.
• Common attributes include:
  • Links: <a href="URL"> – href specifies the destination.
  • Images: <img src="URL" alt="description">
    • src, alt, title, width, height
• Additional Resources:
  • HTML Attributes - W3Schools
  • HTML Attributes - MDN (Recommended)

Form Basics

• Forms allow websites to collect user information through input fields.
• Common use cases include:
  • Search: Collects keywords for search functionality.
  • Registration: Gathers user details like name and email.
  • Submissions: Enables users to send information, such as feedback or uploads.

Form

• Use the <form> tag to create a form.
• Add input fields with the <input> tag to gather user information.
• Each major form field has a corresponding type attribute, such as:
  • text, email, password, etc.
• Usually end with an <input type="submit"> to add a submit button.
• We’ll explore creating and handling forms using FastAPI/Flask and Python!

HTTP Request Methods

• Forms can be submitted using different HTTP methods:
  • GET
  • POST
• Additional Resources:
  • HTTP Methods - W3Schools
  • HTTP Methods - MDN (Recommended)

HTTP Request Method - GET

• GET retrieves a representation of a specified resource.
• In HTML forms, GET appends form data to the action URL as query parameters.
  • Useful for non-sensitive data and search functionality.
• GET is the default method if no method attribute is specified in a form.

HTTP Request Method - POST

• POST sends data to the server to be processed.
• Commonly used for submitting form data that modifies or adds to server resources.
• We’ll use POST to send data to our web application created with FastAPI/Flask and Python.

HTML Forms Selections

• Let’s explore additional input types that enhance form functionality:
  • Checkboxes, radio buttons, dropdowns, etc. require specific tags for user selections.
• Additional Resources:
  • HTML Input Types - W3Schools
  • HTML Input Types - MDN (Recommended)

CSS

CSS Basics

• Selectors: Define which HTML elements the styles will apply to.
  • Examples: element, .class, #id, [attribute]
• Properties: Specify the styling rules for elements.
  • Examples: color, font-size, margin, padding

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>Hello</title>
    </head>
    <body>
        <!-- Inline CSS (quick, one-time styles; not recommended for production)-->
        <h1 style="color: #006644">Hello, world!</h1>
    </body>
</html>

<!DOCTYPE html>

<html lang="en">
    <head>
        <!-- Internal CSS (useful for unique, single-page styles) -->
        <style>
            h1 {
                color: #006644;
            }
        </style>
        <title>Hello</title> 
    </head>
    <body>
        <h1>Hello, world!</h1>
    </body>
</html>

<!DOCTYPE html>

<html lang="en">
    <!-- External CSS linked from style.css (recommended for most projects) -->
    <link rel="stylesheet" href="style.css">
    <head>
        <title>Hello</title>
    </head>
    <body>
        <h1>Hello, world!</h1>
    </body>
</html>

CSS Frameworks & UI Components

• Bootstrap
• Tailwind CSS
• shadcn/ui

JavaScript

Conditionals

if (x < y) {
    console.log("x is less than y");
} else {
    console.log("x is not less than y");
}

Variables

let counter = 0;

counter = counter + 1;

// or

counter += 1;

// or

counter ++;

Loop

let counter = 3

while(counter > 0){
    console.log("meow");
    counter = counter - 1;
}

for (let i = 0; i < 3; i += 1)
{
    console.log("meow");
}

// If you want to crash your Chrome

while (true){
    console.log("meow");
}

JavaScript DOM (Document Object Model)

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>Hello</title>
    </head>
    <body>
        <h1>Hello, world!</h1>
    </body>
</html>

JavaScript DOM Events

blur
change
click
drag
focus
keyup
load
mousedown
mouseover
mouseup
submit
touchmove
unload
...

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>Hello</title>
        <!-- Link to external JavaScript file -->
        <script src="script.js" defer></script> 
        <!-- "defer" ensures the script loads after HTML parsing -->
    </head>
    <body>
        <h1>Hello, world!</h1>
    </body>
</html>