Book Image

Node.js Web Development - Third Edition

By : David Herron
Book Image

Node.js Web Development - Third Edition

By: David Herron

Overview of this book

Node.js is a server-side JavaScript platform using an event driven, non-blocking I/O model allowing users to build fast and scalable data-intensive applications running in real time. Node.js Web Development shows JavaScript is not just for browser-side applications. It can be used for server-side web application development, real-time applications, microservices, and much more. This book gives you an excellent starting point, bringing you straight to the heart of developing web applications with Node.js. You will progress from a rudimentary knowledge of JavaScript and server-side development to being able to create and maintain your own Node.js application. With this book you'll learn how to use the HTTP Server and Client objects, data storage with both SQL and MongoDB databases, real-time applications with Socket.IO, mobile-first theming with Bootstrap, microservice deployment with Docker, authenticating against third-party services using OAuth, and much more.
Table of Contents (18 chapters)
Node.js Web Development Third Edition
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

Mobile-first design for the Notes application


We've come a fair way already, learning about the basics of responsive design and Bootstrap, and we hooked the Bootstrap framework into our application. Now ,we're ready to launch into a redesign of the application so that it works well on mobiles and uses some Bootstrap components to make improvements.

Laying the Bootstrap grid foundation

Bootstrap uses a 12-column grid system to control layout, giving applications a responsive mobile-first foundation on which to build. It automatically scales components as the viewport changes size or shape. The method relies on <div> elements with classes to describe the role each <div> plays in the layout.

The basic layout pattern is as follows:

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3">Column 1 content</div>
    <div class="col-sm-9">Column 2 content</div>
  </div>
  <div class="row">
    <div class="col-sm-3"&gt...