ウェブカツ5日目 javascript・jQuery部 入門 Lesson9-11
どうも、ふぁるこぉんちゃんですよ。
今日勉強したところは、javascript・jQuery入門のlesson9-11。
前回のこちら
ではjavascriptはどうやったらどう動くのか、という説明がメインでした。
今回勉強した部分で実際にサイトに反映させてみましょう！ という感じ。
初心者向けオンラインプログラミング学習 | 【入門】初心者向けプログラミング学習スクール「ウェブカツ!!」
感想
HTMLやCSSは過去に触ったことがあるぜ！ ということで余裕綽々な雰囲気を身にまとっていたのですが(といっても触ったことないも同然でしたが)
javascriptは正真正銘のはじめて。
いつも不安がってる僕ですが、もっと不安だったものの実際にLessonを受けてみると簡単でした。
Lesson9-11で使う処理はだいたいLesson1-8までの話を聞いてると理解できるし(あたりまえか)、初出のところが出てもちゃんと教えてくださいます。
HTML、CSSときて今回でjavascriptを学びました。だいたい見た目に関するところは少し触れるようになったのではないか、というところで。
次からはPHP！ 中身のやりとりですね。
過去に学校で勉強していたころがありましたが、まったく理解できていなかったので不安ですが。
動画で勉強という性質上、分かりやすく説明していただけると思うので、これから理解できていくのだろうと考えれば楽しみでもあります。
復習
今回の復習部分！
前々回の記事で、ふぁるこぉんちゃんにメッセージを送ろう！ というページを作っていました。
今回の復習では、そのページを改修しました。
できはこんな感じ。
失敗するとエラーメッセージが表示され、正しいならほわっとする感じのやつです。
会員登録画面とか通販で住所入力するときとかであるような、アレです。
実際にエラーを出すと、こうなります。
メッセージ部分のエラーが出る条件は、メッセージ欄にハゲって書かれているかどうかです。
あと、文字数が300文字を突破したら長いから読まないってツッコミが出るようにもしています。
いやでもなんか分岐伸ばしたいな～と思って適当に追加しましたが、実際のところ300文字とか長くないですよね。ツイッターで140文字だし、長いつぶやき2個読む程度じゃんね。反省。
ちなみに僕はハゲてません。
ウェブカツ4日目 javascript・jQuery部 入門 Lesson1-8
どうも、ふぁるこぉんちゃんだよ。
html・cssが終わって、ついに javascriptに来ました。
いつにもまして内容の薄い日記になります。
初心者向けオンラインプログラミング学習 | 【入門】初心者向けプログラミング学習スクール「ウェブカツ!!」
感想
lesson1-8ではおもにjavascriptの書きかたや処理の基本(条件と繰り返しとか)の説明。
このあたりは、ふぁるこぉんちゃんは過去に勉強していたのでだいぶ分かります。
javascriptは触ったことがないので、それに合わせた書きかたを覚えていかないと！という感じ。
どの言語か忘れたけど、似たようなことはやった覚えはある気がしてます。
(○○.△△.□□( ) のなかに書くみたいなやつ)
うん。
なんか過去の経験が活きてそうで僕の人生も無駄じゃなかったんだな、という感動ね。
あとオブジェクト指向が分かるようで分かっていないようででも実は分かっていると見せかけてやっぱり分かってないようなでも分かっている感じもするっていう超絶曖昧さを醸し出しているのでね、この辺もちゃんと理解したい。
いや、でも理解できているつもりではいるんだよ。うん。
でも前にやったからｗ とか言って飛ばすことはせずに、ちゃんと理解深めて進めていきます。
あとがき
正直今日は頭ぼーっとしたり眠気がすごかったりで体調を整える1日にするべきだったと思った。
でも○○日目とか言って進めてるのに何もしない日が入っちゃうのはなんか気になる！ とかいう謎の考えのせいで勉強しました。
あとね、最近眠気が来る時間がバラバラすぎて本格的にまずい感じなので勉強しつつ良い感じに直したいね。
今日はもうこれから明日の夜まで起きていられそうなら起きていたい。
ダメそうなら寝よう。
めっちゃ日記な記事になった。
ウェブカツ3-4日目 HTML・CSS入門 Lesson17-19 part2
おはようございます、ふぁるこぉんちゃんです。
前回の記事から少し。
復習も終わったので更新ですよ。
前回の記事はこっち。
今回でHTML・CSS入門は終わりです。次からはなんかやり取りするやつ！
今回は感想は抜きにして復習だけ載せます。
とか言って復習の項目の中に少し感想残して終わりにします。
初心者向けオンラインプログラミング学習 | 【入門】初心者向けプログラミング学習スクール「ウェブカツ!!」
復習
ちょっと前に載せたホームページをcssで編集しました。
あと、勉強している過程でここはこうしたほうがええな……みたいなのがあったので少しhtmlも調整しています。
簡単なふぁるこぉんちゃんのプロフィールサイトになっちゃってますね。
そしてフォーム付きのページがこれ。
だいぶ見れるようになった！
フッターの色やべえ！ とかそういうのはね、アレだから。とりあえず見分けつく感じに拾ってきただけだから。
でもこの色とこの色が合う、とか目に優しいとかそういうのは知っていったほうが良いとも思うから僕が悪かったです。
……って、ヘッダーのPROFILEとBLOGの位置逆のままですね。
BLOGを上に持ってきたほうが見やすいんじゃない？ と思って移動させたのですが、メニューを変えるの忘れていました。反省！
ちょちょいとした感想ですが。
編集して終わってみると簡単だったな～と思うのですが、実際に作っているときにはやっぱり
「paddingって内！？中！？」みたいなのあったし。(復習してるうちに慣れたからもう大丈夫だけど)
「ボタン中央に行かないんだけど！？ あれ、理解間違ってる！？」と思いきやcssに書くクラス名に誤字があっただけだったり
とか、やってて楽しいですね。詰まったところを解決したりするときほど、自分が成長できてる実感があって良い。
復習めんどうだし、さっさと先に進みたいな～って気持ちはやはりあるのですが、やったらそれはそれで楽しい。
なんだか掃除みたいだなぁと思ったふぁるこぉんちゃんなのである。
ウェブカツ3日目 HTML・CSS入門 Lesson17-19 part1
日付変わる前に滑り込み。
どうも、ふぁるこぉんちゃんです。
今日は実際にホームページ作ってみよう！ というところの復習に時間がかかっていて、今もいじっているところです。
3日目の記事を明日に持ち越して更新するのもなぁ～って思ったので、休憩ついでにこの記事を書いています。
初心者向けオンラインプログラミング学習 | 【入門】初心者向けプログラミング学習スクール「ウェブカツ!!」
感想
LESSON16ではhtml中心でしたが、17以降はcssがメインになりました。
(html&css入門はlesson19で終わります)
前回の記事にも載せました、復習で作ったサイトを見てもらえれば分かりますが、めっちゃ微妙！ ですよね。色がじゃないよ。配置がね。
で、残りのlesson17-19で整えて完成！ という感じでした。あと、トップページだけでなく連絡を送るフォームのページも作ったりもありました。
冒頭でも書きましたが、今は復習の途中ですので今回は復習の項目はなし！ 次の記事の更新のときについでに載せます。
ウェブカツ2日目 HTML・CSS入門 Lesson16
どうも、ふぁるこぉんちゃんです。
正直進捗が遅い。というのも、なんと0時ころに寝れて本日5時に起床できたというのにその後12時に寝て19時に起きたからです。
諦めて今日1日何もしない！ というのはだめなので、急いでとりあえずひとつだけでも終わらせるぜ！ って感じでね、復習までやってきました。
感想
今までと比べると難しくなった印象。
ウェブカツさんでは動画で勉強するのですが、そこに書いてあるコードを書くだけではまったく身にならないと思うので(過去からの経験)、復習はやって正解だと思います。
今回はHTMLがメインで、以降でおそらくcssを設定していって整えていくんだろうなぁという気がします。
初心者向けオンラインプログラミング学習 | 【入門】初心者向けプログラミング学習スクール「ウェブカツ!!」
復習
なので、今回の復習も当然HTMLだけにとどめておき、次回の復習などで見た目を変えていこうかと！
今回やったのはこれ
ヘッダー、メイン、フッターを入れたよ。
それぞれに背景を設定したら見やすくなるよ！って書いてあったのでやってみた。
色のチョイスね。
おわりに
たまにこんな感じで末尾にうだうだ書くかも。
ウェブカツ!!さんではコーヒーブレイク、というのがLESSONの合間にたまに入ります。
内容は、なんかためになることを書いておられます。例えば、勉強に対しての心構え的なやつ。
ウェブカツさんに入会しないと見れないものももちろんあるのですが、ブログに公開されている記事を紹介されている時なんかもあります。
興味のあるかたは見てみてください。ためになるなぁ～って思うのがたくさん書いてあります。
【入門】初心者向けプログラミング学習スクール「ウェブカツ!!」BLOG | 未経験の初心者から年収1000万目指すためのプログラミング学習スクール
あと、入会しているかたしか見れないのですが、LESSONのところにある他生徒さんの質問やそれに対する解答も勉強になるので、都度確認すると良いですね。ここで詰まりやすいのかぁ～という目安にもなるのかなぁ。
昼夜逆転は無理やり直そうとはせず、のんびり調整することにします。今日はもうちょっと頑張らなければ！
ウェブカツ1日目 HTML･CSS部入門 Lesson8-15
どうもこんばんは、ふぁるこぉんちゃんです。
残念ながら昼夜逆転してしまっていて、思ったより進まなかったような、でもまったくの初めての人に比べると進んだ気もする1日でした。
前回の記事でも書いたように、今回は主にCSS部分を勉強しました。
初心者向けオンラインプログラミング学習 | 【入門】初心者向けプログラミング学習スクール「ウェブカツ!!」
感想
CSSはもうね、役割とかは知ってたけど中身はさっぱりだったので怖かったのですが、なんとかなりました。さすが入門。
progateで先に少し触っていたのも良かったです。
このあと復習でささっと作ったホームページを見てもらえれば分かると思いますが、見栄えが酷い。
現段階だと、こういうのがあるよ～という程度の紹介に留まっています。
なので僕もそれに合わせて、そんなにレイアウトとか気にせず習ったのを使う程度にしています。
先に早く進みたい気持ちもありますしね。
もっと凝った使い方というのはこの先で学習していくでしょうし、そういった段階で力をいれればいいかなと。
あとはやはり、全然使っていないだけあって
「こういう使い方したい」
というときに何を書けばいいのかパッと出てこないですね。
例えば position を使うときに、何を使えばどう動くんだっけ？ というような。こういうとき、調べるのはウェブカツさんではなくてグーグルに頼っていきたいですよね。
(僕は位置固定を使ってみたかったのでfixedを使いました)
あと、paddingやmarginも、どっちがどっちだっけ……みたいな。こういうところは何度かやってたら慣れる部分だろうし、執着せず先に進もうと思います。
これからも復習など触れる機会も多いでしょう。
復習
で、
下にスクロールすると、左下のふぁるこぉんちゃんはそのままに後ろに隠れていた文字がでてきます。
(わかりにくいな…)
ウェブカツ1日目 HTML･CSS部入門 Lesson1-7
どうも、ウェブカツで勉強しはじめたばかりのふぁるこぉんちゃんだよ。
この記事ではタイトルどおり、HTML･CSS部入門 Lesson1-7 まで。
というのも、雰囲気的に1-7まででHTMLを学んで、そこからCSS、そして両方の合わせ技かな？ という空気を感じ取ったからです。
初心者向けオンラインプログラミング学習 | 【入門】初心者向けプログラミング学習スクール「ウェブカツ!!」
感想
まず、今後感想についてどう書くか迷ったのですが……
こういう勉強をしたよ！ って直接書くのはあまり良くないかな？ と思うんですよね。
やっていいよって言われたらやるのですが、確認取るのもなぁ、と。
だからとりあえずふんわりした感想を書いたあとで、成果としての復習を載せることにします。
本題。
さすがに入門というだけあって、とても簡単でした。
実はとても昔に自分のホームページを作ったこともあって(1ヶ月も経たずに更新やめたけど)、ホームページを作るぐらいのことはできます。
ですがこれ以上となると分からないところが出そうなので、今後がワクワクしてますね！
分からないといえば、次のLessonから始まるであろうCSSも。
というかね、昔なんてCSSは一般的ではなかった(多分)のでほぼ初見です。わからん殺しされるかもしれんといったところでしょうか。
復習
アウトプット＝感想なわけないですよね。ってことで復習を兼ねて作ったよ。
学んだこと全部入り。
1枚目のオレンジなのは、白色でブログとかぶるから加工しました。
普通に背景に色つければよかったですね…。
2枚目でh3にしてるのはh1だと画面外まで出そうだからだったんですが、ブラウザで表示小さくすればいいじゃん！ってss撮ったあとで気付きました。
なのでh1でいい。
これ、めっちゃ左に寄っています。
位置調整ぐらいは分かってますよ！うん！
今後習うだろうし、その後の復習の成果で見せてあげますよ！
復習の感想
で、簡単な内容だし復習だし楽勝じゃろ～と思って上記のやつを作ったのですがね、地味に時間かかりました。
(ネタだしもあったし！)
経験があると言っても遥か過去であって数をこなしてきたわけでもないので、さすがにスムーズにということは無理なようでした。
当然といえば当然なのですが、我ながら少し残念。
実は、復習とか言ってこんながっつり作る必要ないんじゃ？ とか少し思っていたところもあったのですが、考えを改めることにします。
