WEB
DEVELOPMENT
101
YES Montréal WIT Presentation
NANCY NALUZ
@nancynaluz
nancy@ladieslearningcode.com
Front-End Developer // Community Manager // Speaker
http://ladieslearningcode.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.
UX
UI
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
C#
Perl
ASP.NET
Python
PHP
Ruby
Databases:
An organized collection of data.
Git repository hosting service to collaborate and share code.
With Git, it provides a GUI to interact with and makes it easy to keep track of other people's work, bugs, and progress of a project.
RESOURCES to get started
Because it's never too late to learn.
It's important to also get involved with the community!
Thanks for listening!
If you have any questions, please don't hesitate to send me an email :)
Web Development 101
By nancynaluz
Web Development 101
- 1,119