Table of contents
Have you played with LEGO?
Features, Tips, and Techniques you Must Know about:
HTML, CSS, JS
Better let's create our HTML 😉
and see how and why we need this theory!
Then you will search for theory when you feel you need it, not when I tell you.
2) Example of visible tags
<img src="images/fastrackit-logo-small.png" width="150"/>
<a href="http://fasttrackit.org">link</a>
<form action="http://fasttrackit.org" method="post">
<label for="user-email">Email</label>
<input type="email" required id="user-email" name="email"/>
<button type="submit" name="submit">
Subscribe
</button>
</form>
Nested Elements
<p>
You can have images inside a link
and all that inside a paragraph
<a href="https://fasttrackit.org">
<img src="images/fastrackit-logo-small.png"/>
</a>
</p>
You can have images inside a link and all that inside a paragraph 
Form example
<form action="" method="get">
<label for="userEmail">Email:</label>
<input id="userEmail" required="required"
name="email"
type="email"
placeholder="contact@fasttrackit.org"
/>
<button type="submit">Submit</button>
</form>
Input Types (for now you just have to know they exist)
, , , ,
, range, search, tel, time, url, week, datetime-local, email, month, text
Audio
<audio autoplay="autoplay" controls="controls">
<source src="resources/file.mp3" />
<a href="resources/file.mp3">Download.</a>
</audio>
Video
<video controls loop autoplay muted preload>
<source src="resources/video.mp4"/>
<p> Your browser is old.
<a href="resources/video.mp4">Download.</a>
</p>
</video>
Attributes
On visible tags we've seen more info after tag name, they are called attributes, and look like this:
<p
id="unique-id"
class="css-class"
title="info on mouse over"
style="color: red; text-align: right"
>
paragraph with attributes
</p>
paragraph with attributes
More style attributes
p {
text-align: right;
font-weight: bold;
margin: 5px 6px 7px 8px;
padding: 10px;
width: 400px;
height: 60px;
border: 4px solid red;
background-color: yellow;
color: blue;
}
paragraph with style
Apply some style on your elements
Making a standard document
Copy following content in your html file
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
--- START ---
Move all content you wrote here.
---- END ----
</body>
</html>
Look at HTML Page Structure
Understand basic CSS syntax
Create a new empty file
- name it style.css
- include it in your *.html file after title tag
<link type="text/css" rel="stylesheet" href="style.css"/>
selecting elements and style them
/* selector { styles } */
p { color: red; }
#home-elem-id { color: blue; }
.favorite-class { color: green; }
Move all style attributes to css file
FlexBox Layout HTML
<header>
Header
</header>
<section id="content">
<div id="side-menu">
<section>Menu 1</section>
<section>Menu 2</section>
</div>
<div id="main">Main Content</div>
</section>
<footer>
Footer
</footer>
Main Content
A Complete Guide to Flexbox
FlexBox Layout CSS (adding borders)
header, footer, #content {
padding: 4px;
margin: 2px;
border: 5px solid #2196F3;
background-color: #d3eafd;
}
#content div, #side-menu section {
padding: 4px;
margin: 2px;
border: 2px solid red;
}
#side-menu section {
border: 2px solid green;
}
Main Content
FlexBox Layout CSS (adding layout)
html {
height: 100%;
}
body {
margin: 0;
min-height: 100%;
display: flex;
flex-direction: column;
}
#content { flex: 1; }
#content {
display: flex;
flex-direction: row;
}
#side-menu { flex: 1; }
#main { flex: 2; }
#footer {
min-height: 24px;
}
Main Content
Grid CSS Layout
<div class="grid-container">
<header>Header</header>
<div class="item2">Menu1</div>
<div class="item3">Menu2</div>
<div class="item4">Main</div>
<footer>Footer</footer>
</div>
Menu1
Menu2
Main
Grid CSS Layout
Menu1
html { height: 100%; }
body {
margin: 0;
min-height: 100%;
}
Menu2
header {
grid-area: header;
}
.item2 {
grid-area: menu1;
}
.item3 {
grid-area: menu2;
}
.item4 {
grid-area: main;
}
footer {
grid-area: footer;
}
Main
.grid-container {
min-height: 100%;
display: grid;
grid-template-areas:
'header header header'
'menu1 main main'
'menu2 main main'
'footer footer footer';
grid-gap: 10px;
background-color: #2196F3;
grid-template-rows: auto auto 1fr auto;
height: calc(100vh);
}
.grid-container > * {
background-color: #d3eafd;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
Grid CSS Layout (Cards)
Resize screen to cross width limits (800px, 1024px)
<div class="cards-wrap">
<div>*.html</div>
<div>*.css</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
.cards-wrap {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
@media (max-width: 1024px) {
.cards-wrap {
grid-template-columns: auto auto;
}
}
@media (max-width: 800px) {
.cards-wrap {
grid-template-columns: auto;
}
}
*.html
*.css
3
4
5
6
Are you wonder if this nice effects are a result of html5?
well.... NO ;)
js just impress.js
- Based on the power of CSS3 transforms and transitions in modern browsers.
of course lot of JavaScript
one more thing...
HTML is not a programming language!
But you can do a lot of things combining it with
CSS and JS
Script Tag
At the end of the body
(before </body>), add next tag:
<script>
// add your code here
console.info("page loaded");
</script>
Now refresh your page and press F12 (on chrome or firefox), then go to Console tab and see the result.
Learning Pure JS
Variables
var employed = false; // boolean
var age = 24; // number
var name = 'First Last'; // string
// object (array)
var skills = ['html', 'css', 'js'];
// object (json)
var person = {
employed: true,
age: 29
};
// object (DOM, other)
var el = document.getElementById('el');
console.info(typeof name); // string
console.info(typeof skills); // object
console.info(typeof person); // object
console.info(typeof document.getElementById); // function
Read more about JavaScript Variables
JSON Objects
var person = {
employed: true,
age: 29,
name: 'First Last',
skills: [
'html', "css", `js`
]
};
console.debug(person);
console.info(person.name);
console.debug(person.age);
console.debug(person.employed);
console.debug(person["employed"]); // same as above
In this case person object is storing all info about one person (like packaging).
Read more about JSON
Functions
// function, name, parameters, code block
function emptyFn() {}
function getWelcomeMsg(name) {
var msg = "Hello " + name + ", " +
"welcome at FastTrackIT.";
return msg;
}
function getMsg(name) {
return `Hey ${name}, I'm glad to help you learn js.`;
}
// call getWelcomeMsg and store result in variable
var welcomeNick = getWelcomeMsg("Nick");
var welcomeJohn = getWelcomeMsg("John");
// print variable value in console
console.info(welcomeNick);
Read more about functions
JSON Objects can have functions inside *
* only in JavaScript❗
var person = {
age: 29,
name: 'Nick',
learn: function() {
console.info("I'm learning JS, I love it!");
},
play: function() {
console.info("I'm playing. My name is ", this.name);
}
};
person.learn();
person.play();
//typeof document
//typeof document.getElementById
//typeof console
console.info(person["name"]); // => Nick
var action = "learn"; // or play
person[action]();
expand the console to see details
Is time to improve our document
Create a new empty file
- name it index.js
- include it in index.html
<script src="index.js" type="text/javascript"> </script> - move all your code from preview script tag into index.js
Don't forget HTML is a markup language for describing web documents (web pages), so keep all it's info clear and organized.
In JS you can write code as you wish, so how you organize your code, will make the difference!
Git Version Control System
1️⃣ Download and install git
... follow wizard ...
2️⃣ Global configs
# one time
git config --global user.email your@mail.com
git config --global user.name "Your Name"
# check your user/mail
git config --global user.email
git config --global user.name
Most used Git commands
# one time
git clone https://github.com/nmatei/web-programming-tutorial.git
# daily steps
git add .
git commit -m "details for my commit"
git push
git pull
# utils
git status
Basic Es5 vs Es6
// var => const & let
var name = "Nicolae Matei";
const firstName = "Nicolae";
const lastName = "Matei";
let age = 18;
// from functions to arrow functions
function hoistedFunction() {
return firstName + " " + lastName;
}
var functionVariable = function() {
return firstName + " " + lastName;
}
// arrow functions: () => {}
const getUserName = () => {
return firstName + " " + lastName;
};
const greetings = (name) => {
return 'hello ' + name;
};
// anonymous functions
function () {}
() => {}
Read more about functions-as-a-variable
Arrow functions =>
const noParam = () => {
return "This fn has no parameters";
};
const oneParam = (name) => {
return 'one parameter ' + name;
};
const oneParamSimplified = name => {
return 'for one param can omit ()' + name;
};
const moreParams = (firstName, lastName) => {
return "required () for more params" +
firstName + " " + lastName;
};
const simplifiedReturn = () => 'returned';
Read more about ES5 vs ES6 & Arrow Functions
Array forEach Helper
const vehicles = [
"car", "truck", "van", "bus", "bike"
];
// for loop
for(var i = 0; i < vehicles.length; i++) {
console.info(i, vehicles[i]);
}
// forEach helper
vehicles.forEach(function(vehicle) {
console.info(vehicle);
});
vehicles.forEach(vehicle => {
console.info(vehicle);
});
vehicles.forEach((vehicle, index) => {
console.info(index, vehicle);
});
Array map Helper
const vehicles = [
"car", "truck", "van", "bus", "bike"
];
const upperCaseVehicles1 = vehicles.map(function(vehicle) {
return vehicle.toUpperCase();
});
const upperCaseVehicles2 = vehicles.map((vehicle) => {
return vehicle.toUpperCase()
});
const upperCaseVehicles3 = vehicles.map(vehicle =>
vehicle.toUpperCase()
);
// ["CAR", "TRUCK", "VAN", "BUS", "BIKE"]
const upperCaseVehicles4 = vehicles.map((vehicle, index) =>
index + ". " + vehicle.toUpperCase()
);
// ["0. CAR", "1. TRUCK", "2. VAN", "3. BUS", "4. BIKE"]
Shortcuts
- CTRL + C | X | V => Copy | Cut | Paste
- CTRL + Left/Right => Move one word
- Shift + Top/Right/Bottom/Left => Select text
- CTRL + Shift + Left/Right => Move and Select
- Shift + Click => Select from preview cursor
- CTRL + S => Save
Chrome
- CTRL + R / F5 => Refresh
- CTRL + Shift + R => Force Refresh
IDE (VSCode) common shortcuts
- CTRL + Space => Auto complete
- Shift + Tab => Back intent
Practice
& Homework
Play & Try to understand project:
https://github.com/nmatei/web-programming-tutorial
Create https://github.com/ account