computingfreak/hi-performace-web-layout

This example shows the combined use of flex and grid techniques in creating high performance responsive layouts

hi-performance-web-layout

This old school example shows the combined use of flex and grid techniques in creating modern web designe, responsive layouts with high performance

HTML 5 sematical tags

I used HTML 5 sematical tags: header, nav, main, article, asside, footer to create layout.

CSS3 Media Query

For make responsive designe I used: media query, pseudo selector, flex and grid technick.

javaScript

Fixed position of main menu with js function onScroll. Used, alse js for make active mobile-menu.

Conclusion

high web performance with proper use of html, css and js according to prescribed w3c standards

Click on next image to see demo

Score of LightHouse

You can click on the next photo to directly testing performance of this example white google LightHouse