Initial project setup

Create a new folder for our Meme Creator application. Open up the folder in VSCode or any other text editor you are using for this project. Navigate to the folder in your terminal and run npm init. Just as we did in the previous chapter, fill in all the details asked for in the terminal, then hit Enter on Windows or return on Mac, and you will have your package.json file in the project root.

From the code files you downloaded for this book, open up the starter files folder for Chapter 2. You will see an index.html file. Copy and paste it into your new project folder. That's all for the starter files provided with this chapter, because there is not going to be a default CSS file. We are going to build the UI from scratch!

Create the files and folders we are going to use in this chapter. The folder structure should be as follows:

.
├── index.html
├── package.json
└── src
    ├── css
    │   └── styles.css
    └── js
         ├── general.js
         └── memes.js

For now, leave the JS files empty. We are going to work on the styles.css file. Open up index.html in your browser (try using the http-server package we installed globally in the previous chapter). You should see an awkward looking page with some default Bootstrap styles applied using Bootstrap's classes. We are going to turn that page into a Meme Creator app, which looks as follows:

This web app is also going to be responsive. So, on your mobile devices, it should look as follows:

That blank box is going to be our canvas, which will preview the memes created with this app. Now that you have an idea of how the application will look, we'll start working on our styles.css file.