What is the best way to start designing this website? [closed]

Question

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
}`

Any other suggestions will be highly appreciated. Thank you !!

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 ---*/

* {
    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.