0

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 '19 at 7:33
  • I have elaborated my question. – Sean T Apr 29 '19 at 7:47
  • this is a question for UI/dev, not UX – colmcq Apr 29 '19 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 '19 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 '19 at 12:12
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 ---*/

* {
    font-family:sans-serif;
    margin:0; 
    padding:0;
    -webkit-appearance:none;
    appearance:none;
    text-decoration:none;
    box-sizing:border-box;
    outline:none;
}

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.