CSS Grid

CSS Grid Challenge: Portfolio Layout


This exercise challenges students to create a portfolio layout using CSS Grid. The layout will showcase multiple project cards, each containing a title, description, and thumbnail image.

HTML Structure:

CSS Challenge:

  1. Style the portfolio section: Apply styles to the .portfolio class using CSS Grid properties. You’ll need to define the grid layout with rows and columns to accommodate multiple project cards.
  2. Position the project cards: Style the .project-card elements to fit within individual grid cells.
  3. Layout the project content: Use CSS Grid to arrange the <h2>, <p>, and <img> elements within each project card.


  • Consider using grid-template-columns and grid-template-rows to define the grid structure.
  • Explore properties like grid-gap to add spacing between cards.
  • Use grid-column and grid-row to position project cards and their content within the grid.

So DO NOT forget to..

  1. Define Grid Layout: Use CSS Grid properties to define the number of columns and rows for the project cards in the .portfolio section. Consider how many cards you want to display per row on larger screens.
  2. Style Project Cards: Students might need to adjust styles for the project cards (including width and height) to fit the chosen grid layout.
  3. Content Arrangement: They can experiment with grid-column and grid-row properties to position the project title, description, and image within each card, ensuring a visually appealing layout.

Here is a solution file. Please DO NOT OPEN if you haven’t tried to solve it yourself first!!!

Challenge 2

Replicate a Modern Webpage Layout

Objective: The objective of this exercise is to replicate the layout of a modern webpage using HTML and CSS. By completing this exercise, you will practice your skills in structuring webpages and using CSS for layout design.


  1. Study the provided image of the modern webpage layout.
  2. Use HTML to structure the webpage, including elements such as header, navigation bar, main content area, and footer.
  3. Use CSS to style the webpage and create the layout as closely as possible to the provided image.
  4. Pay attention to details such as font sizes, colors, padding, and alignment to achieve a polished look.
  5. Ensure that the webpage is responsive and looks good on different screen sizes.

This is a solution file. Please DO NOT open if first you haven’t solve this yourself!!