Set up a new project folder:

Create a new folder on your computer where you'll store your game project.

Give it a descriptive name like "website-camp" or anything you prefer.

Open VS Code.

Click on "File" in the top menu and select "Open Folder".

Navigate to the project folder you created and select it.

Click on "Open" to open the project folder in VS Code.

Create new HTML file and test it

Create a new html file in your project folder, name it index.html

Inside the file type any text

Open the same file in a browser and see result

Prev Next

HTML stands for Hypertext Markup Language. It is the standard language used for creating web pages and displaying content on the internet. HTML uses a set of tags to structure and format the elements of a web page.

Think of HTML as the building blocks of a web page.

Each HTML tag represents a specific element or piece of content, such as headings, paragraphs, images, links, lists, and more.

By using these tags, you can define the structure and organization of your web page.

HTML tags are written inside angle brackets <> and are usually used in pairs, with an opening tag and a closing tag. The content you want to display is placed between the opening and closing tags.

See example:
Prev Next

CSS stands for Cascading Style Sheets. It is a language used to describe the look and formatting of a document written in HTML. In simpler terms, CSS is responsible for making a web page visually pretty by controlling its colors, fonts, layouts, and overall design.

Here's an example of CSS code:

CSS works together with HTML, which is like the structure or skeleton of a web page. HTML defines what the different parts of the page are, like headings, paragraphs, or images. CSS comes in and styles those parts to make them look great.

Prev Next

Let's start coding by creating a new HTML page named index.html and adding the basic structure to it. Follow these steps:

Step 1: Open a text editor or an HTML editor of your choice.

Step 2: Create a new file and save it with the name index.html

Step 3: In the index.html file, start by typing the following code:

Prev Next

Prev Next

Add Top Menu

Let's add a top menu section to the page using a div container and list ul with list items li>.
Here are the steps:

We also need to add css style for our menu bar like this:

Our page should look like this:

Prev Next

Let's add an image to the page using an img tag within a div container. Here are the steps:

you can download image from here

To position our image in the center we also need to add css style:

Your website should look like this:

Prev Next

Let's add some text and content to our webpage

In the provided code, we are creating a layout with two columns using HTML and CSS classes. Let's break it down and explain it in a way that is easier for a 10-year-old to understand:

            <div class="content">
              <div class="container">
                <div class="row">
                  <div class="col-md-6">
                    <h2>About Cars</h2>
                    <p>Cars are a common form of transportation used by people all over the world.</p>
                  </div>
                  <div class="col-md-6">
                    <h2>Types of Cars</h2>
                    <p>There are different types of cars, such as sedans, SUVs,hatchbacks, and sports cars.</p>
                  </div>
                </div>
              </div>
            </div>
          

Our page should liik like this:

Prev Next

Our final html page code is following:

Css file should look like this:

Well Done!

Prev Next

It's time to put your programming language knowledge to the test. We have an exciting quiz for you! Below is a list of programming language names, some of which are real, and others are fake. Your task is to distinguish between them.

For Quiz click the following button:

Programming Language Quiz

Prev