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
