1. 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.
5. HTML is a markup language.
HTML uses tags to markup elements.
6. <p> Let's learn some stuff! </p>
The basic tag structure
opening tag closing tag
7. 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
8. 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.
10. Add the basic structure
to the page.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
11. 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.
12. The <head> is just that information
we want to tell the browser.
13. The <body> is everything we want to
display on the page.
14. 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.
15. 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
32. Adding the content in the <body>.
<nav>
<h3>
<a href=“index.html”> Home </a>
</h3>
</nav>
header
nav
footer
section
33. if you want to make the link bigger or change the color, use CSS!
h3 { font-size: 40px;}
34. Adding the content in the <body>.
<section>
<h2> My first page. </h2>
<p> Welcome to my site! I am so
glad you stopped in! … </p>
</section>
header
nav
footer
section
54. 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
56. There are some buzz words we should know a little about…
57. There are some buzz words we should know a little about…
Javascript
The programming
language of the web.
58. There are some buzz words we should know a little about…
Javascript & jQuery
Prewritten code that
makes JavaScript easier.
The programming
language of the web.
59. There are some buzz words we should know a little about…
Javascript & jQuery & AJAX
A method of loading
data on a webpage.
The programming
language of the web.
Prewritten code that
makes Javascript easier.
60. There are some buzz words we should know a little about…
Javascript & jQuery & AJAX & JSON
A common data
format in JavaScript.
The programming
language of the web.
Prewritten code that
makes JavaScript easier.
A method of loading
data on a webpage.
67. 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)
68. Getting started,
Lets draw out a traditional page as
it would appear on a desktop
Note: this is not mobile-first approach
91. We need to do three things:
Tell the browser some stuff
92. 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>
93. 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>
94. 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>
97. Here is one we created earlier
Go to the following link to copy the starter code.
https://codepen.io/fiercealfalfa/pen/YVWGao
98. 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>
99. 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
105. function search() {
event.preventDefault();
var query = $("#searchInput").val();
$.ajax({
url: 'http://beermapping.com/webservice/loccity/1d0dec692e53fe232ce728a7b7212c52/'+ query
+'&s=json',
method: 'GET',
dataType: 'json',
success: function(data){
handleSearchResults(data);
},
error: function(data){
console.log(data);
}
});
}
The Completed Function
106. 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
110. 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>');
});
}
111. 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>');
});
}
The Completed Function
112. 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>
113. 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
114. var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: { 'lat': 0, 'lng': 0 }
});
}
115. 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
118. 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
120. 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
121. 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
140. Git is an open source distributed
version control system
Meaning - a system that records changes over time.
141. Features of Git source control
Centralized
Backups
Historical overview of changes
Access control
Conflict resolution
142. Concepts of source control
Repository
Revision
Working copy
Branching
Merging
143. What is a diff?
A change at a line level between two versions
Version control tracks diffs over time
144. What is a repo?
Stores code
Each project should have its own repo
Ability to view changes/commits over time
Ability to rollback changes
145. 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
146. 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
147. 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
149. 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
160. 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
161. Let’s upload a site to Github Pages
Along the way, we will configure Github, if you haven’t
already
162.
163.
164.
165.
166. Time to get copying!
Copy your site files to the repo.