Fully Responsive Page | Background Parallox Scrolling | Reactjs

Community feedback

• 

  Shashi Lo•1,345

  @shashiloPosted over 4 years ago

  Great job making this look like the design. I almost couldn't tell if there was a difference. But here's some items of improvement that I noticed:

  Design //

  • The buttons are a tad too large.
  • The columns for content are also too big. If you compared it to the design, you'll see what they should be set at.
  • I would not use ID's unless you need them as page anchors or Javascript selectors. It makes CSS more difficult for specificity sake.
  • The company logos are not spaced correctly.
  • The footer is a little off from the design.

  Code //

  • Instead of using 2 img's on the DOM, you can srcset. https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
  • Grid-gap and gap do not work with Flexbox. You should use CSS grid for areas that utilize multiple columns. It will be easier to maintain.
  • The way you're using your <a>'s, you should make them display: inline-block; so they use their real box model.

  1

  ---

  

  Sapinder•565

  @sapinder-palPosted over 4 years ago

  @shashilo Thank you very much for your deep feedback.

  For design part //

  • it doesn't concern me if it's pixel-perfect, or not, to match the design. I just take it as whether I can achieve it or not. I also don't pay to get the pixel-perfect information.

  For the code-part //

  • I highly appreciate you for introducing me to srcset. I'll make use of them next time.
  • I don't know what you mean by "gap* doesn't work for *flexbox". It seems to work whenever I use it (I've read on stackoverflow that gap works for flexbox, and it does for me too). -As far IDs are concerned, I, apart from necessary cases, I like to use them differentiate section containers from other classes. It also helps quickly identify them in the long code-lines. Ya it might not make sense and might lead to problems, but I adapt according to my needs.

  1

  

  Shashi Lo•1,345

  @shashiloPosted over 4 years ago

  @sapinder-pal Gap is only supported by Firefox at the moment. That's not ideal as you want to have coverage for all the major browsers. https://caniuse.com/#search=gap

  I totally understand your point on the design. I'm pixel perfect because every time I've worked with a designer to implement their design, they're very particular with you matching their design.

  0

  

  Sapinder•565

  @sapinder-palPosted over 4 years ago

  Look like I missed the support-thing for gap. Thanks for pointing out. Btw, at the time when I'd be dealing with clients, then it becomes crucial match their required designs. But for the practice part, it shouldn't matter that much. Thanks anyway!

  0