テキスト目次 > HTMLとCSSの基礎 > 習得度確認演習~HTMLとCSSの基礎~
下記リンクに格納されている「デスクトップ用.pdf」を開きデザインを再現するコーディングを行なってください。
「デスクトップ用.pdf」のコーディングが終了いたしましたら、「レスポンシブ用.pdf」ファイルを開き下記仕様を含むコードの追記を行なってください。
- 1000px以下の際に赤と青の枠のコンテンツを縦並びにしセンターに寄せる
本演習の目的
HTML、CSSの基礎学習お疲れ様でした！ここまで学習された皆さんは基礎のインプットは完了しております。とはいえ、座学として学んだことが不明瞭な状態ではあるかと思いますのでアウトプットの場として本演習に取り組んでいただければと思っております。初めてのアウトプットの場となる為、簡単には進まないところも多いかと思いますが、ご安心ください！本演習の目的は下記2点となるため、初見で完璧にできることは求めておりません。
- 理解が不明瞭な箇所を明確する
- 上手くいかない箇所を言語化する
断片的なチェックテストとテキストを読むだけでは、なんとなく理解した気になって実際には理解しきれていない箇所がたくさんあります。何が理解できていないのかを自己認識し、何が上手くいっておらずどういう挙動をさせたいのかを言語化する癖をつけていきましょう！
進め方について
- 「ポートフォリオ_氏名」というフォルダ名で新たに作業用のフォルダを作成ください。
- フォントや色、余白など細かいところにはこだわらずに進めていただいて構いません。
- 画像については https://stock.adobe.com/jp/collections/yaMTigUJbFIHlzOM4Q7i1SiqFGDgRuFm よりお好きなものをお使いいただいて構いません。
- 絶対パスは用いず相対パスを用いてください。
- cssは別ファイルにて用意し、外部ファイルを読み込み形式にて適用ください。
- 学習予定日に1日の作業が終わりましたらドライブにコードをアップし進捗ください。
不明点があった場合
- 個別のドライブリンクにコードをフォルダ毎アップロードしてください。
- 上手くいかない箇所をできる限り言語し一度検索していてください。
- どこがどのようにうまくいかないか、何を試したのか、調べてどのサイトを参考に見たのかをセットで可能な限り具体的にチャットを投げてください。言語化できるようにすることはとても重要です！
※とはいえ、言語化するのが難しいことも多いので抽象的な言葉でも遠慮なくお気軽に質問ください！
