Day of code

Log into the Wifi
Wireless: DevCode#-#.#
Password: D3v$tudent
Download and install
Sublime Text Editor
www.sublimetext.com
For now, you can get by simply
evaluating Sublime. Please
purchase for continued use.

HTML Basics
CSS Basics
Making a simple page
Making a web application
Publish our application
Overview

HTML is a markup language.
HTML uses tags to markup elements.

<p> Let's learn some stuff! </p>
The basic tag structure
opening tag closing tag

An element is something on the webpage (text, image, etc).
The tag indicates what it is…
Think of opening and closing tags as fill-in-the-blanks.
The tag tells the browser what to do with the element

Create a folder on your desktop, call it DayOfCode
Open Sublime Text and create a new blank file.
Save the file as example.html
Save it to the DayOfCode folder on the Desktop. Double-click the file to open in Chrome.

Add the basic structure
to the page.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

Add some information to
the <head>.
<head>
<meta charset="utf-8">
<meta name="description" content="This is my first website!">
<meta name="author" content="Professor Nick">
<title>My First Site - Pirate Edition</title>
<style> </style>
</head>
‘charset’, ‘name’, and ‘content’ are attributes.
Attributes give the browser more information
about an element.

The <head> is just that information
we want to tell the browser.

The <body> is everything we want to
display on the page.

Laying out the page
All of the content we want to display needs to go between the opening
and closing <body> tags.
We can use HTML5 semantic elements to lay out our page.
A semantic element is one which inherently describes its use to the
browser and developers. For example, <nav> is a navigation element.

Semantic elements
are what they sound
like
<header> - heading with intro
<nav> - navigation
<section> - elements grouping
<article> - self contained element
<footer> - page footer
<aside> - related sidebar
header
nav
footer
section
article
aside

Our Page
Layout
header
nav
footer
section

Adding the layout to the <body>.
<body>
<header> </header>
<nav> </nav>
<section> </section>
<footer> </footer>
</body>
header
nav
footer
section

Let’s add some color to our page!

To add information such as background color to elements,
We need to use CSS!

<head>
<style>
insert styles here …
</style>
</head>
We are going to do it the easy way for this example!

Add some styles to the
<style> element in <head>
<head>
<style>
header { }
nav { }
section { }
footer { }
</style>
</head>

<head>
<style>
header { background-color: yellow; }
nav { background-color: blue; }
section { background-color: orange; }
footer { background-color: purple; }
</style>
</head>

<head>
<style>
header { background-color: yellow; height: 100px; }
nav { background-color: blue; height: 50px; }
section { background-color: orange; height: 700px; }
footer { background-color: purple; height: 50px; }
</style>
</head>

If you are following along…
Save your progress.
Open example.html in Chrome.
Double-click the index.html file to open in your web browser.

<head>
<style>
* { margin: 0; }
</style>
</head>

Let’s add some content to those
sections!

Adding the content in the <body>.
<header>
<center>
<h1> Welcome! </h1>
</center>
</header>
header
nav
footer
section

if you want to make the heading bigger, use CSS!
h1 { font-size: 80px; }

<head>
<style>
* { margin: 0; }
h1 { font-size: 80px; }
</style>
</head>

<nav>
<h3>
<a href=“index.html”> Home </a>
</h3>
</nav>
header
nav
footer
section

if you want to make the link bigger or change the color, use CSS!
h3 { font-size: 40px;}

<section>
<h2> My first page. </h2>
<p> Welcome to my site! I am so
glad you stopped in! … </p>
</section>
header
nav
footer
section

<footer>
<center>
<p> © 2017 devCodeCamp. </p>
</center>
</footer>
header
nav
footer
section

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="This is my first website!">
<meta name="author" content="Professor Nick">
<title>My First Site - Pirate Edition</title>
<style>
…
</style>
</head>
<body>
…
</body>
</html>

