HTML, CSS, JavaScript 101

This comprehensive tutorial will guide you through the fundamentals of web development, starting with HTML and CSS for building web pages, then progressing to JavaScript with Next.js for creating dynamic web applications.

Part 1: HTML Basics#

What is HTML?#

HTML (HyperText Markup Language) is a markup language used to create and design websites. The basic structure of HTML consists of elements that are combined to build a webpage.

Setting Up Your Environment#

Prerequisites: Install VS Code from code.visualstudio.com ↗

VS Code is an IDE (Integrated Development Environment) — a tool used for writing code.

Project Setup#

# Create a folder for your HTML project
mkdir html-css-tutorial
cd html-css-tutorial

# Create a folder for HTML files
mkdir 01_html
cd 01_html

# Launch VS Code in the current folder
code .

bash

HTML Basic Structure#

In VS Code, create a file named index.html. Type html:5 and press Enter/Tab to generate the default HTML boilerplate:

html:5

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
</head>
<body>

</body>
</html>

html

HTML Element Reference#

Element	Description
`<!DOCTYPE html>`	Declares that this document is HTML5
`<html>`	The root of an HTML document
`<head>`	Contains metadata about the document (not displayed on the webpage)
`<title>`	Defines the title of the webpage, shown in the browser’s title bar
`<body>`	Contains the content displayed on the webpage
`<h1>` - `<h6>`	Headings of different sizes (h1 is largest)
`<p>`	A paragraph of text
`<a href="URL">`	A link to another webpage
`<img src="..." alt="...">`	Embeds an image

Headings and Paragraphs#

Add content inside the <body>:

<body>
  <h1>Website Karn Yongsiriwit</h1>
  <p>Welcome back to our website.</p>
  <h2>News</h2>
  <p>Read news from our website.</p>
  <h2>Activities</h2>
  <p>We have many activities.</p>
</body>

html

Heading and paragraph

Links (Anchor Tag)#

Create a file named about.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About</title>
</head>
<body>
  <h1>About Me</h1>
</body>
</html>

html

In index.html, add links for both external and internal pages:

<!-- Internal link -->
<a href="about.html">About</a>

<!-- External link -->
<a href="https://melivecode.com">Visit MeLiveCode</a>

html

Images#

The <img> tag embeds an image by specifying its source (src) and alternative text (alt):

<!-- Local image -->
<img src="cat_meme.jpg" alt="Cat Speechless" width="100px" height="150px" />

<!-- Remote image -->
<img src="https://melivecode.com/img/logo.png" alt="Bear is coding" height="150px" />

html

Link and image

Lists#

HTML supports both unordered (bullet points) and ordered (numbered) lists:

<!-- Unordered List -->
<ul>
  <li>DIT has a new teacher.</li>
  <li>There's big rain in RSU.</li>
  <li>RSU Market at Building 6.</li>
</ul>

<!-- Ordered List -->
<ol>
  <li>Orientation</li>
  <li>National Holiday</li>
  <li>Term Break</li>
</ol>

html

Tag	Description
`<ul>`	Unordered list (bullet points)
`<ol>`	Ordered list (numbers)
`<li>`	List item

Forms#

The <form> element collects user input and sends data to a server.

Create a file named login.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login</title>
</head>
<body>
  <h1>Login</h1>
  <form action="login.php" method="POST">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" />
    <br />
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" />
    <br />
    <input type="checkbox" id="remember" name="remember" />
    <label for="remember">Remember Me</label>
    <br/>
    <input type="submit" value="Login" />
  </form>
</body>
</html>

html

Form

Form Element Reference#

Element	Purpose
`<form action="">`	Defines a boundary for collecting inputs; `action` specifies where data is sent
`<label for="id">`	Specifies a name for an input; improves accessibility
`<input>`	Various input types (text, password, checkbox, submit)
`id` attribute	Links an input with its label
`name` attribute	Variable/parameter name for form submission

Note: For more HTML elements and examples, visit W3Schools HTML ↗

Part 2: CSS Basics#

