VT-Sase / VT-Sase/VT-Sase.github.io

React - Make the Year-In-Review Page Mobile-Responsive

Open
#42 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

mobile react-website
Dominant language
HTML
Stars
3
Forks
0
Avg merge
7m
Merged PRs (30d)
2

Description

  • With the "Year-In-Review" component finally created for desktop, this task is important to ensure that this React component is mobile-responsive. Ideally, we need to support all devices, not just on the desktop/laptop, as web developers.
  • As a baseline, please configure the styling of your React component to support not just the desktop/laptop devices but also common phone devices - 1 Apple and 1 Android (e.g. please support for this task: the I-Phone SE and Samsung Galaxy S8+).
  • You may be asking, how can we verify this? To visually test this, on Google Chrome, please right click on Windows (or two-finger click on Mac), click "Inspect", go to the top left of the Google Chrome developer tools menu and select the Laptop-Phone Icon, and change the Dimensions to each of these devices, respectively, to test out your designs.
  • Once the UI design looks solid, then you have completed with this task and no longer need to modify the React component styling further.
  • Have questions? Please ask either Andrew or Pierre on Discord or at our TA office hours sessions at TORG 1070.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the existing React Year-In-Review component and reviewing its current styling. Use Chrome DevTools device emulation for an iPhone SE and Samsung Galaxy S8+; done means the page is visually usable at both phone sizes as well as desktop.

Written by the indexing model from the issue text.

Assessment

Tech stack
react
Domain
frontend, web-dev
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.