<body>
<header>
<center>
<h1> Welcome! </h1>
</center>
</header>
<nav>
<h3><a href='index.html'> Home </a></h3>
</nav>
<section>
<h2> My first page. </h2>
<p> Welcome to my site! I am so glad you stopped in! … </p>
</section>
<footer>
<center>
<p> © 2016 devCodeCamp. </p>
</center>
</footer>
</body>
<style>
* {
margin: 0;
}
h1 {
font-size: 80px;
}
h3 {
font-size: 40px;
}
header {
background-color: yellow; height: 100px;
}
nav {
background-color: blue; height: 50px;
}
section {
background-color: orange; height: 700px;
}
footer {
background-color: purple; height: 50px;
}
h1 {
font-size: 80px;
}
</style>

Add some padding.
Change colors.
Add a ‘sticky’ footer.
Add an image.
Add more content.

Any questions?
Seriously! Ask away!!!

API’s
What are they all about?

Application Programming Interface

Application Programming Interface
A function built into a program that allows and
determines how users send and receive data from it

API
Application
/ Data Source
My
Application
Data Exchange

API
My
Application
Data requested (or sent) by your application.
A response is received by your application.

API
My
Application
My Application says,
“Toss me the ball!”
The API tosses us
the ball

API
My
Application
Data is sent or requested via URL.
An object is received back.

The Object
{
name: ‘andrew’,
role: ‘instructor’
}
This is JSON

Where to start
It’s all about communication, let’s touch base with Postman
Postman lets us test API calls
I am going to make a call to the following API
http://beermapping.com/webservice/loccity/1d0dec692e53fe232c
e728a7b7212c52/milwaukee&s=json

Consuming the API
We need some JavaScript

There are some buzz words we should know a little about…

Javascript
The programming
language of the web.

Javascript & jQuery
Prewritten code that
makes JavaScript easier.
The programming

Javascript & jQuery & AJAX
A method of loading
data on a webpage.
The programming
makes Javascript easier.

Javascript & jQuery & AJAX & JSON
A common data
format in JavaScript.
The programming
makes JavaScript easier.
A method of loading
data on a webpage.

Basic site structure
Build out your DOM

Let’s get started
OPEN Sublime
And create a file called index.html
Save it in the DayOfCode folder on your desktop

<head>
<title>Brewery Finder</title>
<meta name="description" content="">
</head>

Responsive design is an approach to web design that
optimizes the user experience and interface based on
the screen of the user.
(often including flexible layouts and images, and mobile friendly
navigation)

Getting started,
Lets draw out a traditional page as
it would appear on a desktop
Note: this is not mobile-first approach

Navigation Bar
Banner
Page Heading
Footer

Navigation Bar
Banner
Page Heading
Page Content
Column One
Page Content
Column Two
Footer

Navigation Bar
Banner
Page Heading
Page Content
Column One
Page Content
Column Two
About the
Author
Footer

Navigation Bar
Banner
Page Heading
Page Content
Column One
Page Content
Column Two
About the
Author
Footer
Image

Notice how easy it
would be to divide the
content into rows?

This is important in responsive design.
We need our content divided into rows.

Responsive design typically
involves what is referred to as
a 12 column grid system.

The horizontal lines in the
grid are our rows of content.

Each row can
be divided into
up to 12 columns

There are always 12 columns and
they take up 100% of the page width.
100% Width

This allows us to put content
in a row together, and then
specify how much of that row
it should take up.

For example, if we wanted something
to take up 50% of the width, we would
specify that is should be 6 columns wide.
[ 6 / 12 columns = 50% ]

Navigation
Bar
Banne
r
Page
Heading
Page
Content
Column One
Page
Content
Column Two
About the
Author
Foote
r
Image
By using this setup, we can also change
layout and size between screen sizes

Navigation Bar
Banner
Page Heading
Page Content
Column One
Page Content
Column Two
About the
Author
Footer
Image
Desktop
Mobile
View

Looks like a lot of work, am I right?

This is why people use responsive libraries
Let’s talk about it

Let’s pick Bootstrap
Getting up and running fast

We need to do three things:
Tell the browser some stuff

