/twitter-markup

これからエンジニアを目指す人向けのTwitterマークアップ課題

Primary LanguageVue

twitter-markup

alt text

■デザインカンプ https://www.figma.com/file/PcQJNOAOEzE5SGmltN08jy/Twitter-UI-Clone-Design-(Community)?node-id=102%3A2022

CLIコマンド

#1. パッケージをインストール
npm install
#2. コードをフォーマット & 文法チェック
npm run lint
#3. ローカルの開発環境を起動
npm run dev

課題チェックポイント

  • gitを使ってfeatureブランチを作成し、remoteにpush。Pull Requestを作成する
  • CSSリセットを行う
  • 背景を真っ黒に指定する
  • 3列レイアウトを作成する
  • 左の列を分割してマークアップする
  • 真ん中の列を分割してマークアップする(1つずつのTweetを表示する方式で構わない)
  • 右の列を分割してマークアップする
  • なお、ガワだけのUIでいいものとする。

全てのボタンは押せる必要もなく、たとえばいいねボタンを押したらアニメーションが走る、アイコンを押すとプロフィールへリンクする、など全てのギミックは不要です。

その他

このプロジェクトは、npm init vue@2によって作成されました。