Watch the three videos, or continue reading if you prefer to read.
This tutorial is available in video and textual form. Open the content.txt if you follow along with the tutorial and need the textual content.
It contains two pages, start.html with just the content and finished.html with the finished project.
#Bootstrap studio vs pinegrow trial
A copy of Pinegrow, a trial version will do. Enter the “new” kid on the block, CSS Grid. This allows the web designer to easily place html elements onto the page, but it does require the use of HTML markup that conforms to the framework developer’s CSS. Depending on the framework, this can be set-up behind the scenes using widths and margin, or more recently using flexbox. Frameworks like Bootstrap, typically have a grid system to help size and place items on the page. Let’s face it, putting together web page layouts can be quite painful and is one major reason people turn to frameworks. Along the way we will also look at some tricks and tips for using CSS Grid, as well as looking at the drawbacks. In this tutorial I’m going to walk through putting together a simple web page using CSS Grid using the visual tools of the Pinegrow Web Editor. Page layout is significantly easier than using traditional floats and widths, and best of all, Pinegrow has a variety of visual tools to help out! CSS Grid has gained much wider support, with virtually all modern browsers supporting it.