HTML/CSSの大きな学習ステップの流れ（初心者の方へ）

大きな学習ステップの流れとしては、
以下の流れでステップアップしてもらいながら学習を進めていきます。

＜ステップ１＞
・シンプルなレイアウトでHTMLのタグ、CSSに慣れる
　↓
・Flexboxの配置を組んでみる
　↓
・レスポンシブの基本（メディアクエリ）を取り組んでみる
　↓
・シンプルなレイアウトをレスポンシブで作ってみる
　↓
＜ステップ２＞
・CSSフレームワーク（Bootstrap）の基本を覚える
  ↓
・CSSフレームワークでレスポンシブを組んでみる
　↓
・CSSフレームワークでページを組んでみる

学習時にアップロードする環境を用意

HTML/CSSなどの理解のためには、

ファイルやフォルダの構成とサイトのURLの関連を知ること

が大切です。
この点に関しては、
レンタルサーバーで試して理解を深める方法がありますが、
学習サポートの中で、

学習用のアップロード環境を用意するので、その環境にアップロードする

ということをやりながら、少しずつ慣れる手助けとして使ってもらいます。

コードレビューで「うまくいかない」を解決

学習をやっていく中で、

「うまくコードを書いたはずなのに、思ったように動かない」

ということが起きて学習が進まないことが多いです。
課題を出したり、「〇〇のサイトを見てがんばってください」など、
アドバイスだけだと初心者はうまく学習が進みません。
その点を解消するために、
先ほどのアップロードする環境を活用して、

学習者：できたところまで、アップロードの環境にファイルを置く
↓　↓　↓　↓
　私　：レイアウトや動きをチェック＋コードレビュー＋アドバイス
↓　↓　↓　↓
学習者：問題点はアドバイスをもらって、再度、トライ！

という形で学習サポートをさせて頂いています。
できる限り、

学習者自身で「考え、トライ＆エラーを繰り返す」

ということを大切にしながら、
困ったときなコードをレビューすることで、
具体的な相談を受けたり、アドバイスできるので、
初心者の方に好評頂いています。

学習参考

学習サポートでも使いますが、
初心者向けに基本をまとめたサイトを作ってます。

HTML/CSS/javaScriptの基本
https://webstudy.portfolio-site.net/

課題で学ぶjavaScript
https://study-js.manabupanda.net/

ポートフォリオサイトの作り方
https://portfolio-site.net/

初心者向け記事
https://manabupanda.net/