I am new UI(ReactJS) Developer, I want to develop this webpage from scratch, however, I am not that experienced, hence, confused how to actually start. Should i start with logo or header or sidebar or containers. I also want containers and header to be responsive. Should i make use of Grid and flexbox, Should i completely develop the layout with Grid. What CSS reset should i implement. What is the recommended max-width, Is it okay to reset it like this

  padding: 0;
  margin: 0; 
  box-sizing: border-box

enter image description here Any other suggestions will be highly appreciated. Thank you !!

  • 1
    Can you please elaborate your question like supported browsers, resolutions, mobile responsive info's? Since, flex-box are not supported by older versions of some browsers.
    – Praveen
    Apr 29, 2019 at 7:33
  • I have elaborated my question.
    – Sean T
    Apr 29, 2019 at 7:47
  • this is a question for UI/dev, not UX
    – colmcq
    Apr 29, 2019 at 8:28
  • 1
    Regardless of where you ask this, it's quite a broad question and will most likely be closed. You need to narrow it down to a single problem, check How to Ask.
    – Luciano
    Apr 29, 2019 at 8:33
  • Not only is it broad but it's thoroughly off topic as it asks for programming decisions, opinion, and design implementation. ux.stackexchange.com/help/on-topic
    – Rob
    Apr 29, 2019 at 12:12

1 Answer 1


For the DOM structure, you may follow this - https://www.w3schools.com/html/html5_semantic_elements.asp

For CSS reset, I use this most of the time

/*--- css reset ---*/

* {

Preferably use grid to layout out the elements since it is going to be responsive. Because there is a sidebar, the max-width should be 100% with the sidebar comfortably placed on one side. The side-bar usually has fixed width (about 300px), then use the rest of the page-width for the content.

Not the answer you're looking for? Browse other questions tagged or ask your own question.