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!

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

While many AI coding tools operate as simple command-response systems, Qodo Gen 1.0 represents the next generation: autonomous, multi-step problem-solving agents that work alongside you.

Read full post

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more