In these elements, we used font awesome icons in our social button and also used background RGB colour to show the best user interface. So here we designed a simple login form using Pug with some basic CSS. Pug has a top-level of features like loop, conditions, operate, mixins and also different types of written tags. Pugis an HTML template engine that is built in Node.js with easy-to-write code. One of the most popular HTML template engines directs compilation and generates an HTML file. Source Files included: – Pug Cli, External CSS and Image. Jade form example, jade login form, Login Form In Pug, Login Form In Pug (jade), pug bootstrap, pug button onclick, pug form onsubmit, pug form select, pug template, pug tutorial point, responsive Login Form In Pug Login Form In Pug My goal was to show you how to create a simple login page with express and pug. It’s finish, we do it static, with out database. Open public/stylesheets/style.css and change codes: html, body module.exports=login I want to create a login page like this sample :

so have to change the view/layout.pug like below : doctype html html head title= title link(rel='stylesheet', href=' ') link(rel='stylesheet', href='./stylesheets/style.css') body block content script(src=' ') script(src=' ') script(src=' ')

Now run the code below to start server on port 3000. we want to work with pug template engine, so we have to include ` - view=pug` in our command. This command will create an express project with some needed dependencies. Now initial our project : $ cd /var/www/html $ mkdir expressLogin $ cd expressLogin $ npm initĮxpress will ask you some questions, answer those and go to next step. įirst install express generator to configure our project as well : npm install express-generator -g

The main reason that i decide to write this article, is to show you how much is cute to write your UI with pug, this login page is so simple an Database less.

Pug template button