DEV Community

Joëlle
Joëlle

Posted on

3 2

Day 14 - Project - NYT Article - Part 1

It's now time to practice again all that I have learned.

The goal is to recreate this NYT article page.

With my last project, I realized that it was better to think about what I wanted to accomplish before I started coding. I created from mockup on paper and it forced me to taking into account how I was going to position some elements and see if I was missing containers. By the time I was done with the mockup, coding was easier and faster.

This time I used Figma on the recommendation of a Twitter friend and this is what I have so far.

Alt Text

I am deciding whether to use the Grid as it would be easy to make the page responsive using grid-template-areas.

I will be using .svg for the icons and see what's different.

Anyhow, have to be up early. I will start coding tomorrow and I can't wait to see what I learn.

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

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

Instrument, monitor, fix: a hands-on debugging session

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️