Glitch にアクセスしてアカウントを作ろう
目標#
Web サイトの編集画面を開きます！
手順#
1. Glitch(https://glitch.com/)にアクセスして『Sign Up』ボタンをクリック#
2. 『Create an account』をクリック#
3. 『Email Magic Link』をクリック#
4. メールアドレスを記入し、『I'm not a robot』のチェックを入れ『Send a Code』をクリック#
5. 受信メールをチェックしましょう。#
「Glitch」からきたメールを開くと、↓ のようになります。
6. プロジェクトを始めましょう！#
7. ↓ のような画面が開きましたか？#
Glitch が開かない場合
画面が真っ白になったりプロジェクトが開かない場合は代わりに VS Code というものを使うことができます。 以下の手順を参考にダウンロードしてください
Visual Studio Code のインストール#
Visual Studio Code とは?#
Visual Studio Code(ビジュアルスタジオコード)は、省略して VSCode(ブイエスコード)と呼ばれることが多いです。 VSCode はコードを書くためのノートのようなものです。
このようなコード用のノートをコードエディターと呼びます。
ちなみに VSCode 以外にも Atom や Sublime Text などのコードエディターもあります。もしすでにそれらを使っていたら VSCode のダウンロードは省略しても大丈夫です。
VSCode のインストール方法#
まずは以下のリンクからダウンロードページを開いてください
Windows の人は Windows というボタンを、Mac の人は Mac のボタンをクリックしてください。クリックするとダウンロードが始まります。
インストールはパソコンの種類によって変わります
- Windows の場合
- Mac の場合
- こちらのページに従ってダウンロートとインストールを完了してください。
VSCode を開いて、この画面が出てきたら完了です！これでエンジニアの仲間入りです！
Visual Studio Code の基本操作#
VSCode でファイルを作成する方法#
Explorer をクリックした後に、Open Folder を押す
Desktop（デスクトップ）を開
自分の Web サイトのファイルをまとめるために、デスクトップに新しいフォルダを作る
作ったフォルダを選択して、中に HTML ファイルを作る
これでHTMLファイルは完成です！同様に先程作ったフォルダの中に、CSS ファイルを作る
これで必要なファイルは揃いました！
VSCode で作ったサイトをプレビューする方法#
作成したフォルダを右クリックして、Copy Path を押す
新しいタブを開いて、アドレスバーにペーストする
以上の手順でWebサイトを簡単にプレビューできるよ！
Web サイトの変更が適用されないとき#
ファイルの内容を変更した後は、必ず VSCode で変更内容を保存しましょう
保存をしていないファイルには表示がされます
Windows の場合
- 保存したいファイルの編集画面で、Ctrl+S を押す
Mac の場合
- 保存したいファイルの編集画面で、Command+S を押す
両方でできる方法
- ツールバーのファイルをクリックして、保存する
- ツールバーのファイルをクリックして、保存する
※VSCode のダウンロードとインストールは少し複雑なので、つまずいたところがあれば camp@waffle-waffle.org までご相談ください！