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 !!

closed as off-topic by colmcq, locationunknown, Shreyas Tripathy, Mayo, dennislees May 3 at 13:36

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Implementation are off-topic because this site is for User Experience design questions, not questions around how to implement these designs. Therefore, questions around the use of programs like Photoshop or languages such as CSS or JavaScript are off topic." – colmcq, locationunknown, Shreyas Tripathy, Mayo, dennislees
If this question can be reworded to fit the rules in the help center, please edit the question.

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