A grid-based design is one that works in and around the constraints of a row-and-column-based grid system to help keep your content nicely aligned.
Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries.
Semantic structure is a way of writing and structuring your HTML so that it reinforces the semantics of the content rather than its appearance. They’re chosen based on the importance and structure of the content. While HTML has included semantic markup from the beginning, the advent of HTML5 brought with it even more semantic tags such as 'section', 'article', 'footer', 'nav', and 'aside'. The goal is to make it easier for browsers, developers, and crawlers to distinguish between different types of data. All of these semantic tags make it clearer what information is on the webpage as well as its importance.
Bootstrap seems interesting and useful tool. "Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes."
Boxifying design means dividing all the HTML elements in boxes. You can starting boxifying your design by putting the whole page in a big box, then break down each part of the page into smaller boxes making your way into each HTML element.
Any HTML element can be considered a box, and so the box model applies to all HTML elements for the design and layout. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model: