WEB

DEVELOPMENT

101

YES Montréal WIT Presentation

NANCY NALUZ

@nancynaluz

nancy@ladieslearningcode.com

Front-End Developer // Community Manager // Speaker

http://ladieslearningcode.com/

http://www.godynamo.com/

WHAT WE WILL BE COVERING...

Difference between FRONT-END and BACK-END web development

Tools of the Trade

Programming Languages to be aware of

Resources to continue learning.

FRONT-END

WEB DEVELOPMENT

Everything the user interacts with.

Executes the design that affects the UI (User Interface) and UX (User Experience) of a website.

Deals with the MARKUP, STYLE, CMS, CROSS-BROWSER, CROSS-DEVICE FUNCTIONALITY, and ACCESSIBILITY of a website.

BACK-END

WEB DEVELOPMENT

Supports and enables the Front-End experience.

Manages the interchange of data and server-side of programming.

What do we call a developer that can do both Front-End && Back-End?

FULL-STACK DEVELOPER

What do we call someone that can code and design?

FRONT-END DEVELOPMENT

<STRUCTURE>

Style {}

CONTENT: Words, Images, Videos

Lollipop oat cake bear claw sweet roll cupcake croissant lollipop sweet candy. Toffee jelly beans gingerbread applicake candy canes jelly beans. Danish chupa chups chocolate bar jelly beans. Tiramisu chupa chups tootsie roll macaroon cotton candy. Tootsie roll fruitcake dessert croissant.

MARKUP

Structures the content of a website.

HTML: Hyper Text Markup Language

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>My First Website</title>
</head>
<body>
	<h1>
		Hello, World!
	</h1>
	<p>
		I'm making my first website. HTML structures the content of my website.
	</p>
</body>
</html>

You may have also heard of..

Jade // Slim // Haml

<!DOCTYPE html>
%html{:lang => "en"}
%head
	%meta{:charset => "UTF-8"}/
	%title Document
%body
	%h1
		Hello, World! 
	%p
		I'm writing Haml.

HAML

<!DOCTYPE html>
html(lang="en")
head
	meta(charset="UTF-8")
	title Document
body
	h1
		Hello, World!

	p
		I'm writing Jade.

Jade

<!DOCTYPE html>
html lang="en"
head
	meta charset="UTF-8"/
	title Document
body
	h1
		Hello, World!
	p 
		I'm writing Slim.

Slim

Markup structures the content however, we still need to stylize.

CSS

Cascading Style Sheet

A stylesheet to describe the look of a markup.

body {
	background-color: rgb(250, 247, 209);
}

h1 {
	color: red;
	font-family: "Helvetica";
	font-size: 72px;
}

p {
	border-radius: 10px;
	color: white;
	background-color: black;
	padding: 2em;
	font-family: "Arial";
}

You may have also hear of ...

//Color Variables

$offblack: #161715;
$flatred: #e74c3c;
$hoverred: #DB3423;
$grey: #7f8c8d;
$white: #FFF;


body {
	h1 {
		font-family: "Arvo", serif;
		color: $offblack;
	}
	h2 {
		color: $grey;
	}

	p {
		font-family: "Lato", sans-serif;
		font-weight: 100;
	}
}

SCSS

JavaScript

Not the same as Java. Like Ham is to Hamster.

Client-Side Scripting

Interpreted in your web browser (IE, Safari, Chrome, Firefox) && controls the content of your web page thus, client-side. (not server)

Defines behaviour and makes your page dynamic.

<script>
function myResponse() {
	var answer = prompt("Is your name Nancy?");
	if (answer == "Nancy") {
		prompt("Good morning, Nancy. How are you?");
	}
	else {
		prompt("Sorry, we cannot proceed");
	}
}
</script>

Pre-written JavaScript that allows for easier development.

Use it to build something.

Libraries

Frameworks

Very similar and often used in the same context as a JavaScript library.

Use to build on and it determines the structure of your code.

jQuery

The most popular JavaScript Library to date that simplifies JavaScript.

jQuery(function($){
			$(document).ready(function(){
				$('.menu').stickUp({
					parts: {
						0: 'home',
						1: 'about',
						2: 'team',
						3: 'contact'
					},
					itemClass: 'menuItem',
					itemHover: 'active'
				});


			});
		});

Some popular JavaScript frameworks include...

Since the Front-End Developer focuses on the structure and style of a website, they MAY also have input in the UI and UX.

User Experience

User Interface

Optimizing human interaction (behaviour) between a product, application, website.

How does the product feel? Does the product flow make logical sense?

Architecting to optimize ease of use, accessibility, and efficiency.

Design for an emotion and convey emotion - may require user testing.

Develops to GUI (Graphic User Interface).

Heavily informed from the UX design.

Focus on the actual elements a user interacts with.

Making sure the style guides are followed to execute the visual and graphic design.

Works closer with the Front-End Developer.

RESPONSIVE DESIGN

Ensuring that the website looks great whatever screen size or device.

FRAMEWORKS

Provides tools, ready-made UI elements, templates, and responsiveness to make for easier front-end web development

CMS

Content Management System

TOOLS OF THE FRONT-END TRADE

Where to write the code...

Sublime Text

Notepad++

Atom.io

Brackets

TEXT EDITOR

SUBLIME TEXT

Favourite Text-Editor Tools (Sublime Text):

Package Control - plugins to add functionality to your text-editor

Emmet - shortcuts!

Wakatime - keeping track of how much you're coding!

Sublime Text is very customizable!

https://sublimetextbook.com/

Command Line Interface

an application and system that enables code-sharing projects and keeps track of changes in the files. It's basically source code management.

VERSION CONTROL SYSTEMS

BACK-END DEVELOPMENT

As FRONT-END deals with the user interface, BACK-END uses server-side programming to interact with a database that returns that information to the user.

Server-Side Programming

Code that runs on a server.

Java

Perl

ASP.NET

Python

PHP

Ruby

Databases:

An organized collection of data.