COBOLERが頑張る：日めくりカレンダー：参考サイト

さて、早速日めくりカレンダーをつくっていきたいと思います。

Webブラウザで参照できるようにしたいので、HTMLを書くんだろうなというのは、さすがに知ってます。

どっから手をつけようかな、というところで、以下が目についたので無料体験だけ簡単にやってみました。
techacademy.jp

オンラインで、プログラムを学ぶことができるとのこと。
手厚い？チャットサポートなんかがついている。無料体験中も、課題を提出したら、１時間後ぐらいには「引き続きがんばってください！」的なメッセージが届いた。

無料体験の中身は、結構あっさりしている。ちゃんとお金を払えば効果はありそう。
ただ、４週間で１２万という値段なので、働いていて帰って勉強する時間があんまりとれない人だとちょっと勿体無い気もする。

とりえあえず３時間程度で学習が終わった。

一番の発見は「Cloud9」というサイトの存在。
こんな便利なものがあるのね。

動画で学習できるサイト。全部無料な上に、わかりやすい。
HTML入門とCSSをざっくり見た。

アニメーションをCSSで作成することができるんだ、すげえというとこが一番の発見。
こちらも、ざっくり3.4時間程度で詰め込んだ。が、怪しいところは多い。

ドットインストールと重なる部分は多いけれども、参考になるものが多かった。
ただ、記載通りの挙動通りにならないものがちょこちょこあって、自信がない。
何かを間違えているのだろう。

これは1時間30分〜2時間程度かかった気がする。

ここまで、なんとなくレイアウトってこう作るんだよというものを見てきたのですが
やりたいアニメーションをどう実現すればいいのか、いまいちよくわかっていませんでした。
しかし、CSS、アニメーションでインターネットの森をさまよっているときに、見つけてしまいました。

これがやりたかったことじゃ！
作者様に感謝しつつ、コードを見ることにした。
CodePenはHTML・CSS・JavaScriptを編集・共有できるサービスみたいです。

上記、ソースを覗いていてみると、JavaScriptの知識が必要そうなことがわかったので以下を学習。

さらに、よくみるとjQueryの技術も使っていたことがわかったので以下を学習。
http://dotinstall.com/lessons/basic_jquery_v2

このへん、結構時間かかった上に、いろいろ怪しい。

ピンちゃんと撮ったチェキを素材に作成した。
なぜHTMLではなく、gifかというと、PCで開いたらおもくっそレイアウトが崩れることがわかったので
一旦、gifにした。

次回は、PCとスマホ、どちらでもそれなりに見えるすることを目標とする。
また、記憶があるうちにHTML・CSSを貼っておきたい。
CodePenの使い方がさっぱりわからない。

豆腐とコンソメ