【ウェブカツ!! 開始半月】プログラミング学習定時報告【HTML・CSS・javascript・JQuery】

プログラミング勉強サイト「ウェブカツ!!」の、女性割引の要件「月二回、勉強内容をまとめてブログを書くべし」
これがあるので、本登録後一発目の記事を書きました。
まあ、私だと放っておいても書き始めますけどね、ご想像の通り。
 

この定時報告記事は、はてなブログに投稿するんですが、最初からはてなを意識して書き始めると、どうも書きづらかったです。(←意識しすぎてる)
なので、まずはこのブログ用を書きました。「プログラミングを知らない家族とかに報告用」と思って。

で、これを下敷きに、はてな用に要件を合わせつつ、プログラミングを知ってる方・興味のある方向けに編集して、あっちに投稿しようと思います。
なんか回りくどいけど、二重投稿も楽しいもんだ・・・!
 

※「ウェブカツ!!」では、学校の「部活動」になぞらえた表現をするので、以下これに倣って書いていきます。

スポンサーリンク

ざっくり勉強内容まとめ

ツイッターに書いた勉強記録をまとめてみました。
サラッと流し見程度でどうぞ。

部員種別日数日付時間内容
仮入部1~3日目2月3HTML・CSS入門 Lesson1~15
4日目3/32.5HTML・CSS鬼練 1~10
自主練 タイピングゲーム構想
5日目3/41.5HTML・CSS鬼練 11~12
自主練 タイピングゲームのHTML・js部分
6日目3/53.5自主練 タイピングゲーム制作
本入部7日目3/62.5HTML・CSS入門 L17~19 視聴、HTML写経
自主練 タイピングゲームのアップロード作業
8日目3/72.5HTML・CSS入門 L17~19 視聴、CSS写経
9日目3/82.5HTML・CSS入門 L16~19ノート取り
js・jQ入門 L1~5
10日目3/90.5js鬼練を読む
11日目3/100.5js・jQ入門 L6視聴、L7途中まで視聴
12日目3/112.5js・jQ入門
文字数カウント作成、L7~11視聴、L8ノート取り
13日目3/122.5js・jQ入門 L9~11写経
自主練 CSSレイアウト
14日目3/134.5自主練 jQで文字カウント遊び
~14日目まとめ28.5 HTML・CSS入門 1周完了
js・jQ入門 1周ほぼ完了
作ったもの:タイピングゲーム(独学js)、
CSS練習、文字カウント遊び(jQ)

うん、なんか色々やってる。

詳しい学習内容

HTML・CSS部 入門

先に説明を置いておきます↓

「HTML」とは:
web文書の構造を決めてあげる言語です。「見出し」「メニュー」「本文」「フッター」などと目印を付けることができます。
これでブラウザや検索エンジンにも伝わりやすくなりますし、後述の「CSS」で見た目を整えるための下地にもなります。
「CSS」とは:
web文書の見た目を整えるための言語です。「文字の大きさ」「背景の色」「枠線を付けるかどうか」「要素の配置」などを指定できます。
これで、webページが人間に見やすくなります。上手にやると、同じ文書でも格段に見やすくなったり、かっこよくなったりします!

仮入部中

最初の部活「HTML・CSS入門」の、Lesson15までは仮入部の状態で視聴できます。ここでは基礎的な内容を学びました。(わたしは復習気分)
少しコードも書きます。

一応仮入部しなくても見れますが、進捗管理が働きません。続ける可能性があるなら、とりあえず登録してから見た方が、二度手間にならないです。
 

終わったら、ウェブカツブログ掲載の「鬼練」をやったり、
タイピングゲーム作って今の実力を再確認したりしてました。

本入部後

で、本入部後に、最後まで学習。
本入部後の内容は、格段に実践的になり、実際に簡単なホームページを作りました。

また、CSSレイアウトの自主練として、こんなの作ってみました(色は適当)↓

ウェブカツでCSSレイアウト自習

