Short Class Web Development: Frontend | MySkill

Main ideas & lessons (frontend / HTML class)

• The session is a MySkill short class focused on Frontend Web Development, specifically:
  • Understanding what HTML is and why it matters
  • Learning HTML document structure
  • Identifying HTML elements and attributes
  • Practicing basic HTML by building a self-introduction page (mini task)

Speakers emphasize that:

• Frontend developers work on what users see and how the UI behaves
• You don’t need to be from a specific major to become a frontend developer—practice and fundamentals matter
• Ongoing learning is required because technology changes quickly
• Documentation + practice are essential habits for developers
• AI can be used as a learning assistant, but it should not replace understanding

---

Methodology / instruction details (class workflow & mini task)

A) Before class / engagement

Participants were asked to:

• Prepare in advance (class starts at 7:30 PM)
• Post questions in the chat if needed
• Join the class session actively

B) Rules during class (attendance/certification requirements)

1. Mute microphone
2. Enable annotation
3. The recording is shared after class, and the material is not shared with participants
4. No attendance form; instead there is a certificate claim form
5. There will be a Q&A session

C) Certificate eligibility steps (main checklist)

1. Fill the certificate form
   • Use the link provided in chat
2. Complete mini tasks independently
   • Links for mini tasks would be provided later
3. Upload the mini task result to social media
   • Platforms mentioned: LinkedIn, TikTok, Twitter/X, Facebook, etc.
   • Include hashtag: #learn at MySkill (as stated in subtitles)
   • Upload the result of completing the mini task (not just participation)
4. Submit the social link(s) to the certificate client
   • The form closes H+2 after class (subtitles indicate a date/time example)
   • Certificate is expected H+7 after the form closes
5. If uploading is done:
   • Provide the direct post link (not vague responses)

D) Mini task: what participants must build (requirements)

Participants were instructed to create an HTML page with:

• An image (free/random image chosen by participant)
• Heading 1 (H1): the person’s name
• Heading 2 (H2): a self-introduction / introductory text
• A paragraph (self-description text)
• An ordered list (OL) with items (e.g., reasons/intent like “I want to create my first website”)
• A hyperlink (A / anchor tag) to the participant’s LinkedIn profile

Use grouping / organization in HTML:

• Semantic markup (examples mentioned: header, main, footer)
• Purpose: make code easier to read and structure properly

E) How the instructor demonstrated HTML coding (practical approach)

• Start with HTML basics, focusing on:
  • Correct tag nesting: every opening tag must have a closing tag (except void elements like img)

Suggested workflow inside CodePen (codpen.io):

• Start a new HTML coding template
• Add elements in this order:
  • img (with src, alt, width/height)
  • h1 (name)
  • h2 (intro heading)
  • p (intro paragraph)
  • ol + li items
  • a anchor + required href so it becomes clickable
• Later organize with header, main, footer

---

Key concepts explained

1) Frontend vs backend

• Frontend developer

  • Builds the appearance/UI that users see
  • Ensures design + functionality balance
  • Ensures correct behavior across browsers, platforms, and devices
  • Uses technologies like HTML, CSS, JavaScript, plus frameworks/libraries (examples mentioned: React, Angular JS, etc.)

• Backend developer

  • Handles the server side, including databases and invisible logic
  • Uses languages such as PHP, Python, Ruby, C#, Node/Express, etc. (examples mentioned)

2) HTML basics

• HTML = Hypertext Markup Language
  • A markup language used to create the structure of webpages
• HTML files typically use extension: .html
• Websites rely on:
  • HTML for structure
  • CSS for styling
  • JavaScript for interactivity

3) HTML document structure (elements)

Core structure mentioned:

• <!DOCTYPE html> (document type declaration; said to be less necessary in modern practice)
• <html> root element
• <head> for non-visual elements like <title>
• <body> for visible content like headings, paragraphs, etc.

4) Elements and attributes

• Element

  • A component unit built from:
    • opening tag
    • content
    • closing tag (void elements like img don’t have closing tags)

• Attribute

  • Extra information inside an element
  • Example: anchor a with href to define the link destination

Common element examples taught:

• title (inside head)
• p (paragraph, inside body)
• h1–h6 (headings; smaller number typically larger font)
• ol, ul, li (ordered/unordered lists)
• a (anchor/hyperlink)
• img (image; uses src, alt, and sizing in pixels)

5) Grouping & semantic markup

• div used to group elements for organization
• Semantic tags used for better structure and SEO, such as:
  • header, main, footer, section, article (examples mentioned)

---

Q&A themes (what questions focused on)

• Advanced HTML parsing / browser behavior questions (e.g., permissive parsing vs strictness)
• Frontend learning motivation and consistency
• Learning pathways:
  • HTML/CSS/JS fundamentals first
  • Move to frameworks later
• AI usage for learning:
  • AI as a double-edged sword
  • Better to use AI as a partner (summaries, debugging help) after learning basics
• Career/practice:
  • Whether UI/UX study is required (team vs startup context)
  • How to prepare portfolios for recruitment
• Practical issues:
  • Why an image profile might not render (checking that the copied URL is an image link, not a webpage link)
• Security note:
  • HTML alone could be targeted, but with plain HTML there isn’t much to exploit; still, web security matters
• Copyright question:
  • Using brand photos for learning might be okay if non-commercial, but should verify copyright requirements

---

Speakers / sources featured

Speakers / hosts (people)

• Kartika Simoangkir (moderator; host/MC)
• Steven Salim (software development engineer; presenter of HTML/frontend fundamentals)
• Brother Lukman (appears during introductions / roll-call)
• Brother Gerel (mentioned during introductions / likely program reference)
• Anonymous (multiple Q&A participants)

Sources / platforms (non-person)

• MySkill (platform hosting the class)
• MySkill promo/links (mentioned for camps, e-learning, discounts)
• Roadmap: roadmap.sh/frontend
• Code editor/practice environment: CodePen (codpen.io)
• HackerRank research (2020) about bootcamp graduates being capable
• Wikipedia (suggested for HTML history lookup)
• Slack/Slido style Q&A tool referenced as “Slido”
• Social platforms for posting mini-task results: LinkedIn, TikTok, Twitter/X, Facebook, etc.

---