Book Image

Advanced Node.js Development

By : Andrew Mead
Book Image

Advanced Node.js Development

By: Andrew Mead

Overview of this book

Advanced Node.js Development is a practical, project-based book that provides you with all you need to progress as a Node.js developer. Node is a ubiquitous technology on the modern web, and an essential part of any web developer’s toolkit. If you're looking to create real-world Node applications, or you want to switch careers or launch a side-project to generate some extra income, then you're in the right place. This book was written around a single goal: turning you into a professional Node developer capable of developing, testing, and deploying real-world production applications. There's no better time to dive in. According to the 2018 Stack Overflow Survey, Node is in the top ten for back-end popularity and back-end salary. This book is built from the ground up around the latest version of Node.js (version 9.x.x). You'll be learning all the cutting-edge features available only in the latest software versions. This book delivers advanced skills that you need to become a professional Node developer. Along this journey you'll create your own API, you'll build a full real-time web app and create projects that apply the latest Async and Await technologies. Andrew Mead maps everything out for you in this book so that you can learn how to build powerful Node.js projects in a comprehensive, easy-to-follow package designed to get you up and running quickly.
Table of Contents (17 chapters)
Title Page
Copyright and Credits
Packt Upsell
Contributors
Preface
Index

Styling the chat page


In this section you're going to get some styles in place so our app looks a little less like an unstyled HTML page, and a little more like a real web app. Now in the following screenshot, on the left we have People panel, we're not going to be wiring that up yet although we are giving it a place inside of our page. Eventually this is going to store a list of all the people connected to the individual chatroom, that's going to come a bit later.

Over right side, in the main area is going to be the messages panel:

Now the individual messages are still unstyled, that's going to come later, but we do have a place to put all of that stuff. We have our footer, this includes our form for sending a message, the textbox, and the button, and it also includes our Send Location button.

Now to get all of this done we're going to add a CSS template that I've created for this project. We're also going to be adding some classes to our HTML; this is going to let us apply the various styles...