` tag when you click on a `` tag which contains a paragraph.
8 |
9 | 4. Write a Javascript code for character counts in the `textarea`.
10 |
11 | # Example: 
12 |
13 | 5. Convert a given number from decimal to binary or hexadecimal
14 |
15 | 6. With Javascript write a simple from validation
16 |
17 | 7. In your HTML Add two buttons, where first button action for full screen mode and the second button for exit from full screen mode.
18 |
19 | 8. When user press any key in your html page show a alert that `Invalid Key Pressed`, but when user press spacebar show an alert `Thank You..!!` and close the current window.
20 |
21 | 9. When a cursor is moved over an content, allow the user to edit the content in HTML page.
22 | NOTE: Input element should not be used.
23 |
24 |
--------------------------------------------------------------------------------
/flex-box-example/style.css:
--------------------------------------------------------------------------------
1 | *,
2 | *::before,
3 | *::after {
4 | box-sizing: border-box;
5 | padding: 0;
6 | margin: 0;
7 | }
8 |
9 | html,
10 | body {
11 | width: 100vw;
12 | height: 100vh;
13 | }
14 |
15 | .container {
16 | height: auto;
17 | padding: 2% 10%;
18 | }
19 |
20 | .box {
21 | position: relative;
22 | box-sizing: border-box;
23 | min-height: 1rem;
24 | margin: 2px;
25 | background: #4788c9;
26 | border-radius: 2px;
27 | overflow: hidden;
28 | text-align: center;
29 | color: #fff;
30 | padding: 20px 0;
31 | border: 2px dashed black;
32 | }
33 |
34 | .row {
35 | display: flex;
36 | width: 100%;
37 | flex-flow: row;
38 | flex-direction: row;
39 | flex-wrap: wrap;
40 | justify-content: space-around;
41 | box-sizing: border-box;
42 | }
43 |
44 | .col-12 {
45 | flex-basis: 100%;
46 | max-width: 100%;
47 | }
48 |
49 | .col-6 {
50 | flex-basis: 50%;
51 | max-width: 50%;
52 | }
53 |
54 | .col-4 {
55 | flex-basis: 33%;
56 | max-width: 33%;
57 | }
58 |
59 | .col-4 {
60 | flex-basis: 33%;
61 | max-width: 33%;
62 | }
63 |
64 | .col-1 {
65 | flex-basis: 8.33%;
66 | max-width: 8.33%;
67 | }
68 |
--------------------------------------------------------------------------------
/DOM/001-dom.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | DOM-1
7 |
8 |
9 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
42 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/002.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | HTML & CSS-1
7 |
8 |
9 |
10 |
36 |
37 |
38 |
39 |
40 |
41 | this refers to inline style
42 |
43 |
44 |
45 | this refers to internal style sheet
46 |
47 |
48 |
49 | this refers to external style sheet
50 |
51 |
52 | Display Property
53 |
54 | display block property
55 |
56 |
57 | display inline property
58 |
59 |
60 |
61 |
--------------------------------------------------------------------------------
/005.html:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
19 |
20 |
21 | HTML & CSS-4
22 |
23 |
24 |
25 |
26 |
27 |
32 |
33 |
34 |
35 |
36 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit sapiente quia amet, sint voluptatibus nostrum,
37 |
38 |
39 | praesentium et quasi cum blanditiis natus? Saepe officiis pariatur voluptates at ipsam nihil sequi doloribus.
40 |
41 |
42 |
43 | fontawesome
44 |
45 |
46 |
47 |
48 |
49 | material icon
50 |
51 | backup
52 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/Mini-tasks/001-HTML.md:
--------------------------------------------------------------------------------
1 | # [Guvi Zen](https://www.guvi.io/zen/)
2 |
3 | ## HTML Task to know usage of basic tags.
4 |
5 | 1. Fix the bugs in below snippet
6 |
7 | ```HTML
8 |
9 |
10 | Document
11 | <body>
12 | guvi
13 |
14 |
15 |
16 | Lorem ipsum dolor sit amet consectetur adipisicing elit.
17 |
18 |
19 | Guvi Geek Network
20 |
21 |
22 |