After the birth of my first child, I began learning web development by attending lectures and reading blogs from a web developer named ZeroCho. At that time, I was told by him: if I could create a Tetris game using only HTML, CSS, and Vanilla JavaScript, I would be qualified to apply for a junior web developer position. Although I’m currently unable to apply for jobs due to caring for my young children, I still aspire to acquire that level of proficiency.
However, this time, I plan to change my study approach. Until now, I’ve primarily learned web development by watching video lectures. While I gained a lot from them, I felt that my learning was passive. This time, even if it takes longer, I intend to learn actively. I plan to minimize the use of videos, focus on learning step by step, research unknowns as I go, and document my development process. My goal is to create a Tetris game that runs in a web browser and record the entire process on my blog.
First, before creating a Tetris game that can run in a web browser, let’s explore the basics: HTML.
What is HTML? HTML is a markup language necessary for presenting data received from a server in a readable format on a web browser. To illustrate simply, consider the human body, which consists of a skeleton and flesh. If the necessary data is the flesh, then HTML serves as the skeleton that helps display it on the web browser. It instructs the browser to render the data received from the server. The foundation of web development begins with using HTML to display data in the browser.
I can write HTML code using Notepad, which is available on most computers. However, this can be time-consuming. Developers or programmers are individuals who can create programs to automate simple or repetitive tasks. This led to the creation of code editors—programs that facilitate easy code writing. By using a code editor and installing various extensions or setting up macros, I can reduce development time. Here, I’ve realized an important life lesson: time is money. It’s a resource that’s irreversible and equally precious to everyone. Therefore, it’s essential to minimize time spent on unnecessary tasks.
Returning to the main point, there are many types of code editors. I will start web development using Visual Studio Code, which is free. Visual Studio Code can be found and downloaded on Google. After setting up Visual Studio Code, create a folder to contain the code for your game. Inside this folder, create and save “index.html,” “style.css,” and “script.js” files.
In the “index.html” file, write the basic structure code that allows the browser to recognize it as an HTML file. Simply, the webpage’s metadata is typically written between the <head></head> tags, and the data is displayed between the <body></body> tags.
Here’s an example of the basic structure:
<pre class="wp-block-syntaxhighlighter-code"><!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Tetris</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<a href="http://script.js">http://script.js</a>
</body>
</html>
</pre>
This structure sets up the basic HTML framework for my Tetris game.
YLee's Personal Blog 
Leave a comment