未経験独学が初めて模写コーディングに挑んでみた。
こんにちは。
今回は超初心者向けの模写コーディングにチャレンジしてみました。
模写コーディングのルール
模写コーディングのルールは以下。
①わからなくても正解を見ない。自力で調べる。
②完璧でなくてもOK。そのままコピーは難しいので似たようなサイト作りを目指します。
今回はこちらのコーディング練習サイト（https://code-step.com/coding-recommend/）
から模写コーディングのお手本を探し、
超初心者向けの模写コーディングをしてみました。
以下のサイトがお手本です。
簡単なプロフィールサイトですね。
正直このくらいならできるだろうと思いましたが、
かなり時間がかかりました。汗
こんなところでスタックしているようでは先が思いやられる、、、
自分の備忘録として今回わからなかった、時間がかかった部分について記載しようと思います。
つまずいた部分2点
ヘッダーの部分はスムーズにいきました。
*つまずいた部分パート① display:flex
続いてこの部分を作るのに苦戦しました。
この画像は左に配置されて、右にタイトルと説明文がある構造の作り方がわからなかったのです。
色々調べた結果、
まず親要素にdisplay:flex;を使用して一旦全ての要素を横並びにしました。
その後にタイトルと説明文をまた DIVタグで囲い、そこにclassをつけて、flex-direction:columnを適用したところ、うまくできました！
*つまずいた部分パート② 画像の調整
あともう1点は、画像はお手本サイトではなくオリジナルのものを使用したのですが、
メインの画像を挿入したところ、画像が横に伸びて荒くなってしまったのです。
これのなおし方がわからなかったのですが、
対象のimgタグに対して、width:100%; とheightを設定し、object-fit: cover;を設定したところ無事なおすことができました！
これが
こうなりました。
明日はレスポンシブ対応するようにまたコード書いて、
次のサイトの模写にチャレンジしていこうと思います。
今後も転職活動の記録、学習記録を残していこうと思います。
Discussion