mock作成

nametake55 edited this page Jul 10, 2017 · 4 revisions

mock作成

課題の対象者

* HTML、CSS、Sassの基本知識(当強化施策のフェーズ1の課題が達成できる程度)を習得している人

  • HTML、CSSの基本知識(当強化施策のフェーズ1の課題が達成できる程度)を習得している人
  • 弥生のフロントエンジニアとして、実践的なHTMLやCSSの技術を身に付ける事を目指す人

課題のゴール

  • 弥生のフロントエンジニアとして、実践的なHTMLやCSSの技術を習得する

課題で得られること

  • 標準部品を利用し、mockを作成することができる

課題の内容

  1. コンポーネント設計と標準部品の使い方の説明
  2. mock実装
    以下の画面のmockを作成する。画面はいずれもレスポンシブ対応したもの
    mockの作成は共通部品を使う
  3. マイポータルログイン画面
    ・・・テキストフィールド、ボタン、リンク等、頻出のコンポーネントを使って構成された画面。コンポーネントが少な目のため、難易度は低め

課題のポイント

  • レビューの観点は、以下の観点で行う
    • 各ブレイクポイントの画面幅で表示した際に、以下の事象が発生していないか
      • 文字切れ
      • コンテンツがカードデザインから見切れる
      • 文字が重なる

課題の制約

* スタイルシートの記載はSass(SCSS)で行う

課題の置き場所

  • 【教材】Phase2
    →Readmeファイルに課題の説明を記載しています
    ※ただし、今回はSassのトレーニングを実施していないため、Sassの利用は必須ではありません
    「myportal_login_[画面サイズ].png」を参考に作成してください。
    今回のトレーニングでは、「myaccount_[画面サイズ].png」は作成対象外とします。

  • 【模範解答】Phase2

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.