learning-web-development/Lesson 1.html at main · Soham-1616/learning-web-development · 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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!--Lesson 1 = HTML-->


<!--1. Button is used for adding the button on the website. Button is a type of HTML element. Every element has two tags(<Tag name><Tag name>).
    Tags are of two types 1. Opening Tags and 2. Closing Tag.-->

<button>
  Hello
</button>


<!--2. P stands for the paragraph.It is aslo a HTML element. -->
<p>
  Paragraph of text
</p>

<!--3. <a> = anchor element. It is basically a link to other website. -->
<!--ATTRIBUTES: 1. href = modifies where this link goes
                2. target = Modifies wherther this link opens in a new tab or in the current tab.-->
<a href = "https://www.youtube.com/" target="_blank">
  Link to youtube
</a>


<!-- EXERICES-->

<!--1. Create a button with the text "Click" inside.-->

<button>
  click
</button>

<!--2. Create 2 buttons. 1 with your name and 1 with your favorite food-->
<button>
  Soham
</button>

<button>
  chocolate
</button>

<!--3. Create a paragraph with the text "Hello, World!" inside. 4. Create a paragraph below the previous paragraph and write something you did today-->
<p>
  Hello, World!

  So, today i started my with my new journey for full stack development and for now started with html by watching the tutorial of SuperSimpleDev
</p>


<a href = "https://www.amazon.in/" class = "amazon-link">
  Back to Amazon
</a>

<style>

  .amazon-link{
    color:rgb(0, 113, 133)
  }

  .nike-paragraph{
    color: rgb(0, 0, 0);
    font-weight: bold;
    font-size: 18;
  }

  .stock-para{
    color: rgb(0, 118, 0);
    font-weight: bold;
  }

  .Add-button{
    background-color: rgb(255, 216, 20);
    color: black;
    height: 30px;
    width: 130px;
    border: none;
    border-radius: 30px;
  }

  .buy-button{
    background-color:rgb(255, 164, 28);
    height: 30px;
    width: 110px;
    border: none;
    border-radius: 30px;
  }

</style>

<p class = "nike-paragraph">
  Nike Black Running Shoes
</p>

<p class = "stock-para">
  $39 - in stock.
</p>

<p>
  Free delivery tomorrow.
</p>

<button class = "Add-button">
  Add to Cart
</button>

<button class = "buy-button">
  Buy now
</button>