HTML & CSS

Lesson 2

In the Chrome browser,
open the following link

codezing.in

Type the title as HC2 and click save

How do we start
the html code?

How many units do
we have?

Seven / Nine

Type the required div sets

                        <html>
                            <head>
                            </head>
                            <body>
                              <div></div>
                              <div></div>
                              <div></div>
                              <div></div>
                              <div></div>
                              <div></div>
                              <div></div>
                              <div></div>
                              <div></div>
                            </body>
                        </html>

Did you type 9 units?

Yes / No

                         <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>
                            <div id=""></div>
                         </body>

What unit do we have for the 1st box?

unit1 or unit2

                         <body>
                            <div id="unit1"></div>
                            <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>

What unit do we have for the 2nd box?

unit1 or unit2

Type the units for
each div tag

Click the CSS

                        #unit1{
 
                        }

Type #unit1 in CSS

                        #unit1{
                            background-color:??;
                        }

What background color do
we have for unit1?

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

What is the width &
height for unit1?

                        #unit1{
                            background-color: purple;
                            width:50px;
                            height:50px;
                        }
                        #unit2{
                            background-color:??;
                        }

What background color do
we have for unit2?

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

What is the width &
height for unit2?

                        #unit1{
                            background-color:purple;
                            width:50px;
                            height:50px;
                            ??
                        }
                        #unit2{
                            background-color:yellow;
                            width:50px;
                            height:25px;
                            ??
                        }

What property will we use to
give space between the boxes?

                        #unit1{
                            background-color:purple;
                            width:50px;
                            height:50px;
                            margin:10px;
                        }
                        #unit2{
                            background-color:yellow;
                            width:50px;
                            height:25px;
                            margin:10px;
                        }

Add margin property for both units

Unit3 will have
the same background color,
width and height as unit2

                        #unit3{
                            background-color:yellow;
                            width:50px;
                            height:25px;
                            margin:10px;
                        }

Copy unit2 and paste it as unit3

                        #unit3{
                            background-color:yellow;
                            width:50px;
                            height:25px;
                            margin:10px;
                        }
                        #unit4{
                            ??;
                        }
                        #unit5{
                            ??;
                        }

What background-color do
we have for unit4 & unit5?

                        #unit4{
                            background-color:orange;
                            width:??;
                            height:??;
                        }
                        #unit5{
                            background-color:red;
                            width:??;
                            height:??;
                        }

What width and height do
we have for unit4 & unit5?

                        #unit4{
                            background-color:orange;
                            width:50px;
                            height:50px;
                            ??
                        }
                        #unit5{
                            background-color:red;
                            width:50px;
                            height:100px;
                            ??
                        }

Add margin property
for unit4 & unit5

Unit 6 is the same as unit_?

Unit4 / Unit1

                         #unit6{
                            background-color:orange;
                            width:50px;
                            height:50px;
                            margin:10px;
                        }

Copy unit4 and paste
it as unit6

What units are same as unit7,
unit8, and unit9?

Copy-paste the CSS code
for unit7 to unit9

Does your output
look similar?

Yes / No

Good!
Now let's learn a new CSS property

                        #unit1{
                            background-color:purple;
                            width:50px;
                            height:50px;
                            margin:10px;
                            border-radius:50px;
                        }

Type border-radius in #unit1

                        #unit1{
                            background-color:purple;
                            width:50px;
                            height:50px;
                            margin:10px;
                            border-radius:50px;
                        }

What is the shape of unit1 now?

Border-radius changes a
square into __?

Square / Circle

Let change unit4, unit6 and unit9 into circles

Does your output
look similar?

Yes / No

Good Job!

Let's save the project