Portfolio Project

CSS Grid Layout Challenge

Building layouts for the web is a fundamental skill of being a web developer.

There are common layouts that you will encounter throughout your career that span industries. e.g. Admin dashboard, tiered pricing page, message board, etc.

While the individual style and look can vary, the underlying structure and goals are the same. In this mobile-first age, pages need to work well on any number of screen sizes and be flexible enough for the varying content that they could contain.

This is where CSS Grid can help you level up your developer skills. CSS Grid is a (relatively) new technology that allows you to problem solve at the page-layout level. You can create two-dimensional layouts that adapt content to the available space and intelligently size and position items within its bounds.

Learning CSS Grid may seem difficult, and this is because it presents new layout ideas and a different syntax in CSS. But it can be broken down into powerful patterns that when used together can blow your mind and change the way you create layouts for the web.

These patterns can be learned through deliberate practice.

This project's goal is to help you prove to yourself and others that you have the skills necessary for making a flexible and responsive two-dimensional layout using CSS Grid.

Challenges

Considering the following scenario as you work through the two different layout challenges:

Your team is developing a new product. Designers on your team have handed you Figma files that mock up the general structure of the new product your team is shipping. One is the pricing page and the other is a CRM dashboard.

Your goal is to implement these page layouts using the mockups through CSS Grid. You are not responsible for providing the content, data, or implementing the functionality. You are only expected to implement the layout using CSS and HTML.

Both are common layouts that you will find all over the web and are used to serve as inspiration for you to build a killer layout that shows you know CSS Grid.

Do both if you are up for it! 💪

Project Challenges

Pricing Page Layout

The team plans on selling the new product in 3 tiers. Each tier should be represented on the screen as a card with the highest centered in the middle. You'll need to collapse the cards into a single column on mobile views with the middle tier positioned on top.

Download Figma File

Dashboard Page Layout

The team is building a CRM dashboard to keep track of clients. The dashboard consists of 3 main sections. The contact section, milestones section, and a group chat section. These 3 sections need to be responsive and should contain nested grids for the individual items.

Download Figma File

Outcome

Regardless of the layout challenge you chose, the outcomes will be the same.

You'll prove that you know how to:

  • Break page content into sections
  • Create a responsive layout
  • Align elements within layouts
  • Structure section layouts with nested Grids

Whether you are looking for a job or want to start using this technology at work, this portfolio piece will serve as a testament to the hard-won skills that you have earned.

💰 Pricing Page Challenge

  1. Review the pricing page layout in Figma
  2. Create an index.html file
  3. Link a CSS file to the index.html file
  4. Create the navbar, body and footer using HTML
  5. Define the main sections of your layout using CSS Grid (navbar, body and footer)
  6. Create 3 cards that represent product plans
  7. The tier cards should be responsive on all viewports.

🧮 Dashboard Page Challenge

  1. Review the dashboard page layout in Figma
  2. Create an index.html file
  3. Link a CSS file to the index.html file
  4. Create the navbar, body and footer using HTML
  5. Define the main sections of your layout using CSS Grid (navbar, body and footer)
  6. Define a contact section, milestones section, and a group chat section using CSS Grid
  7. The page should be responsive.

Self-Study Questions

As you work through the course and the challenge, demonstrate your understanding by answering the following free-form questions.

  • When should I introduce CSS Grid into my projects?
  • How can I keep accessibility in mind when creating two-dimensional layouts?
  • When should I use CSS Grid with/or without Flexbox?

Do you have a good answer to these questions? Consider writing a blog post! 😉

Best Practices

As you work through the challenges please keep the following best practices.

  • Grid is responsive without using media queries
  • Grid areas contain implicit line names
  • The fr unit is used to calculate available space (let the browser do the math)
  • Nested layouts are used to reduce complexity
  • CSS Grid Inspector is used to examine grid layouts

As you start this challenge, use Build Modern Layouts with CSS Grid as a guide for problem-solving the different aspects of CSS Grid.

The course will provide the fundamentals for using CSS Grid, while the challenges will push you to understand CSS Grid at a deeper level.

Submission

Did you complete the Portfolio Project Challenge? Let us know what you built!

Tweet @eggheadio