HTML・CSS入門 雑感

独学での不足部分や偏りが埋まって、実務ではどうだっていう豆知識や感覚が上乗せされていって、非常に楽しく学習しました。
たとえばカラーコードの書き方が矯正されたり。
 

CSSは、独学で知っていた内容はほぼ埋まりました。
HTMLもかなり埋まりました。

この先、レスポンシブデザイン(PCとスマホをシームレスに切り替える)の書き方くらいなら知ってるかな? って所です。

javascript・jQuery部 入門

表の中で「js・jQ入門」と略したやつ。
ここでは、まず書き方の基礎を学びます。
そして、問い合わせフォームに文字数をカウントする機能を付けたり、必須項目が入力されたかチェックするなど、実践的な機能を作りました。

「javascript」とは:
webページに動きを付けられる言語です。クリックしたら画像が拡大する、メニューがにゅるっと出てくる、文字入力すると色が変わる、などなど。私が独学で作ったタイピングゲームサイトも、javascriptで動いています。
「jQuery」とは:
「javascript」を簡単に使えるための「ライブラリ」と呼ばれるものです。便利グッズです。

ライブラリなので図書館で例えると、たとえば「webページ」という図書館にある「’うさぎ’の画像」を「ふわっと出現」させたい場合・・・

素のjavascriptだと、全部自力でやるので、いくつか手順を踏みます。こんな感じ↓
 ・「’うさぎ’の画像」を探す
 ・画像を0.1秒後に10%濃くする
 ・画像を0.2秒後に20%濃くする、以下繰り返し
 ・100%になったら処理を止める

jQueryを使うと「司書さん」がいるようなもので、こう↓伝えるだけで、代わりにやってくれます。プログラムでも1行です。
 ・「webページ」から「’うさぎ’」を探して「1秒かけて表示」してください!

一通り学習後には、jQueryの練習として何か作りたくて、こんなのを組みました↓ (ひらめいてしまったんです(汗)

js・jQ入門 雑感

javascriptは、「実務ではこう書く」など勉強になる点もありつつ、基本的には復習、という感じでした。

jQeryは初めましてでしたが、あらかじめjavascriptを知っていたから理解しやすいのだ、とすごく思いました。
動画を見て、写経して、文字カウント作りで一日遊んで(遊びながら検索もして)、これだけで「ああ書ける」って気がしちゃいましたもの。

他のライブラリを身に付ける時も、基礎を知った後はこうやって何か作ると、嫌でも感覚が掴めそうです。
と、分かった気になっています。

全体の雑感・あとがき

ウェブカツでは、全てのレッスンを、頭から順番に見ていきます。ひとつ終わるごとに次のレッスンが開放されるので、飛ばす事はできません。
これ、経験者にはうざったいかもしれません。私も少しはそう思いました。

しかし、経験といっても趣味レベルの私には、知らなかった事が幾つもありました。
特にCSS。今まで単語だけ知って分かった気になっていたのが、単語を組み合わせて表現する方法を知って、世界が広がった感じです。

だから、順番を決めてあるのは有難いシステムだ、と今は思います。
どこから見るか迷わないのも長所です。

このCSSの件と、「プログラミングは勉強だけじゃダメ、練習しろ」を叩き込んでもらったのが、この半月で一番の成果です。
 

さて、今やっているのは、あくまで入門編。
今のところ、独学で理解できていたり、かじったことのある内容ばかりです。
なので、「簡単! わかる! 楽しい!」が前面に出ています。

当然この先、だんだん知らない内容が増えていくので、一体どうなるか、ここからが本番です・・・!

 
前の記事▼

管理人、プログラミングに本気出します【ウェブカツ!! 女性割引】
これまで自己流でサイト作ったり、タイピングゲーム作ったりしてきましたが。 とうとう本気モードの動画学習サイトに登録しました、文月です。やっ・・・

コメント

スポンサーリンク
タイトルとURLをコピーしました