frontend mentor's Creative Single Page

This is a frontendmentor.io project to build an webpage to design specifications that will look great on any device. The code and live application are hosted on github!

My Experience

I picked this frontendmentor project to get more experience with using Sass and Grid, and I was not disappointed.

The primary lesson learned was how to structure the HTML when there will be overlapping elements within a grid. Specifically, all the interacting elements will need to be within the same grid.

Secondly, CSS grid uses a parent to child relationship. Therefore, an element that will placed by the grid needs to be a child to the parent of the grid element. The child element may be a div that contains other elements, but grid will only place that container div. Grid will not be able to access any elements within the container div.

Up until this project, I have found nature divisions within a website to create distinct section's/div's. For this project, the design and services sections were combined to allow their elements to overlap when CSS grid was used for the tablet and desktop resolutions. Likewise, sections for displaying the projects and navigating those projects (carousel) were combined into a single div to allow their elements to overlap as well.

Going forward, I will be more aware of these overlapping elements and make sure to structure the HTML accordingly.