---
title: 前端小白入門指北
description: 在現今的網路時代，無論是個人品牌建立、作品展示，或是商業行銷，網頁都扮演著至關重要的角色。然而，對於許多初學者來說，前端開發的技術門檻仍然偏高，常常因為缺乏系統性的引導而感到卻步。 本次課程將以實作導向的方式進行，透過 hands-on 的練習，讓參與者在動手做的過程中，快速掌握 HTML、CSS 和 Bootstrap 等常用技術，並學會使用 VSCode 開發工具，為自己的網路世界開啟無限可能。
tags:
- 社課
- 共筆
- 113 學年
---
:::success
# 前端小白入門指北
**時間：** 2025/05/08（星期四）18:00~20:00
**地點：** 挺生大樓 A3-200 教室
**簡報：** [連結](https://github.com/yuto0226/html_css_tutorial)
**Labs：** [GitHub](https://github.com/yuto0226/html_css_tutorial)
**Slido：** [連結](https://app.sli.do/event/p8zr1ZDpbHKHJrZ8hrZ9fw)
:::

> 請從這裡開始

### Environment Setup

Visual Studio Code
- ((幾乎) 必備的Extensions):
- Prettier
- Tailwind CSS IntelliSense
- Optional:
- colorize
- Image preview
- EsLint (語法檢查器)

### HTML

<tag> ... </tag>

<tag>

#### useful tags
- p (段落)
- h1 ~ h6 (標題)
- img (圖片)
- a (hyperlink)
- hr (水平分隔線)
- ...

#### 樣式
- Block
- Inline

我在這**邊隨**便打字