【Progate】HTML&CSS中級編 道場レッスン

こんにちは、uzukiです。
今日は今週の勉強記録です。

今週は、ProgateのHTML & CSS中級編 道場レッスンを勉強しました。
スライドや指示がない状態で書くのはとても難しく、ノートを振り返ったり解答で確認したりしながら進めました。

中でも、アイコンの真ん中に文字を入れる箇所がなかなか理解できず書くのに時間がかかってしまいました。

.lesson-icon{
 position: relative;
}

.lesson-icon p{
 position: absolute;
 top: 90px;
 width: 100%;    ⬅︎ここ。
 color: white;
}

topから90pxなら、leftからも90pxで真ん中にくると思いプレイビューを見ると、HTML & CSS以外真ん中ではなく少し左にずれていました。

HTML & CSSもたまたま真ん中辺りに表示されていただけだったのですが、そこでwidthを使うという方法がなかなか理解できず、知り合いのエンジニアさんに教えていただき、なんとかクリアできました。

今週の反省点

できるだけ答えを見ないようにと進めましたが、１つのレッスンに時間をかけ過ぎてしまいました。
次のレッスンからはもう少しテンポ良く進めていきたいです。

今週も頑張ります！