Scribd
Upload
16 views15 pages

Component Based Web Intro

A website is constructed using HTML for structure, CSS for style, and JavaScript for functionality. Components are modular pieces of a website that contain their own HTML, CSS, and JavaScript, allowing for easy organization and reuse. The document outlines the basics of web development, including folder structure and how to dynamically load components to build a mini web app.

Uploaded by

xihew59374
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
16 views15 pages

Component Based Web Intro

A website is constructed using HTML for structure, CSS for style, and JavaScript for functionality. Components are modular pieces of a website that contain their own HTML, CSS, and JavaScript, allowing for easy organization and reuse. The document outlines the basics of web development, including folder structure and how to dynamically load components to build a mini web app.

Uploaded by

xihew59374
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd

What is a Website?

• - A website is like a house built with different


materials.
• - We build websites using:
• 🟨 HTML – the structure (walls, doors)
• 🎨 CSS – the style (paint, design)
• ⚙️JavaScript – the brain (how doors open,
lights work)
What is HTML?
• - HTML = Hyper Text Markup Language
• - It gives structure to a page.
• 📦 Example:
• <h1>Hello</h1>
• <p>This is a paragraph</p>
• <button>Click Me</button>
What is CSS?
• - CSS = Cascading Style Sheets
• - It makes your page look good 🎨
• 📦 Example:
• button {
• background-color: blue;
• color: white;
• }
What is JavaScript?
• - JavaScript makes things work ⚙️
• - It handles clicks, data, logic, and more.
• 📦 Example:
• document.querySelector("button").onclick =
function () {
• alert("You clicked me!");
• }
What is a Component?
• - A component is like one LEGO piece 🧩
• - It has:
• • Its own HTML
• • Its own CSS
• • Its own JS
• - You can plug components into any page.
Folder Structure
• We organize components in folders:

• components/
• └── login/
• ├── login.html
• ├── login.js
• └── login.css

• Each folder = 1 feature (like Login, Signup,


Base Page – index.html
• This is your empty LEGO table:

• <!DOCTYPE html>
• <html>
• <head>
• <title>My App</title>
• </head>
• <body>
• <div id="app"></div>
main.js – Start the Show!
• import { loadComponent } from './utils.js';

• document.addEventListener('DOMContentLoa
ded', () => {
• loadComponent('login');
• });

• - Waits for the page to load


• - Loads the login component
utils.js – Load the LEGO Set
• export function loadComponent(name) {
• fetch(`components/${name}/${name}.html`)
• .then(res => res.text())
• .then(html => {
•
document.getElementById('app').innerHTML =
html;

• const script =
login.html – HTML Part
• <form>
• <input type="text"
placeholder="Username" />
• <input type="password"
placeholder="Password" />
• <button>Login</button>
• </form>
login.js – JavaScript Part
• document.querySelector("form").onsubmit =
function (e) {
• e.preventDefault();
• alert("Login clicked!");
• };
login.css – Style Part (Optional)
• form {
• background: lightblue;
• padding: 20px;
• }
Final Magic ✨
• When everything is loaded:
• - HTML shows the form
• - CSS makes it pretty
• - JS makes it work!
Benefits of Components
• ✅ Easy to organize
• ✅ Reuse in other projects
• ✅ Clear separation (design, logic, layout)
• ✅ Easy to understand and debug
You Just Built a Mini Web App!
• ✅ You now know:
• - What HTML, CSS, JS do
• - What a component is
• - How to split your app
• - How to load components dynamically

• 👏 Great job, young developer!

You might also like