Protected Learning Content

AICPE Gurukul content is created for learning purposes. Printing, copying and unauthorized reuse are restricted.

AICPE Learning Hub HTML with CSS
Chapter 2
Tools & Project Setup
Previous Chapter 1: Web & HTML Next HTML Document Structure
Chapter 2 | Practical Setup

Tools & Project Setup

A good web designer starts with a clean setup. In this chapter, you will learn which tools to use, how to create folders, how to save HTML files, and how to open your first webpage in a browser.

Start Setup View Folder Structure

Code Editor

Use VS Code or any simple editor to write HTML and CSS.

Web Browser

Use Chrome, Edge or Firefox to test your webpages.

Project Folder

Keep HTML, CSS and images in a clean folder structure.

First HTML File

Create index.html and open it in your browser.

Learning Objectives

After This Chapter, You Will Be Able To

Set up your own HTML and CSS practice environment like a professional learner.

Choose Tools

Select a proper editor and browser for web design practice.

Create Folders

Make a clean project folder with pages, images, CSS and JS folders.

Save Files

Save HTML files with correct names and correct extensions.

Preview Output

Open your first HTML page and test changes in a browser.

Required Tools

Tools Needed for HTML & CSS Practice

You do not need expensive software. Basic free tools are enough to start learning.

Code Editor

A code editor is used to write HTML and CSS code. Recommended: VS Code.

Examples: VS Code, Sublime Text, Notepad++, Brackets, simple Notepad.

Web Browser

A browser reads your HTML file and displays the webpage output.

Examples: Google Chrome, Microsoft Edge, Mozilla Firefox, Safari.

Project Folder

A project folder keeps your website files organized and easy to manage.

Example: html-course, my-website, institute-website.
Professional Tip: Always create one separate folder for every website project. Do not keep all HTML files randomly on Desktop.
Project Structure

Recommended Folder Structure

A clean folder structure makes your website easier to build, edit and upload later.

html-course/
│
├── index.html # homepage
├── about.html # about page
├── contact.html # contact page
│
├── assets/
│   ├── css/
│   │   └── style.css
│   ├── img/
│   │   └── logo.png
│   └── js/
│       └── script.js

HTML Files

These files create different pages of your website.

  • index.html
  • about.html
  • contact.html

CSS Folder

The CSS folder stores design and styling files.

  • style.css
  • responsive.css
  • theme.css

Image Folder

The image folder stores logos, banners and photos.

  • logo.png
  • banner.jpg
  • student-photo.webp
First HTML File

Create Your First index.html File

The homepage of a website is usually named index.html.

Type this code in your editor and save as index.html

<!DOCTYPE html>
<html>
<head>
    <title>My First Website</title>
</head>
<body>

    <h1>Welcome to My Website</h1>
    <p>This is my first HTML page.</p>

</body>
</html>
Practice Task: Create a folder named html-course, create index.html inside it, type this code and open it in Chrome.
File Naming Rules

Professional File Naming Habits

Correct file names prevent broken links and upload problems.

Good File Name Avoid This Reason
index.html Index.HTML Use lowercase for safe hosting.
about-us.html About Us.html Avoid spaces in file names.
student-photo.jpg student photo final new.jpg Use short, clean and meaningful names.
style.css style.css.txt Wrong extension will not work as CSS.
logo.png LOGO.PNG Keep names consistent and lowercase.
Golden Rule: Use lowercase letters, hyphen between words, and correct file extensions.
Beginner Guidance

Common Setup Mistakes

Most beginners face errors because of file names, paths and wrong extensions.

Wrong Setup

  • Saving file as index.html.txt
  • Keeping images in different random folders
  • Using spaces in file names
  • Opening wrong file in browser
  • Forgetting where the project folder is saved

Correct Setup

  • Create one project folder
  • Keep homepage as index.html
  • Keep all images inside assets/img
  • Keep CSS files inside assets/css
  • Use simple lowercase file names
Remember: If your image or CSS does not load, first check the file path and spelling carefully.
Quick Quiz

Test Your Setup Knowledge

Select the correct answers and check your score.

1. Which file name is commonly used for homepage?

The homepage of a website is commonly named index.html.

2. Which tool is used to view HTML output?

A web browser displays the HTML page output.

3. Which is a good folder name?

html-course is clean, lowercase and does not contain spaces.

4. CSS files are generally stored in which folder?

CSS files are generally kept in assets/css or css folder.

5. Which file name should be avoided?

Avoid spaces in file names. Use my-page.html instead.
Quick Revision

Remember These Setup Points

Revise these before moving to Chapter 3.

Code Editor

Use a code editor like VS Code to write HTML and CSS neatly.

Browser

Use Chrome, Edge or Firefox to open and test HTML files.

Project Folder

Create a separate folder for every website project.

index.html

The homepage of a website is usually named index.html.

assets/css

Keep design files like style.css inside the CSS folder.

assets/img

Keep images, logos and banners inside the image folder.

Previous Chapter Next Chapter: HTML Document Structure