Replit Setup

https://www.iorad.com/player/2323422/Replit---How-to-untitled-task-name?iframeHash=trysteps-1

<aside> 👨🏻‍💻

Now, Replit only allows Users to host 3 Projects at most.

</aside>

Your first JS Program on Replit

As shown in the tutorial above, try to type console.log("Hello World!") and click run or refresh on Replit. Then, click Devtools at the top right corner of the little browser and you will see the line you tried to print on the console (not the little webpage above, just the console).

The console message

Frontend Basics [Theory]

3 files are created automatically

A web page typically includes three files:

HTML (Hypertext Markup Language): This is the markup language used to define the structure and layout of the page, including headings, paragraphs, images, links, and other elements.
CSS (Cascading Style Sheets): This is used to define the presentation and styling of the webpage, including colors, fonts, line spacing.
JS (JavaScript): This is a programming language used to add interactivity and behavior to the webpage. JavaScript allows you to add animations, *event listeners, and other interactive features to the webpage.
- event listeners are “sensors” installed on different elements on a webpage, include the sensors for “click”, “mouseover”, “change”, “select”, “keydown”

The roles played by the 3 files

HTML Basics

HTML Elements

Read the index.html file that Replit generates.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  Hello world
  <script src="script.js"></script>
</body>

</html>

An HTML file consists of different elements.

Table of Contents

Replit Setup

Your first JS Program on Replit

Frontend Basics [Theory]

HTML Basics

HTML Elements