Html, Css & Javascript

html basic normal

today we do a just assignment page of the pw skills and converted into a design

i applied the design for this with css

normal HTML is below

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title> project 3 assignment</title>
      <link rel="stylesheet" href="./proj3.css">
</head>
<body>
      <header class="head1">
            <div class="logo">
                  <ul><li type="none"><img src="../assets/white-logo.png" alt=""></li></ul>
            </div>

            <div class="navbar">
                  <ul><li type="none"><a href="#">Apps</a></li></ul>
                  <ul><li type="none"><a href="#">DAO</a></li></ul>
                  <ul><li type="none"><a href="#">Technology</a></li></ul>
                  <ul><li type="none"><a href="#">Token</a></li></ul>  
                  <ul><li type="none"><a href="#">Contributors</a></li></ul>
            </div>
            <div class="button1">
                  <ul><li type="none">Buy 1 Token</li></ul>
            </div>
      </header>



      <main>

            <br><br><br><br><br><br><br><br>
            <div class="main1">

                        <h1> Lets build a better 
                              <br>
                              tommarrow, together.
                        </h1>
                        <p>
                              Buy 1 Token. Join the DAO. change the world 
                        </p>

                        <button>Request Early Access</button>


            </div>
      </main>

</body>
</html>

and for above code we just write normal css like this

body {
      background-image: url(../assets/bg.png);
      background-repeat: no-repeat; 

      background-size: 1230px 570px;

}

.head1 {
      margin: 0;
      display: flex;
      height: 60px;
      flex-direction: row;
      justify-content: space-between;
      border: 2px solid black;

      background: fixed;


}
.logo {
      height: 30px;
      width: 40px;
}



.navbar {
      display: flex;
      flex-direction: row;

}

.button1 {
      height: 30px;
      width: 140px;
      background-color: #eb0aeb;
      color: white;

}



.main1 {
      text-align: center;
      backface-visibility: hidden;
}

javascript

this is normal java script code that accept two numbers and calculate the sum and return

function addNumbers(a=2, b=3) {
      let sum;
      console.log(sum);

      sum = a + b ;

      console.log(sum);

      return sum;
}

addNumbers()

and below is same functionality but logic is different this logic is the multiplication of numbers

function multiplyNumbers(a=2, b=3) {
      let mul;
      console.log(mul);

      mul = a * b ;

      console.log(mul);

      return mul;
}

multiplyNumbers()

below is same function but the declaration of variables using all 3 javascript keywords that is let const var

in todays generation the var keyword is rarely using this is the known as old keyword

function Numbers() {

      var a;
      console.log(a);
      a=10;
      console.log(a);


      let sum;
      console.log(sum);

      sum = a++

      console.log(sum);

      const b=20
      console.log(b);
      return sum;
}

addNumbers()

Html, Css & Javascript

Table of contents

html basic normal

javascript