Coding 101 - HTML + CSS Kasun March 2018

Download as pdf or txt
Download as pdf or txt
You are on page 1of 62

CODING 101: HTML + CSS

Kasun Maldeni
Instructor, General Assembly
https://linkedin.com/in/kasunmaldeni
CODING 101: HTML + CSS
WHAT WILL WE BE COVERING TONIGHT?
● How the world wide web work?
● What is Web Development?
● Front End vs Back End
● Front End Languages
● Lets write some HTML
● Lets create your first html file
● Meet CSS & create a css file
● Q&A
● Where to from here?
WHO AM I?
CODING 101: HTML + CSS

Kasun Maldeni
● Computer Systems Engineer
● Web developer at Datacom and startup companies
● Co-instruct WDI course full-time at General Assembly
WHO IS HERE TONIGHT?
CODING 101: HTML + CSS
LEARNING OBJECTIVES
● Gain an overview of the web development landscape and where HTML/CSS
fits in the web ecosystem.
● Describe the difference between front-end and back-end code and the basic
components of HTML, CSS and JavaScript.
● Use HTML and CSS to mark up a basic webpage.
● Describe the different jobs that use coding or benefit from an understanding
of HTML/CSS.
● Describe the various opportunities to continue learning web-development.
WWW

HOW DOES THE WORLD WIDE


WEB WORK?
WWW

CLIENT SERVER

RESPONSE REQUEST
Server Client
IP address: 157.240.8.35

Facebook.com
google.com = 74.125.224.72
DNS Server

https://google.com

Client Server
google.com = 74.125.224.72
DNS Server

https://google.com

Client Server
google.com = 74.125.224.72
DNS Server

https://google.com

Client Server
WWW
SO, WHAT’S WEB DEVELOPMENT?
WHAT’S WEB DEVELOPMENT?

● The creation and management of both websites and web-


based applications
● Made up of the Front End and Back End
● Most Developers will try to convince you that it is magic,
but it is mainly editing text files (coding / programming),
and solving problems (crying)
WHERE DOES FRONT END WEB DEVELOPMENT FIT IN?

WEB PRODUCTION
WORKFLOW
WEB PRODUCTION WORKFLOW

UX Design Front End Back End

● Take the design and turn it into code and


assets.
● Uses HTML/CSS to create the structure for
a page and add styles.
● Add interactions with Javascript.
● Other responsibilities: accessibility,
performance, cross-browser and cross-
device functionality.
WHAT DOES FRONT END EVEN MEAN?

“A mix of programming and


layout that powers the visuals
and interactions of the web.”
IN SUMMARY…

● The Front End is what the user sees


● It powers the visuals and interactions of the web
● It is meant to be pretty, but doesn't always happen that way
● Made up of HTML, CSS and Javascript
THE BACK END
WEB DEVELOPMENT

WHAT IS THE BACK END?


● It is what goes on behind the scenes
● Consists of databases, servers etc.
● Lots of languages:
○ Ruby (Ruby on Rails), Node.js, PHP, Python, C++ etc.
Checking

Savings
front-end code
Checking

Savings
Checking

Savings
HTML Python
HTML Python

Server
HTML Python

Server
HTML Python

Checking Account

Server
FRONT END LANGUAGES
FRONT END IS MADE UP OF…

HTML
CSS JavaScript
FRONT END

THE LANGUAGES

HTML Defines the Content “The Bones”

CSS Assigns the style “The Skin”

JAVASCRIPT Adds the functionality “The Brain”


ACTIVITY: DISTINGUISH BETWEEN HTML, CSS, AND JS

DIRECTIONS

1. Let’s visit lyft.com together

2. The words “Rides in Minutes” appears due to _________?


EXERCISE
3. The reason for which “Rides in Minutes” is centered and white is due

to _________?

4. Hover over the word “Explore” in the navigation menu. That

animation is most likely due to _________?


HTML: HYPER TEXT MARKUP LANGUAGE

‣ HTML is made up of tags


‣ Tags = < >
‣ Tags tell the browser how to format content
‣ e.g Will the content be formatted as an image or as a link?

opening tag, type declaration what is rendered closing tag

<h1>Hello World! </h1>


HTML CODE-ALONG

1. OPEN YOUR BROWSER AND NAVIGATE TO

CODEPEN.IO

2. SELECT “+NEW PEN” ON THE TOP RIGHT OF

THE PAGE
HTML CODE-ALONG
HTML CODE-ALONG

<h1>Most important HEADING</h1>


