You want to start coding and publish it to the world but have no idea what to do? Some websites show how to start coding from the very first step but do not explain how to actually publish it to the world, deploy. But on the other hand, some websites show how to deploy complicatedly. Beginners who created basic HTML and CSS get the result by their editor's extension but it does not mean they published them, then they get stuck. In this article, I'd like to explain how to start coding, and deploy it to the world.
1. Get ready for coding
What you need for coding are as follows.
- Internet Connection
Way simpler than you expected, eh? You do not need to have your domain, server, or other come complicated things. If you got all of them, you are ready to dive into the coding world. If you are reading this article, I assume you already got the first two, so let me explain from the third one, Editor.
Install an editor
You have lots of options to choose. One of the most common editors is Visual Studio Code. This is provided by Microsoft and the UI is very simple, but super functional at the same time. Big advantage of using a popular editor is that you can easily find out the solutions for any troubles. It is sometimes takes a lot of time to add some useful extensions and fix troubles of editor.
First things first, let's install an editor.
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud…
Visit the link above and click the Download button and install it. It should take about a few minutes to complete.
Set up directory
In coding, file organization is very important. Big project will contain a huge amount of folders and files and poor file organization will lead you to an annoying maze. Thus, it would be a good idea to create your project folder to organize files in your computer.
Let's create a directory you want for your project.
This time, I created a directory named "startCoding", where all files and folders are put. As your project gets bigger, the project directory might include multiple files and folders that contains some more files and even other folders.
In the directory you created, let's create three basic files with extensions of html, css, js.
There are several ways to create files into a directory. Using terminal(for Windows user, command prompt) is one of them and worth learning in terms of coding. First, open Terminal(for Windows user, command prompt) and move to the directory that you created earlier by
Once you moved the directory, you should see the directory name on your command line.
Then it’s time to actually add files. Put
touch [file name] (for Windows user,
copy nul [file name]) on the terminal.
For the very basic project, let’s create index.html, style.css, and app.js files into the directory.
If you are able to create these three files in your directory, it is finally time to dive into hands-on coding. This is where the fun part begins!
2. Start happy coding by Visual Studio Code
When you first open the editor, you will see this screen.
Click the Open folder and then choose the directory you created, then click Open.
Then this screen will be shown and you are now free to edit the files whatever you like by clicking a file.
Before putting some code, let me introduce a powerful extension called Live Server. On the bottom of the side bar, you should see extensions button. Click it, search for Live Server from the field, and install it.
On index.html, if you type
! and press Enter, the basic frame work of HTML will be put on the editor. Suggestion function is very convenient because you do not need to remember the certain syntax, but it is very important to be able to build up them without these auto fill. So, I recommend you to type all of them by yourself until you remember them.
For the very first code, it is very common to print out the phrase “Hello World!” to the screen. To print out “Hello World!” on the screen, let’s type
h1 tag which stands for heading 1 under
By surrounding a string by
<h1></h1> , the string will be displayed as a heading. Heading tag has 6 kinds of them from h1 to h6 and the number goes larger, the font size gets smaller. You want to see the result? It is easy. Just click Go Live button at the very bottom of the window and one of web browsers will be launched to show the result of the code.
The screen you see looks like an actual website, but has not actually published to the world yet. The only step left is to deploy it. You are getting close to the end!
What is it to deploy? Let’s see the meaning.
deploy: bring into effective action; utilize.
In our field, deploy is basically used as an action to put project files into server and make them actually “usable” as a source of an website. If you deploy your project, it is put on a server and hosting URL will be created to access it. Let’s see how to do it step by step using google firebase.
Backed by Google and loved by app development teams - from startups to global enterprises All products expand_more…
Create a firebase project
First, visit google firebase and click Create a project on the very first page.
Then follow the steps shown on screen until you reach Create react button. On the way to it, you will be asked to decide the project name, allow google analytics, and choose analytics location. You can choose whatever you want and just continue.
After completing creating a project, click the gear icon on the side bar and choose Project settings. Then if you will see the screen like as follows, click the pencil icon on the Default GCP resource location. You will asked to choose cloud resource location, so choose one of them.
Now go back to project settings and scroll down until you see “Your apps” section, then click the icon of the triangle-ish one. Then choose your App nickname and make sure to check the checkbox of “Also set up Firebase Hosting for this app”. After that, keep going until you see “Continue to the console” button.
From now on, you will work on terminal(command prompt) to deploy your project. Open terminal, change directory to your project directory, and put these commands below.
npm install -g firebase-toolsnpm install --save firebase
By executing these commands, tools to use firebase functions will be installed locally and your computer will be ready to connect to firebase.
Then execute the command below.
When you execute this command, a browser will be opened and you will be asked to log in to a google account. You are good to go if you see this screen
Now let’s go back to terminal and execute next command.
When you execute the command, you will be asked to choose which firebase features to use for the project, then cheese the third and fourth ones.
However, if you want to work on a directory that you manually created, like src directory, you need to change the “public” into the specific directory.
Then, finally it is time to actually deploy by this commands.
If all goes well you will see a hosting URL like this.
By putting the URL in an address bar on a browser, you will see what you create on the web.
You’ve got it! It looks we have gone so far and taken huge amount of steps to publish a webpage to the world, but this is the way things go. A lot of things to learn still remains and no one is able to learn them all. The accumulation of single step will lead us to the wider-open world, where we can make our creativity a reality.
Thank you for reading and have a happy coding life:)