htmlcss-test | コードジム

本選考のWebテストに必要な学習内容

理解度チェック

HTML&CSS 学習における理解度チェック

なぜHTMLとCSSを分けるのか？
idとclassの違いは何ですか？
要素 ( elements ) とは何ですか？
タグとは何ですか？
属性 ( attributes ) とは何ですか？
divとは何ですか？
セレクタ ( selectors ) とは何ですか。
プロパティ ( properties ) とは何ですか。
値 ( values ) とは何ですか？
URLのクエリ文字列とは何ですか？
pixelsとemsの違いは何ですか？
特定の要素のCSSスタイルはどのようにして継承されるのですか？
CSSを使って特定の要素のスタイルを設定したりするための3つの異なる方法とは？
flex-box はどのような時に使いますか？
marginとpadding の違いは何ですか？

HTML&CSSコーディング課題

はじめに

プレワークでは、簡易的なWebページ (Googleのトップページを模したもの) を実際にコーディングして、入校後のカリキュラムに備えましょう。
※プレワーク課題のコードレビュー、質問の受付は行いません。正解のコードも提示されません。予めご了承ください。

今回の目標

・Webページの構造がどうなっているか
・デザインの指示通りに、整って配置されているか
・要素に対して、どんなスタイル設定がされているか
を理解することです。
そのため、「リンクがうまく飛ばない」「検索ボックスが動かない」などの心配は必要はありません。HTML CSSについてステップを踏みながら理解していきましょう。

カリキュラムを始める前に知ってると役立つこと

これらのスキルはwebページを作成するときに役立ちます。
ご自身で調べて実践、もしくは方法を知ってるだけでも学習の進み方が変わるので覚えておきましょう。
1. 要素を配置する際のcssプロパティの種類
2. スクロールしても要素を一定の場所に固定する方法
3. 要素を中央揃えにする方法
4. HTMLでCSSを読み込む3つの方法 5. classとid、それぞれに対するセレクタの書き方
6. 基本的なフォームの作り方（送信できない状態で大丈夫です）

初級課題

下記URLのデザインをコーディングしてみましょう。
https://xd.adobe.com/view/c948b7a5-f6bb-436a-73e3-7c493502821b-bf79/
HTML / CSS初級のフォルダを作成し、その中に ” index.html ”ファイルを作成します。

XDの共有リンクの使い方下記URLの”デザインスペックからアセットをダウンロードする”の項目をみて指定のロゴをダウンロードしてください。 https://helpx.adobe.com/jp/xd/help/extract-assets-from-design-specs.html#Downloadassetsfromdesignspecs

アドバイス

・完璧主義になりすぎないことが大事です。
今回の課題ではHTMLとCSSの基礎の基礎を理解することが目的です。下記の再現は不要です。
・ピクセル単位で合わせる
・予測検索のドロップダウンメニュー
・検索ボタンを押した後に別ページに遷移
・ホバーの細かい指定
・CSSが上手く効かない場合はCSSプロパティを見直しましょう。
Firefoxを使用して-webkit-appearance: none; 、もしくは-moz-appearanceが効いてないか確認しましょう。