This example creates a website using Node.js to provide a logical website behavior. Using the Express.js framework, the website is implemented as a web application, with logical routing to other sections of the website.
HTML and CSS are based on our responsive website design using CSS Grid and Flexbox. The HTML code is refactored as a template so that the layout code can be reused when adding new pages.
Reading: How to create a website with node js
Install Node
Node.js, also called Node , is a runtime environment for writing server-side applications in JavaScript.
Download the Node installer from the official Node.js download site. Select the LTS (Long Term Support) version for your operating system.
Windows and macOS
Open the Node installer (.msi on Windows , .pkg on macOS).
On Windows, on the installation screen labeled Tools for Native Modules, check the Install required automatically check box Tools.
Linux
On Linux systems, you can install Node using your package manager, install the compiled binaries manually, or build Node from source. For detailed information, see the official Node.js installation wiki.
All operating systems
Once the installation is complete, open a terminal or command prompt window. Run the following command to update npm, the Node package manager. The -g (global) switch specifies that the software will be installed system-wide, not just the current node app.
Windows
npm install -g npm
Linux and macOS
sudo npm install -g npm
Finally, use npm to install the express-generator application globally.
Windows
npm install -g express-generator
Linux and macOS
sudo npm install -g express-generator
Create a new express app
Generate in a terminal or command prompt window a new Express.js app. In our example, the app name is myapp and the view engine is specified as pug.
express myapp -view=”pug”
Change directory to the new Express app.
cd myapp
In the Express app directory, use npm install to download and install the required dependencies, as shown in the package.json ”.
p> npm install
If security updates are available for the installed dependencies, a notification will be displayed.
1 low severity vulnerability found, run `npm audit fix` to fix it fix, or `npm audit` for details
If yes, apply the security fixes.
npm audit fix
Install nodemon
Install in the Express App Directory nodemon. The -save-dev option specifies that nodemon is a development dependency. It is not used in the application itself, but is a tool used during development.
npm install -save-dev nodemon
Adding a startup script for development
A Development startup script provides a way to start your web application with options to help you develop the app, e.g. For example, detailed error messages.
In a text editor, open the package.json file in the app directory. This JSON file specifies the dependencies used by your node app. It also contains named startup scripts that start the application in different ways.
In the package.json file, locate the scripts entry. By default it contains only one script (“start”).
“scripts”: { “start”: “node ./bin/www” },
Add a new line defining a script devstart as follows.
Linux and macOS
“scripts”: { “start”: “node ./bin/www”, “devstart”: “DEBUG =myapp:* nodemon ./bin/www” },
Windows
“scripts”: { “start”: “node ./bin/www”, “devstart”: “SET DEBUG=myapp:* & nodemon ./bin/www” },
These scripts (“start” and “devstart”) can be run by running the npm run Script name.
The npm run devstart command starts the app with two additional development features enabled.
- The Die Environment variable DEBUG is set and specifies that the console log and error pages such as HTTP 404 display additional information such as a stack trace.
- Additionally nodemon monitors certain important website files. If you change these files, e.g. For example, if you redesign a page or change static content, nodemon will automatically restart the server to reflect the changes.
Start the web server in development mode.
npm run devstart
Preview the web application
When the application is running, your computer acts as a web server and serves HTTP on port 3000.
See also: How to Build a Subscription Website (Step by Step Tutorial)
To preview the website, open a web browser to the address localhost:3000.
Any device connected to your local network can see the application at the address ipaddress:3000, where ipaddress is the local IP address of the computer running the app.
To preview the site on a mobile device, connect its WiFi to your local network and open the address in a browser.
HTML templates
Our example uses CSS , JavaScript and HTML from Building a Responsive Website with CSS Grid and Flexbox. CSS and JavaScript are used verbatim. The HTML code is transformed into a template language.
When using a template language, the layout code is only written once and is adopted by other pages.
The software, that converts a template to its final format is called a template processor. In the context of HTML, a template processor is called a View Engine.
Express.js supports several view engines, including Pug.
Pug overview
The Pug language describes HTML documents in a way that offers benefits and additional functionality. Pug files are rendered in HTML when the user requests them.
Pug’s language syntax eliminates the need to close tags or enclose them in parentheses. It also supports inherited templates, iterations, conditionals, and JavaScript evaluation.
Example HTML to Pug conversion
These are the first few lines of HTML from the Creation of a responsive website with CSS Grid and Flexbox.
☰
In Pug, the same HTML can be written like this.
doctype html html head meta(name=”viewport” content=”width=device-width, initial-scale=1″) meta ( charset=”utf-8″) title title link(rel=”stylesheet”, href=”index.css”) script(src=”index.js”) body #menu section#menuitems .menubutton h1.menubutton(onclick = “menuToggle(‘hide’)”) ☰
Element tag s are written without brackets. Child elements are indented. The level of indentation determines the scope of an element, so closing tags are not required.
The CSS selectors “id” and “class” can be written as element#id, element.class, element#id.class, etc. If no element is specified, the element is assumed to be a div. For example,
After the element name and its selectors , attributes in parentheses as a comma-separated list. For example:
HTML
Pug
.button(onmouseover= “glow()”, onclick=”start()”)
List multiple items in one line
If the item is followed by a colon (:), it will be able follow a child on the same line. The following two sections of Pug produce the same HTML output.
a(href=”/home”) p Home a(href=”/home”): p Home
Both of the above are rendered in following HTML.
Home
Evaluate JavaScript
If the element is followed by an equal sign ( =), everything following this line will be interpreted as buffered code. The code is evaluated as JavaScript and the output is “buffered” (included as the element’s content). In its simplest form, buffered code can be the name of a variable passed from the application.
For example, the app router for the home page, index.js, is passed the title variable with the value “Our Farm Stand” to the express.Router() method, which passes it to Pug. When Pug renders layout.pug, the following line:
title= Page title
… is interpreted as:
title Our Farm Stand
…what is rendered as the following HTML code:
Template inheritance
See also: How to Get High Quality Backlinks in 2022 (7 New Strategies)
Pug documents can inherit other Pug documents by using the extends and block.
For example, you can use a basic website layout, layout.pug, with shared page elements create.
doctype html html head title page title body p content block foo
The block foo directive says: “Insert a content block named foo specified in another pug document that inherits this template.”
Documents that inherit layout.pug must begin with the extended layout directive and include a Block foo contain statement at the top indentation level (at the beginning of a new line).The children of this “block foo” statement are inserted into the template at the position of the corresponding block.
A Pug document can inherit layout.pug like this.
p> Expand layout block foo p This is the home page.
When the document is rendered, the Pug engine loads the layout.pug file. The block foo line in layout.pug is replaced with p This is the home page.
Overview of the default express app
The default structure of the Express app is listed here, with descriptions of each file and directory.
myapp/ (Contains the entire Express app) ├─ app.js The core logic of the express app. ├─ bin/ (Holds the app’s executable scripts) │ └─ www A wrapper that runs app.js. ├─ node_modules/ (Contains dependencies installed by npm) ├─ package-lock.json JSON manifest of the dependencies installed. ├─ package.json JSON of dependencies and configurations specific to your app. ├─ public/ (files downloaded by user’s web browser) │ ├─ images/ (contains client-accessible image files) │ ├─ javascripts/ (contains client-accessible JavaScript files) │ └─ Stylesheets/ (contains client-accessible accessible CSS ) │ └─ style.css The website’s CSS style sheet. ├─ routes/ (Contains logic for individual site routes) │ ├─ index.js “index” (/) route logic. │ └─ users.js Logic of the “users” route (/users). └─ views/ (Contains HTML templates) ├─ error.pug View displayed for error pages like HTML 404. ├─ index.pug view displayed for the site root (/). └─ layout.pug Display of the layout template shared by all pages.
Core website functionality is defined in app.js. Routes are named and specified in this file.
A route is a page or section of the website with a unique path in the URL, such as B. www.example.com/search, www.example.com/login etc. These routes are named in app.js and with Linked to route logic scripts /p>
Route logic scripts are stored in the routes folder. When a user requests a route, their route logic script handles the HTTP request data and sends a response.
The views folder contains the HTML templates, called views processed by the View Engine (Pug).
Implementation: JavaScript, CSS and Pug
The following code implements the Express web application.
App file structure
myapp/ ├─ app.js App core logic ├─ bin/ │ └─ www ├─ node_modules/ ├─ package -lock.json ├─ package.json ├─ public/ │ ├─ images/ │ ├─ javascripts/ │ │ └─ menu.js Implements menu toggle │ └─ Stylesheets/ │ └─ style.css Stylesheet ├─ Routes/ │ ├─ about.js Logic for route /about │ ├─ Advice . js Logic for route /advice │ ├─ contact.js Logic for route /contact │ ├─ index.js Logic for route / │ ├─ recipes.js Logic for route /recipes │ ├─ tips.js Logic for route /tips │ └─ users.js Not used ends can be deleted └─ Views/ ├─ about.pug View for route /about ├─ advice.pug View for route /advice ├─ contact .pug View for route /contact ├─ error.pug ├─ index.pug View for route / ├─ layout.pug View template shared by all sites ├─ recipes.pug View for route /recipes └─ tips.pug View for route /tips blue = changed, green = new, red = not used
myapp/app.js
The core app logic is essentially the same like the standard Express app, with additional routes defined. The “users” route is removed.
// core dependencies var createError = require(‘http-errors’); var express = require(‘express’); var path = require(‘path’); var cookieParser = require(‘cookie-parser’); var logger = require(‘morgan’); // Create route objectsvar indexRouter = require(‘./routes/index’);var aboutRouter = require(‘./routes/about’);var contactRouter = require(‘./routes/contact’);var tipsRouter = require(‘./routes/tips’);var RecipesRouter = require(‘./routes/recipes’);var consultRouter = require(‘./routes/advice’); // the app object var app = express(); // show engine setup app.set(‘views’, path.join(__dirname, ‘views’)); app.set(‘view engine’, ‘pug’); // App configuration app.use(logger(‘dev’)); app.use(express.json()); app.use(express.urlencoded({ extended: wrong })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, ‘public’))); // tell the app to use these routesapp.use(‘/’, indexRouter);app.use(‘/about’, aboutRouter);app.use(‘/contact’, contactRouter);app.use ( ‘/tips’, tipsRouter);app.use(‘/recipes’, RecipesRouter);app.use(‘/advice’, advisorsRouter); // Catch 404 and forward to error handling app.use(function (req, res, next) { next(createError(404)); }); // error handling app.use(function(err, req, res, next) { // set local, only return errors in development res.locals.message = err.message; res.locals.error = req.app.get (‘env’) === ‘development’ ?err : {}; // render the error page res.status(err.status || 500); res.render(‘error’); }); // expose this app to scripts that require it ie. H. myapp/bin/www module.exports = app;
myapp/routes/layout.pug
The layout.pug file contains the core layout of the page that is shared by all pages of the website.It contains everything needed to display a page, except for the body content (block body).
doctype html html head title= pagetitle meta(charset=”utf-8″) meta (name=”viewport” content=”width=device-width, initial-scale=1″) script(src=”/javascripts/menu.js”) link(rel=”stylesheet”, href=”/stylesheets/style .css). “) body #menu section#menuitems .menubutton h1.menubutton(onclick=”menuToggle(‘hide’)”) ☰ a(href=”/”) h3.menuhead Our farm shop a(href=”/tips “) h3.sectrule Tips for a good life a(href=”/recipes”) h3 recipes a(href=”/advice”) h3 homesteading advice a(href=”/about”) h3.sectrule about us a( href=”/contact”) h3 Contact #container #header a(href=”/”) h1.logo Our farm stand .headspace h1 .menubutton(onclick=”menuToggle(‘show’)”) ☰ h1.placeholder ☰ h2. navitem a(href=”/about”) .clickable-area About h2.navitem a(href=”/contact”) .clickable-area Contact #panel.left section#sections .sectionlink a(href=” /tips” ).clickable-area Tips for a good life .sectionlink a(href=”/recipes”) .clickable-area Recipes .sectionlink a(href=”/advice”) .clickable-area Homesteading Advice block mainbody #panel.right h3 Our Friends Area#partners.tall .partnerlink a(href=”/”) .clickable-area Green Valley Greens .partnerlink a(href=”/”) .clickable-area Turkey Hill Farm .partnerlink a(href=”/” ) .clickable-area Burt’s Maple Syrup .partnerlink a(href=”/”) .clickable-area Organic seeds only #footer p Copyright © 2020 Alice & Bob’s Farm Stand
myapp/views/index.pug
The index.pug file extends layout.pug and contains main content for the / route.
extends the mainbody layout block #mainbody section.mainbodyitems h3 Announcements section.announcements .announceitem h4.title Store Opening p.date Jan 15 p Our new storefront renovation is complete and we are open for business. h3 Sales Items section.forsaleitems table tr th Item th Description th Price th.Quantity Quantity tr td Milk td Good source of calcium. td.Price $2 span.perunit/half gallon. td.qty 3 tr td eggs td Ideal for breakfast and baking. td.Price $4 span.perunit/doz. td.qty 6 tr td Whole chicken td Perfect for roasting. td.price $5 span.perunit/lb. td.qty 4 h3 Upcoming Events section .eventitem h4.title Cider Fest p.date 20 October, 14:00-18:00 p Celebrate the season with freshly squeezed cider from our orchards. .eventitem h4.title Bread Baking Workshop p.date December 13, 9:00 – 12:00 p Learn how to make and cultivate a sourdough starter. h3 Message of the Day Section .motditem p Eat better. Support your local farming community. h3#partners.wide Our Friends Area#partners.wide .partnerlink.wide a(href=””) .clickable area Green Valley Greens .partnerlink.wide a(href=””) .clickable area Turkey Hill Farm .partnerlink .wide a (href=”/”) .clickable-area Burt’s Maple Syrup .partnerlink.wide a(href=””) .clickable-area Organic Seeds Only .bodyspace
myapp/routes/index.js
The index.js file contains logic for the / route.
var express = require(‘express’); var router = express.Router(); router.get(‘/’, function(req, res, next) { res.render(‘index’, { pagetitle: ‘Our Farm Stand’ }); }); module.exports = router;
myapp/public/javascripts/menu.js
The menu.js file contains the JavaScript from the grid and flexbox example. It implements the menu toggle function.
function menuToggle(state) { var ele = document.getElementById(‘menu’); switch(state) { case ‘show’: ele.style.opacity=1; ele.style.color=’rgb(96, 96, 96)’; ele.style.visibility=’visible’; ele.style.transition=’Visibility 0s, Opacity 0.3s’; break; case ‘hide’: ele.style.opacity=0; ele.style.color=’black’; ele.style.visibility=’hidden’; ele.style.transition=’Visibility 0.3s, Opacity 0.3s’; break; } }
myapp/public/stylesheets/style.css
The style.css file contains the CSS from the grid and flexbox example.
/ * element styles */ * { margin: 0; /* by default all elements (selector *) have no border */ } html { width: 100%; /* 100% width of parent (root) element */ height: 100vh; /* 100% viewport height */ Background: rgb(0, 0, 0, 0.1); /* 10% black */ Font size: 1.0 m; /* our standard font size */ Font family: Arial, Helvetica, Sans-Serif; /* Default font */ } body { min-height: 100%; } section { padding: 0.5rem; flex growth: 1; /* in a flexbox, sections expand along the flex axis */ } h1 { /* website name in header */ font-size: 2.0rem; font weight: normal; } h2 { /* info, contact */ font-size: 1.25rem; } h3 { /* section headings */ font-size: 1.2rem; Padding: 0.5rem; } h4 { /* Section element title */ font-weight: normal; Padding: 0.5rem; } p { /* Section item body */ padding: 0.5rem; } a:link, a:visited { /* anchor links and visited anchor links */ color: black; text decoration: none; /* disable underline */ } a:hover { /* when anchor link is held */ color: rgb(25, 25, 25); } a:active { /* when the anchor link is clicked */ color: rgb(96, 96, 96); } /* component styles */ #container { display: grid; Altitude: 100vh; Grid template columns: [left] 10rem auto 10rem [right]; Grid template rows: [top] 5rem auto 5rem [bottom]; /* header height matches content */ grid-template-areas: “head head head” “panleft mainbody panright” “foot foot foot”; } #header { grid-area: head; /* corresponds to the name in the template */ background: rgb(0, 0, 0, 0.2); /* 20% black */ Display: Flex; bending direction: row; Justification content: space; alignment elements: baseline; /* Site name and navigation element text align to baseline */ padding: 1.0rem; } #panel { /* for element id=”panel” */ display: flex; /* this element is a parent flexbox element */ flex-direction: column; /* its children bend vertically */ padding: 0.5rem; Background: rgb(0, 0, 0, 0,1); /* 10% black */ } #panel.left { /* for element id=”panel” and class=”left” */ grid-area: panleft; /* this element fills a grid area */ } #panel.right { grid-area: panright; } #footer {grid-area: foot; Display: Flex; /* this element is a parent flexbox element */ flex-direction: column; /* its children bend vertically */ justify-content: center; /* Center horizontal footer content */ align-items: center; /* vertical footer content */ padding: 0.5rem; Background: rgb(0, 0, 0, 0,2); } #mainbody { /* for element id=”mainbody” */ display: flex; /* this element is a parent flexbox element */ flex-direction: column; /* its children bend vertically */ grid-area: mainbody; to justify: center; /* Fixed-width mainbody always centered */ width: 100%; Minimum width: 22.5 rem; /* Mainbody width must not be < 22.5 rem */ } div#panel, div#mainbody { /* additional space under header */ padding-top: 0.5rem; } #partners, #sections { /* for element id="partners" or id="sections" */ display: flex; /* this element is a parent flexbox element */ flex-direction: row; /* its children flex horizontally */ flex-wrap: wrap; /* its children can wrap to the next line */ align-content: flex-start; /* child elements start at top left */ } #partners.wide { /* for element id="partners" and class="wide" */ display: none; /* do not show this item by default */ } #menu { position: absolute; /* Menu position unaffected by other elements */ right: 0; /* zero pixels from the right edge */ background: rgb(239, 239, 239); Limit: 0.15 rem fixed rgb (0, 0, 0, 0.4); Visibility: hidden; /* Visibility property supports transitions */ Opacity: 0; /* opacity + visibility transition = menu fade effect */ z-index: 1; /* make sure the menu appears on top of all other content */ } #menuitems { /* menu is implemented as a flexbox container */ display: flex; Bending Direction: Column; Padding: 1rem; } #menuitems h3 {border-top: 0.15rem solid rgb(0, 0, 0, 0.1); /* light horizontal line */ } #menuitems .sectrule { border-color: rgb(0, 0, 0, 0.25); /* darker horizontal line */ } #menuitems .menuhead { border-top: none; } #menuitems h3:hover { background color: rgb(0, 0, 0, 0.1); /* gray from rollover menu items */ } .menubutton { text-align: right; cursor: pointer; /* indicates that it can be clicked like a link */ user-select: none; /* User cannot select button as text */ } #menuitems .alignright { text-align: right; /* right-justified menu item text (unused) */ } #header h1.menubutton { display: none; /* in default view (landscape), hide menu button */ border: 0.15rem solid rgb(0, 0, 0, 0); /* (invisible) alignment element */ } #header .placeholder { /* this invisible button is rendered when the menu */ color: rgb(0, 0, 0, 0); The /* button is hidden so the header height matches. */ User selection: none; /* User cannot select invisible button text */ } .sectionlink, .partnerlink { border-radius: 0.25rem; /* give this element a slightly rounded edge */ font-weight: normal; Font size: 1.1rem; Padding: 0.5rem; Width: 7rem; /* fixed width for these elements */ margin-bottom: 1rem; /* slight margin for readability */ background: rgb(0, 0, 0, 0.1); } .sectionlink:hover, .partnerlink:hover { background-color: rgb(0, 0, 0, 0.065); /* brighten bg on mouseover */ } .partnerlink { height: 7rem; /* Partner elements are additionally fixed height */ } .partnerlink.wide { margin: 0.5rem 1rem 0.5rem 0; /* Use margins for padding when wrapping */ } .clickable-area { /* use whenever a clickable area excludes margins */ height: 100%; /* Clickable area spans height of parent item */ } .eventitem, .announceitem, .motditem { margin-bottom: 0.5rem; /* slight leeway for better readability */ } .title { /* e.g. B. "Open for business" */ Font style: italics; font weight: normal; Font size: 1.1rem; } .date, .ingredient { /* e.g. B. January 1, 2021 */ font-style: italic; Font size: 0.9rem; Padding: 0 0 0.01 rem 0.5 rem; Color: rgb(0, 0, 0, 0.5); } .navitem { /* info, contact */ font-weight: normal; Padding: 0 0.5rem 0 1rem; } .headspace, .panspace, .footspace, .body space {flex-grow: 1; /* these items expand on the flexible axis to fill the space */ } /* table styles ("items for sale") */ table { border-collapse: collapse; /* pixel-adjacent table cells */ width: 100%; border-bottom: 1rem; } th { text alignment: left; } tr { border: 4rem 0 0 0; Edge bottom: 0.15 rem solid rgb (0, 0, 0, 0.2); /* horizontal line */ } td, th { padding: 0.5rem; vertical orientation: top; } td.price { space: nowrap; /* spaces in the price do not break the line */ } td.qty, th.qty { text-align: center; } span.perunit { opacity: 0.5; } /* Portrait responsive styles applied */ @media screen and (max-width: 45rem) { /* if viewport width < 45rem */ #panel.left { grid-column-end: left; /* Grid area of panel shrinks to nothing */ } #panel.right { grid-column-start: right; /* Panel grid area shrinks to nothing */ } #partners.tall { display: none; /* Hide partners in panel (overrides display: flex) */ } #partners.wide { display: flex; /* show partners in body (overwrites display: none) */ } #panel, /* these disappear from the layout */ #header .placeholder, .navitem { display: none; } #mainbody { grid-column-start: left; /* mainbody now starts at the left margin */ grid-column-end: right; /* Mainbody now ends at the right edge */ } #header h1.menubutton { /* Show header menu button */ display: inline; /* override display: none */ } }
Secondary routes
The following files contain the logic for secondary routes — About, Advice, Contact, etc.
myapp/routes/about.js
var express = require(‘express’); var router = express.Router(); router.get(‘/’, function(req, res, next) { res.render(‘about’, { pagetitle: ‘About us’ }); }); module.exports = router;
myapp/routes/advice.js
var express = require(‘express’); var router = express.Router(); router.get(‘/’, function(req, res, next) { res.render(‘advice’, { pagetitle: ‘Homesteading Advice’ }); }); module.exports = router;
myapp/routes/contact.js
var express = require(‘express’); var router = express.Router(); router.get(‘/’, function(req, res, next) { res.render(‘contact’, { pagetitle: ‘Contact Us’ }); }); module.exports = router;
myapp/routes/recipes.js
var express = require(‘express’); var router = express.Router(); router.get(‘/’, function(req, res, next) { res.render(‘recipes’, { pagetitle: ‘Recipes’ }); }); module.exports = router;
myapp/routes/tips.js
var express = require(‘express’); var router = express.Router(); router.get(‘/’, function(req, res, next) { res.render(‘tips’, { pagetitle: ‘Tips For Living Well’ }); }); module.exports = router;
Secondary views
The following views inherit layout.pug.
myapp/views/about.pug
extends the mainbody layout block #mainbody section#mainbodyitems p Alice & ; Bob has been running her farm stand since 1992.
myapp/views/advice.pug
extends the mainbody layout block #mainbody section#mainbodyitems h3 Homesteading Advice p Never stand behind a heifer.
myapp/views/contact.pug
extends layout block mainbody #mainbody section#mainbodyitems h3 Alice & Bob p 1344 Chattanooga Way p Homestead, VT 05401 p (802) 555-5555
myapp/views/recipes .pug
expands layout block mainbody #mainbody section#mainbodyitems h3 Alice’s Recipes p b Don’t Knead Next Day Dutch Oven per ingredient 1/4 tsp active dry yeast per ingredient 3 cups all-purpose flour per ingredient 1 1/2 tsp salt p .Ingredient cornmeal or wheat bran for dusting p In a large bowl, dissolve yeast in water . p Add the flour and salt, stirring until combined. p Cover bowl. Leave to rest for at least 8 hours, preferably 12 to 18, at a warm room temperature of around 70 degrees. p If the surface of the dough is covered with bubbles, it can be folded. Lightly flour a work surface. Sprinkle flour on the dough and fold it in half once or twice. Cover loosely and let rest for about 15 minutes. p Use just enough flour so that the dough does not stick and gently shape it into a ball. Generously coat a clean tea towel with flour, wheat bran, or cornmeal. Lay the seam side of the dough on the towel. Cover with another cloth and let rise for 1 to 2 hours. p Preheat the oven to 475°. Cover and bake for 30 minutes.
myapp/views/tips.pug
extends the layout block mainbody #mainbody section#mainbodyitems h3 Alice’s Tips p Always get up before the sun. p Never use artificial maple syrup. p If the bear is black, be loud, attack. p If the bear is brown, play dead, lie down.
Appearance
In portrait mode, secondary routes are accessed through the menu.
In landscape mode, they are accessible from the header and left panel.
See also: How To Start A Fantasy Sports Site: FanVictor
.
