HTML/ CSS 〜Progate道場コース中級編（全部通して自力でやってみよー💪body lessonからWebページの公開まで！）〜

目標3ｈ20ｍのところ、前回、、、1ｈ…50ｍくらい？（結構おおめにに見て😅）

コードを書けたのは、実際には、1ｈ10ｍくらいだったけど（言い訳⚡️）、絶対に疑問や調べ物系が出るからややこしや…

めげずに、もうひと書き٩( 'ω' )و

【自分でやってみて、抜けていた箇所】

🌸body lesson

→.lesson-icon p{
position:absolute;
top:90px;
z-index:10;
width:100%;←⚠️ガッツリ忘れ…😱
color:white;

→.lesson-text{
font-size:13px;
color:#b3aeb5;
display:inline-block;←⚠️なんか忘れてるんたけど、なんだったかなー…　なレベルだった(￣◇￣;)
width:80%;

おいおい… おんなじ事言っちゃってるよ？

まぁ、実践を通して学んだ知識は忘れないって事で★負けるなpositive！！٩( 'ω' )و✨ここまでで、約40分だ！

この成長過程を見て、楽しもう…うっぅっぅ…٩(Ｔ＿Ｔ)و★★★！

🌸body message

比較的スムーズ、と、私は思った！(￣□￣;)　範囲等の確認をしながらで、約30分。ここでのうっかりさんはぁ〜♪→（来週のサザエさんは、的な★）

.message-btn{
display:inline-block;←⭐️範囲の確認もOK！
border:1px solid #5dca88 ;
background-color:#5dca88;
color:white;
opacity:0.8;
padding:15px 40px;
margin-bottom:80px;
box-shadow:0 7px #1a7940 ;←⚠️設定値の範囲は時計回り！
cursor:pointer;
}
.message-btn:active{←⚠️マサカの…action… 今後もやっちまいそう…
box-shadow:none;
top:7px;
position:relative;

🌸footer

所要時間は約20分で、先の道場コースでコーディングした時よりもwidthの指定でワタワタしてしまった。実際に自分で書くと、予期せぬことがまだまだありますね。

.footer{
width:1200px;
}
.footer-container{
width:1160px;←⚠️width:100%;だと右にはみ出て上手くいかなかった。
float:left;
margin:0 20px;←⚠️borderの範囲を確保するためにここで調整すると、上下の余白は下記のpaddingでしか指定できなかった。
border-top:1px solid #eee ;
}
.footer-logo{
padding-top:30px;
}
.footer-container p{
font-size:12px;
color:#b3aeb5;
padding-bottom:30px;
}

【Webページの公開】

初級編に引き続きまして、GitHubを使用。

せっかちさんなもんでね… なかなか公開されないことに焦って、コードを入力し直したり、名称を変えてコミットし直したり、まぁ今の自分が考えられる事を色々しましたよ。。。結果、待つ！が最良の手だったとさ(￣◇￣;)

Progate

色々思うことはありますが、とりあえず、現状の記録として。。。

結局、公開も含め、目標の3h20ｍくらいでやり切りました。次回からは、html/css最後（恐らく最後…）のレッスンです٩( 'ω' )و