Frontend Mentor | NodeJs | Express | Ejs | Tailwind coding challenge solution

Solution retrospective

That's not the first time "I build a bazooka to kill a mosquito", but this solution needs an explanation: usually, I use frameworks to build simple projects because the development process is faster. I mean is much faster to implement a landing page with, e.g., vite + react + tailwind than with html + vanilla css.

However, in this solution, I used Nodejs + Express + Ejs template engine, and the process development was quite slow (the main reasons were netlify dev does not have live reloading and I lost time searching for a good extension for ejs files in vscode).

And as if that weren't enough I had a hard time trying to figure out how to deploy the landing page to Netlify (Express running serverless functions is something pretty well documented, but not with template engines).

But the reason I chose to use Nodejs for this project is precisely because I am studying the deployment process of nodejs applications in Netlify and in serverless functions, in general, and I would like to test with a project as simple as possible.

But despite that, feel free to leave any feedback. I will surely appreciate it.

Community feedback

Plinsinga• 310

@codedforfree

Posted almost 2 years ago

Hee @vanderms,

Looks good. I'm a strong believer in tailwind and was peaking in your solution to make the skill boxes pixel-perfect. In my opinion, the design was just a bit off ;). But what do you think? Would you do this

<ul class="grid grid-cols-2 gap-6 grid-rows-[22.75rem_11.375rem_9.875rem_11.375rem_11.375rem]
      md:grid-cols-4 md:grid-rows-[11.375rem_9.875rem_11.375rem]
      xl:grid-cols-6 xl:grid-rows-[11.375rem_9.875rem]
      [&>li]:rounded-lg [&_span]:headline-sm [&>li]:text-neutral
      [&>li]:p-6 [&>li]:grid [&>li]:grid-cols-1 [&>li]:content-between [&_img]:justify-self-end
      ">

in a real-world project? Or would you just make them a logical size? I made them a logical size, but of course only if the designs are only off by a few pixels.

P.s. Love the way you make use of the new tailwind options for child items!

Marked as helpful

Vander Santos• 1,750

@vanderms

Posted almost 2 years ago

Hi @codedforfree , thanks for you comment.

I prefer to use logical sizes as often as possible. The code gets more readable and usually, in my opinion, the design is more consistent.

But I think in a real project it depends on how much freedom I have to implement the design. If the designer wants the site implemented as close to the design as possible, I will do it.

But there some things that I just ignore to make my life easy, like the font size of the title "My Work". In the original design the font size of this section was different from the font size of all other sections only on the desktop viewport.

But what really bothers me is when I see some serious acessibility issue like font-size: 10px or text color with no contrast with the background.

NodeJs | Express | Ejs | Tailwind

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community