HTML/CSSを学んだ個人的ロードマップ
🕦

HTML/CSSを学んだ個人的ロードマップ

Tags
WebHTMLCSS
Last Edited
May 6, 2021 3:34 PM
Description
HTMLタグとmarginとpaddingしか分からないところからスタート
Date
ジャンル
ステータス
広告
評価

HTML/CSS出来ないってマジ!?

うるせぇ!バックエンドだからいいんだよ!

結論

HTML/CSSが書けるとシャレオツなWEBが作れるようになるので、開発意欲がめちゃくちゃ上がります。

やるまえのお気持ち

「HTML/CSSはフロントエンドの人の仕事だし・・・」

残念ですが、最低限わかっていませんでした。確かにHTMLでdivとかsectionとかheaderとか、そういう基本的なレイアウト概念は持っていました。しかし・・・CSSは全く書く事が出来ませんでした。

「CSSはフレームワークでよくねw」

全然良くありませんでした。結局フレームワークのデフォルトのままで使用するしかなく、ちょっと凝ったレイアウトやデザインを作ろうと思ったら頭打ちになりました。FlexBoxの概念を知り、基本的な作り方を身につけてしまえば楽しくなります。

事前準備

エディター

言わずもがな、VSCodeです。

VSCodeの拡張機能

ここらへん入れておけば大体快適にコーディングできます。

VSCode に必ず入れておきたい拡張機能 - Qiita

普段使用しているエディタはPhpStormですが、PHP以外を書くときはVSCodeはとても便利なので重宝しています。 私が個人的におすすめする拡張機能を紹介します。 他にも良い拡張機能があればコメントにて教えてもらいたいです。 この記事があなたのお役に立てれば幸いです。 マーケットプレイスが用意されているので、ここからお好みの拡張機能を探すと良いでしょう。 Featured: おすすめ、注目されている拡張機能 Trending: 急上昇の拡張機能 Most Popular: 最も人気のある拡張機能 Recently Added: 最近追加された拡張機能 まだ評価されてない追加されたばかりのものが多いので追加する場合はご注意ください VSCodeの数あるテーマの中の一つです。 歯車のアイコンから Set Color Theme を選ぶをいくつかバリエーションを選択できます。 私は Material Theme Darker Hight Contrast を使っています。 GitHub公式のテーマがリリースされました! Material Theme から GitHub Dark テーマに乗り換えました! 拡張子に合わせてアイコンを表示してくれる拡張機能です。 とても見やすくなります。 VSCodeを日本語化します。 日本語化したい人は入れると幸せになれるかと思います。 ちなみに私は入れてないです。 Preferences > Keyboard Shortcuts ( Command + K, S)

VSCode に必ず入れておきたい拡張機能 - Qiita

Chromeの拡張機能

フォントみれたり、色みれたり、画像取れたり。模写の時には便利

HTMLの基礎を学ぶ

CSSの基礎を学ぶ

デザインを蓄える

ワイヤーフレーム設計

デザインカンプを作る

カンプから制作

CSSの設計技法を学ぶ

SCSSを学ぶ

模写コーディング(中級)