First, let’s tell the browser some stuff
(In addition to what we have already added)
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1”>
</head>

Then, let’s get our styles
This is in addition to what you already have
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
rel="stylesheet">
</head>

Finally, need to link to the Bootstrap
script file
Notice this is between the body tags
<body>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

Here is one we created earlier
Go to the following link to copy the starter code.
https://codepen.io/fiercealfalfa/pen/YVWGao

Writing the Code
Create a sub-folder inside our DayOfCode folder called js
Create a new file named main.js and save it inside our new
sub-folder
Connect our main.js file to our index.html file
Add the following line of code in the html file, right above the
closing </body> tag
<script src="js/main.js"></script>
</body>

The search function
Inside the main.js file add the following yellow text
This is the function that gets called when we click on the search button
function search() {
}
Right now it is empty and wont do anything, but we are going to change
that

function search() {
event.preventDefault();
var query = $("#searchInput").val();
}

function search() {
$.ajax({
});
}

$.ajax({
url:
method:
dataType:
success:
});

$.ajax({
url:'http://beermapping.com/webservice/loccity/1d0dec692e53fe232ce7
28a7b7212c52/'+ query +'&s=json',
method:
dataType:
success:
});

$.ajax({
url:'http://beermapping.com/webservice/loccity/1d0dec692e53fe232ce7
28a7b7212c52/'+ query +'&s=json',
method: 'GET',
dataType: 'json',
success: function(data){
handleSearchResults(data);
},
error: function(data){
console.log(data);
}
});

function search() {
$.ajax({
url: 'http://beermapping.com/webservice/loccity/1d0dec692e53fe232ce728a7b7212c52/'+ query
+'&s=json',
method: 'GET',
dataType: 'json',
handleSearchResults(data);
},
console.log(data);
}
});
}
The Completed Function

The handleSearchResults Function
Now we have a function to perform the search, we need a function
to process the results
This function gets called from inside the search function

function handleSearchResults(result){
}

var breweries = result.filter(function(el){
return el.status === "Brewery";
});
}

});
$('#results').empty();
$.each(breweries, function(index){
});
}

});
var breweryId = breweries[index].id;
$('#results').append('<div class="row"><div class="col-md-8"><p>' +
breweries[index].name + '</p></div><div class="class-md-4"><input
class="mapShow" type="button" value="Show on Map"
onclick="getBreweryLatLng('+breweryId+')" /></div></div>');
});
}

});
var breweryId = breweries[index].id;
$('#results').append('<div class="row"><div class="col-md-8"><p>' +
breweries[index].name + '</p></div><div class="class-md-4"><input
class="mapShow" type="button" value="Show on Map"
onclick="getBreweryLatLng('+breweryId+')" /></div></div>');
});
}
The Completed Function

Adding the map
First we need to add the Google Maps API Scripts to our index.html file
Add the following yellow lines, directly above the script tags that link to our main.js
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCocQb4O7uFW3AVorZJ1HIGZrW9BsGwT
e8&callback=initMap"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>

The initial map function
Now we are going to write the function that adds the map to our
html page
Put the following into your main.js file

var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: { 'lat': 0, 'lng': 0 }
});
}

Getting the latitude and longitude
In order to show the location of the breweries on the map, we need their
longitude and latitude
We are going to write a function that takes the id of a brewery and
returns its longitude and latitude

function getBreweryLatLng(breweryId){
$.ajax({
url:
method:
dataType:
success:
},
console.log(data);
}
});
}

function getBreweryLatLng(breweryId){
$.ajax({
url:'http://beermapping.com/webservice/locmap/1d0dec692e53fe232ce728a7b721
2c52/'+ breweryId +'&s=json',
method: 'GET',
dataType: 'json',
placeMarker(Number(data[0].lat), Number(data[0].lng));
},
console.log(data);
}
});
}

Placing markers on the map
In the last function, when we successfully obtained the long and lat
of a brewery we called a function named placeMarker
This function will place a marker on the map for us at the selected
location and pan the map to that location

