HTML CSS ロードマップ

この記事の対象者

WEB制作をした事が全くない方・挫折した事がある方

最初の基礎を一緒に乗り越えて、基礎部分を繰り返して自分のものにすればそこからは自分で調べる事も容易になり、そこから本を読む事も全く知識0よりめちゃめちゃ頭に入ります。

まずは自分が作りたい物を作り上げて楽しいと感じて欲しい!という思いから、講座の内容をミニマムにしています。

丁寧に分かりやすく過保護に(w)説明します

このブログのコンセプトである、最初の壁を一緒に乗り越えましょう!

ミニマムハンズオン・私について

本当に初めてでも大丈夫!

皆さんがWEBサイトを作ってみたい、と思ったらまずは静的サイト(HTML・CSS)を作る事から始めましょう。

(静的サイト:動的なデータベースの処理をして返すWordPressなどと違って、HTMLをそのまま表示するサイト)

HTML・CSSはプログラミング言語ではないので、他のプログラミング言語と比べると比較的簡単です。

全て自分のパソコン上(ローカル)で実装・確認が必要なので、難しい環境構築も不要です。

しっかり全ての知識を暗記する必要はなく、全体像を掴み何ができるかを、自分のつまづいた時に調べれるようになっておく必要があります。

HTML CSS を習得し、JavaScriptの知識がなくてもスライダーやライトボックスなどを実装できるプラグインを扱えるようになる所までがこのHTML CSSロードマップのゴールです。

このロードマップを習得すればLPを公開する事が可能です。複数ページあるサイトもheader footer などを一元化できない問題は残りますが、公開可能です。

このロードマップの後に、JavaScriptやWordPressの習得が待っています。

WordPressの中で使うPHPは、PHPの一部です。

JavaScriptも、WEB制作で使うのは一部です。

それぞれ、ミニマム講座ですのでそれぞれ実際に作ってみて触れるという内容になっていますので、表面をサーッと駆け抜ける形になりますのであまり構えないでくださいね!

今回はその基礎となる、HTML CSS講座です。

HTML CSS ミニマムハンズオンロードマップ

では、このブログの中でHTML CSSを習得して静的サイトを作成をする為の目次をご紹介します。

(順次公開していきますので非公開・未投稿の記事はお待ちくださいね)

ミニマムハンズオン学習法・私について

(順次公開していきますので非公開・未投稿の記事はお待ちくださいね)

STEP
WEB概論(WEBサイト表示の仕組み)
STEP
ツールの使い方(VSCode)(FileZilla)
STEP
Emmet VSCodeのショートカットを最初から少しだけ使ってみましょう
STEP
HTML(HyperText Markup Language)
STEP
CSS(Cascading Style Sheet) 基礎
STEP
CSS レイアウト(FlexBox Grid Float)
STEP
CSS アニメーション
STEP
レスポンシブについて
STEP
プラグイン(LightBox Swiper)
STEP
フォーム
STEP
本番環境へのアップロード