16.初級編まとめと当時の思い　～HTMLからBootstrapまで～

復習も兼ねての「まとめ」

本日は初級編の終わりに差し掛かったので、

復習も兼ねて「初級編」で学んだ事をおさらいしていきます。

ただ書くだけでは面白くないので、当時の自分の感想も含めて書いていきます。

初級編の内容

デイトラではweb制作コース初級編が大きく下記のように分かれています。

HTML/CSS基礎編
コーディング編
Bootstrap編
ポートフォリオ作成編

これらの内容を進めていけば、最終的に

自作のポートフォリオを公開するところまでたどり着けると言うわけですね。

では、それぞれの細かい内容を見ていきましょう

１．HTML/CSS基礎編

右も左もわからず、「エディタ」という言葉や「ブラウザ」が

どんなものかすら、わからない状態からのスタートでした。

サポートを受けるためのSlack導入
質問する為のポイントについて
VSCodeのインストール
GoogleChromeのインストール
通過儀礼、Hello,World!を表示

を初日にやりました。懐かしい。

当たり前のように毎日VsCodeを使っていますが、

デイトラをはじめる際は存在すら知らなかった。

次にHTMLとCSSについて学びました。

この辺で躓いていましたね。

HTMLのタグ周りの話
CSSのとHTMLの関係
それら２つとブラウザの関係

これらが自分の中で咀嚼できるまで、うんうんと唸っていました。

「あるルールに基づいて書かれた、ただのテキストファイル」なんだと

自分に繰り返し言い聞かせていた記憶が蘇りますね。

2.webページ主に２種類のテキストファイルでできている～その１～ HTML編 - web制作のしおり

3.webページ主に２種類のテキストファイルでできている～その２～ CSS - web制作のしおり

今は特に抵抗なく、彼らと触れ合えています。

振り返ってみても、やはりこの最初の単元が一番重要だと思います。

０→１にする工程とでも言いましょうか。

決して、おろそかにしてはいけないポイントだと思います。

各種ショートカットとEmmetとDeepLを毎日使おうと心に決めたのもこの頃です。

2．コーディング編

ホームページ作成用の素材を準備された上で、サイトを作っていきます。

HTML、CSSをコーディングして形にするところまでをやりました。

見て、覚えた気になって、進んでいるつもりになっていたのも、この頃です。

「ゼロからサイト作ってみよう」と題して、

メンターの動画を見ながら作成していく形式で、進んでいきます。

そして、それが終わるとHTML/CSSコーディング復習というところで、

「出来るだけ動画を見ずにゼロからコーディングしてみましょう！」

と課題が出されました。

そしてVSCodeを開いて、気づきます。

「何から手をつけて、どうやって進めたらいいのか、全然わからないぞ」

そう、わかった気になっていたのです。

ちょっとした絶望感を味わいました。

普通に手が止まるレベルで。

とは言え、そうも言ってられないので

基礎編の振り返り
ヘッドに書くのは何があるか
タグの使い分けと選定について
どうやってレイアウトを考えていくか
作っていく流れ

を意識しながら復習しました。

それから、

「出来るだけ動画を見ずにゼロからコーディングしてみましょう！」に

チャレンジしました。

一度ダメポイントを洗い出してから、復習したので、

今度はすんなりと進めることができて一安心したのを覚えています。

本当に見ないで作れるかな？と自分を疑い、

３日連続でゼロから作ったのは内緒です。

3.Bootstrap学習編

BootstrapというCSS フレームワークを使って、サイトを作ることを学びました。

これは本当に衝撃でした。

今までの「学習が全て無に帰す」そんなレベル感の驚きがありました。

Emmetといい、世の中便利すぎる。

ほとんど、HTMLだけでコーディングが行えてしまうんですよ。

ざっくりいうと、

定義済みのクラスをHTMLタグのクラスに追記してデザインしていく

これですね。

上手に使えば相当の時短に繋がるなと、つくづく思いました。

特にレイアウト関連のCSSを設定せずに、思い通りに作れるというのが感動でしたね。

そして、Bootstrap編の最後の課題は

コーディング編で作ったサイトを「Bootstrapで再度書き直してみよう」という

内容で出されました。

ここは、あまり躓きませんでした。(だって３回ゼロから作ってるから暗記してる)

4.ポートフォリオ作成編

いよいよ、ポートフォリオを作成し公開することを学びました。

参考となるサイトを示してはくれますが、ほぼ、オリジナルで作成をします。

フリー素材のサイト案内や無料でフォームを作成するにはなど、

より実務で使いそうな内容を学べる回になっていました。

色使いとか、考えることが一気に増えます。

「だが、それがいい。」

やれることが増えてから、

ゼロから作るというのは最初の頃とは違うやりがいが湧いています。

何を使ってどういう風に書くかを自分で考える

これが結局、実務と同じことをするって事ですもんね。

そして最終的にサーバーを契約して、実際にサイトをアップロードし、

公開するところまでが初級編の全容となっています。

今日のまとめ

HTML/CSSの最初の学びは本当に大事。納得行くまで突っ込んだ方が良い。
サイトを作る「流れ」を意識しながら、学習を進めると良い
わからなくて課題が進まない時は、素直にあきらめる
ただし、課題の進捗スピードは諦めても、成長は諦めない。復習＆調査全力。

初級編の感想とざっくりしたまとめでした。

では、また。