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 Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

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