Your Free Website Template #402
With Flexbox
Flexbox is just another tool that you can add to your web development arsenal.
It takes all the work out of structuring a page with multiple columns. No more left, right, middle , inner-left or inner-third and sitting with a calculator figuring margins and padding.
Less is More
I've tried to construct these templates with as little HTML code as possible.
Flexbox is the same. With flexbox, less is more. Let it do the work of controlling page structure. It isn't designed for text flow or image placement.
I advise novice web developers to spend more time studying CSS and Responsive Web Design techniques. Learn to manipulate font-size, line-height, margins and padding using the Clamp Function.
Drop down Menu
The style sheet for the drop down menus is one from our free navbar collection. It was installed by adding a linked style sheet in the head section of the template document.
It is coupled with the Modal Menu (javascript) that kicks in for smaller devices when the drop down menu is hidden.
Optimize Images
The best way to optimize your images these days is to convert them to one of the newer file formats. We demonstrate using an avif image and providing the fallback png image for older browsers.
There are a lot of fallback codes out there that don't work. This one does.
Pixels Should Be Dead to You
Modern design requires that you move from using pixels to define font-size, line-height, margins, padding, width and height measurements to ems or rems and dynamic viewport width and height percentages.
Dark Mode
For dark mode enthusiasts we offer a very basic example that's good for very small websites or the long scrolling one page versions.