add generated markdown lectures

main
borb 1 month ago
parent 73e3532c35
commit e6612bdccf

@ -0,0 +1,482 @@
# Web & HTML
1. Websites and The Internet
A short overview of the Internet and WWW
Anatomy of a website (or web app)
HTML, CSS, JS
2. HTML basics
Setting up
tags: p, h1, img src, a href, div
boilerplate
3. Chrome Dev Tools
4. HTML continued
Title, span, text-align, br..
User input
Tables
5. CSS basics
Websites and the Internet
# A short overview of the Internet and WWW
© Buutti Oy, All Rights Reserved
# What is the Internet?
* Web != the Internet
* Internet: connected networks that use the TCP/IP protocol
* made out of billions of computers, cables and antennae directing data to the right direction.
* World Wide Web: URL-based information system.
* a big part of the Internet but it consists of other kinds of traffic, too:
* Email
* VoIP (Skype/Teamspeak)
* File transfers between computers
* remote connections to other computers
* In other words, the internet is an infrastructure and WWW
* is served via it
![](imgs/1-web-and-html_0.png)
# What is the Web?
* World wide web (www) is the part of the Internet where browsers fetch and show websites
* Browsers ( _rendering engine_ in parentheses)
* Chrome (Blink)
* Firefox (Gecko)
* Edge (Blink)
* Safari (WebKit)
* WWW makes sites and applications accessible to all kinds of devices:
* mobile phones, computers, smart watches, TVs...
* For the websites to appear on all the different devices similarly, we need strict rules
![](imgs/1-web-and-html_1.png)
![](imgs/1-web-and-html_2.png)
![](imgs/1-web-and-html_3.png)
![](imgs/1-web-and-html_4.png)
# Back-end vs Front-end
* Web development is split into _Back-end_ and _Front-end_
* Front-end is the website users can actually see
* visual elements of a website or app the user can interact with
* Back-end is the invisible part
* "server side" where user's data is stored
* back-end is not interacted with directly, but gives and modifies its stored data based on user requests
* _Full stack development_ refers to working on both back-end and front-end!
# What is a server or "the Cloud"
* A Server or "the cloud" is just another computer
* server software is constantly running
* Your own computer could be a server!
* If you need to save an image, post a comment on a news website, or just load a website, you send a _request _ to a server
* Server then gives an appropriate _response_ based on the request
![](imgs/1-web-and-html_5.png)
# Backend
![](imgs/1-web-and-html_6.png)
* Backend handles e.g.,
* saving and fetching user data from a _database_
* user authentication and connecting multiple users together (chat apps!)
* Databases are used with _query languages_ like _SQL_
* Back-end software can be written with various different programming languages
* even with JavaScript! See: [Express](https://expressjs.com/)
* Simple websites don't require a dedicated back-end
![](imgs/1-web-and-html_7.png)
# Anatomy of a website
HTML, CSS and JS
# Anatomy of a website
* Historically, websites looked something like this
* [https://web.archive.org/web/19970129232848/http://www.iltalehti.fi/](https://web.archive.org/web/19970129232848/http://www.iltalehti.fi/)
* Nowadays, a website can even be a full-blown application!
* [https://open.spotify.com/](https://open.spotify.com/)
* old and new sites alike are written in _HTML_ __, __ which describes the _structure _ of the site
* In mid-90s, plain HTML was extended with _CSS_ _ _ to implement _styling_
* The third building block of a website is JavaScript, or _JS,_ which is used to add _interactivity_
# HTML
![](imgs/1-web-and-html_8.png)
HTML stands for _Hypertext markup language_
HTML defines the structure of a website
It tells what text, images and containers the website has
You might have seen raw html if your browser has failed due to a slow connection ->
[https://motherfuckingwebsite.com/](https://motherfuckingwebsite.com/)
# CSS
CSS stands for _Cascading style sheets_
CSS defines the __look __ of the website
It tells what sizes, colors and where everything is
[http://bettermotherfuckingwebsite.com/](http://bettermotherfuckingwebsite.com/)
![](imgs/1-web-and-html_9.png)
# JavaScript
With a dedicated programming language, JavaScript, your website can become interactive
It allows you to do computations, send data to a server or fetch new data in real time
![](imgs/1-web-and-html_10.png)
![](imgs/1-web-and-html_11.png)
# HTML basics
# Setting up
tags
p, h1, img src, a href, div
boilerplate
Open the __Visual Studio Code__ code editor.
Create a new file called __index.html__
This is a standard naming convention: servers generally first look for index.html when someone requests a web page
This file gets then sent to the client (the browser)
HTML document is constructed by using <tags>. They have either…
a) an opening and closing tag: <tag> stuff goes here </tag>
b) a single self closing tag: <tag />
Both examples above constitute an __HTML element__
* A _paragraph _ is made by using the <p> tags
* It looks like this:
* <p>Hello World</p>
* The paragraph is a common html element and it is used to display text written between the opening and closing tags
* _Headings_ are larger text elements and are used as titles
* <h1>This is a title</h1>
* There are six different sized headers ranging from __ __ __h1 __ to __ __ __h6__
* __h1 is the largest, h6 the smallest__
* An _image element_ doesn't have any content inside
* thus, it's a self closing tag:
* <img src=" [https://www.website.com/image.png"](https://www.website.com/image.png%22/) _/_ >
* src ("source") is an _attribute_ , and its value tells where the shown image is located
* If you want to use a local image you can put it in the same folder as the __ __ _index.html_ _ _ and load it as src="my_image.png"
* Subfolders work, too: src="images/my_image.png"
* A link to other (remote or local) sites is added with the _link tag_
* Tag for a link is <a> for anchor.
* The link will itself be as a href attribute standing for hypertext reference.
* Remote link:
* <a href="https://www.google.com">This links to Google!</a>
* Local link:
* <a href="test.html">This links to test.html!</a>
* _Divisors _ are containers we can hold our text and images in
* made using <div> tags
* Let's put our h1, p and img elements in a div like this:
* <body>
* <div>
* <h1>My new cat!</h1>
* <p>it's name is Whiskers</p>
* <img src="https://www.imageurl.com/image.png"/>
* </div>
* </body>
* We don't need to _style_ it yet, it's done with CSS
![](imgs/1-web-and-html_12.png)
---
https://images.unsplash.com/photo-1516750105099-4b8a83e217ee?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=640&q=426
# Boilerplate
aka:
the stuff you have to write
before getting to
the stuff you want to write
© Buutti Oy, All Rights Reserved
<!DOCTYPE html> <!--Defines the document as HTML5 document!-->
<html> <!--Opening tag! Defines the HTML document!-->
<head> <!--<head> is initiated before <body>! (Load styles etc.)-->
<meta charset="utf-8"> <!--Meta tag defining the charset-->
</head> <!--Closes head!-->
<body> <!--Opens the webpage body!-->
<!--Paragraphs, images and links come here.-->
</body> <!--Closes body!-->
</html> <!--Closing tag marked with /!-->
The _title _ is what you usually see as the tab name
You can define the title of the page inside <head> by using <title> tags like this:
<title> this is the title of the page </title>
![](imgs/1-web-and-html_13.png)
* You can force a new line with <br />
* The tag can be placed within, for example, a paragraph (<p>) to force a line change
* Don't abuse, please
* If you want to add space between elements, space them apart with CSS
* Sometimes wrapping the elements into a <div> element helps
Spans are used to CSS style parts of a text for example, or other elements in one line
One could for example color single words in different colors or change fonts in the middle of text
Here is an example:
<p> we could color a <span class="yellow_text">single</span> word </p>
# Chrome Dev Tools
When doing any kind of Front End development it is __essential__ to use the development tools of the browser.
With the developer tools you can inspect your HTML code, check out which styles come from which source, see possible errors from the console etc.
![](imgs/1-web-and-html_14.png)
We recommend using the Google Chrome browser. Other browsers have their own developer tools as well but we focus on Chrome here.
When we do dynamic content with JavaScript we absolutely must use the developer tools. When using JS to dynamically generate content we can never be sure if we got the HTML code we wanted, __unless we check it. __ In JS development we most likely will also get a lot of error messages and console.log messages. Those will pop up in the Developer Tools' console.
Developer tools are super helpful even when doing static web pages.
# Accessing Dev Tools in Chrome
![](imgs/1-web-and-html_15.png)
There are a few ways to access the dev tools.
The easiest way is to just hit F12
Another hotkey is CTRL+SHIFT+I
You can also open the tools from the chrome menu (three dots) -> More tools -> Developer tools
You can also right click on any HTML element and select "Inspect". This method also scrolls the source code in the developer tools to said element, which is nice if we have an HTML file which is very long.
![](imgs/1-web-and-html_16.png)
![](imgs/1-web-and-html_17.png)
Elements can also be inspected with a cursor after clicking the arrow icon (see picture) in developer tools and hovering over the element of interest. This is extremely handy as the boundaries of elements are not always intuitive and this can make the aforementioned "right click + inspect" method tricky to use.
![](imgs/1-web-and-html_18.png)
# Chrome Dev Tools
![](imgs/1-web-and-html_19.png)
Basic features of the dev tools. There are others but these are enough for now.
Source code
Styles
Console
When you are developing and a web page or an application that runs on a browser and you want to check the result, it is a good practice to always:
Check that the web page looks like you want it to look like
Check that the source HTML code looks like you want it to look like
You might have a page that looks all right but the code is not what you wanted.
# User input
There are all kinds of inputs
Most common one is text input
Inputs have a type and a name. The name is what the field will be called when the data is sent to a server.
This is how this input looks:
<label for="firstname">First name:</label>
<input type="text" name="firstname">
![](imgs/1-web-and-html_20.png)
<label _> _ tag can be used to create a caption for an item in the user interface
Most often used with elements with which a user can interact with, like inputs, radio buttons, etc.
A label can be associated with a specific element by referencing the desired element's name inside label
<label for="firstname">First name:</label>
<input type="text" name="firstname">
![](imgs/1-web-and-html_21.png)
![](imgs/1-web-and-html_22.png)
* Buttons can be used to launch JavaScript actions
* More about the functionality later
* Now we will just see how to make them
* <button onclick="my_func();">A button</button>
* The JavaScript function to be called is defined inside onclick
![](imgs/1-web-and-html_23.png)
* Forms are used to gather data and send into the server
* For example: login forms, registration forms, shipping forms, questionnaire forms
* If you look at forms online they quite often look like this:
* <form action="/action_page.php">
* We are not using PHP as our server language, so we have to program our actions by ourselves using JavaScript
* More about that later!
A simple login form:
<form action="javascript:login();"> OR
<form onsubmit="login();">
<label for="username">Username:</label>
<input type="text" name="username" required/>
<label for="password">Password:</label>
<input type="password" name="password" required/>
<button type="submit" id="login_button">Log in</button>
</form>
We set the form action to be a JavaScript function
We set our button's type to be submit so onsubmit will be called when the button is pressed
# Tables
Table can be made with <table> tags
Table itself is split into <thead>, the header part
And <tbody> , the body or content part
![](imgs/1-web-and-html_24.png)
Table header is split into <th> components:
<thead>
<th> ID </th>
<th> First name </th>
<th> Last name </th>
</thead>
![](imgs/1-web-and-html_25.png)
Table body is split into <tr> table row components
These table rows are split into <td> cells
<tr>
<td>1</td>
<td>Mikko</td>
<td>Mallikas</td>
</tr>
![](imgs/1-web-and-html_26.png)
# HTML cheat sheet
# HTML in a nutshell
* HTML documents are constructed by using <tags>. They have either…
* an opening and closing tag: <tag></tag>
* or a single self closing tag: <tag/>
# HTML elements in a nutshell
paragraph <p>
heading <h1>
image <img src=" [https://www.website.com/image.png"/](https://www.website.com/image.png%22/) >
link (aka anchor) <a href="https://www.google.com">This links to Google!</a>
divisors <div> act as containers for other elements
spans <span> are used to style in-line elements like parts of text
forms <form> are used to gather user input or other data to send to a server
input fields <input> allow users to select or type out values (in, for example, forms)
tables <table> are used to define tables
for lists we have <li> and <ul> for ordered and unordered lists
# HTML page structure in a nutshell
<!DOCTYPE html> <!--Defines the document as HTML5 document!-->
<html> <!--Opening tag! Defines the HTML document!-->
<head> <!--<head> is initiated before <body>! (Load styles etc.)-->
<meta charset="utf-8"> <!--Meta tag defining the charset-->
</head> <!--Closes head!-->
<body> <!--Opens the webpage body!-->
<!--Paragraphs, images and links come here.-->
</body> <!--Closes body!-->
</html> <!--Closing tag marked with /!-->
# Assignments
[Assignments about this topic can be found here](https://gitea.buutti.com/education/academy-assignments/src/branch/master/Front-end%20Basics/1.%20Web%20&%20HTML)

@ -0,0 +1,420 @@
# CSS
# Prelude
With pure HTML, we can create static pages with no _functionality _ and no _style_
That's why it needs to be paired with…
CSS for theming
JS for interactive functionality
# Linking CSS to HTML
Make a new file called __ __ _style.css_ _ _ and put it into the same folder as your __index.html__ file
Use the link tag inside <head> to load the style to your HTML page
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
# Different ways to apply CSS
__1. __ _Internal_ :<style> body { background-color: red; } </style>
__2. __ _Inline _ (frowned upon, but sometimes necessary):<body style="background-color: red;">
__3. __ _External file_ __ __ (preferred) __:__ <head> <link rel="stylesheet" type="text/css" href="style.css" /></head>
# CSS Selectors
In CSS, _selectors _ are used to select _specific _ or _multiple _ elements which gets styled
| Selector | Syntax | CSS | HTML |
| :-: | :-: | :-: | :-: |
| Type | elementname | input | <input /> |
| Class | .class | .inputs | <input class="inputs" /> |
| Id | #id | #username | <input id="username" /> |
| Attribute | [attr=value] + variations | input[type="text"] | <input type="text" /> |
CSS syntax: an example
* first we use the _selector_ __ __ which marks the html element that gets styled
* In this case it's p (paragraph)
* inside curly braces, we have declared three rules:
* Font will be Verdana
* Font size will be 20px
* Color will be green
p {
_color_ : green;
_font-family_ : Verdana;
_font-size_ : 20px;
}
# ID vs class
* HTML element _IDs_ _ _ are unique
* two elements should never share the same ID!
* A _class_ _ _ can be applied to multiple elements
* an element can have multiple classes
* => allows sharing code!
HTML<div id="main-content">CSS#main-content { background-color: white; }
HTML<p class="note">Note!</p><p class="note yellow">Another note!</p>CSS.note { font-size: 3em; }
Classes and IDs: hierarchy
* What if a HTML element is styled using multiple overlapping definitions?
* <p class="note yellow">
* the rules declared later override the ones declared earlier
* If an element has an id and a class, the rules in the id override their counterparts from the class
* It's possible to manually override rules with the !important keyword
* It's best to avoid it, though
* It can be VERY easily overused!
* It's usually best to avoid _multiple definitions_ as well to keep things simple.
# Styling elements
Color & style: Background color
Let's make the div have a __ background-color __ so we can see where it is!
div {
_background-color_ : _darkgray_ ;
}
We can also color our paragraphs and h1 elements and set their fonts
p {
_font-size_ : 18px;
_font-family_ : Verdana;
_color_ : white;
}
Do the same for h1
Color & style: Hex values
* Color names like _red _ and _yellow_ produce harsh primary colors
* You want to use _hex values_ instead
* for example #00688b or #f4858e
* Hex color consists of 3 hexadecimal numbers from 00 to ff (0 to 255 in decimal!)
* First hex number corresponds to red, second to green, and third to blue. For example, #ff0000 results in pure bright red
* VSCode shows the color of the corresponding hex value!
* There are websites to convert color values to hex
* Try to google search "hex color picker"
Let's learn the basic rules to manage the _size _ of something
div {
_width_ : 200px;
_height_ : 250px;
}
img {
_width_ : 100%;
}
We have width and height we can adjust
px means pixels
% is the percentage of the parent's (in this case div's) width
px and % are not the only [units of measurement](https://www.w3schools.com/cssref/css_units.php) in CSS even if they are the most common. em and rem are also widely used, among others.
Margin and padding
* _Margin _ and _padding _ define the space _around _ and _inside _ the element, respectively
* You can also use _-top_ , _-bottom_ , _-left_ and _-right_ to set values to individual sides
* _margin _ or _padding_ alone set a shared value for every side
* div {
* _padding_ : 30px;
* _margin_ : auto;
* _margin-top_ : 100px;
* }
* h1 {
* _margin-bottom_ : 0px;
* }
* p {
* _margin-top_ : 5px;
* }
* img {
* _width_ : 100%;
* }
* One special case is margin: auto; which centers the element
![](imgs/2-css_0.png)
Margin, _border, _ and padding
Additionally, there's _border_ __, __ which defines how thick the element's border is!
This is how margin, border and padding stack up →
![](imgs/2-css_1.png)
---
Näytä dev tools chromesta
# Text-align
Text can be aligned with the _text-align_ rule. In addition to text, it effects to all [inline](https://www.w3schools.com/html/html_blocks.asp) or [inline-block](https://www.w3schools.com/css/css_inline-block.asp) elements.
![](imgs/2-css_2.png)
![](imgs/2-css_3.png)
![](imgs/2-css_4.png)
![](imgs/2-css_5.png)
div {
...
_text-align_ : center;
}
Let's center our content inside div:
Giving some border-radius rounds the corners nicely
_border-radius_ : 20px;
# Exercise 1: IDs and classes
Modifying the page that we previously created in "Web Basics and HTML", create a style sheet named style.css and link it to the page. Then add the following features:
Create a <div> element with some content (like a <p> element) inside of it. Give the div a class that gives it a yellow background color.
Create another <div> element with some content. Give it an ID that gives its contents red text color.
# Exercise 2: Padding and margin
* The page that we've previously modified should have an image in it.
* Add another image to the end of the page, below the div elements created in exercise 1.
* Apply CSS that gives all images on the page the following __properties:__
* __padding: 0.5em__
* __margin: 1em on the right and left, 0.5em on the top and bottom__
* __a blue background color so you can better see how the padding and margin works__
# Styling tables and lists
# Styling tables
Let's add a nice border to our table on the page by only having borders on for the outer table:
table {
_border-collapse_ : collapse;
}
table td, th {
_border_ : 1px solid black;
}
# nth-child
The nth-child CSS selector can be used to apply styles to only specific child elements in some pattern
For example, it is commonly used to make striped tables
tr:nth-child(even) { /* Change bg color of even-indexed table rows */ background-color: #d2d2d2;}
Various more complicated patterns can be made with the selector. For examples, check the [Mozilla documentation on the nth-child selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child)
nth-child is only one selector. There are more of them:
p:first-child matches all paragraphs that are the first child of a parent
p:first-of-type first paragraphs of parent
p:last-child and p:last-of-type work similarly
p:nth-child(2) the second children of their parents
p:nth-child(odd) all paragraphs on odd rows ( _even_ also possible)
p:nth-of-type(odd) all paragraphs on odd rows of the same type ( _even_ also possible)
And so on.
# Lists
You can create a _list _ element with the <ul> and <li> elements
<ul> <li>First item</li> <li>Second item</li></ul>
This will create a two-item list like this:
First item
Second item
# Exercise 3: Lists and nth-child
Create a new list (<ul>) element with at least 5 <li> items to your page.
Then, in your style.css, add a CSS style that changes the text color of every odd-number-indexed list element to purple.
Tip: nth-child allows specifying odd instead of even for styling odd-indexed children
# Layouts
* Display defines how an element is visible on the screen
* Here we have examples of _inline_ , _inline-block_ and _block_
* There is also _none_ __ __ which makes an element invisible
* Often used to hide elements with JS
![](imgs/2-css_6.png)
A [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) is used to flexibly align elements in either a vertical or a horizontal manner
It is a reasonably "modern" way to position elements
[https://css-tricks.com/snippets/css/a-guide-to-flexbox/](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
# Flexbox example
Suppose we have the following code
Notice by how only defining the _wrapper_ _ _ with _display_ : flex, the sub elements become "flex elements"!
.wrapper {
_display_ : flex;
_flex-direction_ : row;
_flex-wrap_ : wrap;
}
.wrapper div {
_width: 200px;_
}
<div class="wrapper">
<div id="box1">One</div>
<div id="box2">Etiam...</div>
<div id="box3">Three</div>
<div id="box4">Four</div>
<div id="box5">Five</div>
</div>
![](imgs/2-css_7.png)
# Exercise 4: Flexbox
Modifying the same page that we've created, add a flexbox (flex container). To the container, add 5 div items with text content.
First, align the flex items vertically.
Modify the CSS to align the items horizontally.
Modify the CSS to allow the content to wrap to multiple lines. Test that it works properly by making the content too wide for a single line.
A [grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout) layout is used to align elements to a grid
<div class="wrapper">
<div id="box1">One</div>
<div id="box2">Etiam...</div>
<div id="box3">Three</div>
<div id="box4">Four</div>
<div id="box5">Five</div>
</div>
.wrapper {
_display_ : grid;
_grid-template-columns_ : 1fr 1fr 3fr;
_grid-auto-rows_ : 200px;
}
![](imgs/2-css_8.png)
# Exercise 5: Grid
Create the following grid structure with the grid layout:
![](imgs/2-css_9.png)
# Responsiveness
In the early days of web development everything was done (or at least attempted to be done) pixel perfect. To achieve this, elements had absolute positions and sizes etc.
This means that the web page would look the same on every screen size. This is not advisable any more since people use so many different sizes and orientations of screens.
To solve the problem of different screen sizes, web developers first started to make different versions of websites for different resolutions and orientations. For example there might have been a "mobile version" of a site.
This is also an outdated way of developing web pages.
The best way to combat this problem is _ responsiveness. _ This means that the contents of a web page will neatly scale on any screen size and orientation.
![](imgs/2-css_10.png)
![](imgs/2-css_11.png)
Responsiveness is achieved by using relative sizes, margins and positions, for example:
Percentage based values
Units like em and rem
Breakpoints for viewport size to force different sizes and positions depending on the screen size.
Developing responsive web pages from scratch is time consuming. Luckily there are frameworks to help us with that. One such framework is called Bootstrap and we will take a look at it in the next section.
* It's absolutely impossible to remember all the HTML and CSS stuff on the top of your head.
* Websites like [Mozilla's developer page](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) or _www.w3schools.com_ help here!
* The most important thing about learning HTML and CSS is to know _what _ exists and _where _ to find them. Shortly, you'll become faster and have a better idea on what you need
* If you find something on a website you like but don't know how to implement it, open the _ _ _developer tools_ to see how they did it! (More on that next time!)
# Assignments
[Assignments about this topic can be found here](https://gitea.buutti.com/education/academy-assignments/src/branch/master/Front-end%20Basics/2.%20CSS)

@ -0,0 +1,268 @@
# Bootstrap
_Bootstrap_ is a modern CSS framework for building web sites with a responsive grid layout and a consistent, modern style
Originally developed by Twitter for encouraging consistency in web UI design
Nowadays handled by a separate team
Very common in modern websites
[https://getbootstrap.com/docs/](https://getbootstrap.com/docs/)
# Basic idea of Bootstrap
When developing a web page with Bootstrap you rarely need to write your own CSS. With Bootstrap we can use pre-made classes that will style the components for us. For example:
Non-styled button
Button with Bootstrap styling
<button>Button</button>
<button class="btn btn-primary">Button</button>
![](imgs/3-bootstrap_0.png)
![](imgs/3-bootstrap_1.png)
# Bootstrap Grid
The web page consist of rows
Each row is divided into a specific number of columns (max 12)
Each element can take an arbitrary number of columns
The sizes of elements and the number of columns in a row can be easily specified with CSS classes that Bootstrap has pre-defined
[https://getbootstrap.com/docs/5.3/layout/grid/](https://getbootstrap.com/docs/5.3/layout/grid/)
# <div class="container">
In most cases all content in Bootstrap should be wrapped inside a <div class="container">. This adds automatic responsiveness and sets maximum width for the page. Especially on large screens this prevents the contents from taking all the width of the screen.
![](imgs/3-bootstrap_2.png)
# Bootstrap grid: basic example
_Centered row with 3 columns_
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
![](imgs/3-bootstrap_3.png)
# Bootstrap: column count in row
* You can specify a row element to have a specific number of columns with the row-cols-<number> class
* For example, row-cols-2 for 2 columns in a row
* Here's a row-cols-3 example: a row with 3 columns
* It has 4 inner elements each spanning a column,
* 4 > 3, so the last element wraps to create a new row
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
![](imgs/3-bootstrap_4.png)
# Bootstrap: element width
You can make an element span many columns with the col-<number> class
E.g., an element with the col-6 class takes up 6 columns
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
![](imgs/3-bootstrap_5.png)
# Exercise 1: Layout with Bootstrap
Create a new HTML document and add Bootstrap CSS to it.
Using Bootstrap, re-create the layout below. You don't need to add the purple border lines between the elements, they can be regular <div> elements with text content.
Extra: make the columns stack on small browser windows
![](imgs/3-bootstrap_6.png)
# Bootstrap: spacing
One particularly useful feature of Bootstrap is readily provided CSS classes for spacing!
For example, to add padding around an element, we can just give it a p-x class, where x is a number from 1 to 5 depending on how much padding we want.
[https://getbootstrap.com/docs/5.3/utilities/spacing/](https://getbootstrap.com/docs/5.3/utilities/spacing/)
# Bootstrap input form
Bootstrap includes styled input forms and buttons that look much better than the default ones.
![](imgs/3-bootstrap_7.png)
Code for the form in the previous slide
<form>
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email">
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-outline-primary">Reset form</button>
</form>
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email">
</div>
![](imgs/3-bootstrap_8.png)
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password">
</div>
![](imgs/3-bootstrap_9.png)
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-outline-primary">Reset form</button>
![](imgs/3-bootstrap_10.png)
# Styling forms
Input field size, button size, button color etc. can be changed just by adding classes to the element. For example:
<button class="btn btn-primary">Primary button</button>
<button class="btn btn-danger">Danger button</button>
<button class="btn btn-warning btn-sm">Small warning button</button>
<button class="btn btn-success btn-lg">Large success button</button>
![](imgs/3-bootstrap_11.png)
# Exercise 2: Input form
![](imgs/3-bootstrap_12.png)
Create the form from earlier
Add a checkbox
Add radio buttons
Make the input fields LARGE
Change the colors of the buttons and make them full width and stacked on top of each other
Use spacing classes like mb-2, pb-2 etc. to space the elements to your liking
# Bootstrap: advanced
Bootstrap also offers many additional useful features
Standardized color classes
__R__ __esponsive __ CSS classes to make the web site usable on both smaller and larger screens
Classes for setting element alignment (vertical-align)
Styles for various different elements, like buttons, forms and lists
![](imgs/3-bootstrap_13.png)
# Bootstrap: conclusion
Bootstrap provides a CSS layout system and a lot of ready-made CSS classes
Helps you to create appealing web pages quickly, without needing to write a lot of boilerplate CSS code
Look up Bootstrap's documentation if you're wondering whether it could save time in, e.g., styling your button or table
[https://getbootstrap.com/docs/5.3/getting-started/introduction/](https://getbootstrap.com/docs/5.3/getting-started/introduction/)
# Assignments
[Assignments about this topic can be found here](https://gitea.buutti.com/education/academy-assignments/src/branch/master/Front-end%20Basics/3.%20Bootstrap)

@ -0,0 +1,503 @@
# JS in HTML & DOM
# Linking JS to HTML
# Motivation
During this course, we'll mostly focus on front-end development with React
However, it helps to understand some of the basics on how to interact with web pages using pure JavaScript
We won't dive deep into making complex websites with pure JavaScript without a framework, but we'll glance at some of the basics
* Javascript in an HTML file is written within the <script> tags.
* As a rule of thumb, aim for inserting <script> in the bottom of the <body>
* The page loads faster as the browser compiles the script only _after _ loading the page
* However, if you _need _ the script to load before the page, add it to <head>.
<html>
<head>
</head>
<body>
<p>Hello there!</p>
<script>
__Insert__ __ __ __JS__ __ __ __here__
</script>
</body>
</html>
Exercise 1: HTML + JS hello world
Add some functionality to your HTML page.
Create a function that prints "hello world" . Call this function in your script!
# Events
* Creating a function and then running it when loading the page doesn't really add _interactivity _ to a website
* Luckily, JavaScript functions can be bound to various __events__
* The fastest way: define the function inside the <script> tags and then give some element onclick event, e.g.,
* <div onclick="someFunction()"> </div>
* (Another example of an event would be onmouseover)
* This method is a bit tacky, as it mixes HTML with JS
* generally we want those to be __separated__ !
__addEventListener __ (The better way)
Better way to implement the onclick and other methods is by adding the event listener fully in code
First, find the element with
[document.getElementById](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)
__querySelector (example later)_
__querySelectorAll__
Then, add an Event listener to
the element
<div id="topBar">
<p>Hello!</p>
</div>
<script>
const topBar = document.getElementById('topBar');
topBar.addEventListener("click", () => {
console.log("Hello there!");
});
</script>
JS has quite large amounts of built in events for different kind of user interactions.
A list of these can be found in:
[https://developer.mozilla.org/en-US/docs/Web/Events](https://developer.mozilla.org/en-US/docs/Web/Events)
and
[https://www.w3schools.com/jsref/dom_obj_event.asp](https://www.w3schools.com/jsref/dom_obj_event.asp)
Forms and JS example
<form id="login">
<label for="username">Username:</label>
<input type="text" name="username" id="username"/>
<label for="password">Password:</label>
<input type="password" name="password" id="password"/>
<button type="submit" id="login_button">Login</button>
</form>
const loginForm = document.querySelector("#login");
loginForm.addEventListener("submit", (e) => {
e.preventDefault();
const username = document.querySelector("#username");
const password = document.querySelector("#password");
console.log("username: ", username.value);
console.log("password: ", password.value);
});
Event listener fires when form is submitted. The script selects username and password inputs and logs the values
# Exercise 2: Counter
Add a button to your page. Add an event handler function to the button that uses the window.alert method to tell the user how many times they've clicked on the button so far.
See [https://developer.mozilla.org/en-US/docs/Web/API/Window/alert](https://developer.mozilla.org/en-US/docs/Web/API/Window/alert)
For example, on first press the user should see a message box saying "Clicked 1 time(s)", on second press it should say "Clicked 2 time(s)", and so on.
_Note:_ _ _ In real life, avoid using window.alert as it's generally not great for the user experience. Here it's fine for educational purposes.
Exercise 3: Color change click!
Create an HTML element whose color changes when it's clicked.
First, use the fast "onclick" version
Then, convert it into using addEventListener
_Extra: _ Change the color of _another_ element, not the one that was clicked!
_Extra 2: _ Change the color into a new random color every time the button is clicked!
# Strict mode
* __Strict mode__ was introduced in ES5
* Strict mode __makes a few changes__ to normal JS semantics
* Prohibits some JS syntax
* Creates error logs for silent JS errors (that do not show up in the console)
* Allows optimization of JS code
* Strict mode is on automatically when using JavaScript modules i.e. using import and export
Converting your JS files to strict mode
* Make the first line of your code 'use strict'
* It prevents you from creating code that is considered bad practice:
* Declaring variable without a keyword (let, const, (or var))
* Using the "with" statement (we won't get into that, don't use it)
* Using "delete" on a variable
* Declaring functions in blocks:
* and so on…
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode)
if (q===w) _function_ f() {}
# Window
__window__ is an object that contains a set of default variables and functions that you can use within a browser
window.alert(), window.document, window.console.log(), window....
As you can see, most of these functions look familiar. That's because you can access them also without window.
In some sense, window keyword is just a list of global variables and functions.
Be careful with window!
Basically...
window.console.log("asd") --> console.log("asd")
window.alert("asd") --> alert("asd")
If you give a variable or function a name that is already used within the "window" object by default, that __variable/function gets overwritten!__
# Separating scripts
Separating JS from HTML completely
Instead of including JS in the HTML file, we can separate it to another .js file
Then, we can refer to the new JS file in our HTML file:
<script src="main.js"></script>
There can be more than one of these links, e.g.,
<script src="main.js"></script>
<script src="someFunScripts.js"></script>
<script src="bestScripts.js"></script>
_Note that the order of the script links matters!_
Multiple js files
* If we have multiple JS files, loading the page can get visibly slower
* Adding a defer="defer" argument enables files to be __loaded as resources get freed (=faster!)_
* Still, the files will get executed in the correct order!
* <script src="someFunScripts.js" defer="defer"></script>
* <script src="bestScripts.js" defer="defer"></script>
* <script src="main.js" defer="defer"></script>
* _About file order:_ load more general stuff first, and the most specialized stuff last.
* It's also clearer if you make function calls in the __last script only__ , and only __declare __ stuff in the earlier scripts.
# Extra: Executing JS on page load
To execute script when the page loads, you can do this:
In your script.js file, you can define a function called, say, load()
then set it as a value of window.onload
function load() {
console.log("page loaded!");
}
window.onload = load;
# Exercise 4: Greeting the user
Separate your scripts into script files and link them to your main page.
Create a new file user.js
Into the new file, add a function that changes text on the page to a personified greeting "Welcome, [username]!
Run the function when the page is loaded.
Run the function again when the user submits a new username with a form!
# Dynamic CSS
# More about CSS classes
HTML elements can have multiple class attributes separated with a space<button class="btn btn-red">Submit</button><button class="btn btn-blue">Cancel</button>
__Applies to both buttons__
.btn {
border: none,
}
__Applies to__ __ __ .btn-red
.btn-red {
background-color: red;
}
__Applies to __ .btn-blue
.btn-blue {
background-color: blue;
}
# ClassList
In JS, __classes can be added and removed__ dynamically with classlist (array-like object):
const button = document.querySelector(".btn-red");
button.classList.add("btn-blue");
button.classList.remove("btn-red");
Or __toggled__ :const anotherButton = document.querySelector("#another-btn");button.classList.toggle("btn-blue");
Changing the element style
We can change the style of an element by using its style property.
First we get the element:
const someEl = document.getElementById('someEl');
Then we can change the element's style:
someEl.style['font-weight'] = 'bold';
or
someEl.style.fontWeight = 'bold';
CSS visibility vs display
We can change an element's __visibility __ by using the css "visibility" property. Basically meaning that we can either __show or hide an element__ __.__ Let's first store a reference to the element in someEl variable
const someEl = document.getElementById('someEl');
Notice that __display__ removes the element and its effects from the DOM
This __frees up space__ , but the element is still visible in the source code
__Visibility __ only hides the element from the DOM, __still reserving the space for it__
someEl.style.visibility="hidden"; someEl.style.display="none";
someEl.style.visibility="visible"; someEl.style.display="block";
Exercise 5: change styles on hover
Get a handle to the three different sections on your page and make them change color to yellow when you hover your mouse over them
![](imgs/4-js-in-html-and-dom_0.png)
---
Solutions: Solutions: https://buuttilab.com/bctjs/week3-html-css-js-dom/-/tree/master/lecture-exercise-solutions/hover
# Dynamic HTML
Inserting HTML using JS
JavaScript allows us to create HTML by __saving HTML as a string__
let someHtml = "<div><p>Hello there</p></div>";
document.getElementById("someElementId").innerHTML = someHtml;
More often than not, we want to use __template literals__ instead of quotations, since this will help us embed variables in to our HTML code
let someHtml = \`
<div>
<p>Hello there ${friend}</p>
</div>
\`;
Creating HTML elements by using JS
JS allows us to __create new HTML elements __ __programmatically__ as well
This way of adding new HTML elements is less prone to typos than when using string literals
const pTag = document.createElement("p");
pTag.innerHTML = "I am some Html in a p tag";
document.getElementById("someDivForExample").appendChild(pTag);
OR
const text = document.createTextNode("I am text node to append");
pTag.appendChild(text);
document.getElementById("someDivForExample").appendChild(pTag);
Removing a HTML element by using JS
Similarly, we can also __remove __ an element from DOM
const post = document.getElementById("someElementWeWantToRemove");
const posts = post.parentElement;
posts.removeChild(post);
Alternatively, we can remove the _n_ __th child__ from a parent like this:
const posts = document.getElementById("list_of_posts");
posts.removeChild(posts.childNodes[n]);
# DOM
![](imgs/4-js-in-html-and-dom_1.png)
Wikimedia Commons
__HTML DOM__ (Document Object Model) is the _tree structure_ of the web page
it's created when the web page is opened
JS can modify all elements within the DOM
__DOM elements are objects__ , which have a range of different methods and properties
document.getElementById("idname").innerHTML;
_getElementById_ _() _ _ is a __method__ , innerHTML _ _ is a __property__
Hint: We can access element attributes with method getAttribute()
# Exercise 6: event listeners
Create a simple user interface that displays jokes. Create four buttons and event listeners for:
Displaying one random joke
Displaying one random nerdy joke (category: nerdy)
Displaying all jokes
Deleting the first joke
Jokes array can be found on [Gitea](https://gitea.buutti.com/education/academy-assignments/src/branch/master/Front-end%20Basics/4.%20JS%20in%20HTML%20&%20DOM/jokes.js) .
---
Default joke array and solution: https://buuttilab.com/bctjs/week3-html-css-js-dom/-/blob/master/lecture-exercise-solutions/jokes/main.js
# Chrome Dev Tools
* The most important tools of a modern web developer are bundled with the browser!
* Open the _ Inspect _ menu with
* _F12_ or _CTRL+SHIFT+I_
* right-click the webpage and click Inspect
* Inspect has multiple tabs
* Most used ones: _ _
* _Console_ , _Network_ , _Application_ , _Elements, Toggle._
![](imgs/4-js-in-html-and-dom_2.png)
# Console
_Browser has its own _ _Console_
_one of the most important tools for a front-end developer_
_e.g., app's error messages, console.logs and failed requests are printed here_
![](imgs/4-js-in-html-and-dom_3.png)
* In _Elements_ you can browse and edit the HTML structure of the webpage
* easily demonstrate different styles in the browser
* move the edits into code editor
* The internal structure of ready-made UI components get exposed here
![](imgs/4-js-in-html-and-dom_4.png)
* _Network_ exposes the data traffic (HTTP!)
* the requests the page is sending to the server, and their responses
* Helps e.g., in the optimization of page load time
* You can see which elements load slower!
* you can check _Disable cache_ to make debugging easier (no previous data influences the current state of the web app!)
* check _Preserve log_ to keep the console log intact when the page is reloaded
![](imgs/4-js-in-html-and-dom_5.png)
_In _ _Application_ _ you can track and manage e.g.,_
_Local Storage_
_cookies_
_tokens_
![](imgs/4-js-in-html-and-dom_6.png)
# Toggle
* _Toggle_ is used for designing responsiveness of webpages
* How would the page look on…
* different resolutions
* phones, tablets, etc…
![](imgs/4-js-in-html-and-dom_7.png)
![](imgs/4-js-in-html-and-dom_8.png)
Exercise 7: Let's mess around
Go to some random news page and change a headline into something silly with the Dev tools. (It's surprisingly easy!)
![](imgs/4-js-in-html-and-dom_9.png)
# Assignments
[Assignments about this topic can be found here](https://gitea.buutti.com/education/academy-assignments/src/branch/master/Front-end%20Basics/4.%20JS%20in%20HTML%20&%20DOM)

Binary file not shown.

After

Width:  |  Height:  |  Size: 328 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 997 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 187 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 102 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 115 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 374 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 230 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 95 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 306 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 126 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 364 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 743 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 646 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 139 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 400 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 288 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 179 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 102 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

Loading…
Cancel
Save