DEV Community

Joëlle
Joëlle

Posted on

1 1

Day 16 - Project -NYT Article Part 2

More of a busy day today.

Did about 2 hours of my Udacity program and then it was on to my NYT article project.

It is not complete yet but I think I might finish it within a day or two.

Alt Text

I had already completed the nav bar and the main picture was there. One of the first issue I encountered was centering it. It was so simple but yet I forgot.

margin:auto

That was it !

Once that was done, I moved to the image description. I usually work in a waterfall fashion and I have started thinking about my project before I start coding.

I find that in the beginning, it takes a while to accomplish anything and as I get to the middle, it's a matter of pasting and breezing through the code.

The next part was where the article actually starts. The section with the author's name and the social media icons.

Alt Text

The main content of this page is centered and the article content is centered within that.

One of the best tricks I have learned from Brad Traversy is the use of "utility classes". These are the lines of code that you are writing over and over. Therefore, instead of rewriting, you simply create a class and you add it to the HTML.

In order to get the narrow view of the article, I created a wrapper class that aligns the content to the left, sets the width to 50% of the main container for everything. I also set the margin to auto to center it.

As I am adding more paragraph, I simply add the class that I need.

Alt Text

This way, there is less CSS.

The streak continues...

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more