html-css-day1-extreme-beginner/index.html at master · FullStackNest/html-css-day1-extreme-beginner · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css"/> <!-- external css 3rd / best practice -->

    <!-- Use below 2 line <link....> & <script...> only when working with bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <style>
        h3 {
          font-size: 36px;
          color: green;
        }
    </style> <!--- internal css 2nd priority-->
</head>
<body>
    <h1>Good morning</h1>
    <h1 style="color: red;">Hello Fullstacknest</h1>  <!-- inline css highest 1st-->
    <h3>Hello class</h3>


    <div class="first-div">
        <p>Hello students</p>
        <!-- Inline CSS can be applied to any of the HTML Tag -->
        <p style="color: yellow; font-weight: 900; font-size: 30px;">Hello everyone</p>
    </div>

    <div id="first-div">
        <p>Hello students</p>
    </div>

    <!-- Below is example of local or internal image display -->
    <img src="certificate.png" alt="Girl in a jacket" width="800" height="600">

    <!-- Below is example of URL /3rd party or external image display -->
    <img src="https://images.pexels.com/photos/17020470/pexels-photo-17020470/free-photo-of-city-water-building-architecture.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load" alt="Girl in a jacket" width="150" height="200">


    <!-- Example of bootstrap -->
    <button type="button" class="btn btn-primary">Primary</button>

</body>
    <!-- Use below 2 script's only when working with bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</html>

<!--
    The width & height should be keep in the ratio of 4:3 for Horizontal images & 3:4 for Vertical.
    width/height : 3/4 : vertical
                 : 4/3 : horizontal

                 If you get confused then just take a small number & multiply it with 3 & 4 respectively.
                 Eg: if I take 50 as referece then for 3:4 Vertical Image it will be width as 50*3 = 150 &
                     height as 50*4 = 200.

                     Similarly for 4:3 horizontal Image it will be width as 50*4 = 200 & height as 50*3 = 150.
 -->