SlideShare a Scribd company logo
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.
presents
Day Of Code
HTML Basics
CSS Basics
Making a simple page
Making a web application
Publish our application
Overview
What is HTML?
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.
The
Goal
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
Let’s layout our page…
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!
What is 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>
Add some styles to the
<style> element in <head>
<head>
<style>
header { background-color: yellow; }
nav { background-color: blue; }
section { background-color: orange; }
footer { background-color: purple; }
</style>
</head>
Add some styles to the
<style> element in <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.
Add some styles to the
<style> element in <head>
<head>
<style>
* { margin: 0; }
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>
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; }
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>
</head>
Adding the content in the <body>.
<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;}
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
Adding the content in the <body>.
<footer>
<center>
<p> &copy; 2017 devCodeCamp. </p>
</center>
</footer>
header
nav
footer
section
<!DOCTYPE html>
<html>
<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>
<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> &copy; 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.
<style>
* {
margin: 0;
}
h1 {
font-size: 80px;
}
h3 {
font-size: 40px;
}
header {
background-color: yellow; height: 100px; padding: 5px;
}
nav {
background-color: blue; height: 50px; padding: 5px;
}
section {
background-color: orange; height: 700px; padding: 5px;
}
footer {
background-color: purple; height: 50px; padding: 5px;
}
h1 {
font-size: 80px;
}
</style>
Adding padding.
With more
content.
<style>
* {
margin: 0;
}
h1 {
font-size: 80px;
}
h3 {
font-size: 40px;
}
header {
background-color: yellow; height: 100px;
}
nav {
background-color: blue; height: 50px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
section {
background-color: orange; height: 700px;
}
footer {
background-color: purple; height: 50px;
border-top: 1px solid black;
}
h1 {
font-size: 80px;
}
</style>
Change some
colors.
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…
There are some buzz words we should know a little about…
Javascript
The programming
language of the web.
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.
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.
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.
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
Add the basic structure
to the page.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
<head>
<meta charset="utf-8">
<title>Brewery Finder</title>
<meta name="description" content="">
</head>
Responsive Design
What is responsive design?
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
Footer
Navigation Bar
Banner
Footer
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
For example…
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>
<body>
<div class="container main">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8">
<div id="map"></div>
</div>
</div>
</div>
</body>
<div class="col-md-4">
<form onsubmit="search();" class="searchform group">
<button for="search-box">
<span class="fa fa-2x fa-search"></span>
</button>
<input type="search" id="searchInput" placeholder="Search">
</form>
<div id="results"></div>
</div>
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() {
event.preventDefault();
var query = $("#searchInput").val();
$.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() {
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
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){
}
function handleSearchResults(result){
var breweries = result.filter(function(el){
return el.status === "Brewery";
});
}
function handleSearchResults(result){
var breweries = result.filter(function(el){
return el.status === "Brewery";
});
$('#results').empty();
$.each(breweries, function(index){
});
}
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>');
});
}
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
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:
},
error: function(data){
console.log(data);
}
});
}
function getBreweryLatLng(breweryId){
$.ajax({
url:'http://beermapping.com/webservice/locmap/1d0dec692e53fe232ce728a7b721
2c52/'+ breweryId +'&s=json',
method: 'GET',
dataType: 'json',
success: function(data){
placeMarker(Number(data[0].lat), Number(data[0].lng));
},
error: function(data){
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
* {
box-sizing: border-box;
}
#searchInput{
color: #777;
}
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;
}
.main {
margin-top: 60px;
}
#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
Questions?
Source Control
What is it?
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
Git
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
Git online
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.
Questions?
Github Pages
Free Web Hosting
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.
Questions?

More Related Content

What's hot

Castro Chapter 4
Castro Chapter 4Castro Chapter 4
Castro Chapter 4Jeff Byrnes
 
Installing And Configuration for your Wordpress blog
Installing And Configuration for your Wordpress blogInstalling And Configuration for your Wordpress blog
Installing And Configuration for your Wordpress blog
igorgentry
 
Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]
Aaron Gustafson
 
WordPress Theme Development for Designers
WordPress Theme Development for DesignersWordPress Theme Development for Designers
WordPress Theme Development for Designers
elliotjaystocks
 
Class 2 handout css exercises (2)
Class 2 handout css exercises (2)Class 2 handout css exercises (2)
Class 2 handout css exercises (2)Erin M. Kidwell
 
Wordpress SEO Featuring Dave Jesch
Wordpress SEO Featuring Dave JeschWordpress SEO Featuring Dave Jesch
Wordpress SEO Featuring Dave Jesch
Wiideman Consulting Group
 
HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsHTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts Basics
Sun Technlogies
 
Html 5 New Features
Html 5 New FeaturesHtml 5 New Features
Html 5 New Features
Ata Ebrahimi
 
Abstracting functionality with centralised content
Abstracting functionality with centralised contentAbstracting functionality with centralised content
Abstracting functionality with centralised contentMichael Peacock
 
Seo hints
Seo hintsSeo hints
Seo hints
AbidKhan237
 
WordPress Theme Development: Part 2
WordPress Theme Development: Part 2WordPress Theme Development: Part 2
WordPress Theme Development: Part 2
Josh Lee
 
Web Design Basics for Kids: HTML & CSS
Web Design Basics for Kids: HTML & CSSWeb Design Basics for Kids: HTML & CSS
Web Design Basics for Kids: HTML & CSS
AnnMarie Ppl
 
The Users are Restless
The Users are RestlessThe Users are Restless
The Users are Restless
Terry Ryan
 
HTML - 5 - Introduction
HTML - 5 - IntroductionHTML - 5 - Introduction
HTML - 5 - Introduction
Aayushi Chhabra
 
Experience Manager 6 Developer Features - Highlights
Experience Manager 6 Developer Features - HighlightsExperience Manager 6 Developer Features - Highlights
Experience Manager 6 Developer Features - Highlights
Cédric Hüsler
 
WordPress Theme Workshop: Part 3
WordPress Theme Workshop: Part 3WordPress Theme Workshop: Part 3
WordPress Theme Workshop: Part 3
David Bisset
 
Rebrand WordPress Admin
Rebrand WordPress AdminRebrand WordPress Admin
Rebrand WordPress Admin
Chandra Prakash Thapa
 
Html workshop 1
Html workshop 1Html workshop 1
Html workshop 1
Lee Scott
 

What's hot (20)

HTML/HTML5
HTML/HTML5HTML/HTML5
HTML/HTML5
 
Castro Chapter 4
Castro Chapter 4Castro Chapter 4
Castro Chapter 4
 
Installing And Configuration for your Wordpress blog
Installing And Configuration for your Wordpress blogInstalling And Configuration for your Wordpress blog
Installing And Configuration for your Wordpress blog
 
Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]
 
