こんにちは！ピスカ（@pisca_create_yr）です！
只今デイトラWEB制作コース中級編（WEB制作コース開始６９日目）ですが、初級偏の学習記録を振り返って残したいと思います。
管理人ピスカです。
１９９０年大阪市生まれ
3年間エステ、5年間美容皮膚科カウンセラー
その後、保育士資格を取得し３年間保育士として勤務
長男11時間保育園に預けるフルタイムワーキングママ
育休中に在宅ワークを目指してWEBスキル習得中です！
デイトラとは？
筆者は以前少しだけワードプレスでのブログ運営はしておりましたがすぐに挫折し、ほぼWEBスキル0からのスタートです。
まず、HTML、CSS、コーディングって何？のレベルから始めました。
デイトラWEB制作コースはそんな全くの未経験でも初級編だけで月5万のスキルが身に付くという内容の“未経験でも・迷わず・楽しく”学べるオンラインスクールです。
中級、上級レベルになると本業でバリバリやっていけるスキルが身につきそうです♪
WEB制作コース初級編 DAY1 はじめに
- 学習を始める前に① – Slackに加入しよう！
- 学習を始める前に① – 上手に質問するためのポイント
- Google Chromeをインストールする
- エディタ「VS Code」をインストールしよう
- Hello World!」を表示する
- ウェブサイトが表示される仕組みを知ろう
- 困ったらまずは「よくある質問」をご覧ください！
０１〜０２ Slack
デイトラはわからないことがあれば1年間の間はメンターさんに質問し放題のサービスがあります。
そこで使われるのがSlackというチャットサービスです。
初級編質問部屋、中級編質問部屋、上級編質問部屋、自己紹介部屋などいくつかに分かれており、まずは自己紹介部屋でドキドキしながら軽く自己紹介しました！
慣れるまでは質問するのに緊張しますが、筆者は現在６回ほど質問していますが、みなさんとても親切で、回答を頂き問題が解決するたびに成長しているので、自分で調べても問題解決しない時は質問するようにしています(^^)
０３〜０４ ブラウザとエディタのインストール
WEB制作の現場で使われていることの多いブラウザのGoogle ChromeとエディタのVisual Studio Code（VS Code）をインストールします。
０５「Hello World!」を表示する
いよいよVSCodeにコードを打ち込んで、ブラウザに表示させます！
初めてコードを書いた時はドキドキわくわく。
この時は<!DOCTYPE html>とか<head>とか全然わからないけど、自分が打ち込んだ内容が表示されるとうれしかったです(*´-`)
０６ ウェブサイトが表示される仕組みを知ろう
ここで「WEBの基礎」を初学者にもわかりやすいように図解を使ってわかりやすい記事を読んで教わります。
主な内容はこちら
- そもそもWebサイトとは何か？
- Webページが表示されるまでの流れ
- Webサイト制作に必要な道具
ここで初学者の筆者はHTMLとCSSの違いを知りました；；
０７ 困ったらまずは「よくある質問」をご覧ください！
学習中わからないことがあったら、よくある質問を見るとヒントになることもあります！
Day１のよくある質問では
- HelloフォルダをVsCodeの上に持ってきてもHelloフォルダが開かれない
- VScodeでtabキーを押してもエメットが効かない
- Chromeに表示される言葉が Hello World! ではなく ”こんにちは 世界！” と表示される
の原因と改善内容を解答されています。
質問チャットする前に、解決のヒントがないかこちらも覗いてみましょう＾＾
WEB制作コース初級編 DAY２ HTMLのタグを書いてみよう
- タグで囲もう
- 見出しと段落
- リンクの付け方
- 画像を表示
- リストを表示
- コメントの入れ方
- グループにして整理する
- タグに属性をつける
- 【まとめ】HTMLの書き方見本
- 困ったらまずは「よくある質問」をご覧ください！
DAY２は基本のHTMLについて解説しています。
HTMLファイルとは、「HTMLタグで囲まれた文章」の集まりです。
- ページを読んだ人に「文章」を伝える
- WEBブラウザに「ページの構造」を伝える
この二つが主な目的です。
よく使う要素、色々なタグの使い方の実際の使い方も解説しています。
図解を使ってわかりやすく記事をまとめてくださり、理解しやすいです♪
DAY２ よくある質問
なし
WEB制作コース初級編 DAY３ CSSを書いてみよう
- CSSを書くための基本設定
- CSSの基本ルール①：セレクタ・プロパティ・バリュー
- CSSの基本ルール②：名前（class）で指定する
- CSSの基本ルール③：子孫要素を指定する
- CSSの基本ルール④：ボックスレイアウトとは
- 主要なCSSプロパティを実際に使ってみよう！
- 【まとめ】HTMLの書き方見本
- 困ったらまずは「よくある質問」をご覧ください！
DAY３は基本のCSSについて解説しています。
CSSとはHTMLやXMLで記載された文章の見た目や見栄えを整えるものです。
まずはHTMLとCSSを連携させる、フォルダ構成をする、など準備が必要です。
ここで少し？？？となりましたが、動画で説明してくださっています。
そのあとのCSSの実践編ではテキストと動画とで解説してくださっていますが、覚えることが多く読むだけでは理解できませんでした。
デイトラでも言っているように実際に手を動かして実践することで早く理解できます。
私は自分でVSCodeで打ち込むのと、それだけでは理解できなかったので同時にProgateで実際に手を動かして演習しました。
DAY3 よくある質問
- CSSが反映されません
- 画像が表示できません
- jpgファイルはどのように用意すればいいのでしょうか
WEB制作コース初級編 DAY４ 環境構築をしよう
- VSCodeのプラグインをインストールしよう！
- ファイルを自動保存するようVSCodeの設定を変えよう
- Live Serverの使い方
- 演習でLive Serverの威力を実感しよう！
- Chromeの検証を使うことに慣れよう！
- Emmetを理解しよう！
- 振り返りに役立つ学習記事紹介【HTML/CSS基礎編】
- 困ったらまずは「よくある質問」をご覧ください！
VSCodeのプラグインをインストールしよう！
VSCodeには便利に使うための様々なプラグイン（拡張機能）があります。
ここでデイトラおすすめのプラグインを１２個紹介してくれます！
どれも本格的に使うには必須のプラグインです♪
ファイルを自動保存するようVSCodeの設定を変えよう
コーディングをしたファイルの変更を反映するには、「command＋S」もしくは「Ctrl＋S」で変更を保存する必要がありましたが、いちいち自分で保存されなくても自動保存する設定を教わります。
これで、一生懸命書いたコードの保存し忘れ落ち込むことはありませんね！
Live Serverの使い方 と演習
Live Serverは簡易ローカルサーバーを起動し、HTMLやCSSファイルの更新をライブプレビューできるようにするもので絶対入れておいた方がいいプラグインです。
入力した内容をリアルタイムで反映させることができるのでコードの確認がしやすいです。
早速Live Serverを使いながら演習問題を行います。
自分で書いたコードがすぐに反映されるとなんだか、プログラミングやってんなーって気分になって楽しかったのを覚えています笑
Emmetを理解しよう
HTMLやCSSを使う時はコードの入力が必須ですが、コードを一文字ずつ入力していくとかなりの文字数になります。
そこで文字を短縮して入力する文字のショートカットができるのがEmmetです。
例えば[display: block;]だと１４文字入力しないといけないのに対し、[db]とEnterだけで入力できちゃう便利な機能です。
さらにタイプミスしにくくなるのもメリットです♪
このWEBコーダーに必須のEmmetの使用方法のわかりやすい記事を紹介してくださっています。
はじめて勉強した時は、ちゃんと覚えられなかったのですが、勉強を初めて２ヶ月経ち改めてEmmetの記事を見るとちゃんと理解できるようになっていました！
振り返りに役立つ学習記事紹介【HTML/CSS基礎編】
ここまでHTMLとCSSの基礎を学び、おすすめの学習記録の記事を紹介されています。
- 学習のポイント
- つまづきやすい箇所の補足
- +αで調べた理解に役立つサービスや記事
など、わかりやすくまとめてくださっています。
よくある質問
- test.pngにhoverしたとき、opacityが0.7になるようcssに追記」のhoverが効かない
- HTMLをコピペしましたが画像が表示されません
- hover効果を検証画面で確認したいです
まとめ
筆者はデイトラの勉強と同時進行でProgateでの学習も取り入れました。
Progateは実際に実践をして演習問題をしていく無料サービスで利用者も多いですし、デイトラとProgateの同時進行はかなりおすすめです♪
ここまでは三日くらいでクリアできました！
DAY５からは実際にコーディングをしてデイトラ簡易サイトを作っていきます！
こちらもよかったらご覧ください♪
