├── README.md ├── index5.html ├── responsivestyle.css ├── animation.css ├── index3.html ├── style2.css ├── MySQL_Lecture3.md ├── index2.html ├── style.css ├── MySQL_Lecture2.md ├── MySQL_Lecture1.md ├── Index.html └── index4.html /README.md: -------------------------------------------------------------------------------- 1 | Link to repo 2 | 3 | https://github.com/sarthak-1998/HTML_-Tutorial_Sanket 4 | -------------------------------------------------------------------------------- /index5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Animation page 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /responsivestyle.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: pink; 3 | } 4 | 5 | @media screen and (max-width: 768px) and (min-width: 600px){ 6 | 7 | 8 | 9 | * { 10 | max-width: 100%; 11 | display: none; 12 | } 13 | 14 | #container { 15 | 16 | width: 400px; 17 | 18 | } 19 | 20 | img { 21 | height: auto; 22 | } 23 | } 24 | 25 | #printmsg{ 26 | font-size: 200px; 27 | display: none; 28 | } 29 | 30 | @media print { 31 | 32 | #printmsg { 33 | display: block; 34 | } 35 | 36 | } 37 | 38 | -------------------------------------------------------------------------------- /animation.css: -------------------------------------------------------------------------------- 1 | #box { 2 | width: 100px; 3 | height: 100px; 4 | background-color: red; 5 | animation: test 1000ms linear 2; 6 | top: 0px; 7 | position: absolute; 8 | } 9 | 10 | @keyframes test { 11 | 0% { 12 | background-color: red; 13 | top: 0px; 14 | 15 | } 16 | 24.9%{ 17 | background-color: red; 18 | } 19 | 20 | 25%{ 21 | background-color: black; 22 | } 23 | 24 | 25 | 49.9% { 26 | background-color: black; 27 | top: 150px; 28 | } 29 | 50%{ 30 | background-color: red; 31 | } 32 | 74.9%{ 33 | background-color: red; 34 | } 35 | 75%{ 36 | background-color: black; 37 | } 38 | 39 | 100% { 40 | background-color: black; 41 | top:0px; 42 | width: 10px; 43 | height: 10px; 44 | } 45 | } -------------------------------------------------------------------------------- /index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Google 7 | 8 | 9 | 10 |
11 | 17 |
18 | 19 | 20 |
21 |
YOLO
22 |
23 | 24 |
25 | 28 | 29 | 30 | 31 |
32 | 33 | 34 | 35 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /style2.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | body { 4 | display: flex; 5 | flex-direction: column; 6 | min-height: 300vh; 7 | 8 | } 9 | 10 | #parent{ 11 | display: flex; 12 | flex-direction: column; 13 | 14 | } 15 | 16 | @media screen and (min-width: 500px) { 17 | #parent{ 18 | display:flex; 19 | flex-wrap: wrap; 20 | 21 | } 22 | 23 | } 24 | 25 | nav, footer{ 26 | flex-shrink: 0; 27 | 28 | } 29 | 30 | nav ul { 31 | display: flex; 32 | justify-content: end; 33 | } 34 | 35 | 36 | nav ul li { 37 | list-style: none; 38 | padding: 10px; 39 | margin: 2px; 40 | 41 | @media screen and (min-width: 500px) { 42 | 43 | display:flex; 44 | flex-wrap: wrap; 45 | 46 | 47 | 48 | } 49 | } 50 | 51 | 52 | 53 | section{ 54 | flex-grow: 1; 55 | justify-content: center; 56 | align-items: center; 57 | display: flex; 58 | position: relative; 59 | 60 | 61 | } 62 | 63 | section span { 64 | background-color: blue; 65 | width: 100px; 66 | height: 100px; 67 | position:relative ; 68 | top: -10px; 69 | right: 90px; 70 | } 71 | 72 | #logo { 73 | background-color: red; 74 | width: 80vw; 75 | height: 100px; 76 | } 77 | 78 | 79 | .layer { 80 | background-color: grey; 81 | width: 100%; 82 | height: 100px; 83 | border: 2px solid black; 84 | 85 | } -------------------------------------------------------------------------------- /MySQL_Lecture3.md: -------------------------------------------------------------------------------- 1 | Joins?? 2 | 3 | Right, Left, Inner and Outer Join + Self Join 4 | 5 | SELECT * FROM INNER JOIN
ON {join condition} 6 | 7 | SELECT * FROM Actors INNER JOIN DigitalAssets ON Actors.Id = DigitalAssets.Id ; 8 | 9 | SELECT * FROM Actors LEFT JOIN DigitalAssets ON Actors.Id = DigitalAssets.Id ; 10 | 11 | SELECT * FROM Actors RIGHT JOIN DigitalAssets ON Actors.Id = DigitalAssets.Id ; 12 | 13 | SELECT * From Actors, DigitalAssets WHERE Actors.Id=DigitalAssets.Id; 14 | // for same as inner join 15 | 16 | 17 | SELECT FirstName, DoB, URL FROM Actors LEFT JOIN DigitalAssets USING(Id); 18 | SELECT FirstName, DoB, URL FROM Actors RIGHT JOIN DigitalAssets USING(Id); 19 | SELECT FirstName, DoB, URL FROM DigitalAssets RIGHT JOIN Actors USING(Id); // same result as the 1st query as tables postions are changed 20 | 21 | // USING(id) only when both tables have same connecting column name 22 | 23 | 24 | SELECT Firstname, DoB,URL FROM Actors INNER JOIN DigitalAssets; 25 | // Cartesian Product i.e every row from table a matched with every other row from table b - Count is No. of rows of A * No. of rows of B 26 | 27 | 28 | (SELECT * FROM students2) UNION (SELECT * FROM tempactors); 29 | //UNION of query results i.e just mergeing both query results into 1 output - only when column count is same. 30 | 31 | 32 | 33 | SELF JOIN 34 | 35 | Table - id, employee name, x, y, z, manager id -------------------------------------------------------------------------------- /index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My website 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 | 27 | 28 | 38 | 39 | 40 |
41 |
42 |
43 |
44 | 45 | 46 | 47 | 48 |
49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | } 4 | 5 | 6 | p{ 7 | 8 | font-size: x-large; 9 | border: 2px dashed black; 10 | color: blue; 11 | } 12 | 13 | body{ 14 | background-color: gray; 15 | } 16 | 17 | .test{ 18 | color: orange; 19 | border: 1px solid b; 20 | } 21 | 22 | #test2 { 23 | color: chocolate; 24 | } 25 | 26 | b { 27 | display:block; 28 | background-color: yellow; 29 | } 30 | 31 | 32 | 33 | 34 | 35 | .newlayout{ 36 | display: flex; 37 | flex-direction:row; 38 | 39 | } 40 | 41 | 42 | .newlayout div{ 43 | 44 | background-color: red; 45 | height: 100px; 46 | width:100px; 47 | border: 2px solid black; 48 | margin: 10px; 49 | flex-basis: 400px ; 50 | /* for direction = row - width 51 | for direction = column - height */ 52 | 53 | 54 | } 55 | 56 | .first{ 57 | flex-shrink: 0.2; 58 | } 59 | 60 | 61 | #parent{ 62 | background-color: red; 63 | width: 100vw; 64 | height: 80vh; 65 | display: flex; 66 | /* flex-direction: row-reverse; */ 67 | justify-content:space-evenly; /* main axis*/ 68 | align-items: center; /* cross axis*/ 69 | 70 | /* space-around - more space around the div - spacing on both sides of div equally 71 | 72 | space-between - more space between the div, no space at extreme sides 73 | 74 | space - evenly - spacing the rest of screen area evenly */ 75 | 76 | } 77 | 78 | .child{ 79 | background-color: yellow; 80 | width: 200px; 81 | height: 200px; 82 | border: 1px solid black; 83 | 84 | /* margin: 20px; 85 | */ 86 | 87 | } -------------------------------------------------------------------------------- /MySQL_Lecture2.md: -------------------------------------------------------------------------------- 1 | DELETE FROM
WHERE {comparisson ..} ORDER BY .. LIMIT .. ; 2 | 3 | DELETE FROM Names WHERE name LIKE "%e%" ORDER BY name LIMIT 1; 4 | DELETE FROM Names; 5 | 6 | 7 | 8 | UPDATE
SET = value 1 WHERE {conditions}; 9 | 10 | UPDATE Actors SET FirstName = "RJ", NetWorthInMillions = 1000 WHERE Id = 6; 11 | 12 | 13 | ALTER TABLE
CHANGE [new constraint (datatype or constraint)] 14 | 15 | ALTER TABLE Actors CHANGE NetWorthInMillions NetWorth DECIMAL(10,2); 16 | 17 | 18 | ALTER TABLE
ADD [parameters - datatype and constraint] 19 | 20 | ALTER TABLE Actors DROP MiddleName ; 21 | ALTER TABLE Actors ADD MiddleName VARCHAR(10) AFTER FirstName; 22 | ALTER TABLE Actors CHANGE Region Speciality VARCHAR(20); 23 | 24 | SELECT DoB AS "Date of Birth" FROM Actors; 25 | SELECT CONCAT(FirstName,' ' ,SecondName) AS Name FROM Actors; 26 | 27 | SELECT SUM(NetWorth) FROM Actors; 28 | SELECT SUM(Score) FROM students2 WHERE Marital_Status = 'Married'; 29 | SELECT AVG(Score) FROM students2 WHERE Marital_Status = 'Married'; 30 | SELECT AVG(Score) FROM students2 WHERE Marital_Status = 'Single'; 31 | SELECT COUNT(*) AS "No. of Single People" FROM Students2 WHERE Marital_Status = 'Single'; 32 | SELECT DISTINCT Score FROM students2; 33 | 34 | 35 | 36 | 37 | SELECT Marital_Status, Count(*) FROM students2 GROUP BY Marital_Status ; 38 | SELECT Name FROM Students2 GROUP BY Name ORDER BY Name; 39 | 40 | SELECT DOB, Count(*) FROM Students2 GROUP BY DOB HAVING DOB > '1998-04-26' ; 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /MySQL_Lecture1.md: -------------------------------------------------------------------------------- 1 | SHOW DATABASES; 2 | // to show all the databases available on your system. 3 | 4 | USE ; 5 | // to select a particular database to run queries on 6 | 7 | SHOW TABLES; 8 | // To list down all the tables of a particular selected database 9 | 10 | CREATE DATABASE ; 11 | // to create a new database 12 | 13 | CREATE TABLE { 14 | [datatype] , 15 | [datatype], 16 | . 17 | . 18 | 19 | }; 20 | // to create a new table 21 | 22 | DESC
; 23 | // show structure and description of the table 24 | 25 | 26 | INSERT INTO
(col1, col2, ....) VALUES (, , ...) 27 | // to insert values into a table 28 | 29 | SELECT FROM
; 30 | // to get a specific column data from a table 31 | // use * in place of column name to get all the columns. 32 | 33 | 34 | //("Sanket","2022-01-02","Male"),("Neha","2019-03-04","Female"),("King","1999-01-04","Other"),("JD","2020-01-03","Male"),("Sanket","2022-01-06","Male"),("Neha 2","2019-07-04","Female"),("Kingg","1999-01-04","Other"),("JD","2020-01-03","Male") 35 | 36 | 37 | SELECT * FROM
WHERE {coditions ..} 38 | 39 | Conditions -> comparisson of column data with your values 40 | 41 | Example - SELECT * FROM second WHERE DoB > '2000-01-01' AND Gender = 'Female'; 42 | 43 | SELECT * FROM second ORDER BY DoB DESC; 44 | SELECT * FROM second WHERE NOT Gender = 'Male'; 45 | SELECT * FROM second WHERE DoB > '2020-01-03' OR Gender = 'Female'; 46 | SELECT * FROM second WHERE Name LIKE "_a%"; 47 | SELECT * FROM second WHERE Name LIKE "%a%"; 48 | 49 | SELECT * FROM second WHERE Gender = 'Female' ORDER BY DoB DESC LIMIT 2; 50 | 51 | -------------------------------------------------------------------------------- /Index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML first lecture 7 | 8 | 9 | 10 | 11 | 12 |
13 |

