Grid based design is creating a css framework to divide your page into grids. Using this structure makes web design more efficient cos you can snap your elements to the pre-existing grid using classes. A grid also adds order to a page to help distinguish between different types of information, so it's easier for the user to scan and navigate.
Your web design needs to be responsive because users will access your site from screens of many different sizes. If it's not responsive the design might look good on your screen, but is un-useable on tablet or phone screens.
Semantic structure is making the markdown of your code match the content of the page. For example, using the h1 tag to represent the most important heading on the page. Technically you could use h1 tags for all of your paragraphs and style them to be smaller with css, but this would be a dick move, cos it although it would work it would confuse the browser, and any other developers that are trying to work with your code.