Project Setup#

# Create a folder for CSS files
mkdir 02_css
cd 02_css

# Launch VS Code in the current folder
code .

bash

In VS Code, create a file named index.html. Type html:5 and press Enter/Tab to generate the default HTML boilerplate:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Practice</title>
</head>
<body>

</body>
</html>

html

What is CSS?#

CSS (Cascading Style Sheet) is a language used to define the format and style (appearance) of a webpage, such as background color, positioning elements, fonts, and more.

Inline CSS#

You can add styles directly to elements using the style attribute:

<body style="background-color: beige;">
  <h1 style="color: darkblue;">Hello World</h1>
</body>

html

CSS Syntax#

CSS rules follow this structure:

selector {
  property: value;
  property: value;
}

css

Part	Description
`selector`	Chooses which HTML elements to style (element, class, or id)
`property`	The attribute to define (background-color, color, font-size, margin, padding)
`value`	The setting for that property (aqua, #FF0000, 16px)

Internal CSS (Style Element)#

The <style> tag defines CSS within an HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Styled Page</title>
  <style>
    body {
      background-color: beige;
    }
    h1 {
      color: darkblue;
      font-size: 32px;
    }
  </style>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

html

External CSS (Recommended)#

Create a separate CSS file and link it in your HTML:

File: style.css

body {
  background-color: beige;
  margin: 0;
}

h1 {
  color: darkblue;
}

css

File: index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Styled Page</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

html

Separating CSS into an external file is the most commonly used method because it makes managing styles easier.

Note: For CSS properties reference, visit W3Schools CSS Reference ↗

Live Server Extension#

Install the Five Server extension in VS Code to automatically reload the browser when code changes are made:

Go to Extensions
Search for “Five Server”
Install the extension
Right-click on index.html and select “Open with Five Server”

CSS Classes and Div Elements#

A class in CSS defines a style that can be applied to multiple elements.

File: style.css

body {
  background-color: beige;
}

.box {
  border: 2px solid brown;
  width: 200px;
  padding: 10px;
  margin: 10px;
}

css

File: index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Classes</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="box">
    <h1>Box 1</h1>
    <p>This is content inside box 1</p>
  </div>
  <div class="box">
    <h1>Box 2</h1>
    <p>This is content inside box 2</p>
  </div>
</body>
</html>

html

Concept	Description
`<div>`	Generic container used to group elements together
`.classname`	CSS class selector (starts with a dot)
`#idname`	CSS ID selector (starts with a hash)

Create a navigation bar using <ul> and <li>:

File: style.css

body {
  background-color: beige;
  margin: 0;
}

.navMenu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: darkgreen;
  overflow: hidden;
}

.navItem {
  float: left;
}

.navItem a {
  color: white;
  text-decoration: none;
  display: block;
  padding: 14px 16px;
  text-align: center;
}

.navItem a:hover {
  background-color: #115511;
}

css

File: index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navigation Bar</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <ul class="navMenu">
    <li class="navItem"><a href="index.html">Home</a></li>
    <li class="navItem"><a href="about.html">About</a></li>
    <li class="navItem"><a href="contact.html">Contact</a></li>
  </ul>
  <h1>Welcome</h1>
</body>
</html>

html

CSS Property Explanation#

Property	Value	Description
`list-style-type`	`none`	Removes bullet points from list
`margin`	`0`	Removes outer spacing
`padding`	`0`	Removes inner spacing
`background-color`	`darkgreen`	Sets background color
`overflow`	`hidden`	Contains floated elements within parent
`float`	`left`	Places items horizontally
`text-decoration`	`none`	Removes underline from links
`display`	`block`	Makes entire area clickable

Flexbox Layout#

Flexbox is used to arrange content dynamically for responsive layouts:

File: style.css

body {
  background-color: beige;
  margin: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}

.card {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  margin: 10px;
}

.card img {
  width: 100%;
  object-fit: cover;
  border-radius: 4px;
}

css

