Think of a house: HTML is the walls and rooms, CSS is the paint and furniture, JavaScript is the electricity and plumbing.

• Code editor: Visual Studio Code (free). Useful extensions: Live Server, Prettier, and a spell checker.
• Browser: Chrome or Firefox with DevTools (right-click → Inspect) to see and test the code of any page
• Project folder: index.html, a css/ folder with style.css, a js/ folder, an images/ folder
• Version control: a free GitHub account (you'll use it on Day 4)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mindoro Bakehouse | Custom Cakes in Calapan</title>
  <meta name="description" content="Custom birthday and wedding cakes in Calapan City.">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>…</header>
  <main>…</main>
  <footer>…</footer>
</body>
</html>

The <head> holds information about the page (title, description, CSS links). The <body> holds what visitors see. The viewport meta tag is required for mobile-friendly pages.

/* selector { property: value; } */
body   { font-family: system-ui, sans-serif; color: #222; line-height: 1.6; }
h1     { font-size: 2.5rem; }
.btn   { background: #6b3fd4; color: #fff; padding: 12px 20px; border-radius: 8px; }
#order { scroll-margin-top: 80px; }

• Selectors: element (h1), class (.btn, reusable), id (#order, unique)
• Units: px for fixed sizes, rem for text, % and vw for widths
• Colors: hex (#6b3fd4), rgb(), hsl()
• The cascade: later rules and more specific selectors win. Keep specificity low by using classes.

Every element is a box: content → padding (inside space) → border → margin (outside space).

*, *::before, *::after { box-sizing: border-box; } /* widths include padding + border */
.card { padding: 24px; border: 1px solid #ddd; margin-bottom: 16px; }

Use a spacing scale (4, 8, 16, 24, 32, 48, 64 px) so the design feels consistent.

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.cards {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

Practice with the free games Flexbox Froggy and Grid Garden.

Most visitors to local business sites use phones. Design for small screens first, then add styles for bigger screens.

.cards { display: grid; gap: 16px; }            /* phone: 1 column */

@media (min-width: 700px) {
  .cards { grid-template-columns: 1fr 1fr; }    /* tablet: 2 columns */
}
@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(3, 1fr); } /* desktop: 3 */
}
img { max-width: 100%; height: auto; }

• Test with DevTools' device toolbar (Ctrl+Shift+M) at 360, 768 and 1280 px
• Tap targets at least 44 px tall; text at least 16 px
• No sideways scrolling on phones

Plan first: sketch a wireframe on paper or in Figma (free), then code.

const shopName = "Mindoro Bakehouse";   // text (string)
let cakesSold = 12;                       // number (let can change)
const flavors = ["ube", "mango", "choco"]; // array (list)

function greet(name) {                    // function
  return "Hi " + name + "!";
}

if (cakesSold > 10) {                     // condition
  console.log("Busy day!");
}

for (const f of flavors) {                // loop
  console.log(f);
}

Open DevTools → Console to run and test JavaScript. Use const by default and let when the value changes.

const btn  = document.querySelector(".menu-btn");
const menu = document.querySelector(".menu");

btn.addEventListener("click", () => {
  menu.classList.toggle("open");          // show/hide the menu
  const open = menu.classList.contains("open");
  btn.setAttribute("aria-expanded", open);
});

Select an element → listen for an event (click, submit, input) → change something (class, text, style). This pattern covers most small-business interactivity.

Contact forms need somewhere to send data. For static sites use a form service (Formspree, Netlify Forms, Web3Forms); WordPress uses form plugins. Snippets are on the Templates page.

• Read the error in the Console. It usually names the file and line.
• Use console.log() to check values step by step
• Check for typos, missing brackets, and wrong class names in selectors
• Search the exact error message; MDN Web Docs is the best reference

After this course, the next step is learning a framework (React, Vue or Astro), Git workflows, and a bit of back end.

A CMS (Content Management System) lets people create and edit website content without writing code. WordPress is the most popular CMS. It's built with PHP and stores content in a MySQL/MariaDB database.

In this course, "WordPress" means self-hosted WordPress.org.

Set these on every new site

• General: site title, tagline, time zone (e.g., Manila), date format
• Permalinks: "Post name" for clean URLs like /about/
• Reading: set a static homepage and a Posts page; keep "Discourage search engines" off for live sites
• Discussion: turn off comments if the client doesn't need them
• Delete the sample post, sample page and unused themes and plugins

WordPress's built-in editor builds pages from blocks: paragraph, heading, image, buttons, columns, group, cover, and more.

• Press / to quickly add a block (e.g., /heading)
• Group, Columns, Row and Stack blocks create layouts
• Patterns: ready-made sections (hero, pricing, testimonials). Insert, then edit.
• Synced patterns: edit once, update everywhere (e.g., a call-to-action banner)
• Use the List View to see and select nested blocks
• Check responsive previews (desktop/tablet/mobile) before publishing

Principle of least privilege: give each person the lowest role they need.

• Set global colors and fonts first so every page stays consistent
• Build the header, footer and reusable sections before individual pages
• Collect all content (text, photos, logo) before designing

• Menus: Appearance → Menus (classic) or the Navigation block (block themes); keep the main menu to 5–7 items
• Header: logo, menu, one call-to-action button (Call / Book)
• Footer: contact info, hours, map link, social links, legal pages
• Forms: name, email/phone, message; send to the client's email and a backup; add anti-spam; test delivery with WP Mail SMTP
• Legal pages: Privacy Policy (WordPress has a starter), Terms if selling

1. Install WooCommerce and run the setup wizard (store address, currency, industry)
2. Products: simple and variable (sizes/colors), prices, SKUs, stock, images, categories
3. Payments: set up the gateways the client uses (e.g., PayPal, Stripe, local gateways that support PH wallets and cards)
4. Shipping zones and rates; taxes if needed
5. Pages: Shop, Cart, Checkout, My Account (created automatically)
6. Emails: customize order notification emails
7. Test a full order in test or sandbox mode, then refund it

Stores need extra care: SSL, backups, regular updates, and faster hosting.

• Where to add it: Customizer → Additional CSS (classic), Styles → Additional CSS (block themes), Elementor custom CSS (Pro), or a child theme's style.css
• Use DevTools to find the right selector, test the change live, then paste it
• Add your own CSS class to a block or widget (Advanced → CSS class) to target it safely

/* Make the header button stand out */
.site-header .cta-btn { background:#1f6fb8; color:#fff; border-radius:999px; }

/* Hide an element on mobile only */
@media (max-width: 767px) { .hide-mobile { display:none; } }

A child theme inherits everything from a parent theme but keeps your customizations safe when the parent theme updates. Never edit the parent theme's files.

/* wp-content/themes/astra-child/style.css */
/*
 Theme Name: Astra Child
 Template:   astra
*/

<?php
// wp-content/themes/astra-child/functions.php
add_action( 'wp_enqueue_scripts', function () {
  wp_enqueue_style( 'child-style', get_stylesheet_uri() );
} );

• Hooks let you add or change behavior without editing core files: actions run code at a moment (wp_footer), filters change a value (excerpt_length)
• For small snippets, a code-snippets plugin is safer than editing functions.php directly
• A PHP error can take the site down. Test on LocalWP or staging, and keep FTP/file-manager access ready.

When a site has structured content like properties, rooms, team members, menus or events, use a custom post type with custom fields (price, bedrooms, location) instead of typing it into a page by hand.

• Tools: ACF (Advanced Custom Fields), Pods, Meta Box, or register in code
• Display with the theme's templates, a Query Loop block, or builder dynamic tags
• Clients get a simple form to fill in, and the design stays consistent

• Permalinks set to "Post name"; search engine visibility ON
• SEO plugin: set titles and meta descriptions, the sitemap, and the social share image
• One H1 per page; logical headings; alt text on images
• Local businesses: LocalBusiness schema; NAP in footer; embedded map
• Connect Google Search Console and submit the sitemap; add Analytics
• When redesigning, keep URLs or add 301 redirects (the Redirection plugin)

• Backups = database + files. Schedule daily or weekly depending on the site; store copies off-site; test a restore at least once.
• Staging: a copy of the live site for testing updates and redesigns (many hosts offer one-click staging)
• Migration: move sites between hosts or from LocalWP to live using a migration plugin (e.g., Duplicator, All-in-One WP Migration, WPvivid) or the host's migration tool. Then update URLs, clear caches and test.
• Domains & DNS: point the domain's A record to the new host; register domains in the client's name
• Hosting choice: managed WordPress or quality shared hosting with SSL, backups, staging, a recent PHP version and good support

• Content proofread; placeholders removed; favicon and logo set
• Forms tested with real messages (and received)
• Mobile, tablet, desktop; Chrome, Safari, Firefox
• Search engine visibility ON; sitemap submitted; Analytics connected
• HTTPS works; www/non-www redirect; no mixed-content warnings
• Speed checked; caching on
• Security plugin, backups scheduled, admin 2FA
• Legal pages present; cookie notice if needed

Get the full WordPress launch checklist.

• Give the client an Editor account (Administrator only if they insist, and explain the risks)
• Record short Loom videos: editing a page, adding a post, changing images, updating prices
• Handover document: logins, where things are, renewal dates, who to call
• Lock the design: use templates, global styles, and limit what editors can change

Care plans turn one-time projects into monthly income, and clients love not worrying about their site.

• Written scope, deposit before starting, content deadlines, and change requests for extras
• Weekly updates with a staging link
• Final files and admin access handed over after final payment

• Project #1: responsive landing page (HTML/CSS), live
• Project #2: interactive mini site (JavaScript)
• Project #3: WordPress business site
• Project #4: WooCommerce mini store
• Before/after speed scores and a short case study for each
• Your own portfolio site, built in WordPress or hand-coded