WordPress Theme Development for Designers
WordPress Theme Development for DesignersWordPress Theme Development for Designers
WordPress Theme Development for Designers
 
Beginning html
Beginning  htmlBeginning  html
Beginning html
 
Class 2 handout css exercises (2)
Class 2 handout css exercises (2)Class 2 handout css exercises (2)
Class 2 handout css exercises (2)
 
Wordpress SEO Featuring Dave Jesch
Wordpress SEO Featuring Dave JeschWordpress SEO Featuring Dave Jesch
Wordpress SEO Featuring Dave Jesch
 
HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsHTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts Basics
 
Html 5 New Features
Html 5 New FeaturesHtml 5 New Features
Html 5 New Features
 
Abstracting functionality with centralised content
Abstracting functionality with centralised contentAbstracting functionality with centralised content
Abstracting functionality with centralised content
 
Seo hints
Seo hintsSeo hints
Seo hints
 
WordPress Theme Development: Part 2
WordPress Theme Development: Part 2WordPress Theme Development: Part 2
WordPress Theme Development: Part 2
 
Web Design Basics for Kids: HTML & CSS
Web Design Basics for Kids: HTML & CSSWeb Design Basics for Kids: HTML & CSS
Web Design Basics for Kids: HTML & CSS
 
The Users are Restless
The Users are RestlessThe Users are Restless
The Users are Restless
 
HTML - 5 - Introduction
HTML - 5 - IntroductionHTML - 5 - Introduction
HTML - 5 - Introduction
 
Experience Manager 6 Developer Features - Highlights
Experience Manager 6 Developer Features - HighlightsExperience Manager 6 Developer Features - Highlights
Experience Manager 6 Developer Features - Highlights
 
WordPress Theme Workshop: Part 3
WordPress Theme Workshop: Part 3WordPress Theme Workshop: Part 3
WordPress Theme Workshop: Part 3
 
