UI Practice - Homepage

I am looking for opportunities to explore more practices and polish my design skills. Here is my UI challenge for this week (from huke Web UI Bootcamp) and I summarized the main steps as well as what I have learned by working on this design.

Firstly, I used the layout setting from sketch to set the number of columns and the width of the column which would help to guide my further placement of the elements.

As I already had the content for the page, so the next step was to decide where should I put and consider the overall layout. By creating the squares and align with the columns that set in the layout setting before, I could have a general understanding of what my page will look like.

Above is the overall layout and once I was satisfied with that, the next step is to put the images, icons, and text in. The small trick is to use the image that will fill the empty "spot" on the page while emphasizing the product just like the headset box below.

Here is another "try" by changing the image

Things I have learned:

1. The application of the grid setting. The artboard of this homepage is 1280 x 720 and the number of columns is 24 and the column width is 40px.
2. The skills of using the grid to place and align the UI elements and decide the font size and the overall layout.
3. Be more familiar with the setting of the font size, font-weight, and line-height. The fonts used on the homepage are Bebas Neue (bold) for the title and Helvetica Neue for text.
4. A few ways to de-emphasize the text: by changing the font-weight, by changing the opacity or to set the color as the background color but a bit lighter.