こんにちは、しまえなです。
最近、ドットインストールでインプットばかりでしたので、そろそろアウトプットをしてみようと思い、Codestep(https://code-step.com/)に初挑戦してみました。
【HTML/CSS コーディング練習】入門編：プロフィールサイト／LP
■やったことの振り返り
・お手本サイトを見る。
・フリーの写真をダウンロードする（今回はただぴくさん）
・写真の配置と大まかなページの構成を考える
・コーディング
・お手本サイトを見ながら＆調べながら
・お手本のソースコードと比較
お手本のソースコードと比較した結果
■HTML head部分
<meta name=”description” content=”コメントコメントコメント”>忘れ
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>忘れ
favicon忘れ
CSSリセット忘れ
■HTML body
header
Profile部分を「画像」ではなく、「文字」で入力（結構CSS大変だったんだけど・・・）
Profile部分のリンク忘れ。リンクは<a>タグ。リンク先はindex.html
About,Profile部分のリンク忘れ。<a>タグ。classだけではなく、id=”about”などをつける。
お手本のサイトをクリックして、コーディングする前に、いろいろちゃんと確認せんといかんですね。
classとidの使い分けが100％理解できたわけではないと気付く。。
■CSS
@charset “UTF-8”; /html {font-size: 100%;}忘れ
その他、もろもろ、お手本と違う部分がありましたが、このような書き方もあるんだなと参考になりました。
参考にしたソースコードはこちら。
https://code-step.com/profile-code/
次も頑張るぞー。自分の思い通りのものができていくと、楽しい。推しを活用するとさらに楽しい。
以上、ありがとうございました。
それでは、また。