File: index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Cards</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1>Popular Tourist Attractions</h1>
  <div class="container">
    <div class="card">
      <img src="https://www.melivecode.com/attractions/1.jpg" alt="Phi Phi Island" />
      <h2>Phi Phi Islands</h2>
    </div>
    <div class="card">
      <img src="https://www.melivecode.com/attractions/2.jpg" alt="Eiffel Tower" />
      <h2>Eiffel Tower</h2>
    </div>
    <div class="card">
      <img src="https://www.melivecode.com/attractions/3.jpg" alt="Times Square" />
      <h2>Times Square</h2>
    </div>
    <div class="card">
      <img src="https://www.melivecode.com/attractions/4.jpg" alt="Mount Fuji" />
      <h2>Mount Fuji</h2>
    </div>
  </div>
</body>
</html>

html

Flexbox Properties#

Property	Description
`display: flex`	Makes element a flex container
`flex-wrap: wrap`	Allows items to wrap to new lines
`justify-content: center`	Centers items horizontally
`gap`	Adds space between flex items

Note: For a comprehensive Flexbox guide, visit CSS-Tricks Flexbox Guide ↗

Useful Keyboard Shortcuts#

Action	Windows/Linux	macOS
Copy	`Ctrl + C`	`Cmd + C`
Paste	`Ctrl + V`	`Cmd + V`
Save	`Ctrl + S`	`Cmd + S`
Cut	`Ctrl + X`	`Cmd + X`
Undo	`Ctrl + Z`	`Cmd + Z`
Redo	`Ctrl + Y`	`Cmd + Y`

Part 3: JavaScript with Next.js#

What is Next.js?#

React.js is a JavaScript library for building user interfaces (Frontend)
Next.js is a framework built on top of React.js that makes creating complete web applications more convenient
Node.js is a JavaScript runtime environment that allows JavaScript to run outside the browser

Setting Up Next.js#

Prerequisites: Install Node.js (LTS) from nodejs.org ↗

Project Setup#

# Create a new Next.js project
npx create-next-app@15 nextjs-tutorial

# Navigate to options when prompted:
# - Project name: nextjs-tutorial (or your preferred name)
# - TypeScript: No
# - ESLint: Yes
# - Tailwind CSS: No (for learning basics)
# - App Router: Yes
# - Customize default import alias: No

# Navigate into the project
cd nextjs-tutorial

# Launch VS Code in the current folder
code .

# Open Terminal in VS Code and start the development server
npm run dev

bash

Open your browser and go to http://localhost:3000 to view your application.

Recommended VS Code Extensions#

Install the ES7+ React/Redux/React-Native snippets extension for React support in VS Code.

React Component Structure#

In Next.js (App Router), pages are created as React components in the app directory.

File: app/page.js

export default function Page() {
  return (
    <div>
      <div className='box'>
        <h1>Hello World, Next.js</h1>
        <p>Welcome to React!</p>
      </div>
    </div>
  )
}

javascript

Key Concepts#

Concept	Description
`export default`	Exports the component so it can be imported/used
`function Component()`	Functional Component declaration
`return (...)`	Returns JSX (UI markup)
`className`	React uses `className` instead of `class`
JSX	JavaScript + XML — HTML-like syntax in JavaScript

Note: In React/Next.js, use className instead of class for styling elements.

Adding CSS#

File: app/style.css

.box {
  border: 2px solid brown;
  width: 200px;
  padding: 10px;
  margin: 10px;
  background-color: beige;
}

css

File: app/layout.js

import './style.css'

