無料ユーザー登録で「300円クーポン」プレゼント!

模写教材を使って
フロントエンドのスキルアップをしよう!
CodeStepの無料模写教材を使ってより実践的な練習をしませんか? 作り方を迷ったときはメンターに相談、実践で使える技術を身につけよう。

模写教材一覧

【HTML / CSS】コーディング練習

【入門編】基礎学習を終えた後のウォーミングアップ用の練習サイト

【初級編】簡単なHTML、CSSでできるシンプルな練習サイト

【中級編】少し複雑なHTML、CSS、JavaScript(jQuery)を使用した練習サイト

【上級編】JavaScript(jQuery)をメインに使用した練習サイト

【番外編_HTML/CSS】Webサイト制作でよく使うHTML、CSSを練習

  • 疑似要素の練習

    記事のタイトルを疑似要素(before)で装飾します。

  • positionの練習

    positionを使って2つの要素を重ね合わせます。

  • 行数が異なる画像の横並びの練習

    左右で行数が異なる画像を横並びに配置します。

  • 画像を斜めに表示する練習

    CSSで画像を斜めに表示します。

  • ドロップダウンメニューの練習

    CSSでドロップダウンメニューを作ります。

【番外編_jQuery】Webサイト制作でよく使うjQueryを練習

  • アコーディオンメニュー

    jQueryを使ってアコーディオンメニューを実装します。

  • 複数画像をホバーで切り替え

    jQueryを使ってホバー時に画像の切り替えを行います。

  • プラグイン「slick」/スライダー

    プラグイン slick を使用してスライダーを実装します。

  • プラグイン「slick」/スライダー(カスタマイズ)

    プラグイン slick をカスタマイズします。

  • プラグイン「Datepicker」/カレンダー&入力チェック

    フォーム作成と入力チェックを実装します。

【WordPress】コーディング練習

【入門編】はじめてのWordPress練習サイト

【初級編】簡単なWordPressの練習サイト

【中級編】少し複雑なWordPressの練習サイト

  • Furniture Design

    ストアサイト(インテリア) / グリッドレイアウト

教えてくれるメンターを探す

今なら新規登録で300円クーポンがもらえる メンターを探してみよう!

スキルや予算を選んで、メンター(教えてくれる人)を
探すことができます。

  1. 1.メンターを探す

  2. 2.メンターと契約する

  3. 3.学習を開始する

メンターを探す