First lecture HTML

14 |
15 | 16 |

testing p tag

17 |
tesing div tag
18 | 19 |

~By Sarthak Jain

20 | 21 |

This is my beginner class on web pages

22 |

23 | Hello World 👋 How's the Josh? test cases scenario

24 | 25 | 26 | Google here 27 | 28 |
29 | 30 |
31 | 32 | 33 | 34 |
35 | 36 | 44 | 45 | 46 | 47 | 48 | 49 | 53 | 54 | 55 | 56 | 57 | 58 | 88 | 89 |
90 |
91 | 92 | 93 | 94 | 95 |

Mr.First Name Last Name

96 | 97 |

Enter Password

98 | 99 | Mobile 100 | 101 | 102 |

Mobile

103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /index4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | My Non-Responsive Web Site 7 | 8 | 9 | 10 | 11 | 12 | 91 | 92 | 93 | 94 | 95 | 96 |
97 | 98 | 99 | 108 | 109 |
110 |

This is an Example of a Non-Responsive Design

111 |

Not allowed to print

112 | 113 |

A stack of old books, with the top book open and the pages fanned outThis is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space.

114 |

This is a subheading level 2

115 |

I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page.

116 |

This is a sub heading level 3

117 |

This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do.

118 |

This is another subheading level 3

119 |

This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page.

120 |

This is another subheading level 2

121 |

This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do.

122 | 123 |
124 | 125 |
126 |

Accessibility Topics

127 | 167 |
168 | 169 |
173 | 174 | 175 | 176 | --------------------------------------------------------------------------------