Agenda · OZPA/html-css-study Wiki · GitHub
Skip to content

Agenda

Jump to bottom
Kenichi Hasegawa edited this page May 10, 2019 · 7 revisions

0. git を使えるようにしよう！

バージョン管理システムgit（参考： https://backlog.com/ja/git-tutorial/intro/intro1_1.html ）を利用して勉強を進めていきます。
下記を参考に、PCでgitが使用できるようにしてみましょう。

Windows : https://eng-entrance.com/git-install
Mac : https://tracpath.com/bootcamp/git-install-to-mac.html

公開鍵の作成について

git push（やpull）を行うために公開鍵というものを作成する必要があります。
Helpページ（ https://github.com/OZPA/html-css-study/wiki/Help ）にやり方を書いてあるのでやってみてください 😄

1. git を使ってREADME.md に自分の名前を追加しよう！

実際に自分のローカル環境にリポジトリをpull（DL）して README.md を編集し、 commit -> push してみましょう。
いわゆる 黒い画面 を利用します。（Mac : ターミナル、Win : コマンドプロンプト）

使用するコマンド
$ cd Desktop
$ git clone https://github.com/OZPA/html-css-study.git
$ cd html-css-study
$ git checkout -b "readme_add_YOURNAME（自分の名前に変えてください）" origin/master
$ git status

~~ edit ~~

$ git status
$ git add README.md
$ git status
$ git commit -m "自分の名前を追加"
$ git push origin readme_add_YOURNAME

2. cssを書いてみよう（Lesson 1,2）

ファーストステップとして style.cssを編集してスタイルを実際にいじってみましょう。

ディレクトリ構成

01 - index.html （htmlファイル）
   └ style.css （cssファイル）

index.html に記載されている指示に従って style.css を編集しましょう。index.htmlをブラウザで開くとページが表示されるので、確認しつつ作業を完成させてみましょう。

3. htmlタグを正しく理解しよう（Lesson 3）

よりよいWebページのためにはhtmlの正しい理解が必要です。03フォルダの lesson03.html を完成させましょう。古き良き時代のWebページが出来上がります。
指示はすべてlesson03.html内のコメントに記載しております。

ディレクトリ構成

03 - lesson03.html （htmlファイル。lesson3ではこのファイルのみ修正します）
   └ style.css （cssファイル）
   └ img （画像が格納されたフォルダ）
   └ lesson03_answer.html （答えがわからない時は覗いてみましょう）
   └ goal.pdf （正しくhtmlがかければこのpdfのようになります）

Clone this wiki locally