Rebrand WordPress Admin
Rebrand WordPress AdminRebrand WordPress Admin
Rebrand WordPress Admin
 
Html workshop 1
Html workshop 1Html workshop 1
Html workshop 1
 

Similar to Day of code

GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1Heather Rock
 
In Class Assignment 1 .docx
In Class Assignment 1                                        .docxIn Class Assignment 1                                        .docx
In Class Assignment 1 .docx
jaggernaoma
 
World wide web with multimedia
World wide web with multimediaWorld wide web with multimedia
World wide web with multimediaAfaq Siddiqui
 
HTML Lab ProjectTo create a simple web page you will need .docx
HTML Lab ProjectTo create a simple web page you will need .docxHTML Lab ProjectTo create a simple web page you will need .docx
HTML Lab ProjectTo create a simple web page you will need .docx
adampcarr67227
 
Intermediate Web Design
Intermediate Web DesignIntermediate Web Design
Intermediate Web Design
mlincol2
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
danpaquette
 
Create Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdfCreate Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdf
workingdev2003
 
HTML & CSS 2017
HTML & CSS 2017HTML & CSS 2017
HTML & CSS 2017
Colin Loretz
 
Lesson 8 Computer Creating your Website.pdf
Lesson 8 Computer Creating your Website.pdfLesson 8 Computer Creating your Website.pdf
Lesson 8 Computer Creating your Website.pdf
AshleyJovelClavecill
 
HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web Development
Rahul Mishra
 
WEB DEVELOPMENT
WEB DEVELOPMENTWEB DEVELOPMENT
WEB DEVELOPMENT
Gourav Kaushik
 
Html cia
Html ciaHtml cia
Please dont touch-3.6-jsday
Please dont touch-3.6-jsdayPlease dont touch-3.6-jsday
Please dont touch-3.6-jsday
Francesco Fullone
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
Ashlimarie
 
PSD to HTML Conversion
PSD to HTML ConversionPSD to HTML Conversion
PSD to HTML Conversion
Darryl Sherman
 
Html css crash course may 11th, atlanta
Html css crash course may 11th, atlantaHtml css crash course may 11th, atlanta
Html css crash course may 11th, atlanta
Thinkful
 
Html 5
Html 5Html 5

Similar to Day of code (20)

GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1
 
In Class Assignment 1 .docx
In Class Assignment 1                                        .docxIn Class Assignment 1                                        .docx
In Class Assignment 1 .docx
 
Master page
Master pageMaster page
Master page
 
World wide web with multimedia
World wide web with multimediaWorld wide web with multimedia
World wide web with multimedia
 
HTML Lab ProjectTo create a simple web page you will need .docx
HTML Lab ProjectTo create a simple web page you will need .docxHTML Lab ProjectTo create a simple web page you will need .docx
HTML Lab ProjectTo create a simple web page you will need .docx
 
Intermediate Web Design
Intermediate Web DesignIntermediate Web Design
Intermediate Web Design
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Create Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdfCreate Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdf
 
HTML & CSS 2017
HTML & CSS 2017HTML & CSS 2017
HTML & CSS 2017
 
Lesson 8 Computer Creating your Website.pdf
Lesson 8 Computer Creating your Website.pdfLesson 8 Computer Creating your Website.pdf
Lesson 8 Computer Creating your Website.pdf
 
HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web Development
 
WEB DEVELOPMENT
WEB DEVELOPMENTWEB DEVELOPMENT
WEB DEVELOPMENT
 
Html cia
Html ciaHtml cia
Html cia
 
Html5 Basic Structure
Html5 Basic StructureHtml5 Basic Structure
Html5 Basic Structure
 
Please dont touch-3.6-jsday
Please dont touch-3.6-jsdayPlease dont touch-3.6-jsday
Please dont touch-3.6-jsday
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
PSD to HTML Conversion
PSD to HTML ConversionPSD to HTML Conversion
PSD to HTML Conversion
 
Html css crash course may 11th, atlanta
Html css crash course may 11th, atlantaHtml css crash course may 11th, atlanta
Html css crash course may 11th, atlanta
 
Html 5
Html 5Html 5
Html 5
 
ARTICULOENINGLES
ARTICULOENINGLESARTICULOENINGLES
ARTICULOENINGLES
 

Recently uploaded

