模写コーディング

HTML、CSS、JavaScriptの基礎を学んだら、模写コーディングにチャレンジしてみましょう！

制限はありませんが、「リセットCSS」を使用することをオススメします。

作成したファイルをサーバにアップする場合は、Googleの検索に反映しないよう、必ずhead内に以下のコードを追加してください。

<meta name="robots" content="noindex,nofollow">

練習課題1

PC版のみのページ制作です。

シンプルなレイアウトですが、基本の復習になるかと思います。

PC版とスマートフォン版のレスポンジブ対応ページ制作課題です。

1ページものですが、フルスクリーンの背景など、今風のデザインとなっています。

こちらは合同会社PENGIN様のWebサイトで配布しているものを掲載しております。

フォントファミリーと余白だけ調整しています。

元データの配布ページはこちらから。