Hellow World!
12 | 13 | -------------------------------------------------------------------------------- /css/lesson-css-specificity.css: -------------------------------------------------------------------------------- 1 | p { 2 | color: black; 3 | } 4 | 5 | .content { 6 | color: brown; 7 | } 8 | 9 | #content-id { 10 | color: darkgreen; 11 | } 12 | 13 | h4 { 14 | color: blueviolet; 15 | } 16 | 17 | .card-title { 18 | color: darkred; 19 | } 20 | 21 | #recipe-card-title { 22 | color: darkslategrey; 23 | } 24 | 25 | div h4 { 26 | color: cadetblue; 27 | } 28 | 29 | div .card-title { 30 | color: darkolivegreen; 31 | } 32 | 33 | div #recipe-card-title { 34 | color: blueviolet; 35 | } 36 | -------------------------------------------------------------------------------- /pages/lesson-css-animation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
13 | 
16 | 
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/exercises/css/exercise-07.css:
--------------------------------------------------------------------------------
1 | .container {
2 | width: 90rem;
3 | height: 50rem;
4 | display: grid;
5 | grid-template-columns: repeat(3, 1fr);
6 | /* column-gap: 12px;
7 | row-gap: 12px; */
8 | gap: 12px;
9 | }
10 |
11 | .container > div {
12 | border: 2px solid black;
13 | border-radius: 12px;
14 | text-align: justify;
15 | padding: 7px;
16 | background-color: linen;
17 | }
18 |
19 | .container > div:nth-child(5) {
20 | display: grid;
21 | grid-template-columns: repeat(3, 1fr);
22 | }
23 |
24 | .nested > div {
25 | border: 1px solid black;
26 | padding: 8px;
27 | margin: 2px;
28 | border-radius: 12px;
29 | background-color: lightgrey;
30 | }
31 |
--------------------------------------------------------------------------------
/pages/lesson-css-borders.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 12 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid autem 13 | asperiores illum quas! Illum culpa quam magni eligendi consequuntur! 14 | Dolorem asperiores facere nesciunt laborum fugit maiores perferendis rem 15 | sapiente dolores! 16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /css/lesson-dom-handling.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | height: 100vh; 4 | background-color: lightgoldenrodyellow; 5 | font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 6 | Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 7 | display: flex; 8 | } 9 | 10 | .container { 11 | width: 50%; 12 | height: 100%; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | } 17 | 18 | #box { 19 | width: 350px; 20 | height: 350px; 21 | border: 2px solid; 22 | border-radius: 26px; 23 | font-size: large; 24 | 25 | display: flex; 26 | justify-content: center; 27 | align-items: center; 28 | } 29 | -------------------------------------------------------------------------------- /exercises/js/Exercise12.js: -------------------------------------------------------------------------------- 1 | // let value = document.getElementById("numberField"); 2 | 3 | // value.addEventListener("input", () => { 4 | // let inputValue = value.value; 5 | // if (!/^\d+$/.test(inputValue)) { 6 | // alert("Please Input Numbers Only!"); 7 | // value.value = inputValue.replace(/\D/g, ""); // Remove non-numeric characters 8 | // } 9 | // }); 10 | 11 | // ============== numbers only calculation ============== 12 | document.getElementById("numberField").addEventListener("keydown", function (event) { 13 | console.log(event.keyCode); 14 | if (!(event.keyCode >= 48 && event.keyCode <= 57)) { 15 | event.preventDefault() 16 | alert("Numbers Only !!!") 17 | } 18 | }) 19 | -------------------------------------------------------------------------------- /js/js-variables.js: -------------------------------------------------------------------------------- 1 | /* 2 | keywords use for variables defining in JavaScript 3 | 1. var 4 | 2. let 5 | 3. const 6 | */ 7 | 8 | let firstName = "Nisal" 9 | let lastName = "Perera" 10 | 11 | var age = 18; 12 | 13 | const salary = 50000.00 14 | // salary = 6000 15 | 16 | console.log(firstName + " " + lastName) 17 | 18 | console.log(firstName, lastName) 19 | 20 | /* 21 | IMPORTANT POINTS 22 | 23 | 1. variables can not be a reserved word 24 | 2. variable name should be meaningful 25 | 3. variable name can not start with numbers 26 | 4. witihin variable name, there can not contain spaces or hyphens (-) 27 | (can use camel case or snake case) 28 | 29 | 5. variables are case sensitive 30 | */ 31 | -------------------------------------------------------------------------------- /css/lesson-css-units.css: -------------------------------------------------------------------------------- 1 | .box { 2 | background: linear-gradient(to right, gold, black); 3 | color: black; 4 | border: 1px solid black; 5 | height: 200px; 6 | margin-top: 8px; 7 | } 8 | 9 | .box-pixels { 10 | width: 400px; 11 | } 12 | 13 | .box-percentage { 14 | width: 50%; 15 | } 16 | 17 | .container { 18 | width: 400px; 19 | height: 200px; 20 | border: 1px solid black; 21 | } 22 | 23 | .box-1 { 24 | width: 100px; 25 | height: 100px; 26 | background-color: gold; 27 | } 28 | 29 | .box-2 { 30 | width: 50%; 31 | background-color: black; 32 | height: 100px; 33 | } 34 | 35 | /* body { 36 | width: 400px; 37 | border: 1px solid black; 38 | } */ 39 | 40 | .box-3 { 41 | width: 50vw; 42 | height: 100px; 43 | } 44 | -------------------------------------------------------------------------------- /js/Constructor.js: -------------------------------------------------------------------------------- 1 | /* Constructor Function */ 2 | /* 3 | function Person(name, age, phone, email) { 4 | this.name = name 5 | this.age = age 6 | this.phone = phone 7 | this.email = email 8 | } 9 | */ 10 | 11 | /* Above constructor function can be converted to a class declaration. */ 12 | 13 | class Person { 14 | constructor(name, age, phone, email) { 15 | this.name = name; 16 | this.age = age; 17 | this.phone = phone; 18 | this.email = email; 19 | } 20 | } 21 | 22 | let person = new Person("Kamal", 40, "0773627367", "kamal@gmail.com"); 23 | console.log(person, "\n"); 24 | console.log("Name :", person.name); 25 | console.log("Age :", person.age); 26 | console.log("Phone :", person.phone); 27 | console.log("Email :", person.email); 28 | -------------------------------------------------------------------------------- /pages/lesson-event-listeners.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |12 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, 13 | perferendis consequuntur repellat, maiores, cupiditate officiis ut facilis 14 | sunt enim voluptate assumenda minima excepturi voluptatibus. Perferendis, 15 | voluptate. Officia corporis adipisci eligendi. Modi minima nulla, amet 16 | commodi vel delectus voluptate aspernatur quas quae non sit expedita harum 17 | beatae, odit minus omnis dolorum. 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /css/lesson-css-transitions.css: -------------------------------------------------------------------------------- 1 | .box { 2 | width: 100px; 3 | height: 100px; 4 | background-color: cadetblue; 5 | margin: 200px auto; 6 | 7 | /* transition-property: background-color; 8 | transition-duration: 2s; */ 9 | 10 | /* transition-property: width; 11 | transition-duration: 2s; 12 | transition-timing-function:ease-in; 13 | transition-delay: 1s; */ 14 | 15 | /* transition: width 2s ease-in 1s; */ 16 | 17 | /* transition-property: all; 18 | transition-duration: 2s; 19 | transition-timing-function: ease-in; 20 | transition-delay: 1s; */ 21 | 22 | transition: all 2s ease-in 1s; 23 | } 24 | 25 | .box:hover { 26 | width: 200px; 27 | height: 250px; 28 | background-color: brown; 29 | } 30 | 31 | .text { 32 | text-align: center; 33 | transition: all 2s ease-in-out 0.2s; 34 | } 35 | 36 | .text:hover { 37 | color: brown; 38 | font-size: 100px; 39 | font-style: italic; 40 | } 41 | -------------------------------------------------------------------------------- /exercises/js/JsExercise02.js: -------------------------------------------------------------------------------- 1 | let mark; 2 | let grade; 3 | 4 | function gradingSystem(mark) { 5 | if (mark > 89) grade = "A+"; 6 | else if (mark > 80) grade = "A-"; 7 | else if (mark > 74) grade = "A"; 8 | else if (mark > 64) grade = "B"; 9 | else if (mark > 54) grade = "C"; 10 | else if (mark > 34) grade = "S"; 11 | else if (mark < 35) grade = "F"; 12 | else grade = "Invalid!"; 13 | 14 | if (mark > 100) grade = "Invalid"; 15 | } 16 | 17 | function getStudentGrade(studentName, mark) { 18 | gradingSystem(mark); 19 | console.log(studentName, "'s", "Grade for", mark, "=>", grade); 20 | } 21 | 22 | getStudentGrade("Nisal", 92); 23 | getStudentGrade("Sumudu", 73); 24 | getStudentGrade("Yasith", 78); 25 | getStudentGrade("Ashen", 100); 26 | getStudentGrade("Aravinda", 12); 27 | getStudentGrade("Lokitha", 38); 28 | getStudentGrade("Janindu", 54); 29 | getStudentGrade("Manawadu", 62); 30 | getStudentGrade("Vimal", -10); 31 | -------------------------------------------------------------------------------- /exercises/css/exercise-06.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | h1 { 7 | text-align: center; 8 | } 9 | 10 | img { 11 | height: 40px; 12 | width: 40px; 13 | padding: 14px; 14 | object-fit: cover; 15 | border-radius: 100px; 16 | object-fit: cover; 17 | } 18 | 19 | .container { 20 | display: flex; 21 | justify-content: space-evenly; 22 | } 23 | 24 | .card { 25 | margin: 10px; 26 | border-radius: 12px; 27 | background-color: darkolivegreen; 28 | box-shadow: 3px 3px 8px darkcyan; 29 | } 30 | 31 | .box-1 { 32 | margin: 20px; 33 | padding: 10px; 34 | display: flex; 35 | border-radius: 12px; 36 | background-color: bisque; 37 | } 38 | 39 | .box-2 { 40 | margin: 20px; 41 | height: 16em; 42 | border-radius: 12px; 43 | background-color: white; 44 | } 45 | 46 | .box-1 p { 47 | padding-left: 9px; 48 | } 49 | 50 | .box-2 p { 51 | padding: 32px; 52 | text-align: left; 53 | text-overflow: clip; 54 | } 55 | -------------------------------------------------------------------------------- /pages/lesson-element-selectors.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |============ Image Element ===========
11 |
16 |
17 |
18 | =========== Audio Element ============
19 | 22 | 23 | 24 |=========== Video Element ===========
25 | 29 | 30 | 31 |==== Embedding an HTML page to current HTML page ====
32 | 37 | 38 | -------------------------------------------------------------------------------- /css/lesson-css-selectors.css: -------------------------------------------------------------------------------- 1 | /* 1.Element Selector */ 2 | h2 { 3 | color: blueviolet; 4 | } 5 | 6 | /* 2. ID Selector */ 7 | #main-heading { 8 | color: brown; 9 | } 10 | 11 | /* 3.Class selector */ 12 | .heading-selector { 13 | color: darkgreen; 14 | } 15 | 16 | /* 4.Attribute selector */ 17 | input[type="text"] { 18 | color: darkred; 19 | background-color: lightcyan; 20 | } 21 | 22 | /* 5.Pseudo class selector */ 23 | button:hover { 24 | background-color: brown; 25 | color: white; 26 | cursor: pointer; 27 | } 28 | 29 | /* 6.Pseudo element selector */ 30 | p::first-line { 31 | color: darkblue; 32 | font-weight: bold; 33 | } 34 | 35 | /* 7.Descendant selector (White-space combinator) */ 36 | div h4 { 37 | color: darkred; 38 | } 39 | 40 | div div h4 { 41 | color: blueviolet; 42 | } 43 | 44 | /* 8. Child selector */ 45 | /* (Selects allelement that is immediately preceded by an
elements that are siblings of an
20 | Hellow World!
30 |Hellow World!
35 |
30 | 29 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque veniam 30 | laborum id explicabo quod deserunt eligendi unde dolor dolore repudiandae, 31 | et, consequuntur eius, dolores modi aperiam omnis cumque? Quos, 32 | exercitationem. 33 |
34 |36 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam aliquid in 37 | tempora quia fugit est dolore odit? Amet laudantium deleniti hic explicabo 38 | quae alias, animi beatae? Quod placeat facilis ab? 39 |
40 | 41 |12 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod assumenda 13 | aspernatur dolorum ipsa ratione quas, quia quae, rerum necessitatibus 14 | expedita deserunt iste placeat adipisci nihil voluptatum iure! Provident, 15 | iste asperiores! Lorem ipsum dolor sit amet consectetur adipisicing elit. 16 | Quod assumenda aspernatur dolorum ipsa ratione quas, quia quae, rerum 17 | necessitatibus expedita deserunt iste placeat adipisci nihil voluptatum 18 | iure! Provident, iste asperiores! 19 |
20 | 21 | ============================= 22 | 23 |27 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere animi, 28 | quidem vitae, earum neque beatae dolores quaerat maiores laboriosam quis 29 | corporis ratione iure repellendus dolor. Quae qui consequuntur minus in? 30 |
31 |27 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, culpa. 28 | Iusto eveniet voluptatum aut recusandae itaque. Sint voluptatum laboriosam 29 | eveniet soluta voluptate? Officiis vero voluptatem, nemo cum perspiciatis 30 | quasi fugiat unde laboriosam est provident culpa dignissimos repellat 31 | consequatur amet harum, hic, ullam at eos! Nobis magnam hic numquam 32 | dolore, laborum consequuntur animi error reiciendis, possimus, sit 33 | suscipit rerum porro laudantium illum est? Exercitationem, enim eum! 34 | Architecto minus commodi expedita at rem cum quos odit deserunt, 35 | voluptatum voluptatibus enim. Nobis amet inventore eaque enim impedit vero 36 | deserunt natus rerum libero, quod itaque quaerat maiores. Harum ullam iure 37 | earum excepturi, aspernatur reprehenderit! 38 |
39 | 40 | 41 | -------------------------------------------------------------------------------- /js/LessonValidationJQuery.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function () { 2 | $("#registrationForm").submit(function (event) { 3 | event.preventDefault(); 4 | if (validateForm()) { 5 | alert("Form Submitted!"); 6 | } 7 | }); 8 | }); 9 | 10 | function validateForm() { 11 | let fullName = $("#fullname").val(); // val means value 12 | let email = $("#email").val(); 13 | let password = $("#password").val(); 14 | let confirmPassword = $("#confirmPassword").val(); 15 | isValid = true; 16 | 17 | if (fullName === null || fullName === "") { 18 | $("#fullNameError").text("Please enter your full name!"); 19 | isValid = false; 20 | } else { 21 | $("#fullNameError").text(""); 22 | } 23 | 24 | if (email === null || email === "") { 25 | $("#emailError").text("Please enter your email!"); 26 | isValid = false; 27 | } else if (!isValidEmail) { 28 | $("#emailError").text("Please enter valid email!"); 29 | isValid = false; 30 | } else { 31 | $("#emailError").text(""); 32 | } 33 | 34 | if (password === null || password === "") { 35 | $("#passwordError").text("Please enter your password!"); 36 | isValid = false; 37 | } else if (password.length < 6) { 38 | $("#passwordError").text("Password must be at least 6 characters!"); 39 | } else { 40 | $("#passwordError").text(""); 41 | } 42 | 43 | if (confirmPassword === null || confirmPassword === "") { 44 | $("#confirmPasswordError").text("Please confirm your password!"); 45 | isValid = false; 46 | } else if (password !== confirmPassword) { 47 | $("#confirmPasswordError").text("Passwords do not match!"); 48 | isValid = false; 49 | } else { 50 | $("#confirmPasswordError").text(""); 51 | } 52 | 53 | return isValid; 54 | } 55 | 56 | function isValidEmail() { 57 | return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); 58 | } 59 | -------------------------------------------------------------------------------- /pages/lesson-list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |=========== Unordered List ===========
13 |============ Ordered List ============
22 |=========== Definition List ===========
31 |37 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam error 38 | quibusdam neque nihil, nam dicta fuga excepturi quae ab voluptatibus ut, 39 | quia molestias maiores, rem doloribus vitae exercitationem repudiandae? A 40 | consequuntur eveniet reiciendis voluptatem minus dolor vel quia ut 41 | doloremque nostrum hic ipsum, excepturi laborum asperiores amet enim? Ipsa 42 | autem dicta, facere hic, nihil consectetur itaque dolorem, natus animi ex 43 | officia veritatis illo? Sequi nisi similique alias sit saepe suscipit 44 | libero dolorem vitae perferendis eius rerum totam illo nihil velit odio at 45 | quod, obcaecati cum adipisci numquam impedit officia ullam. Minima nemo 46 | ipsa cumque vel nostrum at officiis, possimus mollitia 47 |
48 | 49 | 50 | -------------------------------------------------------------------------------- /js/primitive-data-types.js: -------------------------------------------------------------------------------- 1 | /* 2 | There are 6 primitive data types in JavaScript 3 | 1.string 4 | 2.number 5 | 3.boolean 6 | 4.undefined 7 | 5.null -> Represents the intentional absence of any object value. It is a primitive value that represents the absence of a value or an empty value 8 | 6.symbol -> Introduced in ECMAScript 6 (ES6), symbols are unique and immutable primitive values. They are often used as unique identifiers 9 | 7.bigint -> Large integer number (adds 'n' at the end to mention it as a BigInt number) 10 | */ 11 | 12 | // 1.string 13 | let firstName = "Nisal"; 14 | console.log("Type of firstName : " + typeof firstName); 15 | 16 | console.log(""); 17 | 18 | // 2.number 19 | let age = 20; 20 | console.log("Type of age :", typeof age); 21 | let distance = 1.25; 22 | console.log("Type of distance in 'km' :", typeof distance); 23 | 24 | console.log(""); 25 | 26 | // 3.boolean 27 | let isAdded = true; 28 | console.log("Type of isAdded : ", typeof isAdded); 29 | let isDeleted = false; 30 | console.log("Type of isDeleted :", typeof isDeleted); 31 | 32 | console.log(""); 33 | 34 | // 4.undefined 35 | let address; 36 | console.log("Type of address : ", typeof address); 37 | let email = undefined; 38 | console.log("Type of email : ", typeof email); 39 | 40 | console.log(""); 41 | 42 | // 5.null 43 | let phoneNumber = null; 44 | console.log("Type of phoneNumber : ", typeof phoneNumber); 45 | 46 | console.log(""); 47 | 48 | // 6.symbol 49 | let symbol = Symbol("First Name"); 50 | console.log("Type of symbol : ", typeof symbol); 51 | 52 | console.log(""); 53 | 54 | // 7.BigInt -> adds 'n' to the end of a large number 55 | const number = 223344556611778899n; 56 | console.log("Type of number : ", typeof number); // bigint 57 | 58 | const bigIntNumber = 22334455661177889900n; 59 | const normalNumber = 100; 60 | 61 | const result = bigIntNumber + normalNumber; 62 | console.log("Result : ", result); // TypeError: Cannot mix BigInt and other types, use explicit conversions 63 | 64 | /* able to be resolve above error as; */ 65 | const resolvedResult = bigIntNumber + BigInt(normalNumber); 66 | console.log("Resolved Result : ", resolvedResult); // 22334455661177890000n 67 | -------------------------------------------------------------------------------- /pages/lesson-css-margins.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
36 |
41 |
46 | 47 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi cum ipsa 48 | voluptas repellendus, possimus, est maiores tempora impedit quae illum 49 | inventore voluptatum quis aut quod ab dicta consequuntur placeat dolorem 50 | laudantium aperiam labore amet perferendis culpa? Quidem in sequi a, iste 51 | iusto earum culpa maiores tenetur aspernatur, praesentium doloremque 52 | impedit? Esse placeat veniam asperiores, optio, harum quidem magni 53 | distinctio similique libero non rem saepe et dolore consequatur assumenda 54 | aut! Atque laudantium inventore assumenda. Doloremque expedita vel ad 55 | quaerat. Quaerat, consectetur blanditiis. Odit, necessitatibus! Tenetur 56 | cumque hic aperiam saepe ratione illo. Itaque autem, omnis minus nulla 57 | eveniet nisi mollitia! Eum, natus? 58 |
59 | 60 | 61 | -------------------------------------------------------------------------------- /js/Timers.js: -------------------------------------------------------------------------------- 1 | /* 1. setTimeout - executes a function once after a specific delay */ 2 | 3 | /** 4 | * setTimeout(function, timeout_time (is in milliseconds - default)) 5 | * setTimeout(callback, delay) 6 | */ 7 | 8 | setTimeout(function () { 9 | console.log("Hellow...."); 10 | }, 2000) 11 | 12 | // setTimeout function as an arrow function 13 | 14 | setTimeout(() => { 15 | console.log("Hiii...."); 16 | }, 4000) 17 | 18 | // in-order to clear / cancel the timeout function (to stop / cancel the delay of timeout function) 19 | /** 20 | * 1) assign the timeout function to a variable 21 | * 2) call the clearTimeout function 22 | */ 23 | 24 | let timeout = setTimeout(() => { 25 | console.log("Hiii Hiii...."); 26 | }, 3000) 27 | 28 | clearTimeout(timeout) // cancel the timeout 29 | 30 | let greetFunction = () => { 31 | console.log("Hellow World!"); 32 | } 33 | 34 | // in-order to call previously assigned function directly through setTimeout function 35 | setTimeout(greetFunction, 2000); 36 | 37 | console.log("\n===================================\n"); 38 | 39 | /* 2. setInterval - executes function repeatedly, with a fixed time delay between each call */ 40 | 41 | /** 42 | * setInterval(function, interval_time (is in milliseconds - default)) 43 | * setInterval(callback, interval) 44 | */ 45 | 46 | setInterval(function () { 47 | console.log("Heyyyyy"); 48 | }, 1000); 49 | 50 | // in-order to clear / cancel the interval function (to stop / cancel the interval of interval function) 51 | /** 52 | * 1) assign the interval function to a variable 53 | * 2) call the clearInterval function 54 | */ 55 | 56 | let interval = setInterval(function () { 57 | console.log("Heyyyyy hi"); 58 | }, 1000); 59 | 60 | clearInterval(interval) // cancel the interval 61 | 62 | let greet = () => { 63 | console.log("Hellow World!"); 64 | } 65 | 66 | // in-order to call previously assigned function directly through setInterval function 67 | setInterval(greet, 2000); 68 | 69 | /** 70 | * Below Reference error: because arrow functions does not hoist 71 | * (only named functions hoist) 72 | */ 73 | setInterval(greeting, 2000); // ReferenceError: Cannot access 'greeting' before initialization 74 | let greeting = () => { 75 | console.log("Hellow World!"); 76 | } 77 | 78 | -------------------------------------------------------------------------------- /css/lesson-css-animations.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | display: flex; 4 | background-color: black; 5 | } 6 | 7 | img { 8 | width: 70%; 9 | padding-top: 2.4rem; 10 | padding-left: 1.7rem; 11 | } 12 | 13 | .box { 14 | width: 200px; 15 | height: 200px; 16 | background-color: brown; 17 | position: relative; 18 | } 19 | 20 | .box-1 { 21 | top: 100px; 22 | left: 100px; 23 | 24 | /* animation-name: square; 25 | animation-duration: 4s; 26 | animation-timing-function: ease-out; 27 | animation-iteration-count: infinite; 28 | animation-delay: 0.5s; */ 29 | 30 | animation: square 4s ease-out infinite 0.5s; 31 | } 32 | 33 | .box-2 { 34 | top: 350px; 35 | left: 1000px; 36 | border-radius: 16px; 37 | 38 | animation: up-down 4s ease-out infinite 0.5s; 39 | } 40 | 41 | @keyframes square { 42 | /* from { 43 | background-color: darkolivegreen; 44 | } 45 | to { 46 | background-color: cadetblue; 47 | } */ 48 | 49 | /* 0% { 50 | background-color: darkolivegreen; 51 | } 52 | 100% { 53 | background-color: cadetblue; 54 | } */ 55 | 56 | /* 0% { 57 | background-color: blue; 58 | } 59 | 25% { 60 | background-color: yellow; 61 | } 62 | 50% { 63 | background-color: red; 64 | } 65 | 75% { 66 | background-color: white; 67 | } 68 | 100% { 69 | background-color: orangered; 70 | } */ 71 | } 72 | 73 | @keyframes square { 74 | 0% { 75 | background-color: blue; 76 | top: 100px; 77 | left: 100px; 78 | border-radius: 100px; 79 | } 80 | 25% { 81 | background-color: yellow; 82 | top: 100px; 83 | left: 600px; 84 | border-radius: 20px; 85 | transform: scale(2); 86 | } 87 | 50% { 88 | background-color: red; 89 | top: 600px; 90 | left: 600px; 91 | border-radius: 40px; 92 | } 93 | 75% { 94 | background-color: orchid; 95 | top: 600px; 96 | left: 100px; 97 | border-radius: 60px; 98 | } 99 | 100% { 100 | background-color: orangered; 101 | top: 100px; 102 | left: 100px; 103 | border-radius: 100px; 104 | } 105 | } 106 | 107 | @keyframes up-down { 108 | 0%, 109 | 50%, 110 | 100% { 111 | transform: translateY(0); 112 | } 113 | 25%, 114 | 75% { 115 | transform: translateY(-202px); 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /pages/lesson-css-box-model.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 || Personal Information | 28 | 29 | 30 |||
|---|---|---|
| Name: | 32 |33 | 34 | | 35 |Age: | 37 |38 | 39 | | 40 |
| Address: | 42 |Street: | 43 |44 | 45 | | 46 |
| City: | 49 |50 | 51 | | 52 ||
| Zip Code: | 55 |56 | 57 | | 58 ||
| 63 | Additional Information 64 | | 65 |||
| 68 | 74 | | 75 |||
| 78 | 79 | | 80 |||
| Personal Information | 90 |||
|---|---|---|
| Name : | 93 |94 | 95 | | 96 ||
| Age : | 99 |100 | 101 | | 102 ||
| Adress | 105 |Street : | 106 |107 | 108 | | 109 |
| City : | 112 |113 | 114 | | 115 ||
| Zip Code : | 118 |119 | 120 | | 121 ||
| Additional Information | 124 |||
| 127 | 128 | | 129 |||
| 132 | 133 | | 134 |||
========== Heading Elements ==========
11 |19 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 20 | Obcaecati temporibus laudantium quod ipsam quaerat assumenda delectus quis eum, 21 | amet optio placeat exercitationem molestiae repellat odio dolorem officia quos quo? 22 | Est nostrum dicta sunt quisquam. 23 | Fugiat, doloremque autem inventore est alias voluptatum reiciendis optio 24 | suscipit porro consequatur earum ad dolor blanditiis impedit eum quod placeat 25 | perspiciatis enim quaerat excepturi ea sequi reprehenderit libero! Natus, 26 | dolorum! Nisi unde officiis quo excepturi totam vitae veritatis illum molestiae aliquam! 27 | Veritatis nostrum modi provident! Asperiores ut, cumque necessitatibus qui 28 | officiis quidem iusto sapiente non quisquam, excepturi nobis, commodi aliquid consequuntur corrupti nisi. 29 | Nihil, dolorum ea? 30 |
31 | 32 | 33 | 37 | google Web 38 | 39 |44 | Lorem dolor sit amet consectetur adipisicing elit. 45 | Obcaecati temporibus laudantium quod ipsam quaerat assumenda delectus quis eum, 46 | amet optio placeat exercitationem molestiae repellat odio dolorem officia quos quo? 47 | Est nostrum dicta sunt quisquam. 48 | Fugiat, doloremque autem inventore est alias voluptatum reiciendis optio 49 | suscipit porro consequatur earum ad dolor blanditiis impedit eum quod placeat 50 | perspiciatis enim quaerat excepturi ea sequi reprehenderit libero! Natus, 51 | dolorum! Nisi unde officiis quo excepturi totam vitae veritatis illum molestiae aliquam! 52 | Veritatis nostrum modi provident! Asperiores ut, cumque necessitatibus qui 53 | officiis quidem iusto sapiente non quisquam, excepturi nobis, commodi aliquid consequuntur corrupti nisi. 54 | Nihil, dolorum ea? 55 |
56 | 57 | 58 |============== Blockquote Elements =============
59 | 60 |61 | Lorem ipsum dolor, 62 | sit amet consectetur adipisicing elit. 63 | Voluptatem, maxime sed reprehenderit soluta, praesentium 64 | cum doloribus repudiandae fugit dignissimos alias molestiae officiis quaerat, 65 | ipsa iusto vero provident adipisci totam delectus. 66 |67 | 68 | 69 |
=============== Cite Element ==============
70 | 71 | 72 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 73 | In reprehenderit, sint aliquam sed blanditiis molestias 74 | ea error impedit rem ducimus nisi, voluptatem possimus maiores. 75 | Error quod perferendis voluptate perspiciatis ipsa? 76 | 77 | 78 | 79 |=============== Highlighting Element =============
80 | 81 |82 | Lorem ipsum sit amet consectetur adipisicing elit. 83 | Iure in reiciendis ab ratione, cum consequatur qui eligendi corrupti, 84 | cumque at natus molestiae animi veritatis magnam minus quisquam voluptate. 85 | Voluptatum, eos. 86 |
87 | 88 | 89 |================ sub and sup tag ==============
90 | 91 |H2O
92 |10th February 2024
93 | 94 | -------------------------------------------------------------------------------- /pages/lesson-structural.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |======== 1. div tag ========
15 |Main Backend Technologies
17 |======== 2. span tag ========
28 |29 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. 30 | Facilis reiciendis doloribus distinctio commodi a eos, 31 | accusantium veniam, quia dolorem unde soluta nostrum aliquid 32 | facere veritatis eligendi cupiditate voluptas provident 33 | beatae vel fugiat totam fuga! Nihil, doloremque sapiente 34 | minima tempora similique, laboriosam odio maxime quidem, 35 |
36 |======== 3. nav tag ========
40 | 48 |======== 4. header tag ========
53 |======== 5. footer tag ========
68 | 71 |======== 6. article tag ========
76 |79 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. 80 | Facilis reiciendis doloribus distinctio commodi a eos, 81 | accusantium veniam, quia dolorem unde soluta nostrum aliquid 82 | facere veritatis eligendi cupiditate voluptas provident 83 | beatae vel fugiat totam fuga! Nihil, doloremque sapiente 84 | minima tempora similique, laboriosam odio maxime quidem, 85 |
86 |======== 6. section tag ========
91 |94 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. 95 | Facilis reiciendis doloribus distinctio commodi a eos, 96 | accusantium veniam, quia dolorem unde soluta nostrum aliquid 97 | facere veritatis eligendi cupiditate voluptas provident 98 | beatae vel fugiat totam fuga! Nihil, doloremque sapiente 99 | minima tempora similique, laboriosam odio maxime quidem, 100 |
101 |Cartoon 1
13 |
14 | 15 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium 16 | cum minus, provident dolorum dignissimos vitae, quas, aliquid vero 17 | consequatur nostrum sequi autem modi architecto expedita totam 18 | praesentium illum. Ipsam, sint. 19 |
20 |Cartoon 2
23 |
24 | 25 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium 26 | cum minus, provident dolorum dignissimos vitae, quas, aliquid vero 27 | consequatur nostrum sequi autem modi architecto expedita totam 28 | praesentium illum. Ipsam, sint. 29 |
30 |Cartoon 3
33 |
34 | 35 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium 36 | cum minus, provident dolorum dignissimos vitae, quas, aliquid vero 37 | consequatur nostrum sequi autem modi architecto expedita totam 38 | praesentium illum. Ipsam, sint. 39 |
40 |Cartoon 4
43 |
44 | 45 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium 46 | cum minus, provident dolorum dignissimos vitae, quas, aliquid vero 47 | consequatur nostrum sequi autem modi architecto expedita totam 48 | praesentium illum. Ipsam, sint. 49 |
50 |Cartoon 5
55 |
56 | 57 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium 58 | cum minus, provident dolorum dignissimos vitae, quas, aliquid vero 59 | consequatur nostrum sequi autem modi architecto expedita totam 60 | praesentium illum. Ipsam, sint. 61 |
62 |Cartoon 6
65 |
66 | 67 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium 68 | cum minus, provident dolorum dignissimos vitae, quas, aliquid vero 69 | consequatur nostrum sequi autem modi architecto expedita totam 70 | praesentium illum. Ipsam, sint. 71 |
72 |Cartoon 7
75 |
76 | 77 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium 78 | cum minus, provident dolorum dignissimos vitae, quas, aliquid vero 79 | consequatur nostrum sequi autem modi architecto expedita totam 80 | praesentium illum. Ipsam, sint. 81 |
82 |Cartoon 8
85 |
86 | 87 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium 88 | cum minus, provident dolorum dignissimos vitae, quas, aliquid vero 89 | consequatur nostrum sequi autem modi architecto expedita totam 90 | praesentium illum. Ipsam, sint. 91 |
92 |
14 | 31 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, 32 | temporibus eius. Eaque beatae voluptatibus, repudiandae tempore 33 | consequatur voluptates. Corporis, asperiores provident totam quas ipsa 34 | at ullam! Asperiores tempore magnam architecto! 35 |
36 | 50 |
53 |
62 |
70 |
78 |
86 |
94 |
102 |
110 |
118 | ====== Simple HTML Table =====
23 || First Name | 27 |Last Name | 28 |Contact No | 29 |City | 31 ||
|---|---|---|---|---|
| Nisal | 36 |Perera | 37 |0702410876 | 38 |nisal@gmail.com | 39 |Matara | 40 |
| Wimal | 43 |Silva | 44 |0772410876 | 45 |wimal@gmail.com | 46 |Galle | 47 |
====== Table with Head, Body, Foot ======
53 || Item Name | 57 |Quantity | 58 |Unit price | 59 |
|---|---|---|
| Graphic Card | 64 |020 | 65 |40000.00 | 66 |
| Mother Board | 69 |020 | 70 |40000.00 | 71 |
| Total | 76 |80000.00 | 77 ||
| 1 | 84 |2 | 85 |3 | 86 |4 | 87 |
| 5 | 90 |6 | 91 |7 | 92 |8 | 93 |
| 9 | 96 |10 | 97 |11 | 98 |12 | 99 |
| 13 | 102 |14 | 103 |15 | 104 |16 | 105 |
========== Merge Columns (Table colspan) ===========
109 || 1 | 112 |3 | 113 |4 | 114 ||
| 5 | 117 |6 | 118 |||
| 9 | 121 |10 | 122 |12 | 123 ||
| 13 | 126 |16 | 127 |||
=========== Merge Rows (Table rowspan) ============
131 || 1 | 134 |2 | 135 |3 | 136 |4 | 137 |
| 6 | 140 |7 | 141 |8 | 142 ||
| 9 | 145 |12 | 146 |||
| 15 | 149 |
16 | HTML - CSS Practice Model
(FlexBox)
20 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id 21 | minima aperiam distinctio illum quasi, quos ipsam dolore quibusdam 22 | quam blanditiis fugit, expedita quia deserunt, est ipsa ullam 23 | laudantium eum quidem? 24 |
25 |
31 | HTML - CSS Practice Model
(FlexBox)
35 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id 36 | minima aperiam distinctio illum quasi, quos ipsam dolore quibusdam 37 | quam blanditiis fugit, expedita quia deserunt, est ipsa ullam 38 | laudantium eum quidem? 39 |
40 |
46 | HTML - CSS Practice Model
(FlexBox)
50 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id 51 | minima aperiam distinctio illum quasi, quos ipsam dolore quibusdam 52 | quam blanditiis fugit, expedita quia deserunt, est ipsa ullam 53 | laudantium eum quidem? 54 |
55 |
61 | HTML - CSS Practice Model
(FlexBox)
65 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id 66 | minima aperiam distinctio illum quasi, quos ipsam dolore quibusdam 67 | quam blanditiis fugit, expedita quia deserunt, est ipsa ullam 68 | laudantium eum quidem? 69 |
70 |
78 | HTML - CSS Practice Model
(FlexBox)
82 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id 83 | minima aperiam distinctio illum quasi, quos ipsam dolore quibusdam 84 | quam blanditiis fugit, expedita quia deserunt, est ipsa ullam 85 | laudantium eum quidem? 86 |
87 |
93 | HTML - CSS Practice Model
(FlexBox)
97 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id 98 | minima aperiam distinctio illum quasi, quos ipsam dolore quibusdam 99 | quam blanditiis fugit, expedita quia deserunt, est ipsa ullam 100 | laudantium eum quidem? 101 |
102 |
108 | HTML - CSS Practice Model
(FlexBox)
112 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id 113 | minima aperiam distinctio illum quasi, quos ipsam dolore quibusdam 114 | quam blanditiis fugit, expedita quia deserunt, est ipsa ullam 115 | laudantium eum quidem? 116 |
117 |
123 | HTML - CSS Practice Model
(FlexBox)
127 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id 128 | minima aperiam distinctio illum quasi, quos ipsam dolore quibusdam 129 | quam blanditiis fugit, expedita quia deserunt, est ipsa ullam 130 | laudantium eum quidem? 131 |
132 |Hellow World !!!
31 |Hellow World !!!
32 |Hellow World !!!
33 |Hellow World !!!
38 |Hellow World !!!
39 |Hellow World !!!
40 |Hellow World !!!
41 |Hellow World !!!
46 |Hellow World !!!
47 |Hellow World !!!
48 |Hellow World !!!
53 |Hellow World !!!
54 |Hellow World !!!
55 |60 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum 61 | perferendis recusandae animi ipsam. Optio quae odit illum fugiat sequi est 62 | tempore possimus, exercitationem maxime voluptate voluptatem delectus, 63 | ratione doloribus doloremque? 64 |
65 | 66 |67 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum 68 | perferendis recusandae animi ipsam. Optio quae odit illum fugiat sequi est 69 | tempore possimus, exercitationem maxime voluptate voluptatem delectus, 70 | ratione doloribus doloremque? 71 |
72 | 73 |74 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum 75 | perferendis recusandae animi ipsam. Optio quae odit illum fugiat sequi est 76 | tempore possimus, exercitationem maxime voluptate voluptatem delectus, 77 | ratione doloribus doloremque? 78 |
79 | 80 |81 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum 82 | perferendis recusandae animi ipsam. Optio quae odit illum fugiat sequi est 83 | tempore possimus, exercitationem maxime voluptate voluptatem delectus, 84 | ratione doloribus doloremque? 85 |
86 | 87 |88 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum 89 | perferendis recusandae animi ipsam. Optio quae odit illum fugiat sequi est 90 | tempore possimus, exercitationem maxime voluptate voluptatem delectus, 91 | ratione doloribus doloremque? 92 |
93 | 94 |95 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum 96 | perferendis recusandae animi ipsam. Optio quae odit illum fugiat sequi est 97 | tempore possimus, exercitationem maxime voluptate voluptatem delectus, 98 | ratione doloribus doloremque? 99 |
100 |Hello World !!!
105 |Hello World !!!
106 |Hello World !!!
107 |Hello World !!!
108 |Hello World !!!
109 |Hello World !!!
110 |Hello World !!!
114 |Hello World !!!
115 |Hello World !!!
116 |Hello World !!!
120 |Hello World !!!
121 |Hello World !!!
122 |Hello World !!!
123 |127 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, corrupti. 128 |
129 |130 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, corrupti. 131 |
132 |137 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, corrupti. 138 |
139 |140 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, corrupti. 141 |
142 |
130 |
137 |
144 | Class Selector
28 |47 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora laborum 48 | tempore, eveniet veniam nobis magnam sequi aspernatur laudantium rem 49 | beatae esse architecto nihil, dolores consequuntur! Iste non deleniti modi 50 | architecto accusamus reprehenderit at facere minima dolor, quod iusto quas 51 | dolores asperiores tenetur officia ipsam officiis, possimus itaque odit 52 | repellat voluptatibus. Corporis, molestias? Animi illum modi assumenda 53 | ratione, dolore tempore esse non similique veniam quia, pariatur quidem 54 | quo, qui hic ducimus sed delectus labore repudiandae enim? Nobis totam ad 55 | aliquid accusantium ipsam iste maiores deleniti optio nam. Quam ipsa minus 56 | veniam ad necessitatibus provident non eveniet? In impedit officiis 57 | quisquam odio! 58 |
59 |109 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci 110 | numquam, maxime, neque blanditiis quas fugit nostrum ducimus iste aut odit 111 | modi quis eius vitae? Nulla iusto unde voluptates officia? Officiis! 112 |
113 |114 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci 115 | numquam, maxime, neque blanditiis quas fugit nostrum ducimus iste aut odit 116 | modi quis eius vitae? Nulla iusto unde voluptates officia? Officiis! 117 |
118 |119 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci 120 | numquam, maxime, neque blanditiis quas fugit nostrum ducimus iste aut odit 121 | modi quis eius vitae? Nulla iusto unde voluptates officia? Officiis! 122 |
123 |129 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci 130 | numquam, maxime, neque blanditiis quas fugit nostrum ducimus iste aut odit 131 | modi quis eius vitae? Nulla iusto unde voluptates officia? Officiis! 132 |
133 |134 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci 135 | numquam, maxime, neque blanditiis quas fugit nostrum ducimus iste aut odit 136 | modi quis eius vitae? Nulla iusto unde voluptates officia? Officiis! 137 |
138 |139 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci 140 | numquam, maxime, neque blanditiis quas fugit nostrum ducimus iste aut odit 141 | modi quis eius vitae? Nulla iusto unde voluptates officia? Officiis! 142 |
143 | 144 | 145 | -------------------------------------------------------------------------------- /exercises/pages/exercise-10.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
16 | 
19 |
20 |
21 |
22 |
23 | 30 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam 31 | accusantium beatae quia rerum? Consequatur porro corporis 32 | autem vero beatae exercitationem velit sint, incidunt animi 33 | pariatur, molestiae optio veritatis est! Alias. Lorem ipsum 34 | dolor sit amet consectetur adipisicing elit. Totam accusantium 35 | beatae quia rerum? Consequatur porro corporis autem vero 36 | beatae exercitationem velit sint, incidunt animi pariatur, 37 | molestiae optio veritatis est! Alias. 38 |
39 |Gayanuka
43 |
52 |
55 |
56 |
57 |
58 |
59 | 65 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam 66 | accusantium beatae quia rerum? Consequatur porro corporis autem 67 | vero beatae exercitationem velit sint, incidunt animi pariatur, 68 | molestiae optio veritatis est! Alias. 69 |
70 |Gayanuka
73 |
82 |
85 |
86 |
87 |
88 |
89 | 95 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam 96 | accusantium beatae quia rerum? Consequatur porro corporis autem 97 | vero beatae exercitationem velit sint, incidunt animi pariatur, 98 | molestiae optio veritatis est! Alias. 99 |
100 |Gayanuka
103 |
112 |
115 |
116 |
117 |
118 |
119 | 125 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam 126 | accusantium beatae quia rerum? Consequatur porro corporis autem 127 | vero beatae exercitationem velit sint, incidunt animi pariatur, 128 | molestiae optio veritatis est! Alias. 129 |
130 |Gayanuka
133 |
142 |
145 |
146 |
147 |
148 |
149 | 155 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam 156 | accusantium beatae quia rerum? Consequatur porro corporis autem 157 | vero beatae exercitationem velit sint, incidunt animi pariatur, 158 | molestiae optio veritatis est! Alias. 159 |
160 |Gayanuka
163 |
172 |
175 |
176 |
177 |
178 |
179 | 185 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam 186 | accusantium beatae quia rerum? Consequatur porro corporis autem 187 | vero beatae exercitationem velit sint, incidunt animi pariatur, 188 | molestiae optio veritatis est! Alias. 189 |
190 |Gayanuka
193 |11 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit 12 | incidunt facilis in unde? Iste rem voluptate dicta sapiente, dolorum 13 | maxime qui nihil voluptatem eius! Perspiciatis autem fugit fugiat 14 | explicabo illum eveniet sed fuga iste molestiae repudiandae? Nesciunt 15 | dolorem quos voluptas quas aliquam laudantium earum minima, sapiente 16 | voluptates laboriosam quae esse dolores similique optio quasi asperiores 17 | ut. Soluta ipsam ab ducimus quibusdam laborum sed provident consequatur et 18 | fugit quia voluptatem temporibus velit impedit obcaecati dolorem at rerum 19 | asperiores iure vitae, unde minima itaque nemo sapiente sit! Mollitia, 20 | iure earum. Corrupti repudiandae dolor quasi esse accusantium! Officiis 21 | obcaecati distinctio est aliquid optio. 22 |
23 |24 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit 25 | incidunt facilis in unde? Iste rem voluptate dicta sapiente, dolorum 26 | maxime qui nihil voluptatem eius! Perspiciatis autem fugit fugiat 27 | explicabo illum eveniet sed fuga iste molestiae repudiandae? Nesciunt 28 | dolorem quos voluptas quas aliquam laudantium earum minima, sapiente 29 | voluptates laboriosam quae esse dolores similique optio quasi asperiores 30 | ut. Soluta ipsam ab ducimus quibusdam laborum sed provident consequatur et 31 | fugit quia voluptatem temporibus velit impedit obcaecati dolorem at rerum 32 | asperiores iure vitae, unde minima itaque nemo sapiente sit! Mollitia, 33 | iure earum. Corrupti repudiandae dolor quasi esse accusantium! Officiis 34 | obcaecati distinctio est aliquid optio. 35 |
36 |37 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit 38 | incidunt facilis in unde? Iste rem voluptate dicta sapiente, dolorum 39 | maxime qui nihil voluptatem eius! Perspiciatis autem fugit fugiat 40 | explicabo illum eveniet sed fuga iste molestiae repudiandae? Nesciunt 41 | dolorem quos voluptas quas aliquam laudantium earum minima, sapiente 42 | voluptates laboriosam quae esse dolores similique optio quasi asperiores 43 | ut. Soluta ipsam ab ducimus quibusdam laborum sed provident consequatur et 44 | fugit quia voluptatem temporibus velit impedit obcaecati dolorem at rerum 45 | asperiores iure vitae, unde minima itaque nemo sapiente sit! Mollitia, 46 | iure earum. Corrupti repudiandae dolor quasi esse accusantium! Officiis 47 | obcaecati distinctio est aliquid optio. 48 |
49 |50 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit 51 | incidunt facilis in unde? Iste rem voluptate dicta sapiente, dolorum 52 | maxime qui nihil voluptatem eius! Perspiciatis autem fugit fugiat 53 | explicabo illum eveniet sed fuga iste molestiae repudiandae? Nesciunt 54 | dolorem quos voluptas quas aliquam laudantium earum minima, sapiente 55 | voluptates laboriosam quae esse dolores similique optio quasi asperiores 56 | ut. Soluta ipsam ab ducimus quibusdam laborum sed provident consequatur et 57 | fugit quia voluptatem temporibus velit impedit obcaecati dolorem at rerum 58 | asperiores iure vitae, unde minima itaque nemo sapiente sit! Mollitia, 59 | iure earum. Corrupti repudiandae dolor quasi esse accusantium! Officiis 60 | obcaecati distinctio est aliquid optio. 61 |
62 |66 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit 67 | incidunt facilis in unde? Iste rem voluptate dicta sapiente, dolorum 68 | maxime qui nihil voluptatem eius! Perspiciatis autem fugit fugiat 69 | explicabo illum eveniet sed fuga iste molestiae repudiandae? Nesciunt 70 | dolorem quos voluptas quas aliquam laudantium earum minima, sapiente 71 | voluptates laboriosam quae esse dolores similique optio quasi asperiores 72 | ut. Soluta ipsam ab ducimus quibusdam laborum sed provident consequatur et 73 | fugit quia voluptatem temporibus velit impedit obcaecati dolorem at rerum 74 | asperiores iure vitae, unde minima itaque nemo sapiente sit! Mollitia, 75 | iure earum. Corrupti repudiandae dolor quasi esse accusantium! Officiis 76 | obcaecati distinctio est aliquid optio. 77 |
78 |79 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit 80 | incidunt facilis in unde? Iste rem voluptate dicta sapiente, dolorum 81 | maxime qui nihil voluptatem eius! Perspiciatis autem fugit fugiat 82 | explicabo illum eveniet sed fuga iste molestiae repudiandae? Nesciunt 83 | dolorem quos voluptas quas aliquam laudantium earum minima, sapiente 84 | voluptates laboriosam quae esse dolores similique optio quasi asperiores 85 | ut. Soluta ipsam ab ducimus quibusdam laborum sed provident consequatur et 86 | fugit quia voluptatem temporibus velit impedit obcaecati dolorem at rerum 87 | asperiores iure vitae, unde minima itaque nemo sapiente sit! Mollitia, 88 | iure earum. Corrupti repudiandae dolor quasi esse accusantium! Officiis 89 | obcaecati distinctio est aliquid optio. 90 |
91 |92 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit 93 | incidunt facilis in unde? Iste rem voluptate dicta sapiente, dolorum 94 | maxime qui nihil voluptatem eius! Perspiciatis autem fugit fugiat 95 | explicabo illum eveniet sed fuga iste molestiae repudiandae? Nesciunt 96 | dolorem quos voluptas quas aliquam laudantium earum minima, sapiente 97 | voluptates laboriosam quae esse dolores similique optio quasi asperiores 98 | ut. Soluta ipsam ab ducimus quibusdam laborum sed provident consequatur et 99 | fugit quia voluptatem temporibus velit impedit obcaecati dolorem at rerum 100 | asperiores iure vitae, unde minima itaque nemo sapiente sit! Mollitia, 101 | iure earum. Corrupti repudiandae dolor quasi esse accusantium! Officiis 102 | obcaecati distinctio est aliquid optio. 103 |
104 |105 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit 106 | incidunt facilis in unde? Iste rem voluptate dicta sapiente, dolorum 107 | maxime qui nihil voluptatem eius! Perspiciatis autem fugit fugiat 108 | explicabo illum eveniet sed fuga iste molestiae repudiandae? Nesciunt 109 | dolorem quos voluptas quas aliquam laudantium earum minima, sapiente 110 | voluptates laboriosam quae esse dolores similique optio quasi asperiores 111 | ut. Soluta ipsam ab ducimus quibusdam laborum sed provident consequatur et 112 | fugit quia voluptatem temporibus velit impedit obcaecati dolorem at rerum 113 | asperiores iure vitae, unde minima itaque nemo sapiente sit! Mollitia, 114 | iure earum. Corrupti repudiandae dolor quasi esse accusantium! Officiis 115 | obcaecati distinctio est aliquid optio. 116 |
117 |118 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit 119 | incidunt facilis in unde? Iste rem voluptate dicta sapiente, dolorum 120 | maxime qui nihil voluptatem eius! Perspiciatis autem fugit fugiat 121 | explicabo illum eveniet sed fuga iste molestiae repudiandae? Nesciunt 122 | dolorem quos voluptas quas aliquam laudantium earum minima, sapiente 123 | voluptates laboriosam quae esse dolores similique optio quasi asperiores 124 | ut. Soluta ipsam ab ducimus quibusdam laborum sed provident consequatur et 125 | fugit quia voluptatem temporibus velit impedit obcaecati dolorem at rerum 126 | asperiores iure vitae, unde minima itaque nemo sapiente sit! Mollitia, 127 | iure earum. Corrupti repudiandae dolor quasi esse accusantium! Officiis 128 | obcaecati distinctio est aliquid optio. 129 |
130 |131 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit 132 | incidunt facilis in unde? Iste rem voluptate dicta sapiente, dolorum 133 | maxime qui nihil voluptatem eius! Perspiciatis autem fugit fugiat 134 | explicabo illum eveniet sed fuga iste molestiae repudiandae? Nesciunt 135 | dolorem quos voluptas quas aliquam laudantium earum minima, sapiente 136 | voluptates laboriosam quae esse dolores similique optio quasi asperiores 137 | ut. Soluta ipsam ab ducimus quibusdam laborum sed provident consequatur et 138 | fugit quia voluptatem temporibus velit impedit obcaecati dolorem at rerum 139 | asperiores iure vitae, unde minima itaque nemo sapiente sit! Mollitia, 140 | iure earum. Corrupti repudiandae dolor quasi esse accusantium! Officiis 141 | obcaecati distinctio est aliquid optio. 142 |
143 |144 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit 145 | incidunt facilis in unde? Iste rem voluptate dicta sapiente, dolorum 146 | maxime qui nihil voluptatem eius! Perspiciatis autem fugit fugiat 147 | explicabo illum eveniet sed fuga iste molestiae repudiandae? Nesciunt 148 | dolorem quos voluptas quas aliquam laudantium earum minima, sapiente 149 | voluptates laboriosam quae esse dolores similique optio quasi asperiores 150 | ut. Soluta ipsam ab ducimus quibusdam laborum sed provident consequatur et 151 | fugit quia voluptatem temporibus velit impedit obcaecati dolorem at rerum 152 | asperiores iure vitae, unde minima itaque nemo sapiente sit! Mollitia, 153 | iure earum. Corrupti repudiandae dolor quasi esse accusantium! Officiis 154 | obcaecati distinctio est aliquid optio. 155 |
156 | 157 | 158 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #
Internet Technologies 01 Code Space
2 |
3 |
4 | Welcome to the Internet Technologies 01 Code Space !
5 | Here, you'll embark on a journey to master the foundational concepts of web development, focusing on HTML, CSS, and JavaScript.
6 |
To access the content:
58 |git clone -b lesson/Day_02 --single-branch https://github.com/gayanukabulegoda/Internet-Technologies-01.gitTo access the content:
72 |git clone -b lesson/Day_03 --single-branch https://github.com/gayanukabulegoda/Internet-Technologies-01.gitTo access the content:
86 |git clone -b lesson/Day_04 --single-branch https://github.com/gayanukabulegoda/Internet-Technologies-01.gitTo access the content:
101 |git clone -b lesson/Day_05 --single-branch https://github.com/gayanukabulegoda/Internet-Technologies-01.gitTo access the content:
116 |git clone -b lesson/Day_06 --single-branch https://github.com/gayanukabulegoda/Internet-Technologies-01.gitTo access the content:
131 |git clone -b lesson/Day_07 --single-branch https://github.com/gayanukabulegoda/Internet-Technologies-01.gitTo access the content:
146 |git clone -b lesson/Day_08 --single-branch https://github.com/gayanukabulegoda/Internet-Technologies-01.gitTo access the content:
161 |git clone -b lesson/Day_09 --single-branch https://github.com/gayanukabulegoda/Internet-Technologies-01.gitTo access the content:
176 |git clone -b lesson/Day_10 --single-branch https://github.com/gayanukabulegoda/Internet-Technologies-01.gitTo access the content:
192 |git clone -b lesson/Day_11 --single-branch https://github.com/gayanukabulegoda/Internet-Technologies-01.gitTo access the content:
208 |git clone -b lesson/Day_12 --single-branch https://github.com/gayanukabulegoda/Internet-Technologies-01.gitTo access the content:
223 |git clone -b lesson/Day_13 --single-branch https://github.com/gayanukabulegoda/Internet-Technologies-01.gitTo access the content:
239 |git clone -b lesson/Day_14 --single-branch https://github.com/gayanukabulegoda/Internet-Technologies-01.git
262 | 
263 | 
264 | 
265 | 
266 | 
267 | 
268 | 
269 | 
270 | 272 | © 2024 Gayanuka Bulegoda 273 |
274 | --------------------------------------------------------------------------------