コーディング練習問題

こちらの課題は、どなたでも活用いただけます。
・ポートフォリオ掲載可
・講師の方が授業での利用可
※転載、再配布、改変は禁止です。URLのシェアをお願いいたします。
※TwitterやInstagramでの公開もOK！
※現在テスト運用中なので、予告なく非公開になることがあります。

HTML/CSSでカードグリッドを模写する練習

完成図（カードグリッドの完成イメージ）→身につくスキル：カードグリッドの構造設計／余白調整／レスポンシブ対応 → 所要時間：30〜45分HTML/CSSでカードグリッドを模写する練習この課題では、カードグリッドをHTMLとCSSだけで作りま...

CSSレイアウトテクニックコーディング練習問題

HTML/CSSでカードレイアウトを模写する練習｜3枚カードUIを作る

完成図はアイキャッチの通り身につくスキル：カードレイアウトの基本構造／余白設計／ホバー表現所要時間：30〜45分HTML/CSSでカードレイアウトを模写して作る練習この課題では、シンプルなカードUIをHTMLとCSSだけで作ります。完成後は...

CSSレイアウトテクニックコーディング練習問題

【はじめて課題】Flexboxレイアウト練習

概要最初のコーディング課題として、フレックスボックスの基本とメディアクエリーの使い方をマスターしましょう。事前知識Flexbox■２つの要素を横並びにしたいときはFlexboxレイアウトを利用する。①まずは並べたいものをdivなどで囲み、そ...

コーディング練習問題

【はじめて課題】中央揃えレイアウト練習

概要最初のコーディング課題として、中央揃えの基本をマスターしましょう。事前知識■文字や画像の中央揃えをしたい中央にしたいものを囲む親要素に「text-align:center;」例：■エリア（ボックス）の中央揃えをしたい①必ず中央にしたいエ...

コーディング練習問題

コーディングを「身につける」ってどういうこと？初心者がぶつかる壁と乗り越えるヒント

コーディングを「身につける」ってどういうこと？初心者がぶつかる壁と乗り越えるヒントコーディングを学びたいと思っても、「結局どこまでできれば“身についた”って言えるんだろう？」と疑問に思ったことはありませんか？この記事では、「コーディングを身...

コーディング練習問題未分類

シンプルなHTMLとCSSファイルを新規作成してみよう！

概要 HTMLとCSSの新規作成 HTMLとCSSの接続タグの記述とclassの記入 CSSの記述初心者の場合、上記の基本的な工程が頭の中で繋がっていないことがよく見受けられます。この辺りをハードルとして挫折しないようにしていきたいです。...

コーディング練習問題

CSS超基礎課題

概要CSSに関する基礎的な課題です。CSS指定の第一歩として取り組みましょう。目的簡易なCSS装飾指定をできるようになる。(本当に基礎的なCSSの課題がWEB上に見当たらないので作成しました。) 文字装飾背景色指定背景画像指定要素のサ...

コーディング練習問題

プロフィールリンクのコーディング

概要上記の課題の続きです。サンプルこちらのサイトをコーディングしましょう。サイト幅横幅390px を想定する納品形式　htmlおよびCSSデータ一式参考サイト：目的簡易なWebページをコーディングできるようになる。作業内容作成したオリジ...

コーディング練習問題

WEBパーツコーディング課題

概要次の画像をデザインデータとしてコーディングし、WEBページとして作成してください。ウインドウサイズ 390px を想定する納品形式　htmlおよびcssファイル一式目的基本のCSSコーディングをマスターする。Webパーツのコーディングを...

コーディング練習問題

リンク・パス練習中級

概要画像のパスの仕組みを理解します。まずは初級に取り組んでからこちらの課題に取り組んでください。初期状態では画像が表示されていません。画像が表示されるようにパスを入力しましょう。目的aタグ/imgタグの使い方、相対パスの使用方法を理解する。...

コーディング練習問題

CSSアニメーション練習問題

概要ファイルを編集し、要素にアニメーションをつけてください。トランジションアニメーションはトランジションを使用することホバーしたら発動 3秒かけて背景が黒に変わるホバーを外す時もアニメーションが動くようにするキーフレームアニメーション...

コーディング練習問題

Gridレイアウト実践問題

概要ファイルを編集し、以下のようなレイアウトを作成してください。横並びにはグリッドレイアウトを使用することを使っても良い目的グリッドレイアウトの使い方の基本をマスターする。データ使用ソフトVisualStudioCode答え（作業完了後...

コーディング練習問題

次のページ

1 2 3