From efe2d7c5b7664cfc5d90d92f2b7ee2ab300e3ca7 Mon Sep 17 00:00:00 2001 From: shahid sermiki Date: Tue, 7 May 2024 06:57:20 -0700 Subject: [PATCH 01/24] new file added --- README.md | 3 ++- index.html | 4 ++++ 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 index.html diff --git a/README.md b/README.md index 04f5d024..c6198e8b 100644 --- a/README.md +++ b/README.md @@ -1 +1,2 @@ -# Osama +#shahid +#Hello diff --git a/index.html b/index.html new file mode 100644 index 00000000..b1503168 --- /dev/null +++ b/index.html @@ -0,0 +1,4 @@ + + + hello + \ No newline at end of file From ac2a424c38da2a8df70cafab23c1b146dbaef290 Mon Sep 17 00:00:00 2001 From: shahid sermiki Date: Tue, 7 May 2024 07:01:42 -0700 Subject: [PATCH 02/24] updated here --- index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index b1503168..5a8f0a3e 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,5 @@ - hello + hello My first github project + \ No newline at end of file From 6aa2dcb010f1a43da51c8e02621dbe39ea0622a9 Mon Sep 17 00:00:00 2001 From: shahid sermiki Date: Wed, 8 May 2024 06:43:55 -0700 Subject: [PATCH 03/24] fb login page --- p1.html | 116 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 116 insertions(+) create mode 100644 p1.html diff --git a/p1.html b/p1.html new file mode 100644 index 00000000..e03a2df7 --- /dev/null +++ b/p1.html @@ -0,0 +1,116 @@ + + + + +
+
+ +
+ +
+ Connect with friends and the + world around you on Facebook.
+ +
+ +
+ See photos and updates + from friends in News Feed +
+
+ +
+ +
+ Share what's new + in your life on your timeline +
+
+ +
+ +
+ Find more + of what you're looking for with graph search +
+
+ + +
+ +
+ +
It's free and always will be
+ +
+ + +
+
+ +
+
+ +
+
+ +
+
+
Birthday
+
+
+ + + + + + +
Why do I need to provide my birthday?
+
+ + + + + + +
+
+
+ By clicking Sign Up, you agree to our
Terms
and that you have read our
Data Use Policy
, including our
Cookie Use
. +
+
+
+ +
+
+
Create a Page
for a celebrity, band or business.
+
+
+
+
+ + \ No newline at end of file From 719a3259f901f60160d81d91eccbde61e22635b2 Mon Sep 17 00:00:00 2001 From: shahid sermiki Date: Fri, 10 May 2024 08:25:16 -0700 Subject: [PATCH 04/24] some html practice codes --- README.md | 2 - practice.html | 128 +++++++++++++++++++++++++++++++++++++++++++++++++ practice2.html | 21 ++++++++ 3 files changed, 149 insertions(+), 2 deletions(-) delete mode 100644 README.md create mode 100644 practice.html create mode 100644 practice2.html diff --git a/README.md b/README.md deleted file mode 100644 index c6198e8b..00000000 --- a/README.md +++ /dev/null @@ -1,2 +0,0 @@ -#shahid -#Hello diff --git a/practice.html b/practice.html new file mode 100644 index 00000000..4c0effe5 --- /dev/null +++ b/practice.html @@ -0,0 +1,128 @@ +
+

Section in HTML

+

WWF

+

The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.

+
+ +
+

WWF's Panda symbol

+

The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.

+
+ +
+

WWF's Panda symbol

+

The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.

+
+ +
+

Article in HTML

+

Google Chrome

+

Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!

+
+ +
+

Mozilla Firefox

+

Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.

+
+ +
+

Microsoft Edge

+

Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.

+
+ +
+
+

What Does WWF Do?

+

WWF's mission:

+
+

WWF's mission is to stop the degradation of our planet's natural environment, + and build a future in which humans live in harmony with nature.

+
+ + + + + + + + + + + + +

My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!

+ + + +

My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!

+

My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!

+ + + +

The details element

+ +
+ Epcot Center +

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

+
+ + + + + +W3.CSS + + + + + +
+

W3Schools Demo

+

Resize this responsive page!

+
+ +
+
+

London

+

London is the capital city of England.

+

It is the most populous city in the United Kingdom, + with a metropolitan area of over 13 million inhabitants.

+
+ +
+

Paris

+

Paris is the capital of France.

+

The Paris area is one of the largest population centers in Europe, + with more than 12 million inhabitants.

+
+ +
+

Tokyo

+

Tokyo is the capital of Japan.

+

It is the center of the Greater Tokyo Area, + and the most populous metropolitan area in the world.

+
+
+ + + + + + + \ No newline at end of file diff --git a/practice2.html b/practice2.html new file mode 100644 index 00000000..abbc9a90 --- /dev/null +++ b/practice2.html @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + \ No newline at end of file From e383e38686f20534f2fa68a92f349a1f55644eae Mon Sep 17 00:00:00 2001 From: shahid sermiki Date: Fri, 10 May 2024 11:23:28 -0700 Subject: [PATCH 05/24] some css practice code --- html_css_practice .html | 409 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 409 insertions(+) create mode 100644 html_css_practice .html diff --git a/html_css_practice .html b/html_css_practice .html new file mode 100644 index 00000000..9a86783f --- /dev/null +++ b/html_css_practice .html @@ -0,0 +1,409 @@ + + + + + + + +

