DEV Community

Joëlle
Joëlle

Posted on

2

Day 2

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.

Alt Text

Tomorrow I will attempt to do one on my own.

On the next one!

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs