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

Saturday, 19 March 2022

TUT37 (CSS Transitions)

<!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 Transitions</title>
</head>
<style>
    body{
        background-color: black;
    }
 #box{
     display: flex;
     height: 200px;
     width: 200px;
     background-color: red;
     justify-content: center;
     align-items: center;
     /* transition-property: background-color; */
     /* transition-duration: 1s; */
     /* transition-timing-function: ease-out; */
      /* transition-delay: 3s; */

      /* Transition short hand property in one line */
      /* transition: background-color 4s ease-in-out 2s */
      
      transition: all 1s ease-in-out 3s

 }

#box:hover{
    background-color: cyan;
    height: 400px;
    width: 300px;
    border-radius: 100px;
    font-size: 45px;
}
</style>
<body>
    <h3>This is CSS Transition Tutorial</h3>
    <div class="container">
        <div id="box">
         This is my box
        </div>
    </div>
</body>
</html>

TUT36 (Keyframes and Animations)

<!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>Keyframes and Animations</title>
</head>
<style>
 .container{
     background-color: yellow;
 }
 .box{
     background-color: green;
     width: 250px;
     height: 250px;
     position: relative;
     animation-name: Zoya2;
     animation-duration: 8s;
     animation-iteration-count: 1;
    /* animation-fill-mode: forwards; */
    /* animation-timing-function: ease-in ease-in-out; */
    /* animation-delay: 3s; */
     /* animation-direction: reverse; */

     /* These properties can be set using this shorthand */
     /* animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-fill-mode */
     animation: zoya 5s ease-in 1s 12 backwards;

    }@keyframes Zoya2{
     0%{
        top: 0px;
        left: 0px; 
    }
    25%{
        top: 250px;
        left: 0px;
       
     }
     75%{
        top: 250px;
        left: 250px;
     }
     100%{
        top: 0px;
        left: 250px;
     }
     }
 }

    }@keyframes Zoya1{
     From{
         width: 200px;}
         To{
             width:1400px
         }
     }
 }

</style>
<body>
    <div class="container">
     <div class="box">
      This is a Box
    </div>
    </div>
</body>
</html>

TUT35 (CSS Variables/Custom Properties)

<!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 Variables/Custom Properties</title>
    <style>
        :root{
            --primary-color: blue;
            --danger-color: red;
            --maxw: 333px;
        }
      .box{
          --box-color: violet;
          width: 200px;
          height: 200px;
          background-color: var(--primary-color);
          border: 2px solid var(--danger-color)
          box-shadow: 3px 3px var(var(--danger-color));
          margin: 2px 9px;
      }
      .container{
         max-width: var(--maxw);
          margin: auto;
          background-color: var(--danger-color);
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: var(--box-color);
      }
    </style>
</head>
<body>
    <div class="container">
       <div class="box"></div>
       <div class="box"></div>
       <div class="box"></div>
    </div>
</body>
</html>

TUT34 (Box shadow and text shadow)

<!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 shadow and text shadow</title>
</head>
<style>
    .container{
        display: flex;
    }
    .card{
        padding: 23px 12px;
        margin: 23px 12px;
        /* border: 2px solid red; */
        background-color: bisque;
        
        /* box-shadow: offset-x offset-y color; */
        /* box-shadow: offset-x offset-y blur-radius spread-radius color; */

        /* box-shadow: 10px 13px green; */
        /* box-shadow: -7px -5px 10px green; */
        /* box-shadow: -7px -5px 10px 20px rgba(71, 172, 172, 0.5) */
        box-shadow: inset 3px 5px red;
    }
    .card h2{
        /* text-shadow: 3px 4px white; */
        text-shadow: 3px 4px 2px white;
    }
</style>
<body>
    <div class="container">
        <div class="card" id="car-1">
        <h2> This is C++ Course</h2>   
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet repudiandae, quaerat rerum quae error assumenda ipsum beatae excepturi explicabo facilis ex? Voluptate quaerat illo iusto quia incidunt quos, ipsa exercitationem ut perspiciatis eligendi nisi!
        </p>
        </div>
        <div class="card" id="car-2">
            <h2>This is HTML Course</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error, voluptates! Dolorem repudiandae vitae, excepturi iusto vel ad reiciendis similique eligendi officia amet animi.</p>
        </div>
        <div class="card" id="car-3">
            <h2> Card3</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates inventore odit qui temporibus ipsa ducimus? Corporis quasi impedit eum! Dolor placeat molestiae explicabo. Expedita praesentium excepturi cumque quidem.</p>
        </div>
    </div>
