Today I completed my lesson on CSS Grid. I was following a tutorial on a newsgrid website.

This time, I decided to watch the videos first and go back and attempt it myself. I normally code along but I felt that I was not taking in what was going on as much as I could. When I code along, I feel like I am only trying to complete it quick. Whereas, if I watch the video first, I understand better what I am doing.

I always type out the code instead of copying and pasting and one of the things that tends to happen is that I make a typo and suddenly something doesn't work. There is always a moment where I panic and think "OMG, I am copying this and I still can't get it". Then I go back and follow the logic to see where it breaks.

This happened again earlier. I was doing a grid that had 3 columns and each cell had a combination of text and image or just text. I could see the rows but I could not see the second and third columns. I was looking into the Developer tools on Chrome and Mozilla and could see that the grid-template-columns was applied. I then started looking at the result on the screen and noticed that the images were larger than they should be. I looked back in the CSS file and I had made a typo when setting the width. The images were still in their current sizes and pushing the other columns.

One of the biggest things that I learned with this project is the concept of containers. As we work with Flexbox and Grid, we need to understand the relationship between the container and the child items. I will research and write something regarding container and how to use them in HTML.

This is the result of one of the pages of the project.

Tomorrow I will attempt to do one on my own.

On the next one!