export const metadata = {
  title: 'Next.js Tutorial',
  description: 'Learn JavaScript with Next.js',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

javascript

JavaScript Basics in React/Next.js#

1. Variables#

Create the file app/01_var/page.js — Access at http://localhost:3000/01_var

export default function VarPage() {
  const name = "Karn";
  let age = 25;
  const isStudent = true;

  return (
    <div>
      <h1>Variables</h1>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <p>Is Student: {isStudent ? "Yes" : "No"}</p>
    </div>
  );
}

javascript

Keyword	Use Case
`var`	Avoid using — has scope issues
`let`	Use for variables that need to change
`const`	Use for variables that should not change

2. Arrays#

Create the file app/02_array/page.js — Access at http://localhost:3000/02_array

export default function ArrayPage() {
  const fruits = ["Apple", "Banana", "Mango", "Orange"];

  return (
    <div>
      <h1>Arrays</h1>
      <ul>
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

javascript

Note: The key prop is required for list items to help React track which items have changed.

3. Objects#

Create the file app/03_object/page.js — Access at http://localhost:3000/03_object

export default function ObjectPage() {
  const user = {
    name: "Karn Yongsiriwut",
    role: "Developer",
    country: "Thailand"
  };

  return (
    <div>
      <h1>Objects</h1>
      <p>Name: {user.name}</p>
      <p>Role: {user.role}</p>
      <p>Country: {user.country}</p>
    </div>
  );
}

javascript

Objects store data as key-value pairs. Use dot notation (user.name) to access properties.

4. Array of Objects#

Create the file app/04_array_objects/page.js — Access at http://localhost:3000/04_array_objects

export default function ArrayObjectsPage() {
  const attractions = [
    { id: 1, name: "Phi Phi Islands", country: "Thailand" },
    { id: 2, name: "Eiffel Tower", country: "France" },
    { id: 3, name: "Times Square", country: "USA" },
    { id: 4, name: "Mount Fuji", country: "Japan" }
  ];

  return (
    <div>
      <h1>Array of Objects</h1>
      {attractions.map((attraction) => (
        <div key={attraction.id} style={{ border: "1px solid #ccc", margin: "10px", padding: "10px" }}>
          <h2>{attraction.name}</h2>
          <p>Country: {attraction.country}</p>
        </div>
      ))}
    </div>
  );
}

javascript

Array of objects is the most common way data is displayed on web pages. Use map() to loop through and display each item.

5. Functions#

Create the file app/05_function/page.js — Access at http://localhost:3000/05_function

export default function FunctionPage() {
  // Function to add two numbers
  function add(a, b) {
    return a + b;
  }

  // Arrow function to multiply two numbers
  const multiply = (a, b) => {
    return a * b;
  };

  // Arrow function with implicit return
  const subtract = (a, b) => a - b;

  // Function to check if a person is an adult
  const isAdult = (age) => {
    return age >= 18;
  };

  // Function to format a greeting
  const greet = (name, timeOfDay) => {
    return `Good ${timeOfDay}, ${name}!`;
  };

  return (
    <div>
      <h1>Functions</h1>
      <h2>Basic Calculations</h2>
      <p>5 + 3 = {add(5, 3)}</p>
      <p>4 × 6 = {multiply(4, 6)}</p>
      <p>10 - 4 = {subtract(10, 4)}</p>

      <h2>Conditional Logic</h2>
      <p>Age 20 is adult: {isAdult(20) ? "Yes" : "No"}</p>
      <p>Age 15 is adult: {isAdult(15) ? "Yes" : "No"}</p>

      <h2>String Templates</h2>
      <p>{greet("Karn", "morning")}</p>
      <p>{greet("John", "evening")}</p>
    </div>
  );
}

javascript

Function Syntax#

Type	Syntax	Use Case
Function Declaration	`function name() {}`	General use, can be called before declaration
Function Expression	`const name = function() {}`	When assigning to a variable
Arrow Function	`const name = () => {}`	Short, modern syntax, commonly used in React
Arrow (Implicit Return)	`const name = () => value`	One-line functions without `return` keyword

Function Naming Conventions#

Convention	Rule	Valid Examples	Invalid
camelCase	First word lowercase, subsequent words capitalized	`getUserData`, `calculateTotal`, `isValid`	`GetUserData`, `get_user_data`
Verb-first	Start with a verb describing the action	`fetchUser`, `saveData`, `deleteItem`	`user`, `data`, `item`
Booleans	Use `is`, `has`, `can`, `should` prefix	`isLoggedIn`, `hasPermission`, `canEdit`	`logged`, `permission`, `editable`

Using Functions with map()#

Functions are very useful when working with arrays. You can pass a function to map():

export default function FunctionMapPage() {
  const products = [
    { id: 1, name: "Laptop", price: 25000 },
    { id: 2, name: "Mouse", price: 500 },
    { id: 3, name: "Keyboard", price: 1500 }
  ];

  // Function to calculate price with 10% discount
  const calculateDiscount = (price) => {
    return price * 0.9;
  };

  // Function to format currency
  const formatCurrency = (amount) => {
    return `฿${amount.toLocaleString()}`;
  };

  return (
    <div>
      <h1>Functions with Arrays</h1>
      <h2>Product Prices (with 10% discount)</h2>
      {products.map((product) => (
        <div key={product.id} style={{ border: "1px solid #ccc", margin: "10px", padding: "10px" }}>
          <h3>{product.name}</h3>
          <p>Original Price: {formatCurrency(product.price)}</p>
          <p>Discounted Price: {formatCurrency(calculateDiscount(product.price))}</p>
        </div>
      ))}
    </div>
  );
}

javascript

Tip: Functions help you reuse code and keep your components organized. Break down complex logic into smaller, focused functions.

Table of Contents#

Update app/page.js to create links to all your pages:

import Link from 'next/link'

export default function Home() {
  return (
    <div style={{ padding: '20px' }}>
      <h1>JavaScript Tutorial</h1>
      <ul>
        <li><Link href="/01_var">Variables</Link></li>
        <li><Link href="/02_array">Arrays</Link></li>
        <li><Link href="/03_object">Objects</Link></li>
        <li><Link href="/04_array_objects">Array of Objects</Link></li>
        <li><Link href="/05_function">Functions</Link></li>
      </ul>
    </div>
  )
}

javascript

Summary#

Part 1: HTML#

Used for creating webpage structure and content
Key elements: headings, paragraphs, links, images, lists, forms
Use semantic HTML for better accessibility

Part 2: CSS#

Used for styling web pages
Three ways to apply CSS: inline, internal, external
Use external CSS files for better organization
Flexbox for responsive layouts

Part 3: JavaScript with Next.js#

React/Next.js for dynamic web applications
Variables: const (unchanging), let (changeable)
Arrays for lists of data
Objects for key-value data
Array of objects for complex data structures
Functions for reusable code (regular functions and arrow functions)
Use map() to display lists in React

Next Steps#

Practice creating HTML pages with different elements
Experiment with CSS styling and Flexbox layouts
Build a small React/Next.js project using what you’ve learned
Explore more advanced JavaScript concepts (conditionals, loops, async/await)
Learn about React hooks (useState, useEffect) for interactivity

Part 1: HTML Basics#

What is HTML?#

Setting Up Your Environment#

Project Setup#

HTML Basic Structure#

HTML Element Reference#

Headings and Paragraphs#

Links (Anchor Tag)#

Images#

Lists#

Forms#

Form Element Reference#

Part 2: CSS Basics#

Project Setup#

What is CSS?#

Inline CSS#

CSS Syntax#

Internal CSS (Style Element)#

External CSS (Recommended)#

Live Server Extension#

CSS Classes and Div Elements#

Navigation Bar#

CSS Property Explanation#

Flexbox Layout#

Flexbox Properties#

Useful Keyboard Shortcuts#

Part 3: JavaScript with Next.js#

What is Next.js?#

Setting Up Next.js#

Project Setup#

Recommended VS Code Extensions#

React Component Structure#

Key Concepts#

Adding CSS#

JavaScript Basics in React/Next.js#

1. Variables#

2. Arrays#

3. Objects#

4. Array of Objects#

5. Functions#

Function Syntax#

Function Naming Conventions#

Using Functions with map()#

Table of Contents#

Summary#

Part 1: HTML#

Part 2: CSS#

Part 3: JavaScript with Next.js#

Next Steps#

Resources#

Login to comment

Comments 0

Delete Comment