Scribd
Upload
4 views18 pages

JS CSS HTML

The document provides a comprehensive overview of CSS, HTML, and JavaScript, detailing their syntax, properties, and usage in web development. It covers essential topics such as the box model, CSS specificity, creating hyperlinks, JavaScript variables, functions, and objects. Additionally, it includes practical examples and tips for coding best practices.

Uploaded by

Viscount Khurt
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views18 pages

JS CSS HTML

The document provides a comprehensive overview of CSS, HTML, and JavaScript, detailing their syntax, properties, and usage in web development. It covers essential topics such as the box model, CSS specificity, creating hyperlinks, JavaScript variables, functions, and objects. Additionally, it includes practical examples and tips for coding best practices.

Uploaded by

Viscount Khurt
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 18

/*

For CSS comment


*/

CSS(Cascading style sheets) – changes the appearance of the element in the website
 Use this syntax for linking

<link rel="stylesheet" href="style.css">

Measuring In CSS:
Px(pixels)
Em(1em is equivalent to 16px)
%(percentange)

 CSS Property: CSS value;


CSS Property: CSS Value; Notes
Background: Red or rgb;
Color: Red or rgb; Color of the text
Font-weight: Bold; Make the text bold
Font-size: 15px; Size of the text
Cursor: Pointer;
Border-color: Blue or rgb; Color of the border
Border-style: Solid; Style of the border, play with it
Border-width: 5px; Width of the border, play with it
Border-radius: 200px; The higher the pix the more
round it get
Border: None; Border ng box model
Width: 150px or 100%; Lapad niya
Height: 30px or 100%; Height eto ng pictures
Margin-right: 3px; Margin in css is space, space in
right
Padding-right: 10px inside the box model right,left,
top,bottom
Transition: Property 0-1s; What property do u want to
Ex: opacity 1s; transition and measure it by sec.
Background-color 1s; Transition the background
Opacity 1s, color 1s; Can also transition 2 property
Don’t put it to pseudo-class it
might mess up the style

Vertical-align: Top; Top,bottom. Align all the


elements without compromising
the text position
All for text
Font-family: Ariel;
Font-size: 20px;
Font-weight: Bold; 700px =bold
500px= medium
400px = regular
Font-style: Italic;
Text-align: Center;
Line-height: 30px; Spacing between lines in the
text
Html entities Use this for checkmark,
middle dot, greater than etc

Editing Images
Width: 250px; Use width on picture container
and use 100% on width
picture(separate it through div)
Height: 250px;
Object-fit: Cover, contain, fit; Cover- this does the image to
cover the 250px width and
250px height.
Contain- contain the image in
the width and height.
Fit- fit the image in the width
and height.
Object-position: Left, right; This let you adjust the image
Compute hex to rgb color

The BOX Model

Use the box model padding rather than height and


The box model composes of 3 property margin, border and padding.
 The padding(left-top-bottom-right) represent the space between the text in the box
 The border is the border-with property it showcases the thickness thinness of the width
 Margin(left-right-top-bottom) is the space between elements

 CSS specificity – it means that in CSS the browser follows a certain syntax and its priority the selector that
has more specific. Class name is more priority rather than element.

 Text Element – they exist inside the line of text and modify part of the text

Use margin and span to use multiple spaces in a paragraph

<strong>
bold
</strong>

<u>
underline
</u>

<span>
Modify specific part of the text without affecting the whole text
</span>

This are all void element, it means that there’s no need for closing tag

 <link rel=”stylesheet” href=”button.css”>


 <input type=”checkbox”>

Type=”checkbox” gives you checkbox


Type=”text” it gives you textbox
 Placeholder=”showtext”

Using google link as font


Get the <link> and put it in head section on html structure

Nested Layouts Technique

Vertical layout takes all the space block


Horizontal layout takes inblock space and can be nested

In selecting property use this syntax ::


Example: div-container::searchBox

--------------------------------------------------------------------------------------------------------------------------------------------

HTML Structure – in every program on html there should be this code, this will provide
additional features
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<body>

</body>
</html>

3 Basic Type of Block Element

1. Block Element

Takes the whole entire line

2. Inline-block Element

Takes up space only what its needed


3. Inline Element

Appears only inside a text like <strong></strong>

This is the syntax rules for Link Element:

<a href=”the link of the webpage” target=”_blank”>


to create a hyperlink use this element
</a>

<a href=" https://www.youtube.com/"


