Coding Camp
Lesson 1
In Chrome browser, open the following link
Enter your username and password
Click on the Editor.
Give the title as L1 and save the project.
This is the editor where you will be typing the code.
Save your project regularly to avoid potential data loss.
Let's learn some HTML tags.
Type <html> in the HTML - Editor.
This is known as open html.
<html>
For every open html, we will have a close html.
<html>
</html>
In-between html, type open head.
<html>
</html>
What will we type after open head?
<html>
</html>
Did you type close head?
<html>
<head>
</head>
</html>
Let's type open body.
<html>
<head>
</head>
<body>
</html>
What will we type after open body?
<html>
<head>
</head>
<body>
</html>
We use these tags to start HTML code.
Click on the CSS.
body{
}
Type the following in the CSS-Editor.
body{
}
Let's type the background-color property in body tag.
What is your favorite color?
body{
}
Let's assign your favorite color to background-color.
*Type the color in place of ??*
Did the color change in output?
<html>
<head>
</head>
<body>
</body>
</html>
In-between the body tag, let's type open div.
<html>
<head>
</head>
<body>
</body>
</html>
What will we type after open div?
Open the CSS Editor.
div{
}
Let's learn some properties for div tag.
div{
}
What will be the width?
div{
width:50px;
}
What will be the height?
div{
width:50px;
height:50px;
}
What background color shall we assign for the div?
body{
background-color:green;
}
div{
width:50px;
height:50px;
background-color:yellow;
}
Is there one box in the output?
<html>
<head>
</head>
<body>
<div></div>
</body>
</html>
Let's type an additional div set.
<html>
<head>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
How many div sets do we have?
How many boxes are there in the output?
div{
width:50px;
height:50px;
background-color:yellow;
}
Type margin:10px; in div.
div{
width:50px;
height:50px;
background-color:yellow;
margin:10px;
}
Are there two boxes in the output?
div{
width:50px;
height:50px;
background-color:yellow;
margin:??px;
}
Now, change the margin to 20px.
What happens when you change the margin to 20px?
Margin property is used to give space around elements.
How many boxes do we have?
<html>
<head>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
How many div sets do we need?
Let's find out how to change the background color for each box.
<html>
<head>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
What unit do we have for 1st box?
<body>
<div id=" "></div>
<div></div>
<div></div>
<div></div>
</body>
Let's assign the id for the 1st div tag.
<body>
<div id="unit1"></div>
<div></div>
<div></div>
<div></div>
</body>
For 1st box, type the unit.
<body>
<div id="unit1"></div>
<div id="unit?"></div>
<div></div>
<div></div>
</body>
What id do we type for 2nd box?
<body>
<div id="unit1"></div>
<div id="unit2"></div>
<div ??></div>
</body>
What do we have for 3rd box?
<body>
<div id="unit1"></div>
<div id="unit2"></div>
<div id="unit3"></div>
</body>
Did you type id for 3rd box?
div{
background-color: green;
width:50px;
height:50px;
margin:10px;
}
Now, Let's type #unit1 in CSS.
#(hash) is used to define the ' id ' in CSS.
What background color do we have for #unit1?
#unit1{
}
What background color do we have for #unit1?
#unit1{
background-color:pink;
}
#unit2{
}
What background color do we have for #unit2?
#unit3{
??
}
#unit4{
??
}
What background-color do we type for unit3 &unit4?
Now, let's change the width and height for each unit.
#unit1{
background-color:pink;
}
What is the width & height for #unit1?
#unit1{
background-color:pink;
}
Now in unit1, we will type:
#unit2{
background-color:blue;
}
What is the width & height for unit2?
#unit2{
background-color:blue;
}
Type it in CSS?
#unit3{
background-color:yellow;
}
#unit4{
background-color:green;
}
What is the width and height for unit3 and unit4?
#unit1{
background-color:pink;
width:300px;
height:20px;
}
#unit2{
background-color: blue;
width:50px;
height:200px;
}
#unit3{
background-color: yellow;
width:10px;
height:10px;
}
#unit4{
background-color: green;
width:150px;
height:150px;
}
Does your output look similar?
Click on the Save button to save your project.