</body>
</html>

Sunday, 6 March 2022

TUT33(Before and After Pseudo Selector)

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Before and after pseudo selector</title>
    <link href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: black;
            color: white;
        }

        header::before{
            background: url('https://source.unsplash.com/collection/190727/1600x900') no-repeat center center/cover;
            content: "";
            position: absolute;
            top:0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.3;
        }

        .navigation {
            font-family: 'Bree Serif', serif;
            font-size: 20px;
            display: flex;
            flex-direction: row-reverse;
        }

        li {
            list-style: none;
            padding: 20px 23px;
        }

        section {
            height: 344px;
            font-family: 'Bree Serif', serif;
            margin: 3px 230px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        h1 {
            font-size: 4rem;
        }

        p {
            text-align: center;
        }
        

        /* section::after{
        content:"this is a content"
    } */

    </style>
</head>

<body>
    <header>
        <nav class="navbar">
            <ul class="navigation">
                <li class="item">Home</li>
                <li class="item">About</li>
                <li class="item">Services</li>
                <li class="item">Contact Us</li>
            </ul>
        </nav>
    </header>
        <section>
            <h1> Welcome to Coding World</h1>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident error ratione doloribus sed dolorum,
                ipsum cumque reprehenderit dignissimos architecto veniam optio sint aliquam consectetur corrupti vero
                similique velit. Possimus eum consequatur delectus quia magni.</p>
        </section>
       
</body>

</html>

TUT32 (Attribute and nth child pseudo 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>Attribute and nth child pseudo selectors</title>
    <style>
        .container {
            display: block;
            width: 23px;
            margin: auto;
        }

        input {

            display: block;
        }

        input[type='text'] {
            padding: 23px;
            border: 2px solid red;
        }

        a[target] {
            font-size: 44px;
            color: violet;
        }
        }

        a[target='_self'] {
            font-size: 44px;
            color: rgb(21, 17, 233);
        }

        input[type='email'] {
            color: yellow;
            border: 2px solid black;
        }

        /* This is apply css for third child */
        /* li:nth-child(3){
            color: cyan;
        }
        li:nth-child(2n+0){
            color: rgb(207, 20, 13);
        } */

        /* Odd child */
        /* li :nth-child(odd){
            background-color: blueviolet;
        } */
        li :nth-child(even) {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1><a href="http://google.com" target="_blank">Go to google</a></h1>
        <h1><a href="http://facebook.com" target="_self">Go to facebook</a></h1>
        <form action="" class="form-control">
            <input type="text" placeholder="Enter your name">
            <input type="email" placeholder="Enter your email">
            <input type="password" placeholder="Enter your password">
            <input type="submit" value="submit">
        </form>
        <ul>
            <li class="item" id="item-1">Item1</li>
            <li class="item" id="item-2">Item2</li>
            <li class="item" id="item-3">Item3</li>
            <li class="item" id="item-4">Item4</li>
            <li class="item" id="item-5">Item5</li>
        </ul>


    </div>
</body>

</html>

TUT31(Advance 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>More on selectors</title>
</head>
<style>
h1{
    background-color: red;
    color: black;
    font-weight: bold;
    text-align: center;
}

/* if p is contained by any li which is contained by div */
/* div li p{
    color: yellow;
    font-weight: bold;
    background-color: green;
} */

/* if p is right inside div then this CSS will be applied */
/* div > p{
    color: yellow;
    font-weight: bold;
    background-color: green;
} */

/* if p is right after div i.e p is the next sibling of div */
/* div + p{
    color: rgb(224, 105, 105);
    background-color: rgb(235, 217, 217) ;
} */

</style>
<body>
    <h1>This is more on selectors</h1>
<div class="container">
<div class="row">
    <ul>
        <li class="item">
            <p>This is another paragraph inside li </p></li>
            <li>This will not get affected</li>
            <p>This is para inside ul</p>
    </ul>
    <p>This is a paragraph</p>
</div>
<p>This is another paragraph</p>
</div>
<p>This is outermost paragraph</p>
</body>
</html>

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

Saturday, 19 March 2022

TUT37 (CSS Transitions)

TUT36 (Keyframes and Animations)

TUT35 (CSS Variables/Custom Properties)

TUT34 (Box shadow and text shadow)

Sunday, 6 March 2022

TUT33(Before and After Pseudo Selector)

TUT32 (Attribute and nth child pseudo Selectors)

TUT31(Advance CSS Selectors)

TUT 44 (CSS GRID - 3)

About Me