プログラミング日記【4ヶ月目第4週〜第5週】デイトラ40代アラフォー初心者

2024.08.12
アフィリエイト広告を利用しています

2024/2/19（月）プログラミング日記

【Web制作コース 108日目】

作業：1時間

作業内容

  1. 【中級編】DAY7　Tips5-6
PDAY7を完了する！
DDAY7　メインビジュアルのコーディング
　Tips5　メインビジュアルのコーディング（PCのCSSまで）
　Tips6　メインビジュアルのコーディング（レスポンシブ調整）
Ccalc( ) の便利を思わずすごい！と声に出してしまった
直感的にわかりやすい
画像の倍率を分数で調整できるなんて、かっこいい！
ADAY7完了！

2024/2/20（火）プログラミング日記

【Web制作コース 109日目】

作業：1.5時間

作業内容

  1. 【中級編】DAY8　Tips1-5( 6「余裕ある人向けの課題」は余裕できたらする！)
PDAY8を完了する！
DDAY8　導入実績セクションのコーディング
　Tips1　デザインカンプと回答例コード
　Tips2　HTMLのコーディング
　Tips3　CSSのコーディング（スマホ）
　Tips4　CSSのコーディング（PC）
　Tips5　レスポンシブの確認
Cdisplay:gridを数日ぶりにコーディング
やっぱり便利だ
ただ、忘れやすい状態なので都度調べて使う！
ADAY9完了！
bakushin
bakushin

display:grid を理解するのに参考にした記事👇

HTML / CSSのレイアウト革命！dispay:gridの使い方を理解してスマートにコーディングしよう！ | HPcode（えいちぴーこーど）
HTMLの横並びの歴史をたどると、float: leftが主流の時代から、display: flexが主流の時代となり、そして、新しくdisplay: gridの時代が到来しようとしています。 大げさに革命という言葉を使いましたが、何が凄い
haniwaman.com

2024/2/21（水）プログラミング日記

【Web制作コース 110日目】

作業：1.5時間

作業内容

  1. 【中級編】DAY9
PDAY9を完了する！
DDAY9　PerfectPixelを使ったチェック＆修正
　Tips1　PerfectPixelの導入とスマホの再現度を確認
　Tips2　PerfectPixelのPCの再現度を確認
　Tips3　デザインカンプの数字とPerfectPixelとのズレの「どちらを優先」しますか？
　Tips4　デザインカンプとそこまで一致させる必要ありますか？
CPerfectPixel で照合すると講義動画よりもずれてる場所が多い
なぜ？VS code の設定問題？動画と同じコードにしてるはず。。
とにかく発見！
ADAY10完了！

2024/2/22（木）プログラミング日記

【Web制作コース 111日目】

作業：なし

2024/2/23（金）プログラミング日記

【Web制作コース 112日目】

作業：2時間

作業内容

  1. 【中級編】DAY10 Tips1-4
PDAY10を完了する！
DDAY10　NEWSセクションのコーディング
　Tips1　デザインカンプと回答例コード
　Tips2　HTMLのコーディング
　Tips3　スマホのCSSのコーディング（レイアウト作成）
　Tips4　スマホのCSSのコーディング（3つのお知らせの作成）
Cいまさらながら
align item：高さ整列
text align：左右の整列
動画見て再認識した。DeepLで「align＝整列」と確認。ストレートな意味の単語だった
ADAY10完了！

2024/2/24（土）プログラミング日記

【Web制作コース 113日目】

作業：4時間

作業内容

  1. 【中級編】DAY10 Tips5-7
PDAY10を完了する！
DDAY10　NEWSセクションのコーディング
　Tips5　PCのCSSのコーディング
　Tips6　レスポンシブ時の見栄え確認
　Tips7　PerfectPixelを使ったチェック＆修正
CPerfectPixelの修正をまとめてしようと思っていた
でも、毎回修正しないと後々のコーディングに影響がすることに気づく
わからなさすぎてDiscord質問部屋で初質問した
ADAY10完了！

2024/2/25（日）プログラミング日記

【Web制作コース 114日目】

作業：4時間

作業内容

  1. 【中級編】DAY10 Tips7
PDAY10を完了する！
DDAY10　NEWSセクションのコーディング
　Tips7　PerfectPixelを使ったチェック＆修正
CPerfectPixel(pp)で修正
少しのコードミスで大きくpixelがずれると身に染みる
今日は%を入れ忘れただけで修正に1時間超かかった
けど解決！pp、講義動画、回答例コード確認の連続
ADAY11完了！

2024/2/26（月）プログラミング日記

【Web制作コース 115日目】

作業：10分

作業内容

  1. 【中級編】DAY11 Tips1-2
PDAY11を完了する！
DDAY11　ABOUTセクションのコーディング
　Tips1　デザインカンプと回答例コード
　Tips2　HTMLのコーディング
C家事＆子どものJAVA対応（GitHubとの連携を対応）で時間取れず
ADAY11完了！

2024/2/27（火）プログラミング日記

【Web制作コース 116日目】

作業：1時間

作業内容

  1. 【中級編】DAY11 Tips3
PDAY11を完了する！
DDAY11　ABOUTセクションのコーディング
　Tips3　スマホのCSSのコーディング（背景以外の見栄え）完了
Cposition: relative;
position: absolute;
2つをセットで使う整理ができてない
いずれにしてもペースを上げて行きたい！
ADAY11完了！

2024/2/28（水）プログラミング日記

【Web制作コース 117日目】

作業：2時間

作業内容

  1. 【中級編】DAY11 Tips4-8
PDAY11を完了する！
DDAY11　ABOUTセクションのコーディング
　Tips4 スマホのCSSのコーディング（円の背景）
　Tips5 スマホのCSSのコーディング（補足）
　Tips6 PCのCSSのコーディング
　Tips7 レスポンシブ時の見栄え確認
　Tips8 PerfectPixelを使ったチェック＆修正
C押さえておく👇のコードをNotionに備忘、たまに見返す！
ADAY12完了！
bakushin
bakushin

Notionに備忘したコード👇

position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: -1;

2024/2/29（木）プログラミング日記

【Web制作コース 118日目】

作業：1.5時間

作業内容

  1. 【中級編】DAY12 完了
PDAY12を完了する！
DDAY12　MOVIEセクションのコーディング完了！
　Tips1　デザインカンプと回答例コード
　Tips2　HTMLのコーディング
　Tips3　スマホのCSSのコーディング
　Tips4　PCのCSSのコーディング
　Tips5　レスポンシブ時の見栄え確認
　Tips6　PerfectPixelを使ったチェック＆修正
Cvertical-align: top;
ここ数日の動画で散見するけどイマイチ、、？
兄弟要素との相対的な位置に使われるとある
「相対的」はrelativeとabsoluteと同じメタ認知が必要かも
ADAY13完了！
bakushin
bakushin

vertical-align を理解するため参考にした記事

vertical-alignが効かない人は多分勘違いしている
知らなくても大丈夫(個人比)なプロパティですが、モヤモヤしている人は多いと思うので、今回はvertical-alignの解説です。 私がcss独学を初めた当時、あちこちのサイトに「text-align: centerは水平方向の中央寄せ、v
learning.mihune-web.com

コメント

タイトルとURLをコピーしました