Coding camp
Lesson 3
Open Codezing using the link below.
Enter your username and password
Click on the Editor
Give the title as L3.1 and save the project.
How to start the html code?
How many boxes do we have?
<html>
<head>
</head>
<body>
</body>
</html>
How many divsets do we need?
<html>
<head>
</head>
<body>
<div id="unit?"></div>
</body>
</html>
Type the unit in html.
Click on the CSS
#unit1{
}
Type:
#unit1{
}
What background color do we have for unit1?
#unit1{
background-color:blue;
}
What is the width and height?
Is this side top or bottom? left or right?
#unit1{
background-color:blue;
width:400px;
height:400px;
}
Type the border.
border-top-right-radius makes the side?
With border radius you can also specify
which corner you want to curve.
Is this side top or bottom? left or right?
#unit1{
background-color:blue;
width:400px;
height:400px;
border-top-right-radius:100px;
}
What border do we type?
#unit1{
background-color:blue;
width:400px;
height:400px;
border-top-right-radius:100px;
border-bottom-right-radius:100px;
}
Does unit1 look like this?
Is this side top or bottom? left or right?
#unit1{
background-color:blue;
width:400px;
height:400px;
border-top-right-radius:100px;
border-bottom-right-radius:100px;
}
What border do we type?
Is this side top or bottom? left or right?
#unit1{
background-color:blue;
width:400px;
height:400px;
border-top-right-radius:100px;
border-bottom-right-radius:100px;
border-bottom-left-radius:100px;
}
Type border radius for this side.
Does unit1 look like this?
Click on the Save button to save your project.
Now we can try to code a new pattern using this property.
Click on Editor button & savethis project as L2.2
How to start the html code?
How many units are there?
<html>
<head>
</head>
<body>
</body>
</html>
How many div sets we need?
<html>
<head>
</head>
<body>
<div id="unit?"></div>
<div id=""></div>
<div id=""></div>
<div id=""></div>
<div id=""></div>
<div id=""></div>
<div id=""></div>
<div id=""></div>
</body>
</html>
What unit do we havefor 1st shape?
<html>
<head>
</head>
<body>
<div id="unit1"></div>
<div id="??"></div>
<div id=""></div>
<div id=""></div>
<div id=""></div>
<div id=""></div>
<div id=""></div>
<div id=""></div>
</body>
</html>
What unit do we havefor 2nd shape?
<html>
<head>
</head>
<body>
<div id="unit1"></div>
<div id="unit2"></div>
<div id="??"></div>
<div id="??"></div>
<div id="??"></div>
<div id="??"></div>
<div id="??"></div>
<div id="??"></div>
</body>
</html>
What about other units?
Click on the CSS
#unit1{
}
Type:
#unit1{
}
What background color do we have for unit1?
#unit1{
background-color:pink;
}
What is the width & height?
#unit1{
background-color:pink;
width:50px;
height:50px;
}
What border-radius do we have for unit1?
What side is unit1?
#unit1{
background-color:pink;
width:50px;
height:50px;
}
Let's type border-radius for unit1.
#unit2{
}
What background color do we have for unit2?
#unit2{
background-color:orange;
}
What is the width & height?
What side is unit2?
#unit2{
background-color:orange;
width:50px;
height:50px;
}
What border-radius do we have for unit2?
We will have the same background color, width and height as unit2 for unit3.
Copy unit2 and paste it as unit3.
What border-radius do we have for unit3?
#unit3{
background-color:orange;
width:50px;
height:50px;
}
What border-radius do we have for unit3?
For unit4 we will have the same properties as unit__?
unit1 or unit2
#unit4{
background-color:??;
width:??;
height:??;
}
What border-radius do we have for unit4?
What about the other units?
Does your output looks like to this?
Good Job!
Click on the Save button to save your project.