The background-attachment Property

+ +

The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page).

+ +

Tip: If you do not see any scrollbars, try to resize the browser window.

+ +

The background-image is fixed. Try to scroll down the page.

+

The background-image is fixed. Try to scroll down the page.

+

The background-image is fixed. Try to scroll down the page.

+

The background-image is fixed. Try to scroll down the page.

+

The background-image is fixed. Try to scroll down the page.

+

The background-image is fixed. Try to scroll down the page.

+

The background-image is fixed. Try to scroll down the page.

+

The background-image is fixed. Try to scroll down the page.

+

The background-image is fixed. Try to scroll down the page.

+ + + + + + + + + +

The border-style Property

+

This property specifies what kind of border to display:

+ +

A dotted border.

+

A dashed border.

+

A solid border.

+

A double border.

+

A groove border.

+

A ridge border.

+

An inset border.

+

An outset border.

+

No border.

+ +

A mixed border.

+ + + + + + + + + + + + + + + +

The border-color Property

+

This property specifies the color of the four borders:

+ +

A solid red border

+

A solid green border

+

A dotted blue border

+ +

Note: The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.

+ + + + + + + + + + + + +

The border-radius Property

+

This property is used to add rounded borders to an element:

+ +

Normal border

+

Round border

+

Rounder border

+

Roundest border

+ + + + + + + + + + + + +

Using individual margin properties

+ +
This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.
+ + + + + + + + + + + + +

Using individual padding properties

+ +
This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.
+ + + + + + + + + + + + +

Set the height and width of an element

+ +
This div element has a height of 200px and a width of 50%.
+ + + + + + + + + + + + +

Demonstrating the Box Model

+ +

The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.

+ +
This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ + + + + + + + + + + + +

Heading 1 (center)

+

Heading 2 (left)

+

Heading 3 (right)

+ +

The three headings above are aligned center, left and right.

+ + + + + + + + +Font Awesome Icons + + + + + + +

Font Awesome icon library

+ +

Some Font Awesome icons:

+ + + + + + +

Styled Font Awesome icons (size and color):

+ + + + + + + + + + + + + + + + +

Responsive Table

+

A responsive table will display a horizontal scroll bar if the screen is too +small to display the full content. Resize the browser window to see the effect:

+

To create a responsive table, add a container element (like div) with overflow-x:auto around the table element:

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
First NameLast NamePointsPointsPointsPointsPointsPointsPointsPointsPointsPoints
JillSmith50505050505050505050
EveJackson94949494949494949494
AdamJohnson67676767676767676767
+
+ + + + + + + + + + + + + + + + + + + + + + From a296e37dd660038def474c7d419aea773f4f4bfa Mon Sep 17 00:00:00 2001 From: shahid sermiki Date: Tue, 14 May 2024 09:59:49 -0700 Subject: [PATCH 06/24] JS pracrice --- css_practice3.html | 165 +++++++++++++++++++++++++++ js.html | 275 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 440 insertions(+) create mode 100644 css_practice3.html create mode 100644 js.html diff --git a/css_practice3.html b/css_practice3.html new file mode 100644 index 00000000..6c69b80e --- /dev/null +++ b/css_practice3.html @@ -0,0 +1,165 @@ + + + + +Example of Floating Elements + + + +

Flying Kites Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.

+ + + + + + + +Example of CSS Relative Positioning + + + +
+
+

Relative Positioned Box

+
Note: The left margin edge of this DIV box is shifted to right by 100px from its original position. The whitespace generated is preserved.
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.

+

Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu.

+
+ + + + + + + +Example of CSS Layers Effect + + + +
+
+
+
+
+ + + + + + + + + +Setting Text Alignment using CSS + + + +

This is a heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis.

+ + + + + + + + +Example of Dynamic Anchor Pseudo-classes + + + +

Visit www.tutorialrepublic.com

+ + + +
+
+ + +
We'll never share your email with anyone else.
+
+
+ + +
+
+ + +
+ +
\ No newline at end of file diff --git a/js.html b/js.html new file mode 100644 index 00000000..4e2c0067 --- /dev/null +++ b/js.html @@ -0,0 +1,275 @@ + + + + +

JavaScript Data Types

+ +

JavaScript has dynamic types. This means that the same variable can be used to hold different data types:

+ +

+ + + + + + + + + + + +

JavaScript Strings

+ +

You can use quotes inside a string, as long as they don't match the quotes surrounding the string:

+ +

+ + + + + + + + + + + +

JavaScript Numbers

+ +

Numbers can be written with, or without decimals:

+ +

+ + + + + + + + + + +

JavScript Bigint

+

A BigInt can not have decimals.

+ +

+ +

You cannot perform math between a BigInt type and a Number type.

