Skill Alliance Coding Workshop ft. INcubes

Coding

WorkshopFT.

ROBERTO mANGANO M.Sc

&

[IN]cubes

BASIC HTML &

CSS STYLING

Build a two-

page website:

home &

contact

Create an

interactive

page with php:

save data to

databases

learn the

basics of

Internet | HtmL | Php | SQL

Using coding examples & tutorials

Ip: INTERNET PROTOCOL

54.23.127.255

127.0.0.1 - localhost

HTTP: hypertext transfer protocol

FTP: file transfer protocol

HTML - HYPERTEXT MARKUP LANGUAGE

WHY MARKUP AND NOT PROGRAMMING?

BECAUSE HTML IS

STUP D

<!DOCTYPE html>

<html>

<head>

<title>PHP Test</title>

</head>

<body>

<p>2+2</p>

</body>

</html>

SHOWS 2+2

PHP - SERVER SIDE PROGRAMMING LANGUAGE

PHP IS

SMAR

<!DOCTYPE html>

<html>

<head>


</head>

<body><p>

<?php echo 2+2; ?>

</p></body>

</html>

SHOWS 4

CSS- CASCADING STYLE SHEET

CSS HELPS US MAKE OUR WEBSITES LOOK

THE WAY WE WANT IT TO

<!DOCTYPE html>

<html>

<head>


</head>

<body>

<p>2+2</p>

</body>

</html>

p{

color: red;

}

SHOWS 2+2

This is a domain

www.robertomangano.it

Servers: respond to user requests

Hosting isps: provide plans for renting/housing servers

Hosting plan: disk space + database + etc.

presentation

logic

data

PHP

server

Html

Js

css

browser

compiles

sends

Renders

Sends

information

GOOGLE CHROME

MOZILLA FIREFOX

APPLE SAFARI

INTERNET EXPLORER

INSPECT

ELEMENT

Right click to…

</TEXT EDITORS>

#ftp

software

Browser console

or

cloud ide/box

http://www.w3schools.com/html/

http://www.w3schools.com/css/default.asp

http://www.w3schools.com/php/default.asp

http://lorempixel.com/

<html></html>

<body></body>

<img src=“images/roberto.jpg”/>

<div></div>

<br />

<html>

<head>...</head>

<body>...</body>

</html>

<p><div>

<form>

<button>

<input>

<a>

<strong>

<h2><span> <h1>

<ul>

<title>

<li> <b><img>

<ol><dfn>

<progress>

<summary>

<u>

<section> <sup>

p{

font-size: 14px;

}

.red{

color: red;

}

BUT

WHERE?

CREATE A STYLE.CSS

<HEAD>

…

<LINK REL=“STYLESHEET”HREF=“STYLE.CSS”/>

TAGS

ID

What if

two rules

define different

behaviours?

#ruler{color: red} > .left {color: blue} > p {color: green}

<div class=”ruler”>

<p><span class=”left”>Hey</span>!!!</p>

</div>

class

p{

font-size: 14px;

}

.red{

color: red;

}

#red-button{

background-color:

#44ccff;

}

p .red .lists{

color: blue;

}

#jim, #john{

font-size: 12px;

}

<p>hello</p> hello

<p class=”red”>This is red Hello

<span class=”lists”> span</span> This is red Hello span Hello Again

Hello again

</p>

This is a red Title<h1 class=”red”>This is a red Title</p>

Log into

Open the “www”folder

Right click Create file “example 1.html”

Tryhtml... Live!

https://www.nitrous.io/

https://www.nitrous.io/

<html>

</html>

<head>

</head>

<body>

</body>

<title>

</title>

<h1>

</h1>

<ol>

</ol>

<P>

</p>

<li>

</li>

1. Set page to “my first page”

2.Create welcome text

3.Create a list of your 3 best friends

*YOU ARE AT A CODING WORKSHOP ON A SUNDAY SO THAT LAST ONE MIGHT BE A LITTLE HARD...

WRITE A SHORT BIO with

3 paragraphs

Checklist1. Use a h2 tag with the title before each paragraph

2. Style each h2 tag with a different colour

3. First two paragraphs much have font size 12px

4. Third h2 needs to have a blue border on the bottom

Creating css

from scratch ...

time consuming

Find basic

templates

online

font-size: 10px;

color: #ff0000;

font-weight: bold;

text-transform: uppercase;

border: 1px solid #cccccc;

border-bottom: none;

margin-left: 10px;

background-color: brown;

Native apps Web and responsive apps

Coded for particular device Adapt to particular devices

How?

Media queries

hide

Logical operators to

determine which

rules apply

@media (min-width: 700px), handheld and (orientation:

landscape) { p{font-size:10px;}... }

show

enlarge

move

BOOTSTRAP

COOL

RESPONSIVE

free

flexible

simple

4.

b

5.

o

6.

o

7.

t

8.

s

12.

P

10.

r

11.

A

9.

t

<div class=”col-md-6”></div>

<div class=”col-md-6”></div>

<div class = “row”>

1. 2. 3.

i.

ii.

Insert

columns of 6

Title

text

Title

image

Title

text

Create a webpage using blank_template

Client-side

code that

runs in the

browser

Functions

that respond

to events

(Mouseover)

adds logic

function to

html

Communicate

asynchronously

with server

Link jquery with

<script src="http://code.jquery.com/jquery-latest.min.js"

type="text/javascript"></script>

In the head section, add:

<script>

$( document ).ready(function() {

$( "a" ).click(function( event ) {

alert( "Thanks for visiting!" );

event.preventDefault();

});

});

</script>

Education

Skill Alliance Coding Workshop ft. INcubes