WEBVTT

00:00.000 --> 00:05.000
Setting up a web development environment.

00:05.000 --> 00:12.000
In this video, we'll understand the structure and purpose of HTML in building web pages.

00:12.000 --> 00:17.000
Learn different types of CSS and how to style web page elements.

00:17.000 --> 00:22.000
Explore how JavaScript adds interactivity and dynamic behavior to web pages.

00:22.000 --> 00:32.000
Combine HTML, CSS, and JVAS, C-R-I-P-T to create a complete front-end web page.

00:32.000 --> 00:38.000
Today, building websites is all about creativity and technology working together.

00:38.000 --> 00:44.000
From designing layouts to coding interactive pages, every click shapes a user's experience.

00:44.000 --> 00:54.000
In this lesson, we'll set up our own web development environment and learn how websites come alive on any device anywhere.

01:00.000 --> 01:04.000
First, we opened Visual Studio Code, our coding environment.

01:04.000 --> 01:09.000
Let's create a new folder for our project and inside it add a new file.

01:09.000 --> 01:17.000
In the HTML file, we write the basic structure, including the doc type, HTML, head, and body tags.

01:17.000 --> 01:26.000
Then we save this HTML file to our desktop named index.html.

01:26.000 --> 01:35.000
After running code, the browser window shows our structure web page.

01:36.000 --> 01:46.000
Now we switch to adding CSS, go to file section, and add new text file.

01:46.000 --> 01:49.000
Here we define how our web page should look.

01:49.000 --> 01:53.000
We can set the background color, text color, and font style.

01:53.000 --> 02:02.000
Now say file name as styles.css.

02:02.000 --> 02:05.000
And click run to view the page in your browser.

02:05.000 --> 02:10.000
You can see that our web page is now beautifully styled using CSS.

02:10.000 --> 02:15.000
In this final step, we'll add JavaScript to make our web page interactive.

02:15.000 --> 02:18.000
First, let's create a new file.

02:18.000 --> 02:24.000
Next, we'll write a small JavaScript program inside it and save the file.

02:24.000 --> 02:26.000
Then click run.

02:26.000 --> 02:30.000
The browser screen will appear showing our interactive web page.

02:30.000 --> 02:33.000
We will select the button and see the output.