First Steps with Globus Compute Multi-User Endpoints
First Steps with Globus Compute Multi-User EndpointsFirst Steps with Globus Compute Multi-User Endpoints
First Steps with Globus Compute Multi-User Endpoints
Globus
 
Lecture 1 Introduction to games development
Lecture 1 Introduction to games developmentLecture 1 Introduction to games development
Lecture 1 Introduction to games development
abdulrafaychaudhry
 
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdfDominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
AMB-Review
 
Large Language Models and the End of Programming
Large Language Models and the End of ProgrammingLarge Language Models and the End of Programming
Large Language Models and the End of Programming
Matt Welsh
 
Providing Globus Services to Users of JASMIN for Environmental Data Analysis
Providing Globus Services to Users of JASMIN for Environmental Data AnalysisProviding Globus Services to Users of JASMIN for Environmental Data Analysis
Providing Globus Services to Users of JASMIN for Environmental Data Analysis
Globus
 
Accelerate Enterprise Software Engineering with Platformless
Accelerate Enterprise Software Engineering with PlatformlessAccelerate Enterprise Software Engineering with Platformless
Accelerate Enterprise Software Engineering with Platformless
WSO2
 
Custom Healthcare Software for Managing Chronic Conditions and Remote Patient...
Custom Healthcare Software for Managing Chronic Conditions and Remote Patient...Custom Healthcare Software for Managing Chronic Conditions and Remote Patient...
Custom Healthcare Software for Managing Chronic Conditions and Remote Patient...
Mind IT Systems
 
Understanding Globus Data Transfers with NetSage
Understanding Globus Data Transfers with NetSageUnderstanding Globus Data Transfers with NetSage
Understanding Globus Data Transfers with NetSage
Globus
 
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...
Juraj Vysvader
 
Cyaniclab : Software Development Agency Portfolio.pdf
Cyaniclab : Software Development Agency Portfolio.pdfCyaniclab : Software Development Agency Portfolio.pdf
Cyaniclab : Software Development Agency Portfolio.pdf
Cyanic lab
 
top nidhi software solution freedownload
top nidhi software solution freedownloadtop nidhi software solution freedownload
top nidhi software solution freedownload
vrstrong314
 
Prosigns: Transforming Business with Tailored Technology Solutions
Prosigns: Transforming Business with Tailored Technology SolutionsProsigns: Transforming Business with Tailored Technology Solutions
Prosigns: Transforming Business with Tailored Technology Solutions
Prosigns
 
A Comprehensive Look at Generative AI in Retail App Testing.pdf
A Comprehensive Look at Generative AI in Retail App Testing.pdfA Comprehensive Look at Generative AI in Retail App Testing.pdf
A Comprehensive Look at Generative AI in Retail App Testing.pdf
kalichargn70th171
 
A Sighting of filterA in Typelevel Rite of Passage
A Sighting of filterA in Typelevel Rite of PassageA Sighting of filterA in Typelevel Rite of Passage
A Sighting of filterA in Typelevel Rite of Passage
Philip Schwarz
 
Globus Connect Server Deep Dive - GlobusWorld 2024
Globus Connect Server Deep Dive - GlobusWorld 2024Globus Connect Server Deep Dive - GlobusWorld 2024
Globus Connect Server Deep Dive - GlobusWorld 2024
Globus
 
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoam
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoamOpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoam
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoam
takuyayamamoto1800
 
Orion Context Broker introduction 20240604
Orion Context Broker introduction 20240604Orion Context Broker introduction 20240604
Orion Context Broker introduction 20240604
Fermin Galan
 
Enhancing Project Management Efficiency_ Leveraging AI Tools like ChatGPT.pdf
Enhancing Project Management Efficiency_ Leveraging AI Tools like ChatGPT.pdfEnhancing Project Management Efficiency_ Leveraging AI Tools like ChatGPT.pdf
Enhancing Project Management Efficiency_ Leveraging AI Tools like ChatGPT.pdf
Jay Das
 
Globus Compute wth IRI Workflows - GlobusWorld 2024
Globus Compute wth IRI Workflows - GlobusWorld 2024Globus Compute wth IRI Workflows - GlobusWorld 2024
Globus Compute wth IRI Workflows - GlobusWorld 2024
Globus
 
How Recreation Management Software Can Streamline Your Operations.pptx
How Recreation Management Software Can Streamline Your Operations.pptxHow Recreation Management Software Can Streamline Your Operations.pptx
How Recreation Management Software Can Streamline Your Operations.pptx
wottaspaceseo
 

