1.1 The Hello World Program: Launching Your Journey

16 min read
103
Updated: September 28, 2023

In this preparation step, we’ll set up Visual Studio Code (VS Code), a popular code editor, to begin writing “Hello World!” and running JavaScript code for our lessons.

Setting up our Code Editor

So, before we can write any code, we need to install and configure a code editor. A code editor is the primary tool for any developer, and we use it, as the name suggests, to write our actual code. Let’s go ahead and download a code editor.

The one that I recommend for everyone to use is Visual Studio Code, or simply VS Code. In my opinion, it’s the best code editor available. This isn’t just my personal view; VS Code is currently the most popular and widely used code editor for a reason. It’s the best, easiest to use, and, of course, it’s completely free. Plus, it works on every platform.

Alternative:
If, for some reason, you don’t like VS Code, there are alternatives available. You can consider using Atom, Notepad++, Sublime Text, UltraEdit, Brackets, and more. Personally, I used ‘Brackets’ as the code editor when teaching students.

So download the installer for your platform and proceed to install the code editor on your computer.

ALSO READ:  2.5 Basic Operators in JavaScript

Step 1: Download and Install Visual Studio Code

  1. Open your web browser and go to the Visual Studio Code download page.
  2. Depending on your operating system (Windows, macOS, or Linux), click on the appropriate download link to start downloading the VS Code installer.
  3. Once the download is complete, open the installer file. Follow the on-screen instructions to install Visual Studio Code on your computer. This typically involves selecting installation preferences and agreeing to the license terms.
  4. After the installation is complete, launch Visual Studio Code by searching for it in your computer’s applications or programs list.

Okay, so I hope that you have managed to install VS Code on your system, and as you open it up, it should look something like this:

Setting up VS Code and Writing Hello World Program

Now, the color may be different, but that can be fixed in a second. Maybe the screen also looks different, or perhaps the icons in the sidebar. Nevertheless, the main functionalities should still work the same. So, let’s begin by installing some important extensions.

Step 2: Installing Helpful Extensions

Visual Studio Code offers extensions that can enhance your coding experience, and the following are a few essential extensions for working with JavaScript:

  1. Open Visual Studio Code.
  2. On the left sidebar, you’ll see an icon that looks like four squares, called the “Extensions” icon. Click on it.
  3. In the search bar at the top of the Extensions view, type “JavaScript” and press Enter. You should see several JavaScript-related extensions.
  4. Click “Install” on the one called “JavaScript (ES6) code snippets.” This extension provides helpful code snippets that can save you time when writing JavaScript.
  5. Next, search for “Live Server” and install the “Live Server” extension. This extension allows you to easily launch a local development server to view your HTML and JavaScript files in a web browser.
ALSO READ:  2.3 JavaScript Data Types: The Building Blocks of Programming

Our First JavaScript Code, “Hello World!”

Step 3: Creating a Workspace

A workspace in Visual Studio Code helps organize your files and settings for a specific project.

  1. In the Visual Studio Code.
  2. Click on “File” in the top left corner, then select “Open Folder.”
  3. Choose a location on your computer where you want to create a new folder for your JavaScript projects. Click “New Folder” to create a new directory for your lessons. Give it a name, like “JavaScript-Lessons.”
  4. Click the “Open” button to open this folder as your workspace in Visual Studio Code.

Step 4: Creating a New HTML File

Now that you have Visual Studio Code set up and a workspace for your lessons, let’s create an HTML file for our first lesson.

  1. In Visual Studio Code, go to “File” and select “New File.”
  2. Copy and paste the following HTML code into the new file:
<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
</head>
<body>
    <!-- Your content goes here -->
</body>
</html>
  1. Save this file with an “.html” extension in your workspace folder. You can name it “index.html” or something similar.

This is a standard HTML template. We’ve included a for your page, which you can customize.

Step 5: Creating the “Hello World” Program

Now, let’s embed JavaScript into our HTML file to create our first JavaScript code.

  1. Inside the <body> section of your HTML file, add the following code:
<script type="text/javascript">
    // JavaScript code goes here
</script>

This <script> tag is where we’ll write our JavaScript code. The type attribute specifies that we’re using JavaScript.

  1. Within the <script> tags, let’s add our “Hello World” program. We’ll use the console.log() function to display our message in the browser’s console. Here’s how it should look:
<script type="text/javascript">
    console.log("Hello World!");
</script>

That’s it! We’ve written a simple JavaScript program that logs the message “Hello World!” to the browser console.

ALSO READ:  2.12 Truthy and Falsy Values in JavaScript

Step 6: Running the Program

To see our “Hello World!” message in action, follow these steps:

  1. Save your HTML file.
  2. Open it using your web browser (e.g., Google Chrome, Mozilla Firefox).
  3. Right-click anywhere on the page and select “Inspect” or “Inspect Element.” This opens the browser’s developer tools.
  4. In the developer tools, navigate to the “Console” tab. You should see the “Hello World!” message displayed there.

Discussion Questions and Answers

Remember that learning is a dynamic process, and it’s natural to have questions. In your learning journey, you might have questions or encounter uncertainties along the way. To assist you in navigating your learning path, we’ve put together a collection of Frequently Asked Questions (FAQs). Embrace the opportunity to learn, explore, and grow as you progress through your lessons and interact with the FAQs.

Avatar for Amit

Amit (16)

Hello! I'm Amit Kumar, a passionate teacher specializing in web development and digital marketing. With several years of experience in the industry, I am dedicated to sharing my knowledge and expertise to empower aspiring learners like you.

Teaching Philosophy:

I believe in creating a dynamic and engaging learning environment where students can thrive. My teaching approach focuses on hands-on experience, practical applications, and real-world examples. I strive to make complex concepts understandable and enjoyable, ensuring that you not only grasp the fundamentals but also develop the skills necessary to excel in web development and digital marketing.

Web Development Expertise:

As a web development instructor, I am well-versed in HTML, CSS, JavaScript, and various frameworks such as React and Angular. I will guide you through the process of building responsive and user-friendly websites, exploring topics like front-end development, back-end integration, database management, and more. Together, we will delve into the latest trends and best practices in web development, equipping you with the tools to create stunning online experiences.

Digital Marketing Mastery:

In the rapidly evolving digital landscape, digital marketing is crucial for businesses to thrive. Through my digital marketing courses, I will help you navigate the intricacies of search engine optimization (SEO), social media marketing, content strategy, email marketing, and analytics. Gain insights into effective marketing techniques, harness the power of data-driven decision-making, and learn how to craft compelling campaigns that drive results.

Passion for Teaching:

Teaching is not just a profession for me; it's my passion. I find great joy in witnessing my students grow and succeed. I am committed to fostering a supportive learning community where questions are encouraged, ideas are shared, and challenges are overcome together. I am here to guide you every step of the way and provide the necessary resources for your personal and professional development.

Join me on this exciting journey of learning and discovery. Let's unlock your potential in web development and digital marketing together. Enroll in my courses today and embark on a transformative educational experience that will propel your career forward.
Start Learning Today!

5 1 vote
Article Rating
Subscribe
Notify of

guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x
Scroll to Top