From 6be6e17854b336e74b029b479a778b841416dfd7 Mon Sep 17 00:00:00 2001 From: Filip Najdovski Date: Mon, 29 Nov 2021 01:35:35 +0800 Subject: [PATCH 1/5] HTML section finished. --- docs/2021-2022-summer/images/bon.jpg | Bin 0 -> 4624 bytes .../introduction-web-basics.md | 203 ++++++++++++++++++ mkdocs.yml | 1 + 3 files changed, 204 insertions(+) create mode 100644 docs/2021-2022-summer/images/bon.jpg create mode 100644 docs/2021-2022-summer/introduction-web-basics.md diff --git a/docs/2021-2022-summer/images/bon.jpg b/docs/2021-2022-summer/images/bon.jpg new file mode 100644 index 0000000000000000000000000000000000000000..5f14b095240b61c187a4a10facd63c28b7a06c52 GIT binary patch literal 4624 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 Q-8NPz>h3QHmg#KrKL8s@F8}}l literal 0 HcmV?d00001 diff --git a/docs/2021-2022-summer/introduction-web-basics.md b/docs/2021-2022-summer/introduction-web-basics.md new file mode 100644 index 0000000..4ecf92e --- /dev/null +++ b/docs/2021-2022-summer/introduction-web-basics.md @@ -0,0 +1,203 @@ +# Introduction to the Web Basics - HTML, CSS & JavaScript +*The tools of the web* + +This workshop will introduce you to the basics of HTML, CSS and JavaScript, the fundamental technologies of web development. This is a very introductory workshop, and there is still so much we can learn, but this will be a good place to start. + +## Content + - [Key Web Technologies](#key-web-technologies) + - [HTML](#html) + - [Elements](#elements) + - [Attributes](#attributes) + - [Images](#images) + - [Anchors/Hyperlinks](#anchors-and-hyperlinks) + - [Forms](#forms) + - [CSS](#css) + - [JavaScript](#javascript) + +## Key Web Technologies +HTML, CSS and JavaScript each have a different job when it comes to creating web pages. + +### What do they do? +- [HTML](#html): describes the content and structure of the web page +- [CSS](#css): describes the style and appearance of the web page +- [JavaScript](#javascript): provides funtionality to a web page + +![basics of web 2](../images/../2021-2022-summer/images/basics-of-web-2.jpg) + +## HTML +Hyter Text Markup Language (HTML) is used to structure the webpage. The general structure of a webpage can be seen below. + +???+ example "My First HTML Page" + ```html + + + + You see this text on your browser tab!!! + + + +

My First Heading

+

This is a paragraph

+ + + ``` + +### Elements +A webpage is made of elements, each with their own properties, that contain content to be displayed on the page. Elements are defined by tags, such as `h1`, `div` and `body`. Most elements have an open and close tab. The container and its content, together, are called an element. +```html +

This is a header element.

+``` + +The most notable, and probably the tag you will use most, the the `
` tag. It defines a division or section within the HTML document, and is used as a container that holds other elements. +???+ example "The Seperator" + ```html + + + + The Web Dev Fairytale + + +
+ +

The Dev, the Debugger and the Caffiene Addiction

+
+
+ +

Chapter 1

+
+ + +

Once upon a time, in a castle far, far away...

+
+
+
+

Chapter 2

+
+ + + ``` + +We will go through the important ones during this workshop, but you can find the full of them here. + + +### Attributes +Most tags have attributes that specify information or change the tag. The most common being `class` and `id`. + +#### Most Common Attributes +- `class`: used to specify one or more class names for a HTML element. + - Classes are used to group certain elements in order to give them specific features through CSS and to allow many elements to be manipulated using JavaScript. +- `id`: used to specify a unique id for an element and must be unique + - The `id` attribute is assigned to an element so that element can be exclusively specified in the style declaration and JavaScript manipulation + +Below is an example of how attributes are assigned in your code. +???+ example "Elements and their Attributes" + ```html + + + + You see this text on your browser tab!!! + + +
+

BIG HEADER!

+

This is the first paragraph of the webpage

