Brtest Tutorial
Tools You Need
Before you start building websites, let's set up your environment. You only need a few tools to begin — all of them are free and easy to use.
Tip: You can start with just a text editor and a web browser. That's all you need to create your first website!
1. A Web Browser
A web browser is what displays your websites. You can use any browser, but developers usually prefer:
- Google Chrome – most popular and has great developer tools
- Mozilla Firefox – privacy-focused and powerful for debugging
- Microsoft Edge or Safari – good for testing your site on different platforms
Example
Browsers render HTML, CSS, and JavaScript together:
<!DOCTYPE html>
<html>
<body>
<h1>Hello, Browser!</h1>
<p>This page is displayed by your web browser.</p>
</body>
</html>
Try it Yourself »
2. A Text Editor
A text editor is where you write your code. You can use any editor, but the most recommended one for beginners is Visual Studio Code (VS Code) from Microsoft.
- Free and available for Windows, macOS, and Linux
- Highlights HTML, CSS, and JavaScript syntax
- Includes extensions to preview and test code easily
Example
When you open VS Code, create a new file named index.html and type:
<!DOCTYPE html>
<html>
<body>
<h1>My First Website</h1>
<p>This page was created in VS Code.</p>
</body>
</html>
Try it Yourself »
Tip: You can also use Notepad (Windows), TextEdit (Mac), or any code editor you're comfortable with — as long as it saves files as plain text.
3. A Project Folder
Web developers organize their websites inside folders. Let's create one for your first project:
Example
Example folder structure:
my-first-website/
index.html
styles.css
app.js
images/
This keeps your project organized and makes it easier for your browser to find the files it needs.
Tip: Use lowercase letters and avoid spaces in file names (e.g. my_first_page.html is better than My First Page.html).
4. Live Server Extension (Optional)
If you're using VS Code, you can install an extension called Live Server. It automatically opens your HTML file in a browser and refreshes it every time you save changes.
- Open VS Code.
- Click the Extensions icon (four squares on the sidebar).
- Search for Live Server and click Install.
- Right-click your
index.htmlfile and choose Open with Live Server.
Now every time you save your file, your browser will automatically refresh to show your changes!
Tip: This makes learning much faster because you can instantly see what your code does.
5. File Extensions
Each type of file you’ll work with has a specific extension:
- .html – your main web pages
- .css – stylesheets (color, font, layout)
- .js – JavaScript files (behavior and logic)
Example
Files linked together:
<link rel='stylesheet' href='styles.css'>
<script src='app.js'></script>
Summary
- Install a browser (like Chrome or Firefox)
- Install a text editor (like VS Code)
- Create a folder for your project
- Use Live Server for quick preview
- Save files with
.html,.css, and.jsextensions
Next, you will create your first actual web page and view it in the browser!
