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 and these designs on Figma:
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 and below is the design.
- Skills tested: CSS
- Difficulty: Easy
- Implement the header based on the designs.
- The navigation links should point to
- The "Open Dashboard" link already exists but needs to be adjusted to match the designs.
To run the app on your local machine use the following commands:
git clone https://github.com/profydev/prolog-app.git cd prolog-app npm install npm run dev
- The file you need to edit is pages/index.jsx inside the repository.
- Currently, styled-components 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
.tsxif 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.
- Integrate your code into the existing codebase.
- Add a Cypress test for the header to the existing test suite.
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.
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.