+ +
+
+
small header
+
+ + + ``` + +### Images +Images are added by using the `` element tag. Can also be used to add gifs! +???+ example Adding an image in HTML + ```html + Three Cute Dog Mermaids + ``` +Three Cute Dog Mermaids +Cute, right? + +#### Image Attributes +- `src`: specifies the location of the image to be displayed + - This can either be a url, as in the example above, or the relative path of an image within the site's directory +- `alt`: an optional attribute that contains a text description. + - Is useful for accessibility or if the image does not load properly + +### Anchors and Hyperlinks +We can add links to other websites, or even to sections within the same page, using the `` element, known as an anchor. +???+ example "Adding a hyperlink to an HTML page" + ```html + Coders for Causes + ``` +They can be adding added by themself, or within text such as here. + +#### Anchor Attributes +- `href`: specifies the destination to link to + - External site: simply include the url you wish to visit + - Different page within the site: include the path to the new page, usually in the form of `"/.../index.html"` + - Different section on same page: use `#name_of_section` where `name_of_section` is the `id` of the element you wish to go to +- `target`: specifies where to open the link + - Setting the target attribute to `"_blank"` opens the link in another tab +- `download`: specifies that the linked resouces will be downloaded. + - Only needs to be included in the declaration of the element + - Optional: if value of download is set, that value will be the name of the file + +Always be careul when clicking links. Never know when there is something you should not click. + +#### Images and Hyperlinks +Any image, or any element in general, can be turned into a link by enclosing the element within the anchor tabs. +???+ example "Hyperlinked image" + ```html + + + + ``` + + + + +### Forms +Forms are used to collect user input. They are defined by the `
` tags and usually contain form elements such as ``, ``, etc. + +Inputs can come in many different forms, such as textboxes, radio buttons, checkboxes and drop down menus. Each input field is given a `value` +Once a form is complete and filled out, we need to submit, or POST, it. This can be done through a special input of type `submit`. + +The only required attribute of `` is `action`. The `action` attribute speicifies the URL of the application that is to be called when the Submit button is pressed. If no action, then the attribute takes the value of an empty string and the current page is the destination. + +???+example Forms + ```html +

I like:

