プログラミング初心者がウェブカツ学習【進捗報告 5.5ヶ月】:アウトプット大事だよの巻 (No.11)

2020年5月3日ウェブカツ

初めまして、momoです。

ツイッター(@momokatusan)です。

 

プログラミング初心者がウェブカツ学習で、在宅フリーランスを目指すブログです。

 

MacBookも初心者、WordPressも初心者、そしてプログラミングも初心者、全てが初心者ですがどこまでできるか試してみたいと思います。

 

受講から5.5ヶ月経ったのでブログをアップします。

 

はじめに

ウェブカツって何?という方に私がプログラミング学習に選んだ【ウェブカツ】についてお知らせします。

※女性割引は2019年10月末で終了しました。

 

ウェブカツとは

ウェブカツとはオンラインのプログラミングスクールです。

無料で仮入部もできます。

プログラミング初心者でも勉強ができるカリキュラムになっています。

 

しかし想像以上にハードです。

補足や過去の質問にヒントや新しい方法が書いてあるので、必ず目を通した方が良いです。

またアウトプット(OP)と復習がとても大切です。

 

気になる方は私のブログで今までの学習報告があります。

参考に見てみてください。

 

【過去の学習報告】↓

進捗報告(2020/3/1〜3/15)

進捗報告です。

プログラミングのウェブカツ学習をまとめてみました。

実績

期間 2020/3/1〜3/15
時間(合計):ウェブカツ   0.0(143.5)
時間(合計):補足 23.0(133.0)
所属 HTML/CSS/js/jQuery/PHPを復習中

WEBサービス部(L11)でスタートに戻る

今までの学習した部活(プログラミング言語)

  • HTML・CSS部 入門
  • javascript・jQuery部 入門
  • PHP・MySQL部
  • ネットワーク・サーバー部
  • WEBサービス部 ←只今、こちらの壁にぶつかり中

残り16部活

振り返り

今回もまだアウトプット中で、ウェブカツのレッスンは進んていません。

時々、WEBサービス部の動画は観ています。

まだWEBサービス部に再チャレンジする勇気はないので、もう少しアウトプットをしてからにします。

内心はウェブカツのレッスンを進めた方が良いのでは?と思っていますが、きっとまた「何がわからないかが、わからない状態」になってしまうので、もう少し復習の時間に充てたいと思います。

とりあえずJavascript部とPHP部はもう一度見直します。

こんなに時間をかけていいのかなと思いながらもマイペースに進めようと思います。

学んだこと

アウトプット

アウトプットは大事だよ!」ということです。

ウェブカツでは各部活が終わったら「アウトプットをしましょう。」と言われてきていましたが、私は最初の部活(HTML/CSS部)でどうアウトプットをすれば良いのかがわかりませんでした。

「模写をしましょう。」と言われても方法がいまいちわかりませんでした。

今となっては模写はデベロッパーツールを使って確認しながらできることがわかりました。

なので今までしてこなかったアウトプットに今TRYしているとことです。

ハンバーガーメニュー

今回はハンバーガーメニュー🍔のプログラミング練習をしました。

へぇ〜。

この三本線はハンバーガーって言う名前なんだ〜。

ハンバーガー → 🍔 → 画像発見 →「美味しそう〜。ハンバーガー食べたい」となり、なんとなくハンバーガー屋さんのページを作成することにしました。

まだ途中ですが、アウトプットをすることで、今までの復習や新発見ができ「アウトプットって大事なんだなぁ。」としみじみ思っています。

ウェブカツでプログラミングを始めて5.5ヶ月にして、アウトプットの大切さを学びました。(遅っ!)

「ハンバーガー食べたい」こちら

スライドショー

bxsliderさんのjQueryのプラグインファイルをダウンロードし、HTMLにコードを追加するだけで、スライドショーが簡単に作成できます。

お試しあれ。

超簡単!ホームページにスライドショー機能を実装する方法(JQuery)

スティッキー

スティッキーとはスクロールしてもヘッダーがついてくる機能です。

CSSで3行(header除く)書くだけでこのようなことができます。

CSSって凄い!

アニメーションもできるし、奥が深いことを学びました。

position: -webkit-sticky;

position: sticky;

top: 0;

【jQuery不要】CSSだけ!途中から追従するスティッキーヘッダーを簡単に作る方法(サンプル付)

::beforeと::after

こちらもCSSですが、HTMLに文字を書かないでタグの前後に文字やアイコンを追加できる機能です。

SEOを気にせず自由な表現ができるのがメリットです。

便利ですね〜。

CSSの疑似要素とは?beforeとafterの使い方まとめ

要素に傾斜変化させる方法

躍動感が出るデザインで要素に傾斜変化をさせる機能です。

こちらもコード1行でできます。

transform: skewX1(10deg);

skewX()

お役立ちサイト

お役立ちサイトはこちら→ フリーランス

便利機能(ショートカットキーなど)

ショートカットキーやパソコンの便利機能などをまとめました。

さいごに

最近はアウトプットで修正ばかりしています。

思っているデザインや動きにならず試行錯誤中です。

そろそろウェブカツに戻らねばと思いながらも、問題解決するのに時間がかかってしまい、なかなか戻れません。

もうちょい先かな。

とりあえず今のアウトプットをある程度形にしたら戻ります。

お知らせ

プログラミング漫画

ウェブカツ卒業生の方がプログラミング漫画を描いているのですが、これがまた面白い!

販売されたら即購入します。

口コミサイト

プログラミングスクールを検討している方は、ぜひこちらの口コミサイトをご覧ください。

スクール生の生の声が聞けますよ。

(実は私もウェブカツの口コミを書いています。)

プログラミングスクール口コミ・評判サイト

 

それではまた。

半月後にお会いしましょう。

※次回のブログアップは、0.5ヶ月ヶ月後(2020/3/31)です。

→前回の記事(5.0ヶ月) No.10はこちら

→次回の記事(6.0ヶ月) No.12はこちら