文系出身でも・未経験でも・プロのプログラマーを目指すブログ

ウェブカツ‼︎でのプログラミング学習進捗を報告します

【プログラミング学習】IT未経験者がウェブカツに入部してみた【1週間経過】

こんにちは。

文系出身でも・未経験でも・プロのプログラマーを目指すブログ。略して「プロプロ」の

あんまん(@aaii0123)です。

 

独学でのプログラミング学習に限界を感じ、

「正しい方向に向かって走っているという自信を持って学習したい」

という想いから、散々迷った挙句、オンラインプログラミングスクールの「ウェブカツ‼︎」に入部いたしました。

 

ウェブカツを選んだ理由については、こちらをご覧ください。

プログラミングスクールで悩んだ末、最終的にウェブカツを選んだ理由 - 文系出身でも・未経験でも・プロのプログラマーを目指すブログ

 

ウェブカツのサイトはこちらから。

webukatu.com

 

さて、7月25日よりウェブカツの女性割引にて学習を始めて1週間弱(5日間)経過しましたので、

  • その間に感じたこと
  • どれくらい学習が進んだか

についてまとめます。

 

 5日間受講した感想

まず、本入部してみて最初に思ったのは、

Progateとはレベルが違う・・!

ということでした。

 

Progateは難しいことはわからなくても、画面上に直接コードを書くことができ、なんとなく、プログラミングやプログラミング各言語がどういうものかを掴むには最高のツールでした。

その反面、どんなに繰り返し受講しても「なんとなくわかった」状態から「(自力でコードが書けるくらい)わかった」という状態にはなれないという大きな欠点があります。

 

しかし、ウェブカツでは仮入部で体験できる授業の段階から

「Progateではこれやらなかったな」

という内容が盛り込まれていました。

 

「本入部したら、今度はどれくらいのレベルが学べるんだろう」 

そんな期待を胸に本入部したとたん、一気に実践的な内容にパワーアップして驚きました。

 

HTMLとCSSを、自分のPCにダウンロードしたテキストエディターで記述して、Chromeのブラウザ上で表示させながらwebページの制作を進められている

というだけで、Progateを一生懸命やっていた時よりも前進している、と感じました。

 

また、Javascriptの入門編では(まだ受講途中ですが)最初に、実務においてコードをどのように書くかについて、具体的にまとめてくれています。

 

ProgateではJavascript演算子や条件分岐の構文などは学んだものの、

実際のサイト制作においてHTMLやCSSとどのように組み合わせて記述するのかは全くわからない(意識もしたことがない)状態でした。

 

そのことだけでも、Progateに比べてウェブカツがいかに「実務で通用するプログラミング」を意識した内容になっているかを感じました。

学習の進捗

7月25日に受講を開始したばかりなので、まだ導入部分に触れただけという状態ではありますが、5日間でこれぐらい進めることができました。

  • HTMLCSS部入門 Lesson16~19(実際のwebページの制作)
  • JavascriptjQuery部入門 Lesson1~7

 

HTMLCSS部入門では、事前にProgateを3周してあったおかげか(笑)

コードを書く量が多くても、それほどつまずくことなく進めることができました。

 

一方、JavascriptjQuery部入門では、初見で学ぶことが多く進捗はゆっくりです。

(Progateやったはずなのに・・)

ProgateのJavascriptの講座では、Javascriptというプログラミング言語を学べても、それを使ってどのようにwebページに動きをつけるのか、までは学ぶことはできませんでした。

 

そのため、ウェブカツの授業ではじめて、HTMLとCSSJavascriptを組み合わせて、入力文字数カウントという動きのある機能を実装する体験をしてちょっと感動(笑)

 

ウェブカツのおかげで、わずか5日間でHTMLとCSSjavascriptを組み合わせた簡易なサイトが作れたことに驚きました。

 

自力で書いたプログラミングのコードでサイトを構築するというレベルにはまだまだ程遠いですが、こうした成功体験を少しずつ積み重ねてレベルアップしていきたいです^^

 

プログラミング初心者の5日間の学び

ウェブカツにたどり着くまでの数ヶ月間、Progateでお利口に(苦笑)勉強していた私ですが、5日間でかなり多くのことを新しく学んだので、最後にまとめます。

 

HTMLCSS

・section と div の違い
sectionは区切りに文章的な意味合いがある場合に使う(章、節、項)
divタグは区切りそのものに意味がない場合に使う(単なる区切り)

・pタグは段落ごとに囲むのが正しい

・placeholder
フォームに事前に値を入れてどんな内容を入れればいいのかわかりやすくできる

・cols/rows
textareaの縦幅/横幅

・text-decoration:none;
a タグにはデフォルトで下線がつくため、外したい場合指定する必要がある

 

・ベンダープレフィックス
CSS(Cascading Style Sheet)で、各ブラウザメーカーが独自に拡張した要素を記述するための特殊な接頭辞。
  Mozilla Firefoxの「-moz-」
  Google ChromeApple SafariなどWebKit採用ブラウザの「-webkit-」

  Microsoft Internet Explorerの「-ms-」
  Operaの「-o-」

・box-sizing:border-box;
widthで指定した横幅の中にpaddingの幅・枠線の幅を含めることができる

・min-height:〇〇px;
ボックスの高さの最小を指定することができる。この指定をしないと、ボックスの中の文字の量によって高さがバラついてしまい、見栄えが悪くなる

・overfloat:hidden;
指定したfloatが次の要素にも続けて適用されてしまうのを解除できる

 

<コードの記述でつまずいたところ>

CSSが反映されない
→index.html の header の linkタグ内の記述に誤り
<link rel="stylesheet" type="text/text/css" href="style.css">

・見出しの「 CONTACT」が右寄りになってしまう
→header h1 のpadding を20px→15pxと小さくしたら直った

・「送信」ボタンのpaddingが反映されず
→ padding: 15px,30px;から padding: 15px 30px;にしたら反映された
(数字の間にコンマいらない)

 

 Javascript

javascriptの書き方3つ(基本は1。量が多くなる場合は3)
 1.<script>タグの間にかく
 <script>
 alert('ok');
 </script>

 2.HTMLタグ内にかく
 <p onclick="alert('ok');>
 </p>

 3.外部ファイルを作り、そこにjsをかく
 //htmlファイルの<head>タグ内に書いて外部のjsファイルを読み込むことができる
 <script type="text/javascript" src="test.js"></script>

javascriptがかける場所3つ(基本は1か2)
 1.<head>タグ内に<script>タグを使って記述
 2.<body>タグ内<script>タグを使って記述
 3.タグ自体の中

・jsの3つの気をつけるところ
 1.記述位置は適用したい要素の下以降に記述する
 2.全角は「""」「’’」で過去む
 3. jsを外部ファイルに書いた場合、そのjs内でCSSファイルなどを読み込む時には
  外部ファイルを読み込んだhtmlを起点にしてCSSファイルなどのパスを指定する。
  jsファイル起点ではない。
  「./css/style.css」✖️ 「css/style.css」○

 

まとめ 

ウェブカツ受講の最初の5日間は、いきなり学びが多くとても充実していました!

今は、もっとプログラミングでできることを増やせるよう早く先に進みたくて仕方ありません。

 

復習と練習にも気を抜かず、しっかり積み上げていきたいと思います^^