target="_blank"
title="link to the article page">
Click Here</a>

<h1>head</h1>

<hr> a horizontal lane

<h2>head</h2>

<br>line break

<p>paragraph</p>
</body>

</html>

In creating hyperlink on images you need <a> tag


<div class="item" style="--position: 1">
<a href="https://www.linkedin.com/feed/" target="_blank">
<img src="Images/pexels1.jpg" alt="">
</a>
</div>

For audio input use this syntax


<audio controls loop src=” ”></audio>
<audio controls loop src="Audio/Kendrick-Lamar-Not-Like-
Us-Drake-Diss-(JustNaija.com).mp3"></audio>
For video input
<video control loop mute src=” ” width= “500px”>

Iframes used to embed content from another website


Commonly used for ads and abused by hacking techniques

Syntax is <iframe src=” ”>

--------------------------------------------------------------------------------------------------------------------------------------------
./JavaScript comment is // and

JavaScript

Console.log() – whatever is input on the bracket will display back at the display on the website, this is within
JavaScript
<script>
alert('WELCOME!')
console.log(2+2);
console.log( 'khurt' + 'cath' );
</script>

Making a variable hold value the syntax is:


<body>
<script>
const variable = 'hello';
console.log(variable);

let khurt = 10;


console.log(khurt);
console.log(khurt + 2 + variable);

let results = 100;


console.log(results + khurt +
variable);
console.log(typeof khurt)

</script>
</body>
 Can’t use let as but we can use let1 or let 2 since let has value already on js
 Can’t start using number like 1let or 2let but we can use it in the middle and last
 Can’t use special character but there are two exception which is _ and $ like _khurt/ $khurt

There are 3ways to name a variable


 var - this variable is for
 let - this variable can be change
 const - this variable cannot be change( this used default as variable)
 typeof +variables – this can be defined as to check the variables

TIPS

Naming convention:
1. camelCase cartQuantity-add the two words and capitalize the 2nd
first letter of the words
2. PascalCase CartQuantity-add the two words and both are capitalized
3. kebab-case cart-quantity- this use for html and css

Project Calculator:
<body>
<p>
<button onclick="console.log(calculation +='7')">7</button>
<button onclick="console.log(calculation +='8')">8</button>
<button onclick="console.log(calculation +='9')">9</button>
</p>
<p>
<button onclick="console.log(calculation +='4')">4</button>
<button onclick="console.log(calculation +='5')">5</button>
<button onclick="console.log(calculation +='6')">6</button>
</p>
<p>
<button onclick="console.log(calculation +='1')">1</button>
<button onclick="console.log(calculation +='2')">2</button>
<button onclick="console.log(calculation +='3')">3</button>
<button onclick="console.log(calculation +='0')">0</button>
</p>
<p>
<button onclick="console.log(calculation += ' + ')"
>+</button>
<button onclick="console.log(calculation += ' - ')">-
</button>
<button onclick="console.log(calculation += ' /
')">/</button>
<button onclick="console.log(calculation += ' *
')">*</button>

<button onclick="console.log(calculation =
eval(calculation))">=</button>
<button onclick="console.log(calculation =
'')">Clear</button>
</p>
</body>

<script>
let calculation = ''

</script>
--------------------------------------------------------------------------------------------------------------------------------------------

Boolean values and If statements


True/false and if then statements – Boolean is pretty straightforward actually and easy to understand as long as you
are familiarizing the comparison values.

Comparison Values
 > greater than
 < less than
 >= greater than or equal to
 <= less than or equal to
 === equal to
 !==not qual to

Logical Operators:

 && this called AND operator, what it does is it check if its both side is true and false
 || this called OR operator, it checks if one side is true: if there is true it will display true
 ! this called NOT operator, the way it does is it flip the value more like saying IS NOT TRUE will result to
false vise versa.

Syntax for if else:


If () {} else {}
if ( 19 < 18) {console.log('age')}
else{console.log('underage')}
This the right way to read this: if 19 <(less than) 18 then print (age) or else print (underage)

This is another way to write the code:


