Chapter 5: Project section
Our projects include a title, a description, some tags indicating the technologies used to build the product, and an image. We'll use Grid to set up our column, and we'll use Grid again to set up each individual project. As before, we start with markup, add general styling, and then worry about layout.
Part 1: Marking up the HTML
Always start with markup! Start by marking up a single project item for the website. Here's some pointers:
-
This section is the main focus of our page, so we'll wrap it with a
mainelement. - Project titles will take H2's as we have an H1 elsewhere on the page.
Part 2: Styling and layout
With the markup in place, let's style for mobile dimensions and then desktop dimensions. Style the project as it would appear on a mobile device. We'll add desktop styles with media queries after that. You'll also need to style the tags.
Be sure to think about the background color for the project vs. the current background color.