HTML, CSS, and JavaScript Basics

Jun 26, 2024

HTML, CSS, and JavaScript Basics

Overview

  • HTML: Hypertext Markup Language, used for structuring content on the web.
  • CSS: Cascading Style Sheets, used to style and layout web pages.
  • JavaScript: Scripting language to create dynamic web content.

HTML Basics

  • HTML Tags
    • <!DOCTYPE html>: Defines the document type.
    • <html>: Root element.
    • <head>: Contains meta-information.
    • <title>: Title of the document.
    • <body>: Contains the content.
  • Common Tags
    • <h1> to <h6>: Heading tags
    • <p>: Paragraph
    • <hr>: Horizontal rule
    • <a>: Anchor (links)
    • <ul>, <ol>, <li>: Lists (unordered, ordered)
    • <img>: Images
    • <table>, <tr>, <td>: Tables
    • <form>, <input>, <button>: Forms

HTML Example

<!DOCTYPE html>
<html>
<head>
    <title>Upcoming Events</title>
</head>
<body>
    <h1>Upcoming Events</h1>
    <p>Don’t miss any of your important events. Here are the important events you have registered for:</p>
    <p>Free entry, free food, pets are not allowed.</p>
    <img src='image.jpg' alt='Event Image'>
</body>
</html>

CSS Basics

  • Inline Styles: style attribute in HTML tags.
  • Internal Styles: <style> tag in the <head> section.
  • External Styles: Linked via <link rel='stylesheet' href='styles.css'> in the <head> section.
  • Selectors
    • Element Selector: p { color: red; }
    • Class Selector: .className {}
    • ID Selector: #idName {}
  • Properties
    • color: Text color
    • background-color: Background color
    • width, height: Dimensions
    • padding, margin: Spacing
    • border: Border around elements

CSS Flexbox

  • display: flex: Defines a flex container
  • flex-direction: Row or column
  • justify-content: Aligns items horizontally
  • align-items: Aligns items vertically

JavaScript Basics

  • Variables
    • var, let, const
  • Data Types
    • Primitive: String, Number, Boolean
    • Non-Primitive: Object, Array
  • Basic Operations
    • Arithmetic: +, -, *, /
    • Comparison: ==, ===, !=, !==, >, <
  • Functions
    • Define using function keyword
    • Can accept parameters and return values
  • Example
function add(a, b) {
    return a + b;
}
console.log(add(3, 4)); // Outputs: 7
  • Control Structures
    • if, else
    • for, while loops
    • switch statements
  • DOM Manipulation
    • document.getElementById('id')
    • document.querySelector('.class')
    • element.innerHTML, element.style

Event Handling

  • Common Events
    • onclick, onmouseover, onchange
  • Event Listeners
    • element.addEventListener('event', function)

Example Project Structure

HTML (index.html)

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
    <link rel='stylesheet' href='styles.css'>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
    <button id='clickMe'>Click Me</button>
    <script src='script.js'></script>
</body>
</html>

CSS (styles.css)

body {
    background-color: #f0f0f0;
}
h1 {
    color: #333;
}
p {
    color: #666;
}
button {
    background-color: #008cba;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}
button:hover {
    background-color: #005f5f;
}

JavaScript (script.js)

document.getElementById('clickMe').addEventListener('click', function() {
    alert('Button Clicked!');
});

Media Queries

  • Responsive Design
    • Adjust layout based on screen size
    • Example
@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

Flexbox Container

  • Example
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.item {
    flex: 1;
}
  • Flex Direction
    • flex-direction: row;
    • flex-direction: column;

JavaScript Functions and Scope

  • Function Example
function greet(name) {
    console.log('Hello, ' + name + '!');
}
greet('Alice');
  • Scope
    • Global Scope
    • Local Scope (within functions)
  • Immediately Invoked Function Expressions (IIFE): (function() { /* code */ })()

Task: Create a Simple Web Application

  1. Create HTML structure
  2. Style with CSS
  3. Add interactivity with JavaScript
  • Build an event page with details
  • Style it using CSS Flexbox and Grid
  • Implement form handling and validation
  • Add event listeners for user interaction

Example: Adding Event to List

  • HTML Form
<form id='eventForm'>
    <input type='text' id='eventName' placeholder='Event Name'>
    <button type='submit'>Add Event</button>
</form>
<ul id='eventList'></ul>
  • JavaScript
document.getElementById('eventForm').addEventListener('submit', function(e) {
    e.preventDefault();
    var eventName = document.getElementById('eventName').value;
    if (eventName) {
        var li = document.createElement('li');
        li.textContent = eventName;
        document.getElementById('eventList').appendChild(li);
        document.getElementById('eventName').value = '';
    } else {
        alert('Please enter an event name.');
    }
});

Conclusion

  • Combining HTML, CSS, and JavaScript allows creation of interactive and responsive web applications.
  • Practice building small projects to understand the concepts better.