Coding 101 - HTML + CSS Kasun March 2018
Coding 101 - HTML + CSS Kasun March 2018
Coding 101 - HTML + CSS Kasun March 2018
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
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?
WEB PRODUCTION
WORKFLOW
WEB PRODUCTION WORKFLOW
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
DIRECTIONS
to _________?
CODEPEN.IO
THE PAGE
HTML CODE-ALONG
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
<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?
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?
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
EVERYONE!
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