/bc_html_2020

Primary LanguageHTML

環境構築

  • npm install
  • npm start
  • http://localhost:5000/step0/ をブラウザで開く
  • public/step0/index.html をブラウザで直接開いても確認できます

おおまかな作業のマイルストーン

  • https://github.com/qsat/bc_html_2020 をcloneする
  • public 以下に自分用のディレクトリをきり、step0 以下の css, html をコピーする
  • HTML を作成する
    • header だけまずやってみる、完成したらPR
    • 検索ボックス
  • CSS を作成する

作業について

  • https://github.com/qsat/bc_html_2020 をcloneする
  • public 以下に自分用のディレクトリをきり、step0 以下の css, html をコピーする
  • design2.png をみながらHTMLを作成してください。
  • /public/step09/ が参考例です、詰まったら参照してもらって構いません。
  • 作業上の注意
    • かならず、HTMLを作成した後にCSSの作成に進みましょう
    • 細部に拘らず、全体を大まかにでも完成させることを優先しましょう。
    • オンライン開催ですが、お互いに質問しあってもらって構いません。
    • 講師にどんどん質問してください。内容的に必要なら、コードを自分の github に push してください
  • 適宜、自分の github へ pushし、きりのいいところでPRだす。

ツール類

  • public/design2.png: このデザインをHTML/CSSで作成します
  • public/images/icons: 作業で使用するアイコンファイル
  • public/images/avatars: 作業で使用するユーザーのダミー画像
  • #000: テキストカラー2
  • #999: テキストカラー
  • #eee: ボタン背景色
  • #f0f0f0: 検索ボックス背景色
  • #fff: 基本背景色
  • green: オンラインカラー
  • red: カウントなど
  • #009eff: 未読ドットカラー