add 第一章

docs/.vitepress/config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from 'vitepress'
 import { chapter1SidebarItems } from './sidebarConfigs/chapters/chapter1/chapter1'
 import { chapter2SidebarItems } from './sidebarConfigs/chapters/chapter2/chapter2'
 import { chapter4SidebarItems } from './sidebarConfigs/chapters/chapter4/chapter4'
+import { webBasicSidebarItems } from './sidebarConfigs/chapters/webBasic/webBasic'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -20,6 +21,7 @@ export default defineConfig({
     nav: [{ text: 'Home', link: '/' }],
 
     sidebar: {
+      '/web_basic/': webBasicSidebarItems,
       '/chapter1/': chapter1SidebarItems,
       '/chapter2/': chapter2SidebarItems,
       '/chapter4/': chapter4SidebarItems

docs/.vitepress/sidebarConfigs/chapters/webBasic/webBasic.ts

@@ -0,0 +1,11 @@
+import type { DefaultTheme } from 'vitepress'
+
+export const webBasicSidebarItems: DefaultTheme.SidebarItem[] = [
+  {
+    text: 'web 基礎講習会',
+    items: [
+      { text: 'はじめに', link: '/web_basic/0_index' },
+      { text: '第 1 回 | フロントエンド', link: '/web_basic/1_frontend' }
+    ]
+  }
+]

docs/web_basic/0_index.md

@@ -5,8 +5,25 @@ Web 開発基礎講習会へようこそ。ここではごく単純な Web ア
 人によっては簡単すぎると感じることもあるでしょうが、後に行われる「Web エンジニアになろう講習会」で必要となる知識を身につけるためのものになっています。
 実際に手を動かしながら勉強するようにしましょう。
 
+---
+
 第 1 章では Web フロントエンドと呼ばれる分野の勉強をします。これは、私達が一般的に「Web サイト」と言われてイメージするようなものを扱う分野で、手元のコンピュータ上のブラウザで動かすものです。この章では文章・画像などの表示、簡単な画面のレイアウトができるようになるのを目標とします。
 
 第 2 章では Web バックエンドと呼ばれる部分の勉強をします。よく「サーバー」と言われるものを扱う分野です。
 こちらは普段私達が意識することは多くないですが、私達の生活に欠かせない様々な役割を担っています。
-この章では単純なデータを返すサーバーを作ることができるのを目標にします。
+この章では単純なデータを返すサーバーを作ることができるのを目標にします。
+
+---
+
+web アプリケーションは現代において便利なサービスを作るための主要な選択肢の 1 つです。
+traP 内で運用されているサービスの殆どはこの講習会で勉強する内容の延長線上の技術で作られています。
+それどころか、google 検索や YouTube 、 Amazon など、我々の生活に深く関わるサービスの基礎にもなっています。
+この講習会や「Web エンジニアになろう講習会」で学ぶことを活かせば、自分たちの生活をより楽しく、便利にするようなものを作ることができるでしょう。
+みなさんが、SysAd 班やハッカソンその他の場所で活躍する日を楽しみにしています。
+
+<div style="text-align: left;">
+2024年4月
+</div>
+<div style="text-align: right;">
+東京工業大学デジタル創作同好会traP SysAd班
+</div>