Coding Camp

Lesson 5

In Chrome browser, open the following link

app.codezing.in

Username:hhc

Password:hhc21

Enter your username and password

Click on the Editor

Click on editor and save the project as L5.1

How to start the html code??

How many shapes do we have?

How many div sets we need?

What unit do we type for the first shape?

                    <html> 
                      <head> 
                      </head>
                        <body> 
                          <div id="??"></div>
                          <div></div>
                          <div></div>
                        <body>
                    </html>

Type the id in the div.

What about the other units?

                    <html> 
                      <head> 
                      </head>
                        <body> 
                          <div id="unit1"></div>
                          <div id="unit?"></div>
                          <div id="unit?"></div>
                        <body>
                    </html>

What about other units?

Click on the CSS

                    #unit{
                    }

Type:

Let's choose a background-color similar to yellow for unit1.

                    #unit{
                    background-color:??
                    }

Type the background-color.

                    #unit{
                    background-color:??
                    width:??;
                    height:??;
                    }

What is the width and height?

What border-radius do we have for unit1?

                    #unit{
                    background-color:??;
                    width:??;
                    height:??;
                    border-??-??-radius:??;
                    }

Type the border and give value 100px.

                    #unit2{ 
 }

Type:

                    #unit2{
                    background-color:??;
                    }

Give a background color for unit2

                     #unit2{
                     background-color:??;
                     width:??;
                     height:??;
                     border-??-??-radius:??;
                     }

What is the width and height for unit2

What border-radius do we have?

                     #unit2{
                     background-color:??;
                     width:100px;
                     height:100px;
                     border-??-??-radius:??;
                     border-??-??-radius:??;
                     }

Give the border type and value as 100px.

                      #unit3{
                     }

Type:

                    #unit3{
                    background-color:??;
                    }

Type white as background color for unit3.

                    #unit3{
                    background-color:??;
                    width:??;
                    height:??;
                    }

What is the width and height for unit3?

                    #unit3{
                    background-color:??;
                    width:30px;
                    height:30px;
                    ??
                    }

What property will we use to make it into circle?

Type the CSS code for unit3?

Does your pattern looks similar to this?

Good job!

                    #unit1{
                    background-color:yellow;
                    width:100px;
                    height:100px;
                    border-top-right-radius:100px;
                    position:absolute;
                    }

Type position:absolute.

What position do we have for unit1?

                    #unit1{
                    background-color:yellow;
                    width:100px;
                    height:100px;
                    border-top-right-radius:100px;
                    position:absolute;
                    top:??;
                    left:??;
                    }

What is the top and left for unit1?

What about unit2?

                    #unit2{
                    background-color:yellow;
                    width:100px;
                    height:100px;
                    border-top-right-radius:100px;
                    position:absolute;
                    top:??;
                    left:??;
                    }

What is the top and left?

Can you guess the top & left for unit3?

                    #unit3{
                    background-color:yellow;
                    width:30px;
                    height:30px;
                    border-top-right-radius:30px;
                    position:absolute;
                    top:??;
                    left:??;
                    }

Add the top and left

Does your output looks similar to this?

Click on the Save button to save your project

Click on Editor button & save this project as L5.2

How to start the html code??

How many units do we have?

Type div ids with its units.

Click on the CSS

                         #unit1{  }

In Css, type:

Let's choose a background-color similar to Lightgreen for unit1.

                        #unit1{
                             background-color:??;
                        }

Type background-color for unit1.

                    #unit{
                    background-color:??;
                    width:??px;
                    height:??px;
                    }

What is the width and height?

                    #unit{
                    background-color:lightgreen;
                    width:100px;
                    height:100px;
                    ??
                    }

What type of border-radius do we have for #unit1?

                    #unit{
                    background-color:lightgreen;
                    width:100px;
                    height:100px;
                    border-??-??-radius:??;
                    }

What type of border do we have for unit1?

                    .s1{
                        background-color:lightgreen;
                        width:100px;
                        height:100px;
                        border-top-left-radius:100px;
                    }
                    .s2{
                        background-color:??;
                    }

Let's choose a background-color similar to Darkgreen for s2.

Colors similar to darkgreen

                    .s2{
                        background-color:darkgreen;
                        width:??px;                     
                        height:??px;
                      }

What is the width and height?

                    .s2{
                        background-color:darkgreen;
                        width:??px;
                        height:??px;
                        ??                     
                        ??
                      }

What border-radius do we have for .s2?

            .s2{
            background-color:lightgreen ;
            width:200px;
            height:100px;
            border-??-??-radius:??;                     
            border-??-??-radius:??;
                      }

Add border-radius to .s2

s3 & s4 is similar as s_?

What is the common class in the highlighted portion?

                    .shape{
                    }

Type:

                    .s1{
                        background-color:lightgreen;
                        width:100px;
                        height:100px;
                        border-top-left-radius:100px;
                    }

Cut background color, width and height from .s1 and paste it in .shape .

                    .s1{
                        background-color:lightgreen;
                        width:100px;
                        height:100px;
                        border-top-left-radius:100px;
                    }

What type of border-radius do we have for .s3 and .s4?

                    .s3{
                        border-??-??-radius:??;
                    }
                    .s4{
                        border-??-??-radius:??;
                    }

What type of border-radius do we have for .s3 and .s4?

                    .s3{
                        border-??-??-radius:100px;
                    }
                    .s4{
                       border-??-??-radius:??;
                    }

Type background color as white for .s5.

                    .s5{
                        background-color:white;
                        width:??px;                     
                        height:??px;
                      }

What is the width and height for .s5?

                    .s5{
                        background-color:white;
                        width:25px;
                        height:25px;
                        ??  
                      }

What property we add to make a circle?

Does your pattern looks similar to this?

Great Work!!

What position do we have for s1?

What is the top and left for .s1?

                    .s1{
                        border-top-left-radius:100px;
                        position:??;  
                        top:??;  
                        left:??;  
                      }

Add the properties for .s1:

What about s2 to s4.

                    .s_{
                        position:??;  
                        top:??;  
                        left:??;  
                      }

Add the properties for .s2 to .s4:

Can you guess the top & left for unit5?

Does your output look like this?

Click on the Save button to save your project.