未経験Webデザイナーの、 ここだけの話。

Progate

Progateは、プログラミングを学べる学習サイトです。

全15種類のプログラミング言語を学べるレッスンがあります。

その中でも私は、『HTML＆CSS』、『JavaScript』、『jQuery』を繰り返し何度もやっていました。

職業訓練校が決まるまで、そして決まってから訓練校に通うまで暇な時間が多かったので、母に勧められて始めたのがきっかけです。

みなさんは”プログラミング＝難しい”というイメージをお持ちではありませんか?

このサイトは初歩からとても丁寧に説明してくれるので、心が折れることもなく毎日楽しんで取り組めました。

実際に、他の訓練生も授業の合間やお昼休憩の間に取り組んでいる人を見かけました。

受講前から職業訓練初期にかけてProgateで学習するのがおすすめです。

実際の画面がこちらです。

説明を読んで、実践していくのですが、自分のコードがWebサイトに反映されるのを体験できます。

難しいと感じたら、ヒントをみたり答えを見ることもできますよ！

何度も繰り返しておくことで基礎力がつくので、授業の内容も自然と頭に入りやすくなると思います。

途中から有料になりますが、無料の範囲だけでも十分基礎が学べます！

コーディングノート

コーディングノートは、授業でコーディングしたCSSの内容をまとめたノートです。

職業訓練校でWebサイトを作るようになったら（職業訓練中期ごろ）、コーディングノートで勉強するのがおすすめです。

教科書での学習が一通り終わって、先生がデザインしたサイトを実際にコーディングする授業が始まった時に、思っていたよりも教科書で学習した内容が頭に入っていないことに気が付いたのがきっかけで、コーディングノートを作りました。

実際のサイトコーディングでは「上下左右の中央に配置する」という指示を出すために、複数の司令を組み合わせる必要があります。

組み合わせを覚えるためにも100行を超えるコーディング内容をすべてノートに写して、書いて覚えていました。

ノートのまとめ方ですが、1ページを半分に分けて左側にCSSのコーディング内容、右側に分からなかった部分の解説を書いています。

解説部分は先生が授業中におっしゃっていた内容や、自分で調べたものを書いています。

HTMLは、印刷してノートに貼り付けていました。

めんどくさがり屋な性格が出てます笑

HTMLもちゃんと学習したいという方は、同じようにまとめてみても良いかもしれません。

実際のノートがこちらです。

1度まとめただけでもちゃんと内容が理解できるようになって、コーディングスピードが上がったのを実感しました。

コーディングが好きになれたのは、このノートのおかげだといっても過言ではありません。

最初は全ての内容を書き写していましたが、3サイト目ぐらいからは分からないところだけをまとめるようになったので、まとめる時間も短くなりました！

デモサイトで実際にコーディングする

Codestepと無料コーディング練習所を使って、デモサイトのコーディングをしていました。

職業訓練校で一通りコーディングの基礎を学んだら、実践の機会を増やすのが大切です。

これをやるかやらないかで他の訓練生と差がつくと言っても過言ではないです！！

わたしはCodestepで【入門編】の”Profile”サイトと、無料コーディング練習所でカフェサイトと企業サイトをコーディングしました。

Codestepの”Profile”はアレンジするとポートフォリオサイトとしても使えますので、ぜひ挑戦してみてください！

また、無料コーディング練習所はXDのデザインデータが使われています。

職業訓練校でXDを勉強されていない方は、XDで作られたデザインカンプの計測方法を勉強する良い機会になると思います。