Recently uploaded (20)

First Steps with Globus Compute Multi-User Endpoints
First Steps with Globus Compute Multi-User EndpointsFirst Steps with Globus Compute Multi-User Endpoints
First Steps with Globus Compute Multi-User Endpoints
 
Lecture 1 Introduction to games development
Lecture 1 Introduction to games developmentLecture 1 Introduction to games development
Lecture 1 Introduction to games development
 
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdfDominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
 
Large Language Models and the End of Programming
Large Language Models and the End of ProgrammingLarge Language Models and the End of Programming
Large Language Models and the End of Programming
 
Providing Globus Services to Users of JASMIN for Environmental Data Analysis
Providing Globus Services to Users of JASMIN for Environmental Data AnalysisProviding Globus Services to Users of JASMIN for Environmental Data Analysis
Providing Globus Services to Users of JASMIN for Environmental Data Analysis
 
Accelerate Enterprise Software Engineering with Platformless
Accelerate Enterprise Software Engineering with PlatformlessAccelerate Enterprise Software Engineering with Platformless
Accelerate Enterprise Software Engineering with Platformless
 
Custom Healthcare Software for Managing Chronic Conditions and Remote Patient...
Custom Healthcare Software for Managing Chronic Conditions and Remote Patient...Custom Healthcare Software for Managing Chronic Conditions and Remote Patient...
Custom Healthcare Software for Managing Chronic Conditions and Remote Patient...
 
Understanding Globus Data Transfers with NetSage
Understanding Globus Data Transfers with NetSageUnderstanding Globus Data Transfers with NetSage
Understanding Globus Data Transfers with NetSage
 
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...
 
Cyaniclab : Software Development Agency Portfolio.pdf
Cyaniclab : Software Development Agency Portfolio.pdfCyaniclab : Software Development Agency Portfolio.pdf
Cyaniclab : Software Development Agency Portfolio.pdf
 
top nidhi software solution freedownload
top nidhi software solution freedownloadtop nidhi software solution freedownload
top nidhi software solution freedownload
 
Prosigns: Transforming Business with Tailored Technology Solutions
Prosigns: Transforming Business with Tailored Technology SolutionsProsigns: Transforming Business with Tailored Technology Solutions
Prosigns: Transforming Business with Tailored Technology Solutions
 
A Comprehensive Look at Generative AI in Retail App Testing.pdf
A Comprehensive Look at Generative AI in Retail App Testing.pdfA Comprehensive Look at Generative AI in Retail App Testing.pdf
A Comprehensive Look at Generative AI in Retail App Testing.pdf
 
A Sighting of filterA in Typelevel Rite of Passage
A Sighting of filterA in Typelevel Rite of PassageA Sighting of filterA in Typelevel Rite of Passage
A Sighting of filterA in Typelevel Rite of Passage
 
Globus Connect Server Deep Dive - GlobusWorld 2024
Globus Connect Server Deep Dive - GlobusWorld 2024Globus Connect Server Deep Dive - GlobusWorld 2024
Globus Connect Server Deep Dive - GlobusWorld 2024
 
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoam
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoamOpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoam
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoam
 
Orion Context Broker introduction 20240604
Orion Context Broker introduction 20240604Orion Context Broker introduction 20240604
Orion Context Broker introduction 20240604
 
Enhancing Project Management Efficiency_ Leveraging AI Tools like ChatGPT.pdf
Enhancing Project Management Efficiency_ Leveraging AI Tools like ChatGPT.pdfEnhancing Project Management Efficiency_ Leveraging AI Tools like ChatGPT.pdf
Enhancing Project Management Efficiency_ Leveraging AI Tools like ChatGPT.pdf
 
Globus Compute wth IRI Workflows - GlobusWorld 2024
Globus Compute wth IRI Workflows - GlobusWorld 2024Globus Compute wth IRI Workflows - GlobusWorld 2024
Globus Compute wth IRI Workflows - GlobusWorld 2024
 
How Recreation Management Software Can Streamline Your Operations.pptx
How Recreation Management Software Can Streamline Your Operations.pptxHow Recreation Management Software Can Streamline Your Operations.pptx
How Recreation Management Software Can Streamline Your Operations.pptx
 

Day of code