WithCodeMedia-1-pc
WithCodeMedia-2-pc
WithCodeMedia-3-pc
WithCodeMedia-4-pc
previous arrowprevious arrow
next arrownext arrow

WithCodeMedia-1-sp
WithCodeMedia-2-sp
WithCodeMedia-3-sp
WithCodeMedia-4-sp
previous arrowprevious arrow
next arrownext arrow

【HTML/CSS コーディング練習】入門編:ペットページ

WithCode生が受講内のカリキュラムで制作したものになります!

Web制作を勉強されている方の中で、基本的な文法事項やデザインツールの勉強方法を学んだが、実際にホームページやランディングページを作ったことがないという方は多いのではないでしょうか?

そのような方のために、Web制作会社が運営するプログラミングスクール「WithCode」から、模写コーディングに活用できるデザインカンプ・ソースコードを大公開します!

今回は、模写サイトの「第一弾」になります!ペットのお預けサービスのページとなっており、ランディングページであることが今回の特徴です!

実際の案件だった場合の想定単価・納期・仕様も公開しますので、Web制作・Webデザインを学習中の方は、ぜひ積極的にご活用ください!

目次

練習方法

模写コーディングの練習方法は2種類あります。ご自身のスキルレベルに応じて、選んでください。

模写コーディングが難しいという方は、ソースコードを丸写しする写経からお試しください!

  1. 模写コーディング
    公開している「デモサイト」を見ながらソースコードを写していく方法です。実際のサイトの動きを見ながら作成します。
  2. デザインカンプコーディング
    次章以降に公開している想定仕様とデザインカンプを見ながら、実際のサイトを見ずにコーディングする方法です。こちらの方が難易度は高いと言えます。

事前確認事項

前提として、模写コーディングをするにあたり、可能な限りソースコードは見ないようにしましょう。また、細かいフォント等にもこだわらず、同じようなデザインを自分の技術力で再現できるか確認しましょう!

検証ツール等で確認しながら進めることは問題ありません!

まずは、デザインを確認して全体のレイアウト構成を考えてから、各パーツのレイアウト構成決めてコーディングを始めましょう。

デモサイトを見ながらコーディングする際は、フェードインやホバーアクションなどのアニメーションを確認するようにしましょう。

完成イメージ

PC表示

依頼内容

概要

ペットの預かりサービスのランディングページの制作。
レスポンシブの実装は不要なので、PC表示のみのコーディング。

想定単価

コーディングページ(1p):3万円

素材

デザインデータ

↓ Figma デザインカンプ

ダウンロードファイルを開くには、ツールのアカウントまたはインストールが必要です。

コーディング仕様

  • コンテンツの幅
    横幅が1500px、 内部コンテンツが900pxです。
  • fv
    背景画像の上に要素を配置します。
  • worry
    3つのブロックを横並びに配置します。
  • service
    同じレイアウトのブロックを3つ縦並びに配置します。
  • voice
    4つのブロックを横並びに配置します。
  • fee
    2つの白背景ブロックを横並びに配置します。
  • contact
    form/label/input/buttonタグでフォームを配置します。
  • レスポンシブ対応
    非対応。
  • 必要な機能
    ボタンホバー実装

確認作業

コーディングが完了したら、以下の「デモサイト」と「ソースコード」を参考に、レイアウトとコードをチェックしてみましょう!

デモサイト

デモサイトとコーディングしたサイトを比較して、デザインや動きなどを確認してみましょう。

ソースコード

コーディング例です。コーディングの方法に正解はないので、あくまでも参考としてご自身のコードと比較しながら確認してみましょう。

WithCodeを体験できる初級コース公開中!

初級コース(¥49,800)が完全無料に!

  • 期間:1週間
  • 学習内容:
    ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
    正しい学習方法で「確かな成長」を実感できるカリキュラム。

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか?

未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください!

この記事を書いた人

WithCode(ウィズコード)は「目指すなら稼げる人材」というコンセンプトを掲げ、累計300名以上の卒業生を輩出してきたプログラミングスクールです。Web制作・Webデザインに関する役立つ情報や有意義な情報を発信していきます。

– service –WithCodeの運営サービス

  • WithCode
    - ウィズコード -

    スクール

    「未経験」から
    現場で通用する
    スキルを身に付けよう!

    詳細はこちら
  • WithFree
    - ウィズフリ -

    実案件サポート

    制作会社のサポート下で
    実務経験を積んでいこう!

    詳細はこちら
  • WithCareer
    - ウィズキャリ -

    就転職サポート

    大手エージェントのサポート下で
    キャリアアップを目指そう!

    詳細はこちら

公式サイト より
今すぐ
無料カウンセリング
予約!

目次