Skip to content
Submitted about 2 years ago

NodeJs | Express | Ejs | Tailwind

Vander Santos•1,750
@vanderms
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single-page design portfolio
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

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
    @codedforfreePosted about 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
    0
    Vander Santos•1,750
    @vandermsPosted about 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.

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord