htmlとcssを勉強出来るサイトprogateを使って学んでみた

木下です。こんにちは

知識レベル：運用案件で修正対応でhtml,css(scss),JSを触っているが、ゼロベースを作成したことが無い
何も知識ない状態からの場当たりのトライアンドエラー対応なので、基礎から学んだことが無い

今回勉強したサイトprogateです。この内容に基づきながら進めていきます。
progateでは初級・中級・上級と分かれております。

# htmlとCSSは何か　から初級は始まります。
そこから始まりますが、多少なりとも触ってきたので、大体はわかります。

webページの骨組みの部分ですね。
divやa、Pといったタグを使って書いて、文字や画像を表示してます。

詳しくは検索すると出て来ますが、こちらのようにまとまった情報が出ていますので、そちらをみてもらうとわかりやすいです。
タグは開始と終了とセットで使われます

例えばこのように入力します

<div class="hoge">
    <p>hogehoge</p>
</div>

まともに勉強したことがない私はいつも<div>をコピーして、<div>の中に/を追加して</div>にしてました。
macだと　→|　を補完されるのを知りませんでした。

通常ルートの方には当たり前すぎて、あまり書き方の記事に載ってなかったりします。ショートカットキーで検索すると表示されます

終了タグが抜けて検証環境でエラーがおきたりしていたので、早めに知っておけば・・

progateの中級ではユーザーが一番最初に目にするWEBページを作成します

上級ではレスポンシブデザインを勉強します

内容を見る限りそんなに難しいことはありません。
そのレジュメに沿って勉強であれば半日上級まで完了します。

しかし。
progateでは道場と呼ばれる、練習で作ったページを改めて、ゼロから作りましょうがあります。

ゼロから作ったことがない私は、classの名前の付け方に苦戦しました。
今までは誰かが作成してくれたものをいじっているので、class名など考えたことがありませんでした。

class名が上部でitemやcontentsなどを使うと、下部で使う名前が思いつかない。

初見でcssだけ見ると、どこの部分を記載してあるかわからない状態になります。

ここまでしっかりと決め切る必要はないかもしれませんが参考サイトです

コードも整理整頓が大事です。

まだ勉強も二日目なので、現段階で学んだことは以上です。

まとめ

progateという勉強サイト（月額980円）があり
コードには補完するショートカットキー（参考サイト）があり、
初見の人がみてもわかりやすい命名を意識する