+ + + + + + + ``` + +#### Input Validation +Input validation is a very important aspect to consider when dealing with forms. Remember the famous acronym GIGO, Garbage-in Garbage-Out. +To assist you with input validation, HTML forms have in-built validation for different types of data, such as emails, numbers and dates. This can be achieved by changing the input type of a field to the respective data entry type. +???+ example "Baseline input validation with HTML" + ```html + + ``` + + + + + + + + + + + + +## CSS +Cascading Style Sheets + +## JavaScript +Also known as JS. diff --git a/mkdocs.yml b/mkdocs.yml index c520168..f5fecdd 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -136,5 +136,6 @@ nav: - Setup: 2021-2022-summer/setup.md - Project and Workshop Structure: 2021-2022-summer/project-and-workshop-structure.md - Introduction to Web Development: 2021-2022-summer/introduction-to-web-development.md + - Introduction to Web Basics: 2021-2022-summer/introduction-web-basics.md - 2021 Winter: - Overview: 2021-winter/index.md \ No newline at end of file From 27d41f66670d469dbffef873eb7cb9c7736b8dc1 Mon Sep 17 00:00:00 2001 From: Filip Najdovski Date: Mon, 29 Nov 2021 01:38:21 +0800 Subject: [PATCH 2/5] Type fixed. --- docs/2021-2022-summer/introduction-web-basics.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/2021-2022-summer/introduction-web-basics.md b/docs/2021-2022-summer/introduction-web-basics.md index 4ecf92e..b3ca7e3 100644 --- a/docs/2021-2022-summer/introduction-web-basics.md +++ b/docs/2021-2022-summer/introduction-web-basics.md @@ -25,7 +25,7 @@ HTML, CSS and JavaScript each have a different job when it comes to creating web ![basics of web 2](../images/../2021-2022-summer/images/basics-of-web-2.jpg) ## HTML -Hyter Text Markup Language (HTML) is used to structure the webpage. The general structure of a webpage can be seen below. +Hyper Text Markup Language (HTML) is used to structure the webpage. The general structure of a webpage can be seen below. ???+ example "My First HTML Page" ```html From 4fa39d125f005bba7b38c3590d0861a014b7b9fd Mon Sep 17 00:00:00 2001 From: Filip Najdovski Date: Tue, 30 Nov 2021 01:10:08 +0800 Subject: [PATCH 3/5] CSS section complete. --- .../introduction-web-basics.md | 118 ++++++++++++++++-- 1 file changed, 110 insertions(+), 8 deletions(-) diff --git a/docs/2021-2022-summer/introduction-web-basics.md b/docs/2021-2022-summer/introduction-web-basics.md index b3ca7e3..12b3561 100644 --- a/docs/2021-2022-summer/introduction-web-basics.md +++ b/docs/2021-2022-summer/introduction-web-basics.md @@ -12,6 +12,9 @@ This workshop will introduce you to the basics of HTML, CSS and JavaScript, the - [Anchors/Hyperlinks](#anchors-and-hyperlinks) - [Forms](#forms) - [CSS](#css) + - [CSS Format](#css-format) + - [Rules of Selection](#rules-of-selection) + - [Flexboxes](#flexboxes) - [JavaScript](#javascript) ## Key Web Technologies @@ -48,7 +51,7 @@ A webpage is made of elements, each with their own properties, that contain cont

This is a header element.

``` -The most notable, and probably the tag you will use most, the the `
` tag. It defines a division or section within the HTML document, and is used as a container that holds other elements. +The most notable, and probably the tag you will use most, is the `
` tag. It defines a division or section within the HTML document, and is used as a container that holds other elements. ???+ example "The Seperator" ```html @@ -91,7 +94,7 @@ Most tags have attributes that specify information or change the tag. The most c Below is an example of how attributes are assigned in your code. ???+ example "Elements and their Attributes" - ```html + ```html hl_lines="6 7 9 12" @@ -111,7 +114,7 @@ Below is an example of how attributes are assigned in your code. ``` ### Images -Images are added by using the `` element tag. Can also be used to add gifs! +Images are added by using the `` element tag. It can also be used to add gifs! ???+ example Adding an image in HTML ```html Three Cute Dog Mermaids @@ -144,7 +147,7 @@ They can be adding added by themself, or within text such as should not click. +Always be careul when clicking links. You never know when there is something you should not click. #### Images and Hyperlinks Any image, or any element in general, can be turned into a link by enclosing the element within the anchor tabs. @@ -185,19 +188,118 @@ To assist you with input validation, HTML forms have in-built validation for dif ``` + +## CSS +Cascading Style Sheets (CSS) provides style to the web. It is used to specify the layout and style of markup languages. CSS tells the browser *how* to display the elements that are written in HTML. +We can write the CSS style rules into an element using inline style sheets, where the `style` attribute of an element is modified directly in the HTML. +???+ example "Inline style sheets" + ```html hl_lines="1" + + + + ``` + +However, this gets hard to manage and maintain, especially when the number of elements in a document grows, and when we want to change many elements that have the same style. +We use *document-level* style sheets or *external* style sheets to combat this issue. + +But first, we must understand how to create these style sheets. + +### CSS Format +- Selector + - A value, or list of values, that specify the elements for which the following style will be applied to + - Rules for specification will be discussed a little later on [see here](#rules-of-selection) +- Attribute + - The attribute/property of an element you wish you change + - Some example attributes include `background-color`, `font-size` and `width` +- Effect + - The effect is the value you set each attribute to be + - This includes setting `background-color` to "red", or `font-size` to "16px" + +The following CSS specifies that all `img` elements are to be centered and have a width of 50 pixels. +???+ example "My First CSS" + ```css + img{ + /* attribute: effect; */ + display: block; + margin-left: auto; + margin-right: auto; + width: 50px; + } + ``` +??? info "How do I know what attributes exist, and what do I change to get my desired effect?" + There are two simple answers to this question: + 1. __Google it.__ Chances are, someone has already tried to do something similar and your solution already exists. + 2. __Play around__. Learn what attributes exist, and how changing thier effects changes their on screen appearance. + +### Rules of Selection +As mentioned earlier, selectors have a set of rules that allow you to apply styles to certain, or even very specific, groups of elements. These can range selecting elements based on the type of element they are, or what class they are in, to selecting all elements of a certain type that are immediately preceded by an element of another type. +=== "Element" + Element selectors simply apply the defined style to all elements of the same type. + ```css + body{ + background-color: red; + } + ``` + +=== "Class" + Class selectors simply apply the defined style to all elements belonging to that class. They are similar to element selectors, except that the class name is preceded by a `.` character. + ```css + .narrow{ + width: 10% + } + ``` + + We can also specify the type of element within a class we wish to apply the style to by including it before the `.` character. + The following code selects all `

` elements that are of the class `narrow`: + ```css + p.narrow{ + width:10%; + } + ``` +=== "id" + These selectors apply the style to an element based on its `id`. The `id` is preceded by `#` in the selector definition. + ```css + #bigButton{ + font-size: 16px; + } + ``` +=== "Psuedo Classes" + Psuedo classes are styles that apply only when a certian action occurs or a condition is met, and not all the time. Some common selectors include `hover`, `focus` and `active`. They are included after the element, class or id has been specified, and are preceded with a colon `:`. + ```css + button:hover{ + color: red; + } + ``` + The full list of them can be found here. + +=== "Group" + To specify a group of elements to apply a style to, simply list the elements, ids or classes delimitted by a comma (`,`). + ```css + h1, h2, div{ + color: red; + } + ``` +=== "Other" + There exists other selectors that allow you to be more specific as to what elements are to be selected, such as contextual selectors, but we will leave those as *self-learning*. + ??? info "Contextual Selectors" + Contextual selectors group elements based on their position and surroundings in the document tree. + ![HTML document tree](http://web.simmons.edu/~grabiner/comm244/weekfour/tree.gif) + Further reading into the topic can be found through searching the web for platforms that teach you all about computer science, such as Geeks for Geeks. - - -## CSS -Cascading Style Sheets + +### Flexboxes +Flexboxes are a great way to position your items within a container. + +Learning is best done when having fun and getting your hands dirty (metaphorically). Flexbox Froggy is an interactive website that teaches you all about flexboxes, one step at a time. Your aim is to allign all the frogs to their corresponding lilypads. It is a much better learning tool than sitting and reading about some code I wrote. + ## JavaScript Also known as JS. From 51029219b53a4ed77c82b5b80150bdc98868ac17 Mon Sep 17 00:00:00 2001 From: Filip Najdovski Date: Tue, 30 Nov 2021 19:32:20 +0800 Subject: [PATCH 4/5] Workshop completed (draft). --- .../introduction-web-basics.md | 292 +++++++++++++++++- 1 file changed, 290 insertions(+), 2 deletions(-) diff --git a/docs/2021-2022-summer/introduction-web-basics.md b/docs/2021-2022-summer/introduction-web-basics.md index 12b3561..f4db37b 100644 --- a/docs/2021-2022-summer/introduction-web-basics.md +++ b/docs/2021-2022-summer/introduction-web-basics.md @@ -192,7 +192,7 @@ To assist you with input validation, HTML forms have in-built validation for dif ## CSS Cascading Style Sheets (CSS) provides style to the web. It is used to specify the layout and style of markup languages. CSS tells the browser *how* to display the elements that are written in HTML. -We can write the CSS style rules into an element using inline style sheets, where the `style` attribute of an element is modified directly in the HTML. +We can write the CSS style rules into an element using inline CSS, where the `style` attribute of an element is modified directly in the HTML. ???+ example "Inline style sheets" ```html hl_lines="1" @@ -293,6 +293,68 @@ As mentioned earlier, selectors have a set of rules that allow you to apply styl Contextual selectors group elements based on their position and surroundings in the document tree. ![HTML document tree](http://web.simmons.edu/~grabiner/comm244/weekfour/tree.gif) Further reading into the topic can be found through searching the web for platforms that teach you all about computer science, such as Geeks for Geeks. + + +### Document and External Style Sheets +Now that we know what we are doing, let's create some style sheets! Document and External style sheets help us better organise and manage the styles of the document. They are located in one location, so you do not have to go far to find them and change parts of your document. + +#### Document Style Sheets +Document style sheets are located within the `` of a HTML document, under the ` + + + +

My First Heading

+

This is a paragraph

+ + + ``` + +#### External Style Sheets +What happens when our site grows, and the number of HTML pages increases, and suddenly styles have to change, and we have to change every document, but they all have to follow the same styling as the others, and we have to manage that?! +Thankfully, we can store our styles in a seperate `.css` file and then simply reference the stylesheet in our HTML document. +???+ example "styles.css" + ```css + body{ + background-color: blue; + } + p{ + color: red; + font-size: 16px; + } + ``` +Once we have our css file completed, we can reference it in the HTML document, again in the ``, so that it can apply the styles to our document. +???+ example "Applying my CSS files to my HTML document" + ```html hl_lines="5" + + + + You see this text on your browser tab!!! + + + + +

My First Heading

+

This is a paragraph

+ + + ``` + ### Flexboxes @@ -302,4 +364,230 @@ Learning is best done when having fun and getting your hands dirty (metaphorical ## JavaScript -Also known as JS. +JavaScript, also known as JS, gives a web page fucntionality and reactiveness. It allows the user to interact with the web page, and for us to make it to do things that we want it to do. +Similar to CSS, all your JS can be implemented into a HTML document by encapsulating it in the ` + ``` + +### The Basics of JavaScript +We shall discuss the basic syntax of JS, such as variables and functions, just to get you started. Feel free to do some of your own learning, too. There is a lot of cool things you can do and shortcuts you can use when you dive deeper into JavaScript, such as the *ternary operator*. + +#### Variables +Variables are named mememory locations that store data. +To define a varibale, we can use three different keywords, each giving the variable specials properties. + +##### Variable Declaration +- `var` + - allows the variable to be redeclared later on in the program + - gives the variable a global scope, meaning they can be accessed anywhere within the file +- `let` + - once a variable has been declared using `let`, it cannot be redeclared. It's value can still change, however. + - gives the variable *block scope*, meaning it can only be accessed within the block of code that it has been declared in. + For example, if I declare a variable using the `let` key word, I cannot access it outside of the function. +- `const` + - Once the variable has been declared and assigned, it cannot be redeclared and the value never changes. It stays *constant*, sort of. + - It, too, gives the variable block scope. + +For a full explanation on variable declaration in JS, check out w3schools' page on it. + +Variables can hold different data types, such as integers, strings, objects, fucntions and arrays, but JS will cover the type identification for you. + +##### Datatypes +- There are two groups of data types in JS: primitives and structural. +- A **primitive** is data that is not an object and has no methods. +There are seven primitive data types: + - String, Number, BigInt, undefined, null and symbol +- A **structural** data type is one where the data is in the form of an object, and that object has its own methods. The main structural data types are: + - [Objects](#objects) and [Functions](#functions) + +#### Math and Logic +Math and logic works similar in JS to other programming languages. + +##### Math +- `+`, `-`: addition and subtraction +- `*`, `/`: multiplication and division, respectively. +- `%`: modulo operator. Returns the remainder left over after division. + - For example, `8 % 3` returns 2. +- `**`: exponent (*x to the power of y*) + - `base ** power` + +##### Logic +- `&&`: AND operation +- `||`: OR operation +- `!`: NOT operation +- `>`/`>=`: greater than/greater than or equal to +- `<`/`<=`: less than/less than or equal to +- `==`: equal to +- `===`: exactly equal to + - Works in a similar way to `==`, except it also checks that the datatype is the same +???+ example "Difference between == and ===" + ```javascript + console.log("2" == 2); /* true */ + console.log("2" === 2); /* false */ + ``` + +#### Arrays +Arrays are an ordered list of values. They can hold values of many datatypes. Their index starts at 0. +```javascript +let myArray = ["a", "b", "c", 1, 2 ,3, {name: "Jared", age: 19, canRead: false}] +myArray[0] // returns "a" +myArray[4] // returns 2 +``` + +#### Objects +Objects are variables that can hold more than one value. One can be seen in the previous example in [Arrays](#arrays). +The different values of an object are called keys. The keys can hold regular primitive values, such as numbers or strings, or can hold other objects, such as functions. Think of Objects as a list of key/value pairs. + +To access a key's value within an object, you must first reference the object in question, then insert a `.` folllowed by the key you wish to get. +???+ example "Objects in JavaScript" + ```javascript + let person = { + name: "Jared", + age: 19, + canRead: false + } + console.log(person.age) // outputs 19 + ``` + +#### Functions +Functions are blocks of code designed to execute a particular task. +In JS, the syntax for defining a function is as follows: +???+ example "Functions in JavaScript" + ```javascript + function func_name(parameter1, parameter2, ...){ + // your code goes here (optional, but highly recommended) + } + ``` +Functions can be called or stored in variables. +???+ example "Calling and Storing Functions" + ```javascript + function hello_world(){ + console.log("Hello, world!") + } + + // Calling the function + helloWorld() + + // Storing the function in a variable + const func_name = function (param1, param2){ + // do stuff here + } + ``` +Functions can return a value (after calculation, etc) or simply perform work on existing data/variables. Functions that do not return anything are normally called *procedures*. + +##### Arrow Functions +Arrow functions are just a compact way of writing normal functions. +They work by removing the `function` key word, and even the `return` keyword in some cases. +Arrows functions lead with their parameters, usually enclosed in normal brackets. An arrow `=>` then follows, preceding the actual block of code to be executed. +???+ example "Arrow Functions: Example 1" + ```javascript + // Traditional function + function addXY (x, y){ + return x + y; + } + + // Arrow function + let addXY = (x, y) => x + y; + ``` +In single-lined functions, such as the one above, both the { braces } and the `return` can be omitted. However, when there are extra lines of processing, both must be included. +???+ example "Arrow Functions: Example 2" + ```javascript + // Traditional + function add10(x, y){ + x += 10 + y += 10 + return x + y; + } + + // Arrow function + let add10 = (x, y) => { + x += 10 + y += 10 + return x + y; + } + ``` + +### Loops +=== "For" + For loops repeat until a condition is met. That condition is defined in the for loop. For loops have the following structure: + ???+ example "For Loops" + ```javascript + /* + for(int i = start; condition; increment){ + // code here + } + */ + + // Loop 10 times + for(int i = 0; i < 10; i++){ + console.log(i) + } + // Output: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 + ``` + +=== "For-in" + For-in loops iterate over the indexes of data in an iterable object, such as an array. + ???+ example "For-in Loops" + ```javascript + let myArray = [2, 4, 6] + for(let j in myArray){ + console.log(j) + } + // Output: 0, 1, 2 + ``` + +=== "For-of" + For-of loops iterate over the data in the iterable object. + ???+ example "For-of Loops" + ```javascript + let myArray = [2, 4, 6] + for(let k of myArray){ + console.log(j) + } + // Output: 2, 4, 6 + ``` + +=== "While" + While loops iterate while a condition is true. They are called a "pre-test" loop, where the condition is tested before the loop can run. The condition is included in the brackets. + ???+ example "While Loops" + ```javascript + let b = 0 + while(b < 3){ + console.log("Bon") + b++ + } + // Output: "Bon\n Bon\n Bon\n" + ``` + +=== "Do-while" + Do-while loops are similar to while loops, except that they let the block of code run once before testing the condition. They are known as "post-test" loops, and the loop is guaranteed to execute at least once. + ???+ example "Do-while Loops" + ```javascript + let b = 0 + do { + console.log("Bon") + b++ + } while(b > 10) + // Output: "Bon\n" + ``` + +Loops can be broken or stopped using the `break` or `continue` statements. +##### Breakin out +- `break`: execution leaves the loop completely and continues on with the next lines of code +- `continue`: disregards the rest of the code in the loop block and moves on to the next item in the loop + +### Creating a Pokemon API Webapp +Now that we know a little bit about the tools of the web, let's build a simple web app that uses the skills we have learnt in this workshop, as well as some other skills we will learn along the way, to create an app that can do something cool. + +For this tutorial, we will pay homage to the recent releases of Pokemon Brilliant Diamond and Shining Pearl, of which I have spent an embarrassing number of hours on since they came out about a week ago, and create a web app that uses the PokeAPI to display images and information about any Pokemon we want. + +This tutorial will take place at 4:30pm AWST on the 31st of November, 2021 via the CFC Discord server. The recording of that tutorial will be here once it has finished. + + + + + + From 81df1c6efbbd098cf5578c722091858652ace8fa Mon Sep 17 00:00:00 2001 From: Filip Najdovski Date: Wed, 1 Dec 2021 12:18:40 +0800 Subject: [PATCH 5/5] Spelling and grammar changes. Final copy. --- .../introduction-web-basics.md | 48 ++++++++++++------- 1 file changed, 31 insertions(+), 17 deletions(-) diff --git a/docs/2021-2022-summer/introduction-web-basics.md b/docs/2021-2022-summer/introduction-web-basics.md index f4db37b..e7c43f9 100644 --- a/docs/2021-2022-summer/introduction-web-basics.md +++ b/docs/2021-2022-summer/introduction-web-basics.md @@ -11,11 +11,19 @@ This workshop will introduce you to the basics of HTML, CSS and JavaScript, the - [Images](#images) - [Anchors/Hyperlinks](#anchors-and-hyperlinks) - [Forms](#forms) + - [Document Object Model](#document-object-model) - [CSS](#css) - [CSS Format](#css-format) - [Rules of Selection](#rules-of-selection) + - [Document and External Style Sheets](#document-and-external-style-sheets) - [Flexboxes](#flexboxes) - [JavaScript](#javascript) + - [The Basics of JavaScript](#the-basics-of-javascript) + - [Arrays](#arrays) + - [Objects](#objects) + - [Functions](#functions) + - [Loops](#loops) + - [Web App Tutorial](#creating-a-pokemon-api-webapp) ## Key Web Technologies HTML, CSS and JavaScript each have a different job when it comes to creating web pages. @@ -84,7 +92,7 @@ We will go through the important ones during this workshop, but you can find the ### Attributes -Most tags have attributes that specify information or change the tag. The most common being `class` and `id`. +Most tags have attributes that specify information or change the tag in some way. The most common being `class` and `id`. #### Most Common Attributes - `class`: used to specify one or more class names for a HTML element. @@ -172,7 +180,7 @@ The only required attribute of `
` is `action`. The `action` attribute spei ???+example Forms ```html

I like:

- + @@ -187,6 +195,12 @@ To assist you with input validation, HTML forms have in-built validation for dif ```html ``` + +### Document Object Model +All the elements of a HTML page make up a document tree, called the Document Object Model (DOM). +![Document Object Model](https://www.w3schools.com/js/pic_htmltree.gif) +The DOM is a platform and language-neutral interface that allows programs to dynamically access and update the content, structure and style of the HTML document. Each element in a HTML document is represented by a node on the tree. +We can then use things such as JavaScript to access and update the HTML document using the DOM. We will see more of this in the tutorial at the end. ## CSS @@ -209,7 +223,7 @@ But first, we must understand how to create these style sheets. ### CSS Format - Selector - A value, or list of values, that specify the elements for which the following style will be applied to - - Rules for specification will be discussed a little later on [see here](#rules-of-selection) + - Rules for specification will be discussed a little later on, [see here](#rules-of-selection) - Attribute - The attribute/property of an element you wish you change - Some example attributes include `background-color`, `font-size` and `width` @@ -246,7 +260,7 @@ As mentioned earlier, selectors have a set of rules that allow you to apply styl ``` === "Class" - Class selectors simply apply the defined style to all elements belonging to that class. They are similar to element selectors, except that the class name is preceded by a `.` character. + Class selectors apply the defined style to all elements belonging to that class. They are similar to element selectors, except that the class name is preceded by a `.` character. ```css .narrow{ width: 10% @@ -373,11 +387,11 @@ See the below example of how to add a script file to your page. To add many file ``` ### The Basics of JavaScript -We shall discuss the basic syntax of JS, such as variables and functions, just to get you started. Feel free to do some of your own learning, too. There is a lot of cool things you can do and shortcuts you can use when you dive deeper into JavaScript, such as the *ternary operator*. +We shall discuss the basic syntax of JS, such as variables and functions, just to get you started. Feel free to do some of your own learning, too. There is a lot of cool things you can do and shortcuts you can use when you dive deeper into JavaScript, such as the *ternary operator*, but we will leave these for now. #### Variables -Variables are named mememory locations that store data. -To define a varibale, we can use three different keywords, each giving the variable specials properties. +Variables are named memory locations that store data. +To define a variable, we can use three different keywords, each giving the variable special properties. ##### Variable Declaration - `var` @@ -393,7 +407,7 @@ To define a varibale, we can use three different keywords, each giving the varia For a full explanation on variable declaration in JS, check out w3schools' page on it. -Variables can hold different data types, such as integers, strings, objects, fucntions and arrays, but JS will cover the type identification for you. +Variables can hold different data types, such as numbers, strings, objects, functions and arrays, but JS will cover the type identification for you. ##### Datatypes - There are two groups of data types in JS: primitives and structural. @@ -429,7 +443,7 @@ Math and logic works similar in JS to other programming languages. console.log("2" === 2); /* false */ ``` -#### Arrays +### Arrays Arrays are an ordered list of values. They can hold values of many datatypes. Their index starts at 0. ```javascript let myArray = ["a", "b", "c", 1, 2 ,3, {name: "Jared", age: 19, canRead: false}] @@ -437,7 +451,7 @@ myArray[0] // returns "a" myArray[4] // returns 2 ``` -#### Objects +### Objects Objects are variables that can hold more than one value. One can be seen in the previous example in [Arrays](#arrays). The different values of an object are called keys. The keys can hold regular primitive values, such as numbers or strings, or can hold other objects, such as functions. Think of Objects as a list of key/value pairs. @@ -452,7 +466,7 @@ To access a key's value within an object, you must first reference the object in console.log(person.age) // outputs 19 ``` -#### Functions +### Functions Functions are blocks of code designed to execute a particular task. In JS, the syntax for defining a function is as follows: ???+ example "Functions in JavaScript" @@ -478,7 +492,7 @@ Functions can be called or stored in variables. ``` Functions can return a value (after calculation, etc) or simply perform work on existing data/variables. Functions that do not return anything are normally called *procedures*. -##### Arrow Functions +#### Arrow Functions Arrow functions are just a compact way of writing normal functions. They work by removing the `function` key word, and even the `return` keyword in some cases. Arrows functions lead with their parameters, usually enclosed in normal brackets. An arrow `=>` then follows, preceding the actual block of code to be executed. @@ -575,19 +589,19 @@ In single-lined functions, such as the one above, both the { braces } and the `r ``` Loops can be broken or stopped using the `break` or `continue` statements. -##### Breakin out +#### Breakin' out - `break`: execution leaves the loop completely and continues on with the next lines of code - `continue`: disregards the rest of the code in the loop block and moves on to the next item in the loop -### Creating a Pokemon API Webapp +## Creating a Pokemon API Webapp Now that we know a little bit about the tools of the web, let's build a simple web app that uses the skills we have learnt in this workshop, as well as some other skills we will learn along the way, to create an app that can do something cool. For this tutorial, we will pay homage to the recent releases of Pokemon Brilliant Diamond and Shining Pearl, of which I have spent an embarrassing number of hours on since they came out about a week ago, and create a web app that uses the PokeAPI to display images and information about any Pokemon we want. This tutorial will take place at 4:30pm AWST on the 31st of November, 2021 via the CFC Discord server. The recording of that tutorial will be here once it has finished. - - - + + +[Back to Top](#content)