この記事ではデイトラWeb制作コースでの学習記録、感想やつまずいた点などをご紹介します。
参考になりましたら幸いです。
はじめに
デイトラとは
デイトラとは、“未経験でも・迷わず・楽しく”学べるオンラインスクール。
1日1題形式のカリキュラムが90日分用意されており、仕事につながる現場のスキルが身につくと評判のオンラインサービスです。
動画で詳しいコーディングの仕方を解説しながら進めてもらえるため、一緒に手を動かしながら学習することができます。
私はiPadで動画を視聴しながら、PCでVSCodeを開きコーディングをしています。
サブディスプレイを用意すると効率的に学習を進められるかと思います◎
またSNSで「＃デイトラ」と検索するとたくさんの受講仲間が見つかり、学習の励みになります。
私もTwitterでの発信を始めましたので、よろしければフォローお願いします！
Web制作コースについて
Web制作コースでは主にコーディングの仕事に繋がるスキルを習得できます。
初級編で学べる内容は以下の通りです。
・HTML/CSSの基礎とBootstrapを使ったスピードサイト制作
・副業で月5万円を稼ぐためのサイト納品テクニックやサーバー契約、サイト公開までの手順
・Web制作を学習する際の心構えやコードを書くために必要な環境構築の仕方
なんと初級編だけでも副業ができるような内容を学習することができます…！
副業で月5万は大きい…
スキルは大切ですね。
さらに中級編ではWeb制作会社をはじめとした企業と仕事ができるレベルのコーディング力習得を目指し、上級編ではWeb制作の中でも需要の高いWordPressのオリジナルテーマ制作を行います。
こちらのブログもWordPressで作成しておりますが、いつかWordPressを自由自在に操りたいものです。
継続するのみですね！
デイトラWeb制作コースの詳細はこちら
なぜデイトラを始めたのか
Web制作のスキル取得にあたり、まず最初に取り組んだのは「1冊ですべて身につくHTML & CSSとWebデザイン入門講座 」でした。
その後Progateをひと通り完走。
ゲーム感覚でプログラミングの基礎を学ぶことができ、
入門としては最高のサービスだと思います！
ただ、その後模写コーディングのサイトで模写に挑戦するも、手も足も出ず…
いざ１からコードを書くとなると、どのように進めたら良いのかわからなかったのです。
そこで次のステップに最適なサービスを調べ、デイトラに辿り着きました。
同じような悩みをお持ちの方にはデイトラをお勧めします！！
一緒に頑張りましょう！！
DAY1【道具の準備・Webサイトの仕組みを知る】
DAY1ではSlack・Google Chrome・エディタの準備をしました。
Slackではメンターへの質問や受講生同士の交流が行われています。
皆様の質問と回答を見ているだけでも勉強になりますので、ちょこちょこ覗くようにしています。
また、上手な質問の仕方も学ぶことができ、今後勉強する中での自己問題解決能力が身に付くようになっています。
大事なのは答えではなく、答えを導く力。
エディタはVS Codeが推奨されており、解説動画で使用されているのもVS Codeなので素直に従いました。
以前はAtomを使用していましたが、すぐに慣れました◎
また、Webサイトの仕組みをまとめた記事が紹介されますので、完全未経験の方がいきなり始めても挫折しないような導入だなと感じました。
DAY2【HTML タグの使い方】
DAY2ではHTMLの基本ルールについて学びました。
Progateで学んでいた為復習になりましたが、再確認した点をご紹介します。
タグの意味
・href属性：リンク先のURLを指定する属性
・src属性：ドキュメントに埋め込む要素のURLを指定する属性
これらの使い道は知っていましたが、意味を再確認できました。
コメントアウトを一瞬で
また、VSCodeでのコメントアウトはショートカットが便利です。
【Mac】
「command + / 」：行コメント
「Shift + Alt + a 」：ブロックコメント
【Windows】
「Ctrl + / 」：行コメント
「Shift + Alt + a 」：ブロックコメント
コードを書くのはどんどん早くしていきたいので、ショートカットは積極的に取り入れるようにしています。
まだタイピングが遅いので、速くなりたい〜！！
divとspanの使い分け
もうひとつ理解が深まった点は、divとspanの使い分け。
こちらのサイトで理解できました。
spanではまとまりの前後に改行が入りません。一方divではまとまりの前後に改行が入ります。
spanのように前後の改行が入らないタグをインライン要素、divのように前後に改行の入るタグをブロック要素と呼びます。
基本とタグの使い方｜初心者向けHTML入門
他にも、記事内で紹介されている「Webにまつわる基礎講座 vol.2」も参考になります。
DAY3【CSS 基本ルール】
DAY3はCSSの基本ルールについて学びました。
こちらもProgateのおかげですんなり進むことができました。
相対パス
cssやimgファイルを取り込むときに少し引っかかるのが相対パスだと思います。
表示したいページから見て読み込みたいファイルがどこか？という考え方ですが、最初は少し難しかったです。
こちらのサイトでわかりやすく解説されていました。
また、「Path Autocomplete」というVSCodeの拡張機能でファイルパスを補完候補に表示することができます。
タイプミスを減らすにはタイピングを減らすこと！！
どんどん補完機能に頼っていこ！
子孫要素の指定
親要素 子要素 { }
と、半角スペースを空けて子孫要素を指定していくのが子孫セレクタの書き方ですが、直属の子孫のみを指定することも可能。
直属の子孫要素のみの指定
親要素 > 子要素 { }
なお、まだ使ったことはありません。
いつ使うんだろう…
paddingとmargin
paddingとmarginの概念、めちゃわかりづらいですよね！！
Progate時代はしょっちゅうどっちがどっちかわからなくなっていました。
その中で、一番腑に落ちたのがこの表現。
paddingは「詰め物をすること、芯(しん)を入れること、芯、詰め物、(新聞・雑誌などの)埋めくさ、不必要な挿入句」という意味。つまり、詰め物だから内側。
marginは「【商業】 元値と売り値の開き，利ざや，マージン」という意味。余った感じだから外側。
【DAY3】 CSSを書いてみよう｜デイトラ
marginが余った感じだから外側、というところが一番しっくりきて理解ができました。
また、こちらのサイトもボックスレイアウトについてのポイントが大変わかりやすかったです。
DAY4【環境構築・実践への準備】
DAY4では、実践への準備を整えました。
VSCodeのおすすめ拡張機能
まずはVSCodeの拡張機能をインストールします。
記事内でおすすめを９つ厳選して紹介されていますが、個人的に調べて足したものをご紹介します。
Auto Close Tag
開始タグを閉じると自動的に終了タグを補完してくれるものです。
入力の手間が単純計算半分に！
Auto Rename Tag
途中でタグを変えると、対応する終了タグも一緒に変えてくれます。
間違い防止にもなりますし、探したり書き換える手間も省けます。
Highlight Matching Tag
カーソルを乗せるだけで対応するタグが強調されて見やすくなります。
indent-rainbow
インデントに色がつき、深さが直感的にわかるようになります。
One Dark Pro
配色テーマ。
Atomユーザーだったため同じ色合いが落ち着きます…
はっきりしすぎず見やすいです。
Path Autocomplete
相対パスの章でご紹介した拡張機能です。
ファイルパスを補完候補に表示することができます。
Prettier – Code formatter
ソースコードを自動で整形してくれるものです。
ソースを保存（command+s）すると自動で整形してくれます。
さらにタブのサイズや位置、セミコロンやシングルクォーテーションなども整形してくれます。
本当はもっと設定できるようですが、今はデイトラとブログを進めるのが最優先事項なので、インストールしたのみです。
マルチカーソル機能
これは拡張機能ではないのですが、便利な機能なので一緒にご紹介します。
複数箇所に使用しているクラスを一気に変更できる機能です。
変更したい箇所を選択して「shift + command + L」を押下すると、一括でクラス名の変更ができます！
Emmet
VSCodeではEmmetが標準で使えます。
Emmetに関しては慣れだと思うので「こういうものだ」と捉えて、今は少しコードを書くのが遅くなったとしても習慣にしていこうと思います。
後から覚え直すのは大変ですし。
階層の指定がまだつまずきます…
まとめ
HTML/CSS 基礎編、私の場合は1日で終了しました。
Progateで学習していたのが大きかったようです。
基礎に関してはProgateで習得するのがやはりおすすめだなと感じました。
初のデイトラ受講の感想は、「楽しい！！」
記事＋動画でレッスンが進んでいきますが、実際に一緒に手を動かしながら受講できる＝実践型で理解が深まりやすいんだなと思いました。
まさに百聞は一見に如かず。
そして、記事内では詰まったら自分で調べるように何度もアナウンスされます。
「ググり力」と表現されていましたが、確かに自分で調べて発見したことは定着しやすいです。
案件で壁にぶつかった時も自力でトラブルシューティングできると素晴らしいですよね。
もちろん最初から全て上手くいくことはないと思うので、デイトラの1年間質問し放題のメンター様の存在がありがたいです…！！
次回は「コーディング練習編」をレポートします！
コメント