* Note *

Please use a larger screen to view the app

/

Coding camp

Lesson 3

Open Codezing using the link below.

app.codezing.in

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{
                      background-color:??;
                    }

What background color do we have for unit1?

                    #unit1{
                      background-color:blue;
                      width:??;
                      height:??;
                    }

What is the width and height?

Is this side top or bottom? left or right? 

                    #unit1{
                      background-color:blue;
                      width:400px;
                      height:400px;
                      border-top-right-radius:100px;
                    }

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;
                      border-??-??-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;
                      border-??-??-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;
                      border-??-??-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{
                      background-color:??;
                    }

What background color do we have for unit1?

                    #unit1{
                      background-color:pink;
                      width:??;
                      height:??;
                    }

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;
                      border-top-right-radius:50px;
                    }

Let's type border-radius for unit1.

                    #unit2{
                      background-color:??;
                    }

What background color do we have for unit2?

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

What is the width & height?

What side is unit2?

                    #unit2{
                      background-color:orange;
                      width:50px;
                      height:50px;
                      border-??-??-radius: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;
                      border-??-??-radius: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:??;
                      border-??-??-radius:50px;
                    }

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.