function placeMarker(lat, lng){
new google.maps.Marker({
position: {lat, lng},
map: map
});
map.panTo({lat, lng});
map.setZoom(13);
}

Completed main.js
Go to the following link to copy the completed main.js file and updates
to the index.html
https://codepen.io/fiercealfalfa/pen/WjxGyp

Adding our own styles
In order for the map to show, and for our page to look good, we need
to add some styles
Create a new sub-folder called styles inside your DayOfCode folder
Create a new document and name it styles.css and save it in your
new sub-folder

button:focus{
outline: none;
}

body {
color: #777;
background: #222;
box-sizing: border-box;
}

.searchform {
display: block;
margin: 0;
overflow: hidden;
}

button, input {
vertical-align: baseline;
}

button {
background-color: transparent;
border: none;
margin: 0.125em 0.125em 1em
1em;
max-width: 18%;
}

input[type="search"] {
border: 2px solid #777;
border-width: 0 0 3px;
background-color: transparent;
font: 22px "Open Sans", sans-serif;
padding: 0.125em 0.225em;
max-width: 80%;
float: left;
}

#map {
height: 400px;
width: 100%;
}

input:-webkit-autofill {
-webkit-box-shadow:0 0 0 50px
#222 inset; /* Change the color to
your own background color */
-webkit-text-fill-color: #777;
}

input:-webkit-autofill:focus {
-webkit-box-shadow: /*your box-
shadow*/,0 0 0 50px #222 inset;
-webkit-text-fill-color: #777;
}

.mapShow{
background-color: #E18728;
border: 2px solid #E18728;
border-radius: 10px;
color:#222;
float: right;
}

Done!!!
Our page is now complete!
Go to the following link to copy the code
https://codepen.io/fiercealfalfa/pen/LyZRvK

Source control, or version control, tracks and manages
changes to documents and files over time.

Git
Popular type of source control

Git is an open source distributed
version control system
Meaning - a system that records changes over time.

Features of Git source control
Centralized
Backups
Historical overview of changes
Access control
Conflict resolution

Concepts of source control
Repository
Revision
Working copy
Branching
Merging

What is a diff?
A change at a line level between two versions
Version control tracks diffs over time

What is a repo?
Stores code
Each project should have its own repo
Ability to view changes/commits over time
Ability to rollback changes

Commits
Committing is your backup and bookmark
A commit is a grouping of differences
Commits are stored by the repo
Commit whenever you complete something that works
Even if it is small
Commit often

Basic Commands
git add . // add files to staging
git commit -m “message” // commit staged files
git push // push commits to remote
git status // check for staged and untracked changes
git init // initialize an empty git repo
git diff [commit hash] // view the diff between two commits

Basic Commands
git branch // lists all local branches in repo
git log // lists all commits in current branch’s history
git branch [branch-name] // creates new branch
git checkout [branch-name] // switches to branch
git merge [branch-name] // combine branch into current branch
git branch -d [branch-name] // delete branch

Basic use
Once you have successfully complete a small task
1. git add . (add the files)
2. git commit -m “message”
3. git pull
4. Test code and resolve conflicts
5. git push

Github is a collaborative community
and workflow, built around git.

Github Features
Centralized
Backups
Historical overview of changes
Access control
Conflict resolution
etc

Let’s get started.
Visit https://github.com

Great!
Now, verify your email address.

What do you suppose Github Pages are?
Public webpages, hosted by Github
Can be manually created or automatically generated
Pages are served over HTTP
For more information
Visit https://pages.github.com

Let’s upload a site to Github Pages
Along the way, we will configure Github, if you haven’t
already

Time to get copying!
Copy your site files to the repo.

Confirm the upload on Github.com

Now you can access your site at…
{your username}.github.io

Congratulations!
You’ve deployed your first site!

Closing thoughts on Github Pages
Some Strengths
Free. Version control. CDN. CMS.
Some Weaknesses
No SSL. No cookies. Static. Public repo.

Day of code

More Related Content

What's hot (20)

Similar to Day of code (20)

Recently uploaded (20)

Day of code