この記事では、Web開発が出来る様になるために、プログラミング学習コンテンツの、ドットインストールのレッスンの中でも、HTMLやCSS、JavaScriptやGoogleが提供しているツール、jQueryやPHPなどのレッスンをロードマップ形式で感想や紹介をして行きます。
レッスンをブログに掲載するにあたって、ヘルプを確認しました。
個人利用であり、非商用で、出典を明示してリンクしていて、このブログは非公式で
ポートフォリオを作成しました。
プログラミングのアンケートにご協力頂ける方はこちらのフォームで勉強法など色々と教えて下さい。
あなたのプログラミングの勉強方法について、学習中の方も、クラウドソーシングなどですでに結果を出されている方も、教えて頂けたら嬉しいです。
ここからは、ドットインストールの周ごとのレッスンの感想と、ロードマップとして、各レッスンのリンクと感想を掲載していきます。
1周目の感想（途中）
動画を聴いて、その通りにエディタにコードを書いて動かして、講義についていくだけで精一杯って感じでした。大量の情報が押し寄せた感じで、ワケワカメ、意味フミコ状態です。まだプログラミングの楽しさも分からないですし、私は本当にプログラミングが向いているのかどうなのか、少々不安ではありますが、もう少し勉強を続けてみないと、はっきりと向いていないとも言い切れないのかな・・・・と思いました。
はじめてのWeb制作 全11回 無料
HTMLやCSSが全くの初めての人が、「山田太郎」のプロフィール紹介サイトを作りながら体験していくレッスンです。
また、このレッスンで作った制作物は、はじめてのJavaScript 全8回 無料でも使いますので、消さないようにして、残しておくと良いでしょう。
● もっと詳しくHTMLCSSを学んでみよう ●
Web制作の準備をしよう macOS編 全10回 無料
「Windows編」もあります。
今後のHTMLやCSSの学習に備えて、VS Codeを使えるように設定の仕方を紹介しているレッスンです。
詳解HTML 基本タグ編 全27回 有料
imgタグ、strongタグ、backquoteタグ、hrタグ、brタグ、リスト、tableタグ、リンクを貼る、articleタグ、timeタグ、divタグ、spanタグなどの基本的なタグやMDNについて学べます。
詳解HTML フォームタグ編 全13回 有料
入力用部品、ドロップダウンリスト、チェックボックス、ラジオボタン、ボタンを作成します。
詳解CSS 基礎文法編 全33回 有料
色や枠線、中央揃え、RGBA、HSLA、ボーダーの角を丸める、padding、margin、marginの相殺、position、fixed、絶対配置、z-indexで重なり順、box-sizing、calc、要素に影を付ける、背景のスタイリング、float
詳解CSS セレクター編 全12回 有料
要素型セレクター、classセレクター、idセレクター、属性セレクター、全称セレクター、:hover擬似クラス、:nth-of-type、:empty、:not、詳細度、優先されるスタイル
詳解CSS フレックスボックス編 全16回 有料
要素を並び、揃え、反転、要素の伸ばし、カラムレイアウト、横並び、画像とテキストの配置
詳解CSS アニメーション編 全20回 有料
ボックスをホバーすると角が丸くなるアニメーション、図形の移動、回転、時間の制御、アニメーションの速度に緩急をつける、デベロッパーツールで細かい調整、一括指定プロパティ、繰り返し回数、ポップアップアニメーション
詳解CSS レスポンシブウェブデザイン編 全8回 有料
ブラウザ幅に合わせて、レイアウトを変えていくテクニックを学んでいく。
メディアクエリー、モバイルファーストな開発、要素の表示/非表示
詳解CSS グリッドレイアウト編 全16回 有料
格子状のレイアウトについて学んでいく。
ボックスの複製や配置、直感的な配置指定、要素を揃える
詳解CSS 変数編 全7回 有料
色を変えるなど、一つ一つ指定して変更すると時間がかかるので、変数を使うと便利。
変数の継承、テーマーカラーの管理と変更
● ウェブサイトをゼロから制作してみよう ●
実践！ポートフォリオサイトを作ろう 全17回 有料
山田太郎のポートフォリオサイトを作って行きます。
山田太郎の作った3つのゲームをWORKSに配置します。
実践！アプリ紹介ページを作ろう 全24回 有料
架空のお散歩アプリ、「Dotinstall Walking」の紹介サイトを作っていきます。
実践！ECサイトをマークアップしよう 全27回 有料
架空の家具販売店のサイトを作ります。
● Webサイトを公開してみよう ●
GitHub Pagesでウェブサイトを公開しよう 全11回 有料
GitHubにアカウントを登録し、リポジトリを作成、サイトを公開。
サイトを更新、プロジェクトサイトの作成と公開、リポジトリの削除
● その他のレッスン ●
Bootstrap 5入門 全21回 有料
レスポンシブに対応したサイトを素早く作れるBootstrapについて学習します。
カラムレイアウトやグリッドシステム、ユーティリティ的なクラス、paddingやmargin、実践的なレイアウトなど。
はじめてのJavaScript 全8回 無料
このレッスンでは、以前にはじめてのWeb制作 全11回 無料で使った、
山田太郎のプロフィールサイトに動きを付けて行きます。
● エディタを使いこなそう ●
Visual Studio Code入門 全13回 無料
マイクロソフト社が開発している、無料エディタのVS Codeについて、開発効率が上がるショートカットキーや、Emmet（エメット）などを学びます。
● Googleが提供するツールを使おう ●
情報が古くて調べても良くわからなかった所や、ATOMエディタ推奨で、VS Codeでは出来なかったところ、私の環境で行って上手くいかなかったレッスンは飛ばして、下記のレッスンのみを行いました。
マテリアルアイコン入門 全6回 無料
マテリアルアイコンは種類は少ないですが、無料で使えてGoogleが提供しているという安心感があります。
Google Charts入門 全9回 有料
JavaScriptで簡単にグラフが書けるツールを勉強します。
円グラフ、3D、切り出し、棒グラフ、積み上げ棒グラフ、折れ線グラフを作って行きました。
Chrome Developer Tools入門 全10回 有料
Chrome内に内蔵されているデバッグツールについて、各パネルの使い方を勉強しました。
Google Apps Script入門 全20回 有料
主にスプレッドシートを操作します。情報が古いので、GASエディタの表示の仕方が、2022年8月時点では、拡張機能→Apps Scriptになります。これはまた変わるかも知れません。トリガーで時間指定して実行させることや、GoogleフォームやG-mail、HTMLについても学びました。
個人的には、GAS全く初めての方向けというよりも、普段本でGASの勉強をしていて、補助教材として使う様なレッスンだと思いました。私が使っているGASの本について掲載します。
スプレッドシート自体初めてという方が、気軽にGASを体験出来る本です。
プログラミングやパソコンに自信が無いと不安な方におすすめです。
この教材「詳解! Google Apps Script完全入門 [第3版]」を使ってGASの勉強をしている方は本当に多いですし、基礎文法からGoogleの各サービスまで詳しく学びるので、どの本にしようか迷っている方に1番おすすめしたい本です。
では、ドットインストールのレッスンに戻ります。
Google Fonts入門 全5回 有料
Googleが提供しているウェブフォントを使います。講義ではATOMエディタでしたが、VS Codeでも無事に動作しました。
● もっと詳しくJavaScriptを学んでみよう ●
詳解JavaScript 基礎文法編 全26回 有料
準備中
詳解JavaScript オブジェクト編 全35回 有料
準備中
詳解JavaScript DOM編 全21回 有料
準備中
詳解JavaScript Intersection Observer API編 全13回 有料
準備中
●もっとJavaScriptに触れてみよう ●
jQuery入門 全13回 有料
準備中
ポートフォリオを作成しました。
プログラミングのアンケートにご協力頂ける方はこちらのフォームで勉強法など色々と教えて下さい。
