Order of design in HTML

HTML-CSS
#1

In designing a webpage or website we start with the HTML…And this is before applying CSS,my doubt is:

–First define the HTML right from NAV-bar to footer ,in order.

–or define which ever part of your webpage(like nav-bar or header,footer,content,advert),without any order and later use CSS position properties to position elements.

#2

You should start with HTML structure and page should make sense even without CSS. Putting footer before navbar makes no sense at all.

#3

Yeah,thats right,but what if we dont follow the order and use css position,is it a good practice

#4

you should always try to make your website readable with just html, or what would happen if the css can’t be loaded, or for people that can’t see the screen and use screen readers which rely completely on the html structure?

1 Like
#5


No it’s not.

#6

I think this is the order:

  • Make a mockup of how you wish your site looks

  • Now apply interactivity to your mockup.

  • Now think how your site responces in small screens

  • Iterate over this steps until you fell ok with everything

  • Based on the mockup make the skeleton of your site with you html and CSS classes that make sense even without css (as @jenovs said)

  • Apply the CSS to make your site looks like you sketched.

  • Apply the interactivity with JavaScript.

  • Apply the responsive design with media queries.

In all those steps, you have to think what are the best tools to solve it, I think it is better to never use style with HTML or JavaScript, and do not use Frameworks if the site is not complicated.

I hope you find this helpful

#7

Just in case you need more opinion, i second to what all others here said. Order is important in structuring your website.

#8

I do not believe there’s a standard way of doing it. However, my order would be HTML, CSS, Bootstrap (if any), JavaScript & jQuery

#9