<h2>Second Most Important Heading</h2>
<h3> Third Most Important Heading</h3>
<h4> Fourth Most Important Heading</h4>
<h5> Fifth Most Important Heading</h5>
<h6>Least Important Heading</h6>
HTML CODE-ALONG

<p>
This is a paragraph. Usually, these
are use for blocks of text that have
two or more sentences.
</p>
HTML CODE-ALONG

TAGS CAN BE PLACED INSIDE OTHER


TAGS

<ol>
<li>First item</li>
<li>Second item</li>
</ol>
THE IMAGE TAG

PLACE KITTEN
<img src=“https://placekitten.com/g/500/600”/>

<img src=“”/>
HTML CODE-ALONG

LINKS

<a href=“http://google.com”>Google</a>

<a href=“”>Label</a>
HTML

BASIC LAYOUT OF AN
HTML DOCUMENT
HTML

<!DOCTYPE html>
<html>
<head> sets off title and info that won’t be displayed
<title>My first webpage</title>
<meta charset="UTF-8"> sets character encoding
</head>
<body> visible portion
<h1>Hello World!</h1>
</body>
</html> ends the HTML document
ACTIVITY: CREATING YOUR FIRST HTML FILE
DIRECTIONS- Got Sublime? DIRECTIONS- No Sublime Editor?
1. Create a folder on your desktop 1. Open your browser and navigate to
and title it “Coding 101” codepen.io
2. Open up the folder you just made 2. Select “+new pen” on the top RIGHT
in your text editor of the page
EXERCISE
3. Save your file as “index.html” 3. Type out the HTML basic layout
4. Type out the HTML basic layout 4. View the file below
5. Open up the HTML file in Google 5. Add more content tags: h1-h6, p, ul/li,
Chrome button, a, img to create an “About Me”
6. Add more content tags: h1-h6, p, webpage
ul/li, button, a, img to create an
“About Me” webpage
7. Keep your editor open
CSS: CASCADING STYLE SHEETS

BASIC LAYOUT OF AN
EXTERNAL CSS FILE
CSS: CASCADING STYLE SHEETS
‣ The symbol used in CSS are { and }
‣ CSS tells the browser how to style content
‣ e.g Will the paragraph content be pink or purple?

the selector, which HTML element you want to add style to

property
h1 { value
color: blue;
text-align: center;
}
curly braces, all styles inside these will apply to the HTML elements that belong to the selector
HOW DO YOU CONNECT THE TWO FILES?

<link rel=“stylesheet” href=“style.css” />


ACTIVITY: CREATING YOUR FIRST CSS FILE

DIRECTIONS
1. You should still have the “Coding 101” folder open in your editor
2. Create a new file from the editor, save the file as “style.css”
3. Add a few CSS properties (color, background-color, font-family,
EXERCISE

text-align) to the content created in the last activity


4. Connect your external CSS file to your HTML file
5. Open up the HTML file in Google Chrome
SO, WHO NEEDS TO KNOW
ABOUT THIS STUFF?
WRAP UP

EVERYONE!

Business Product Designers Marketers Programmers


Managers Managers
CODING 101: HTML + CSS

HOW TO LEARN THIS AT GA?

PART-TIME: ONLINE: FULL-TIME:


JS/FEWD DASH WDI / WDIR
CODING 101: HTML + CSS

A COUPLE OF LAST THINGS

You are going to get lots of errors…

Google first, ask questions later (but don't be afraid to ask)


Stack Overflow is great for this stuff!

Get immersed! Coding is hard if you don't get really


involved.
CODING 101: HTML + CSS

WRAP-UP
A FEW HELPFUL SITES
CODING 101: HTML + CSS

REFERENCE PAGES:
• Mozilla Developer Network
• W3Schools
• CSS Tricks
• Web Field Manual
• Free IT Books
• JSDB.io
• Site Point
• Codrops
CODING 101: HTML + CSS

STAYING CURRENT
• Smashing Magazine
• Sidebar.io
• Codrops
• Medium
• A List Apart
• Web Designer Weekly
• Creative Bloq
• CSS Tricks
• Codepen.io
CODING 101: HTML + CSS

SITE INSPIRATION
• Awwwards
• Site Inspire
• Mediaqueri.es
• One Page Love
• Little Big Details
• The Best Designs
• CSS Design Awards
• Web Design File
• Behance
• Dribbble
• Responsive Patterns
ACTIVITY: AFTER CLASS YOU CAN…

DIRECTIONS

1. Go to dash.ga.co
EXERCISE 2. There are 5 projects available to you that
cover what we went over tonight and
more!
CODING 101: HTML + CSS

Q&A

You might also like