Web Development For Beginners In Hindi: HTML, CSS, JavaScript & More: February 2022

Sunday, 20 February 2022

TUT22 (Navigation)

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation</title>
    <style>
.navbar{
    background-color: rgb(116, 43, 43);
    border-radius: 30px;
}
.navbar ul{
    overflow: auto;
}
.navbar li{
    float: left;
    list-style: none;
    margin: 13px 20px;
}
.search {
    float: right;
    color: white;
    padding: 12px 75px;
}
.navbar li a:hover{
    color: red;
}
.navbar input{
    border: 2px solid black;
    border-radius: 14px;
    padding: 3px 17px;
    width: 129px;
}
.navbar li a{
    padding: 3px 3px;
    text-decoration: none;
    color: white;
}
    </style>
</head>
<body>
    <header>
        <nav class="navbar">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact us</a></li>
                <div class="search">
                    <input type="text" name="search" id="search" placeholder="Search this website">
                </div>
            </ul>

        </nav>
    </header>
    
</body>
</html>

TUT21 (Pseudo selectors & more designing)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo selectors & more designing</title>
    <style>
.container{
    border: 2px solid red;
    background-color: rgb(223, 245, 201);
    padding: 34px;
    margin: 34px auto;
    width: 666px;
}
a{
    text-decoration: none;
    color: black;
    
}
a:hover{
    color: rgb(77, 9, 9);
    background-color: white;
}
a;:visited{
color: yellow;
}
a;:active{
    background-color: blue;
}
.btn{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    background-color: crimson;
    padding: 6px;
    border: none;
    cursor: pointer;
    font-size: 13px;
    border-radius: 4px;
}
.btn:hover {
    color: darkgoldenrod;
    background-color: rgb(223, 245, 201);
}
    </style>
</head>
<body>
    <div class="container" id="cont1">
        <h3>This is my Heading</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente facilis maxime, nisi provident consequuntur cupiditate eveniet numquam officia itaque corrupti totam ipsum quo quaerat dolores quasi. Dolor fugit facilis blanditiis! Fugit qui molestiae amet?</p> <a href="http://google.com" class="btn">Read more</a>
        <button class="btn">Contact us</button>
    </div>
</body>
</html>

Tuesday, 15 February 2022

TUT20 (Alignment)

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alignment</title>
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap" rel="stylesheet">
    <style>
        *{
          box-sizing: border-box;
        }
        body{
            font-family: 'Ubuntu', sans-serif;
        }
        .container{
            width: 900px;
            border: 3px solid purple;
            margin: 33px auto;
            background-color: violet;
            

        }
        .item{
              border: 3px solid grey;
              margin: 49px 3px;
              padding: 12px 3px;
              background: rgb(248, 238, 238);
        }

        #fruit{
            float: right;
            width: 48%;
        }

        #computer{
           float: left;
           width: 48%;

        }
        
    p,h1{
        /* text-align: right;
        text-align: left; */
        text-align: justify;
    }
    h1{
        margin: 23px auto;
        width: 455px;
    }
        
    </style>
</head>
<body>
    <div class="container">
        <h1>Welcome to my Store</h1>
         <div id="fruit" class="item">
            <h3>Fruits</h3>
            <p id="fruitpara" class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga aut doloribus voluptatem, corporis molestiae esse nobis deleniti, officiis veniam et eius soluta exercitationem at quisquam odit dignissimos sapiente fugit, natus perferendis architecto? Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
         
    </div>
    
    <div id="computer" class="item">
        <h3>Computer</h3>
        <p id="Computerpara" class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam quis praesentium, unde sapiente adipisci quam beatae. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab quae ratione voluptates molestiae nulla totam incidunt asperiores hic eius laboriosam labore, dolor ex.Placeat delectus iure expedita harum dolores ipsa dolorem nisi quisquam aut corrupti, hic dignissimos voluptatum iusto.</p>
     </div>

     <div id="Stationary" class="item">
        <h3>Stationary</h3>
        <p id="Stationarypara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam nostrum laudantium magnam molestias itaque corrupti aperiam modi, reiciendis nulla dolores porro tempore veniam repudiandae totam ad voluptatum. At et quisquam unde porro.</p>
     </div>
     <div id="glasses" class="item">
         <h3>Glasses</h3>
         <p id="glassespara" class="para">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Asperiores, earum. Sed corporis inventore optio consequuntur voluptatibus mollitia atque expedita veniam voluptas! Voluptatem, explicabo.</p>
         </div>
     </div>
