Video summary

Belajar Membuat WEBSITE Dari 0 Sampai Di PUBLISH Untuk Pemula

Main summary

Key takeaways

Educational

Main ideas & lessons

  • Target audience: Beginners and non-IT / non-programmers can follow this tutorial to learn basic website creation.
  • Learning approach: Start from zero using a “full course format” (minimal editing), building a simple project step-by-step.
  • Core web technologies (initially):
    • HTML = structure/contents of a web page (text, images, etc.).
    • CSS = styling/appearance (layout, colors, spacing, fonts, etc.).
    • JavaScript comes later (not covered deeply here yet); HTML alone is mainly “static” with limited interaction.
  • Workflow concept:
    • Create files locally → open in a browser → refresh to see changes → gradually replace simple layouts with structured components.
  • Project structure concept: Build a standard page with three main components:
    • Navigation bar (navbar)
    • Content section
    • Footer
  • Practical HTML concept taught in depth: Using tables to understand how data is organized (header row vs body rows, nested structures), then moving to more practical form elements and layout.

Instructions / methodology (detailed bullets)

A) Prerequisites (before coding)

  • Use an ordinary computer/laptop capable of running basic coding.
  • Ensure you have:
    • Text editor (example used: Visual Studio Code; can use any editor).
    • Internet connection (recommended for accessing learning resources).
    • At least ~2GB RAM (basic requirement).
  • Recommended tools:
    • Visual Studio Code (download from official site according to OS: Windows/Mac/Linux).

B) Setup: create the first HTML file

  • Create a folder on the desktop, e.g. website-stre (folder name can vary).
  • Inside the folder:
    • Create index.html (ensure extension is .html, not .txt).
    • If needed, enable file name extensions / confirm extension is correct.
  • Open the folder using Visual Studio Code.
  • Use the default HTML template:
    • type !, then Space, and select the generated template.
  • Write basic content inside <body>, for example:
    • Hello ...
  • Save:
    • Ctrl + S
  • View in browser:
    • Open index.html and refresh after each change.

C) Learn core HTML structure (from scratch)

Begin with these blocks:

  • <html> (outer wrapper)
  • <head> (metadata/utilities; title goes here)
  • <body> (visible page content)

In practice, the flow is:

  • Outer structure → head → body → put visible elements inside body.

D) HTML elements practiced

  • Tables (for understanding data layout):

    • Use nested structure:
      • <table>
        • <thead> (“table head” concept; the tutorial uses TH and related ideas)
        • <tbody>
          • rows: <tr>
          • cells: <th> and <td> (title vs content)
    • Use border attributes initially for visibility.
    • Demonstrates copying/pasting rows and cells to build multiple entries.
    • Explains that this mirrors real-world data organization (jobs/data work later).

  • Forms / input idea (early):

    • Introduces <input> concept (later interactive logic requires JavaScript).
    • Notes importance of exact syntax:
      • case sensitivity
      • spacing
      • semicolons not always relevant in HTML, but exact tags matter

E) Transition to interactive-ready concepts (why JavaScript later)

  • Explains:
    • HTML is mostly formatting/structure.
    • JavaScript is needed for logic and richer interaction.
  • Tutorial purpose: master HTML first, then later learn JS in another semester/playlist.

F) Build the mini-website components (navbar, content, footer)

  1. Create component containers (using <div>):

    • Use separate div blocks for:
      • navbar
      • content
      • footer

  2. Use comments to hide/show sections while structuring:

    • Demonstrated toggling comments with shortcut like Ctrl + /.

  3. Navbar HTML:

    • Use <div> wrapper for navbar.
    • Inside, use:
      • <ul> list
      • <li> list items
    • Add menu items like:
      • Home, About, Contact

  4. Content HTML:

    • Demonstrates an image using <img> with:
      • src pointing to the image file in the same folder
      • width/height or percentage sizing
    • Adds headings like H1/H2/H3 examples.

  5. Footer HTML:

    • Adds text using h1/h2/h3 styles (then later CSS controls appearance).

G) Add CSS styling (style.css + linking)

  • Create a file style.css in the project folder.
  • In index.html, inside <head>, link the stylesheet using:
    • <link ... href="style.css" ... > (exact attributes shown in the tutorial)
  • Start CSS edits:
    • Example: change body background color.
    • Use correct syntax:
      • selector { property: value; }

H) CSS layout approach for navbar

  • Uses classes to target specific elements:
    • Add class attributes in HTML (e.g., navbar container class).
    • In CSS, target classes using dot notation:
      • .className { ... }
  • Steps shown conceptually:
    • Style navbar background and remove default list styling:
      • list-style-type: none;
    • Set dimensions:
      • width/height using pixels or percentages.
    • Use Flexbox for layout:
      • display: flex;
      • justify-content: center;
      • align-items: center;
    • Add spacing:
      • margin / padding adjustments.
  • Common debugging habit:
    • Temporarily set background colors/borders to see which element is being styled.

I) Make the page fill the viewport (100vh idea)

  • Attempts to make the layout fit one screen:
    • Uses 100vh to match device height.
  • Notes troubleshooting:
    • Some layout must be placed inside the correct wrapper/container for it to work as expected.

J) Add navigation links (clickable menu)

  • Convert menu items into clickable links:
    • Wrap items with <a> tags.
  • Create multiple pages:
    • Home → index.html
    • About → about.html
    • Contact → contact.html
  • Creates new files:
    • about.html
    • contact.html
  • In each page, include basic HTML structure and set a heading.

K) Style links: hover + transitions + underline removal

  • In CSS, target anchor elements inside navbar via class:
    • Remove underline:
      • text-decoration: none;
    • Set colors (e.g., white)
  • Add hover effect:
    • :hover { background-color: ... }
  • Add smooth transition:
    • transition: 0.2s; (or similar timing)
  • Round corners with:
    • border-radius: ...px;

L) Make the content image clickable (link to YouTube)

  • Wrap the <img> inside <a>:
    • so clicking the image navigates to a URL (example given: YouTube link)
  • Adds a caption/paragraph under the image:
    • Demonstrates column layout via Flexbox:
      • flex-direction: column;
      • spacing via justify-content options and padding/margins.

M) Final visual polish (box shadow, spacing, consistent styling)

  • Suggests using tools:
    • “Box shadow generator” to copy suitable CSS values.
  • Reiterates consistency:
    • same CSS file used across index.html, about.html, contact.html
    • copy/paste templates and only change content.

N) Deploy/share using Replit (hosting alternative demonstrated)

  • Create a Replit project:
    • choose a simple setup (HTML/CSS)
    • upload/paste index.html and style.css
  • Run to obtain a public link.
  • Share the link with others.

Speakers / sources featured

  • Speaker: One unnamed instructor/host (talking throughout the subtitles).
  • Referenced sources/tools:
    • W3Schools (used as documentation reference for HTML/CSS elements and attributes).
    • Visual Studio Code (text editor tool).
    • Replit (hosting/deployment platform).
    • Web browsers: Chrome / Firefox / Microsoft Edge (mentioned as options).
    • A “box shadow generator” (mentioned as an external helper tool for CSS).

Original video