All comments

• 

  malhar016• 20

  @malhar016

  Submitted 4 months ago

  What are you most proud of, and what would you do differently next time?

  Modularizing the UI small components made the rest of the part very smooth. Also, use of css grid, media query and styling SVGs was some of my weak areas so I am glad I could practice with this.

  The readme template was awesome, if provided like this I would defiantly put read me for all my projects.

  I have worked more on web-apps then mobile-apps so mobile-first UI doesn't come naturally to me.

  What challenges did you encounter, and how did you overcome them?

  I couldn't place the background SVGs dynamically as each one needed different positions so checked some submitted gits and took reference of their styling.

  What specific areas of your project would you like help with?

  CSS - I think for this small app I have so much classes if I can get some refacotring advice on them then it would be nice.

  Mobile-First: Is it really needed? Why? What are the drawbacks if I don't follow it really.

  

  CSS Grid, Flexbox, React

  2

  41

  

  Luke• 140

  @lukeSchwade

  Posted 4 months ago

  Looks great! So, to answer your question about Mobile-first, it's mainly because

  • a majority of web traffic is mobile (over 55%, more or less depending on the kind of website) so it stands to reason that you want to think about your biggest demographic first. This is reason enough in a professional environment, but also

  • Web designs are straightforward compared to mobile. Open any website, and notice that all the content is (usually) single-column centred with whitespace on both sides, which is easier for the eyes to track; you don't have all that wiggle room when everything has to fit snugly (but not too snugly) on a 425px wide mobile screen. It makes sense to tackle the more complicated problem first, then just add breakpoints for the easier problem.

  Think of it like this: your job is to squeeze 30 boxes of stuff into 1) a warehouse, and 2) a storage closet. The first problem is trivial, so you should start by solving the real challenge, which gets you thinking about what parts are essential (eg. do we really need this widget for the small version?)

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  AntennaeVY• 110

  @AntennaeVY

  Submitted 4 months ago

  What are you most proud of, and what would you do differently next time?

  I did it

  What challenges did you encounter, and how did you overcome them?

  None

  What specific areas of your project would you like help with?

  How to animate the accordion & icon? the content snaps

  

  FAQ accordion

  1

  30

  

  Luke• 140

  @lukeSchwade

  Posted 4 months ago

  If you want to dip into JS, I used this tutorial which was pretty straightforward, and was a great way to learn about constructing objects.

  A bug I ran into was the code uses element.offsetHeight, which doesn't include the margins of elements and the animation will be jerky if your <summary> and content is separated by a margin, so to fix it you have to add the elements margins into the calculation (hardcoded or otherwise), eg

  const endHeight = `${this.summary.offsetHeight + this.content.offsetHeight}px`;

  had to be changed to

  const endHeight = `${this.summary.offsetHeight + this.content.offsetHeight + 16}px`;

  (16px was height of my margin on <summary>, will be different if your elements have different margins in different places)

  0