User:ZUZU/Study/Web01

From XPUB & Lens-Based wiki


WEEK 12

Saturday 9 December

basic HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First HTML Page</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- Content of the page goes here -->
</body>


compare Block-Level Elements&Inline Elements

Block-Level Elements Inline Elements
Structure Each block-level element generate a block-level container that takes up the full width available. They do not create a new line,they flow within the context.
Examples <div>, <p>, <h1> to <h6>, <ul>, <table> <span>, <a>, <strong>, <img>, <br>

Header Section

<!-- Header Section -->
<header>
  <h1>Website Name</h1>
  <nav>
    <!-- Navigation Links -->
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>


Footer Section

<!-- Footer Section -->
<footer>
  <p>&copy; 2023 Website Name. All rights reserved.</p>
</footer>


WEEK 13

Wednesday 13 December

Add Links

<!-- title attribute -->
<a href="https://www.examples.com title="Example webpage">Look at examples</a>

<!-- target attribute -->
<a href="https://www.example.com" target="_self">open on the same page</a>
<a href="https://www.example.com" target="_blank">open in new tab</a>

<!-- relative paths -->
<a href="/about">About Us</a>
<a href="/">Home</a>

<!-- link to E-mail -->
<a href=mailto:information@example@.com>Email Us</a>

<!-- link to Sections within the Same Page -->
<h1 id="top">Header1</h1>
<a href="#top">Go back to Top</a>


Add Images

<!-- basic syntax -->
<img src="example/imagines.jpg" alt="example image">

<!--width and height Attributes -->
<img src="example.jpg" alt="An example image" width="300" height="200">

<!-- add image as link -->
<a href="https://www.example.com">
<img src="example/imagines.jpg" alt="Description of the image">
</a>

Thursday 14 December

Basic Structure of CSS

/* Element Selector */
p {
  color: blue;
}

/* Class Selector */
.highlight {
  background-color: yellow;
}

/* ID Selector */
#header {
  font-size: 24px;
}


3 Feb

Basic Properties of CSS

WEEK 7

Wednesday 14 Feb

Basics JavaScript

The placement of JavaScript within an HTML
<!-- Inside <head> tags, allows the browser to load the script before rendering the page content -->
<head>
    <script src="script.js"></script>
</head>

<!-- Inside <body> tags before closing </body> tag allow the page content to load before executing the scripts-->
<body>
    <!-- Page content -->
    
    <script src="script.js"></script>
</body>
Use Node.js

Node.js is a runtime environment that could run JavaScript code outside of a web browser, on servers or other devices.Open your terminal,navigate to the directory 

node example.js
var,let,const

var: variables declared with var are function-scoped or globally-scoped, but not block-scoped. That they are accessible anywhere within the function or global scope in which they are declared. 

function example() {
  var x = 10;
  if (true) {
    var y = 20;
  }
  console.log(x); // Output: 10
  console.log(y); // Output: 20
}

let: variables declared with let are block-scoped, they are only accessible within the block (enclosed by curly braces) 

function example() {
  let x = 10;
  if (true) {
    let y = 20;
    console.log(x); // Output: 10
    console.log(y); // Output: 20
  }
  console.log(x); // Output: 10
  console.log(y); // Error: y is not defined
}

const: means constant, variables declared with const are block-scoped like let, but they must be initialized with a value, and once declared, their value cannot be re-assigned. 

function example() {
  const x = 10;
  // x = 20; // Error: Assignment to constant variable
  console.log(x); // Output: 10
}
//for objects and arrays declared with const, their properties or elements can still be modified, but the variable itself cannot be re-assigned.
const person = {
  name: 'John',
  age: 30
};
person.age = 31; // Valid
console.log(person); // Output: { name: 'John', age: 31 }
// person = {}; // Error: Assignment to constant variable

Common JavaScript Syntax Symbol

Symbol Description Sample
() Function Invocation: Call a function and execute its code, use parentheses after the function name with optional arguments inside. 
function example() {
    let x = 10;
    if (true) {
        let y = 20;
        console.log(x); // Output: 10
        console.log(y); // Output: 20
    }
Grouping Expressions: Parentheses can be used to group expressions and control the order of evaluation in complex expressions. 
let result = (2 + 3) * 4; // Result: 20

    }
Function Declarations and Definitions: When declaring or defining functions, enclose the parameters and the function body within parentheses. 
let add = (a, b) => {
    return a + b;
};
{} Function and Control Structures:: Curly braces define the scope of function bodies, control structures like if, for, while loops, and blocks of code in general. 
function example() {
    let x = 10;
    if (true) {
        let y = 20;
        console.log(x); // Output: 10
        console.log(y); // Output: 20
    }
Object Literals: Define object literals, which are key-value pairs enclosed within curly braces. 
let person = {
    name: 'John',
    age: 30
};
[] Array access: Access elements in an array by their index. 
const numbers1 = [1,2,3];
console.log(numbers1[0]);//Output: 1
Computed property names: in object literals, the value of propertyName is used as the property name for the person object. 
const propertyName = 'name';
const person = {
  [propertyName]:'John'
};
console.log(person.name);// Output: John

Appendix

Punctuation Mark

Punctuation Mark English Name
. Full Stop
, Comma
; Semicolon
: Colon
' Apostrophe /əˈpɒstrəfi/(Single Quote)
" Quotation Mark (Double Quote)
` Backtick
( Opening Parenthesis
) Closing Parenthesis
[] Square Bracket
{} Curly Brace
/ Forward Slash
\ Backslash
* Asterisk/ˈæstərɪsk/
& Ampersand/ˈæmpəsænd/
# Hash (Octothorpe)
< Less Than
> Greater Than
| Pipe (Vertical Bar)
! Exclamation Mark /ˌekskləˈmeɪʃn/
˜ Tilde /ˈtɪldə/
- Hyphen (Minus)
_ Underscore

Set up automatic synchronization

Using automatic synchronization between Visual Studio Code and Firefox using GitHub and BrowserSync. -Set up a GitHub Repository

-Clone the Repository: 

git clone https://github.com/blacktableone/SI23

-Install BrowserSync: 

npm install -g browser-sync

-Navigate to project directory

-Initialize a package.json file: 

npm init -y

-Install BrowserSync: 

npm install browser-sync --save-dev

-Create a bs-config.js file in project directory: 

code bs-config.js

-Add the following configuration to bs-config.js: 

module.exports = {
    server: {
        baseDir: "./"
    },
    files: ["*.html", "*.css", "*.js"]
};

-In project directory,run BrowserSync: 

browser-sync start --config bs-config.js
Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=User:ZUZU/Study/Web01&oldid=259425"