DEV Community

Joëlle
Joëlle

Posted on

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...

Top comments (0)