</body>
</html>

TUT17 (Colors in CSS)

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colors in CSS</title>
    <style>
        #firstPara{
            color: red; /*Color by name*/
        }
        #SecondPara{
            color: rgb(51, 187, 221); /*Color by rgb value*/
        }
        #thirdPara {
            color: #bb6d6d;
            background-color: #c4db5a;  /*Color by hex value*/
        }
    </style>
</head>
<body>
    <H2>This is my first box</H2>
<p id="firstPara">This is a paragraph from first box</p>

 <h2>This is my Second box</h2>
<p id="SecondPara">This is a paragraph from Second box</p>

<h2>This is my third box</h2>
<p id="thirdPara">This is a paragraph from first box</p>

</body>
</html>

TUT18 (Height, Width, Borders and Backgrounds)

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Height, Width, borders and backgrounds </title>
    <style>
        #firstPara{
            background-color: red;
            height: 100px;
            width: 455px;
            border-width: 4px;
            border-color: green;
            border-style: solid;
            border-radius: 3px;

        }

        #SecondPara{
            background-color: rosybrown;
            height: 100px;
            width: 455px;
            border-top: 2px solid violet;
            border-bottom: 2px solid rgb(130, 238, 130);
            border-right: 2px solid rgb(215, 238, 130);
            border-left: 2px solid rgba(235, 10, 186, 0.836);
            border-top-left-radius: 4px;
            border-top-right-radius: 14px;
            border-bottom-right-radius: 8px;
            border-bottom-left-radius: 24px;

        }

        #ThirdPara{
            height: 500px;
            width: 616px;
            background-image: url(https://images.unsplash.com/photo-1562322140-8baeececf3df?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=869&q=80);
            border: 2px solid red;
            background-repeat: no-repeat; /* repeat-x and repeat-y will make it repeat on x and y axis*/
            background-position: center center;
            /* background-position: 192px 34px; */
            background-position: t;
            
        }
    </style>
</head>
<body>
    <h3>This is Heading</h3>
    <p id="firstPara">This is a paragraph</p>

    <h3>This is Second Heading</h3>
    <p id="SecondPara">This is my second paragraph</p>

<h3>This is Third paragraph</h3>
<p id="ThirdPara">This is my Third paragraph</p>
</body>
</html>

TUT19 (Box Model)

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box Model</title>
<style>
    *{
         box-sizing: border-box;
         margin: 0px;
         padding: 0px;

    }
    body{
        background-color: rgba(191, 193, 179, 55%);
    }
.container{
    background-color: burlywood;
    border: 3px solid rgb(red, green, blue);
    /* We can set margin/padding for top, bottom, left and right like this*/ 
    /*padding-top: 79px;
      padding-bottom: 79px;
      padding-left: 34px;
      padding-right: 79px; */

      /*padding/= top right bottom left;*/
      /* padding: 23px 56px 6px 78px;  */

      /* padding: y(top/bottom) x(left/right); */
      padding: 34px 19px;
      margin: 14px 19px;
      border-radius: 23px;
      width: 533px;
      box-sizing: border-box;
}

</style>
</head>
<body>
    <div class="container">

        <h3>This is my heading </h3>
        <p id="First">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi provident earum suscipit labore nam architecto quos error, officiis reprehenderit itaque quidem tempora similique.</p>
    </div>
    <div class="container">

        <h3>This is my heading </h3>
        <p id="Second">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi provident earum suscipit labore nam architecto quos error, officiis reprehenderit itaque quidem tempora similique.</p>
    </div>

    <div class="container">

        <h3>This is my heading </h3>
        <p id="Third">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi provident earum suscipit labore nam architecto quos error, officiis reprehenderit itaque quidem tempora similique.</p>
    </div>

</body>
</html>

Sunday, 13 February 2022