if (money > totalcost) {console.log('paid')}
else if (money < totalcost) {console.log('Get the
dishes')}

Project ROCK-PAPER-SCISSOR
<button onclick="
const khurt1 = Math.random();
let computerMove = '';

if (khurt1 >=0 && khurt1 < 1/3 ){computerMove = 'ROCK';}


else if (khurt1 >= 1/3 && khurt1 < 2/3){computerMove = 'PAPER';}
else if (khurt1 >= 2/3 && khurt1 < 1) {computerMove = 'SCISSOR';}

console.log(computerMove);

let results = '';


if(computerMove === 'ROCK'){results = 'ITS A TIE.'}
else if(computerMove === 'SCISSOR'){results = 'YOU LOSE.'}
else if (computerMove === 'PAPER'){results = 'YOU WIN!.'}

alert(`YOU PICKED ROCK. Computer picked ${computerMove}. $


{results}`);

">ROCK</button>

<button onclick="
const khurt1 = Math.random();
let computerMove = '';

if (khurt1 >=0 && khurt1 < 1/3 ){computerMove = 'ROCK';}


else if (khurt1 >= 1/3 && khurt1 < 2/3){computerMove = 'PAPER';}
else if (khurt1 >= 2/3 && khurt1 < 1) {computerMove = 'SCISSOR';}

console.log(computerMove);

let results = '';


if(computerMove === 'ROCK'){results = 'ITS A TIE.'}
else if(computerMove === 'SCISSOR'){results = 'YOU LOSE.'}
else if (computerMove === 'PAPER'){results = 'YOU WIN!.'}
alert(`YOU PICKED PAPER. Computer picked ${computerMove}. $
{results}`);">PAPER</button>

<button onclick="
const khurt1 = Math.random();
let computerMove = '';

if (khurt1 >=0 && khurt1 < 1/3 ){computerMove = 'ROCK';}


else if (khurt1 >= 1/3 && khurt1 < 2/3){computerMove = 'PAPER';}
else if (khurt1 >= 2/3 && khurt1 < 1) {computerMove = 'SCISSOR';}

console.log(computerMove);

let results = '';


if(computerMove === 'ROCK'){results = 'ITS A TIE.'}
else if(computerMove === 'SCISSOR'){results = 'YOU LOSE.'}
else if (computerMove === 'PAPER'){results = 'YOU WIN!.'}

alert(`YOU PICKED SCISSOR. Computer picked ${computerMove}.$


{results}`);

">SCISSOR</button>

 Now in this project we learn how to use algorithm the code is Math.random();
 Variable that are within {} are only used inside of the curly bracket

Truthy and falsy values

how do we know the values of truthy and falsy? In JavaScript


 False, 0 , ’’(empty string) ,Nan(not a number), undefined and null are all falsy while the rest is
truthy

if (5){console.log('truthy');}

How do we use it for?


 We use it for shortcut, you see if the valuable is truthy it will display the console.log()

let ithasitems = 10
if (ithasitems)
{console.log('inventory has items');}
--------------------------------------------------------------------------------------------------------------------------------------------

FUNCTIONS
Why do we use functions?
 Functions let us reuse codes

Syntax rule for functions


 Same as variables we cannot use special characters, best practice is to use camelCase

Below is the syntax code: function ____()


{console.log();
console.log();}
return ‘’; this is body function
function function1(){
console.log('Hello');
console.log(2+2);}
return 'rock';}
function1();

another is it let value return to the initial statement;


function pickComputerMove()
{const khurt1 = Math.random();

if (khurt1 >=0 && khurt1 < 1/3 ){computerMove = 'ROCK';}


else if (khurt1 >= 1/3 && khurt1 < 2/3){computerMove = 'PAPER';}
else if (khurt1 >= 2/3 && khurt1 < 1) {computerMove = 'SCISSOR';}
return '5';}

Parameters is like a variable it let you put the value; it can be done multiple times:
The rules in creating:
 no use of special words like functions
 cannot be use special characters except $ and _
 cannot start with a number

parameters is only exist within the parameters scope


<script>
function khurt1(parameter1, parameter2){
console.log(parameter1+ parameter1);
}
khurt1(100,100);
khurt1(500);

</script>

--------------------------------------------------------------------------------------------------------------------------------------------

OBJECTS let you customize and line up the values, one more thing you can display specifically what you want and
let it change it.

The syntax rule is


 can be added multiple values that is inside the curly bracket
 comma is to separate the value

let product = {
name: 'khurt',
lastname: 'Baculi'
};
console.log(product);
console.log(product.lastname);

product.lastname = 'doctor';
console.log(product.lastname);

Adding and deleting value


product.age = '22';
console.log(product);

delete product.middleName;
console.log(product);

Why we use OBJECTS?


 Make it as organizer
 Can be use multiple values and let us use it

We can also access the value using bracket notation, this way it let us pick the value with the math symbol on it;
Can be used in values too and or by adding empty string ’’
‘Delivery-time’: ‘1 day’
console.log(product[‘delivery-time’])

NESTED OBJECTS
const wholeName = {
name: 'khurt',
age: '22',
'delivery-time': '1day',
gender: {
gays: '0',
male: '1',
female: '20'}

};

console.log(wholeName)
console.log(wholeName['delivery-time']);
We can also use function on objects just like this
const wholeName = {
name: 'khurt',
age: '22',
'delivery-time': '1day',
gender: {
gays: '0',
male: '1',
female: '20'},
fun: function process(){
console.log('function that is inside the object');}

};

console.log(wholeName)
console.log(wholeName['delivery-time']);
wholeName.fun();

Build-in Objects
 JSON(Javascript Object Notation)
-similar to javascript objects

So why do we use JSON syntax?


-because it is universal, it is not limited to javascript only
-must be use double quotes
-JSON does not support functions

console.log(JSON.stringify(wholeName));
//this let us change javascript object to universal by JSON

const jsonstring = JSON.stringify(wholeName);


console.log(JSON.stringify(wholeName));
//this let us change javascript object to universal by JSON

console.log(JSON.parse(jsonstring));
//we can let it change to javascript object by making it as
variable and displaying it

 localStorage
-let you store but only it works on string, tip: use JSON.stringify to use it

localStorage.setItem('score', JSON.stringify(score));
//THIS SAVE INTO THE LOCALSTORAGE

console.log(localStorage.getItem('score'));
//THIS LET US INTO DISPLAY ON IT AND TURNING IT ON STRING BY USING JSON

JSON.parse(localStorage.getItem('score'))
//STRING THEN TURN INTO OBJECT BACK

--------------------------------------------------------------------------------------------------------------------------------------------
DOCUMENT OBJECT MODEL (DOM)
-DOM is the way to javascript to have fully control

document.body.innerHTML = 'khurt';
document.title = 'Goodevening';

console.log(document.body);

the DOM combines JavaScript and html together, it gives JavaScript control on the webpage
-when a html element is inside the JavaScript it is converted into JavaScript object

This syntax tell us what should we get from the body


document.querySelector('button');

the problem with this is that querySelector only select the first html element
the solution is that add class attribute, this will serve as label that can be selected

<button onclick="
subscribe();
"class="js-subscribe-button"

>Subscribe</button>

Will select the class


document.querySelector('.js-subscribe-button');

always use js- in class attribute

we can use the dom to select the html and make it as variable that can be console.log just like this
<button class="js-button">hello</button>

const buttonHello = document.querySelector('.js-button');


console.log(buttonHello);
 this is called void element

<input>

Coercion
 So remember whenever we get a value from the DOM it becomes a string so if we want to do math with
it, it needs to be converted to number. The syntax is Number();

let cost = Number(inputElement.value);

 clicks, keydowns are known as events


 and onclick,onkeydown are known as event listeners

onkeydown="console.log('typing')">

<button onkeydown="console.log(event)"
class="js-submit"

>Submit</button>

The syntax is Onkeydown = “console.log(event)”


This let us see information in the event

<button onkeydown="console.log(event.type)"
class="js-submit"

>Submit</button>

 onkeydown – pressdown a key


 onkeyup – release a key
we have two eventlister this are (event and callback);

the syntax for input is


<input>
If you want to put placeholder the syntax is <input placeholder”name”>
The placeholder is the name you see without the input

If we want to display input element, we need to use the property of .value and make it variable
const nameInput = document.querySelector('.js-name');
console.log(nameInput.value);}
the .value property let us get the content of the input

--------------------------------------------------------------------------------------------------------------------------------------------

ARRAYS AND LOOPS

Array is basically a list of values that represents


Array is a special type of object
Always start counting on 0-1-2-3-4……

Syntax is
<script>
const MyArray = [10, 20, 30, 40, 50];
console.log(MyArray); This syntax lets you show all the array
console.log(MyArray[4]); This syntax let you pick what you want to show in the console
</script>

Console:

Array.isArray([]) a code to specifically check if it’s an array

Method
.length- tells you how many are there in a array

.push()- this adds a value to the end of the array.


.splice()-it has two value the first one is the index the number position of the array and the 2 nd value is the you want
to remove from the array.

You might also like