+ + + + + + + + +

JavaScript Arrays

+ +

Array indexes are zero-based, which means the first item is [0].

+ +

+ + + + + + + + + + +

JavaScript Objects

+ +

+ + + + + + + + + +

JavaScript Operators

+

The typeof Operator

+

The typeof operator returns the type of a variable or an expression.

+ +

+ + + + + + + + + + + + + + + +

JavaScript Functions

+ +

Call a function which performs a calculation and returns the result:

+ +

+ + + + + + + + + + + + +

JavaScript Functions

+

Using a function as a variable:

+ +

+ + + + + + + + + + + +

JavaScript Objects

+ +

If you access an object method without (), it will return the function definition:

+ +

+ + + + + + + + + + + +

JavaScript HTML Events

+

The onclick Attribute

+ + + +

+ + + + + + + + +

JavaScript Strings

+

The slice() Method

+ +

The sliced (extracted) part of the string is:

+

+ + + + + + + + + + + + + + + + + + + + + From 74123ad2e5716508daa1ab875bb28a810be519e0 Mon Sep 17 00:00:00 2001 From: shahid sermiki Date: Wed, 15 May 2024 06:29:45 -0700 Subject: [PATCH 07/24] js class --- js.html | 12 ++++++++++++ newFile.js | 9 +++++++++ prac1.js | 33 +++++++++++++++++++++++++++++++++ 3 files changed, 54 insertions(+) create mode 100644 newFile.js create mode 100644 prac1.js diff --git a/js.html b/js.html index 4e2c0067..0267312d 100644 --- a/js.html +++ b/js.html @@ -255,6 +255,18 @@

The slice() Method

document.getElementById("demo").innerHTML = part; + + diff --git a/newFile.js b/newFile.js new file mode 100644 index 00000000..d6e2f8fb --- /dev/null +++ b/newFile.js @@ -0,0 +1,9 @@ +; diff --git a/prac1.js b/prac1.js new file mode 100644 index 00000000..43496930 --- /dev/null +++ b/prac1.js @@ -0,0 +1,33 @@ + + + +// object +const trainee={ +Name:"ali", +age:20, +address:"skd", +} + +var person={ + + Name:"ahmad", + RollNo:44, + class:5 + +} + +console.log(person); + + + + +trainee.age=30; +console.log(trainee); + +//variable +const x= 40; +console.log(x) + +// after value change +//x=50; +console.log(x); \ No newline at end of file From a94f4ff60978341c73ae7a9f1ae2c12ac25c1d86 Mon Sep 17 00:00:00 2001 From: shahid sermiki Date: Thu, 16 May 2024 07:23:00 -0700 Subject: [PATCH 08/24] js functions --- fun.js | 54 +++++++++++++++++++++++++++++++++++++++++++++++++++++ function.js | 51 ++++++++++++++++++++++++++++++++++++++++++++++++++ js.html | 4 ++++ 3 files changed, 109 insertions(+) create mode 100644 fun.js create mode 100644 function.js diff --git a/fun.js b/fun.js new file mode 100644 index 00000000..c8c0355a --- /dev/null +++ b/fun.js @@ -0,0 +1,54 @@ + +let hello=function(){ + console.log(" hello"); +} + +hello() + + + +//////add func //////////////// +function add(x,y) +{ + return(x+y) +} + +a=add(3,4) +console.log(a) + +//////sub function ///////////// +function sub(a,b) +{ + return(a-b) +} + +b=sub(8,9) +console.log(b) + +//////////////mul////// + +function mul(x,y,z) +{ + return(x*y*z) +} +c=mul(2,3,4) +console.log(c) + + +// Function is called, the return value will end up in x +let x = myFunction(8, 3); + +function myFunction(a, b) { +// Function returns the product of a and b + return a * b; +} + +console.log(x) + + + +// Arrow function +const multiply = (x, y) => + +console.log(x*y) +multiply(5,6) \ No newline at end of file diff --git a/function.js b/function.js new file mode 100644 index 00000000..1cc53ae4 --- /dev/null +++ b/function.js @@ -0,0 +1,51 @@ + +//////add func //////////////// +function add(x,y) +{ + return(x+y) +} + +a=add(3,4) +console.log(a) + +//////sub function ///////////// +function sub(a,b) +{ + return(a-b) +} + +b=sub(8,9) +console.log(b) + +//////////////mul////// + +function mul(x,y,z) +{ + return(x*y*z) +} +c=mul(2,3,4) +console.log(c) + + +// Function is called, the return value will end up in x +let x = myFunction(8, 3); + +function myFunction(a, b) { +// Function returns the product of a and b + return a * b; +} + +console.log(x) + +// Arrow function +//const multiply = (x, y) => x * y; + +//console.log(multiply) +//multiply(5,6) + + +let hello=function(){ + console.log(" hello"); +} + +hello() diff --git a/js.html b/js.html index 0267312d..f5817aa0 100644 --- a/js.html +++ b/js.html @@ -255,6 +255,10 @@

The slice() Method

document.getElementById("demo").innerHTML = part; + + + +