React Coding Challenge Wednesday - Build A Pixel-Perfect Header (Incl Screencast)
Tags: react, javascript, frontend, webdev
Published: 2022-09-07 10:27:40

---
title: React Coding Challenge Wednesday - Build A Pixel-Perfect Header (Incl Screencast)
published: true
description: Build A Pixel-Perfect Header Based On Figma Designs. Test your skills and prepare for job interviews by solving these challenges. They are based on a professional codebase and Figma designs.
tags: react, javascript, frontend, webdev
canonical_url: https://profy.dev/article/react-coding-challenges#1-style-a-header-based-on-designs
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0obape5sk5jpibjwhomf.png
---

*Every Wednesday for the next few weeks I'll share a new React coding challenge with increasing difficulty.*

Many new developers struggle with CSS. Understandably they rather use UI frameworks. But for a frontend developer working with designs and writing custom CSS is an important skill. Especially when they work on customer-facing products that don't use any of the polished UI libraries. 

So today, let's practice our CSS skills with a simple challenge. This (and all following challenges) are based on [this professionally created project on GitHub](https://github.com/profydev/prolog-app) and these designs on Figma:

[![React Coding Challenges - Figma Designs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovc2ie5zgnjgsk7es9yz.png)](https://www.figma.com/file/wUetHVcyl6e7bSKVkBefXv/React-Job-Simulator---Free-Challenges?node-id=0%3A1)

## The Challenge: Make A Header Pixel-Perfect

This challenge is a simple UI task: You build the header component for the application's landing page based on Figma designs. 

[Here is the current state of the website](https://prolog.profy.dev/) and below is the design.

![Design Header](https://media.graphassets.com/SlZQya2rQWeOWqP17Y4t)

- Skills tested: CSS
- Difficulty: Easy

### Tasks

- Implement the header based on the designs.
- The navigation links should point to `/`, `/products`, `/documentation`, and `/pricing`.
- The "Open Dashboard" link already exists but needs to be adjusted to match the designs.

### Resources

- [The repository](https://github.com/profydev/prolog-app)
- [The design on Figma.](https://www.figma.com/file/wUetHVcyl6e7bSKVkBefXv/React-Job-Simulator---Free-Challenges?node-id=0%3A1)

To run the app on your local machine use the following commands:

```bash
git clone https://github.com/profydev/prolog-app.git
cd prolog-app
npm install
npm run dev
```

### Hints

- The file you need to edit is [pages/index.jsx](https://github.com/profydev/prolog-app/blob/main/pages/index.jsx) inside the repository.
- Currently, [styled-components](https://styled-components.com/) is used for the CSS. I’d recommend using it as well for your code, but alternatively, you can use CSS modules or inline styles. The library doesn’t matter much here.
- The project itself is written in TypeScript but the file for this challenge is plain JSX. Feel free to change the file type to `.tsx` if you’re comfortable with that.
- If you need help because you’ve never worked with designs or you want to make them pixel-perfect, you can get additional resources when you drop your email in the form at the bottom of the page.

### If you want a tougher challenge you can try to

- Integrate your code into the existing codebase.
- Add a Cypress test for the header to the existing test suite.

## Solution

Here is the solution to this first task. This is basically what I'd expect a Junior candidate to build for such a challenge (maybe without making the CSS pixel-perfect). All the code is in a single file and not divided into separate components.

{% embed https://www.youtube.com/watch?v=vcWKcn1X_Ew %}

## Advanced Solution

Here you can watch me refactor the above solution to fit into the existing codebase. It uses the feature-based folder structure, the existing styled-components theme, and adds a Cypress test for the header.

I wouldn't expect this of a Junior candidate. Especially not in an unknown codebase. Still, it might be interesting to watch.

{% embed https://www.youtube.com/watch?v=TilZcA7G3fQ %}

[![Signup for access to all challenges, designs & solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oqvs91szeuav3loejxhk.png)](https://profy.dev/coding-challenges-signup?utm_source=rcc-header-1&utm_medium=devto)