TUT15 (Developer Tools Tutorial)

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Developer Tools</title>
    <style>
    p{
        color: purple;
        font-style: italic;
        background-color: rosybrown;
    }
    .bgyellow{
        background-color: rgb(235, 235, 14);
    }
    </style>
</head>
<body>
    <h4 class="bgyellow">Developer tools Tutorial</h4>
    <p>This is Tutorial for Chrome Developer Tools</p>
</body>
</html>

TUT16 (CSS Fonts)

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Fonts</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap" rel="stylesheet">
<style>
    p{
        font-family:'Ubuntu', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 30px;  /*1/96th of an inch */
        line-height: 1.3em;
    

    }

    span{
        font-weight: bold;
        font-style: italic;
    }
</style>
</head>
<body>
  <h4>CSS Fonts</h4>
  <p>Lets play with <span>Font</span> It is very exciting</p>  
</body>
</html>

TUT14 (CSS Selectors)

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Selectors</title>
    <style>
        /* Element Selector */
        p{
            border: 2px solid red;
        }
        
     /* Id Selector */
#FirstPara{
            color: green;
        }
.redElement{
    color: red;
}

/* Class Selector */
.bgBlue{
    color: rgb(56, 228, 134);
    background-color: blue;
}

/* Grouping Selector */
footer, span{
    background-color: pink;
}
    </style>
</head>
<body>
    <h3>CSS Selectors</h3>
    <p id="FirstPara">This is a simple paragraph to demonstrate CSS Selectors</p>
    <p id="redElement">This is a another simple paragraph to demonstrate CSS Selectors</p>
    <p id="thirdPara" class="redElement bgBlue">This is a another simple paragraph to demonstrate CSS Selectors</p>
    <div>
    <p>This is a yet another simple paragraph inside div to demonstrate CSS Selectors</p>
    <span>This is Span</span>
</div>
<footer>This is Footer</footer>
</body>
</html>

TUT13 (This is CSS Tutorial)

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Tutorial</title>
    <link rel="stylesheet" href="tut13.css">
<style>
p{
    color: rgb(238, 123, 123);
    background-color: rgb(115, 90, 226) !important;
}
</style>
</head>
<body>
    <h3>This is CSS Tutorial</h3>
<!-- <p style="color: red; background-color: yellow;">This Tutorial will teach you everything you need to know about HTML/CSS</p> -->
<p>This Tutorial will teach you everything you need to know about HTML/CSS</p>

</body>
</html>

Saturday, 12 February 2022

TUT12 (HTML Semantic Tags)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Semantic Tags</title>
</head>
<body>
    <H3>Semantic Elements</H3>
    <details>
        <summary>I have keys but no doors. I have space but no room. You can enter but can't leave. What am I?
        </summary> A keyboard.
         A keyboard.
         A keyboard.
         A keyboard.
         A keyboard.
     A keyboard.
         A keyboard. A keyboard.
    </details>

</body>
</html>

Thursday, 10 February 2022

TUT11 (HTML Entities)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Entities</title>
</head>
<body>
    <div class="container">
        <p>This is a paragraph</p>
    </div>
    <div class="container">
        <p>This is another &nbsp; &nbsp; paragraph</p>
        <p>Paragraph is written like this &lt;p&gt;</p>
        <p>Pound is written like this &pound;</p>
        <p>Copyright is written like this &copy;</p>
        <p>Another character is &rAarr;</p>
        <p>Another character is &frac14;</p>
        <p>Empty character is written like this &#8203;</p>
    </div>

</body>
</html>

Web Development For Beginners In Hindi: HTML, CSS, JavaScript & More

Sunday, 20 February 2022

TUT22 (Navigation)

TUT21 (Pseudo selectors & more designing)

Tuesday, 15 February 2022

TUT20 (Alignment)

TUT17 (Colors in CSS)

TUT18 (Height, Width, Borders and Backgrounds)

TUT19 (Box Model)

Sunday, 13 February 2022

TUT15 (Developer Tools Tutorial)

TUT16 (CSS Fonts)

TUT14 (CSS Selectors)

TUT13 (This is CSS Tutorial)

Saturday, 12 February 2022

TUT12 (HTML Semantic Tags)

Thursday, 10 February 2022

TUT11 (HTML Entities)

TUT 44 (CSS GRID - 3)

About Me