HTML & CSS
Rupayan Neogy
But first…
My Take on
Web Development
There is always some
tool that makes your life
easier.
Hypertext Markup Language
The language your web browser uses to describe the
content and structure on web pages
But first…
My Take on
HTML
HTML = Nested Boxes
HTML = Nested Boxes™
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
HTML Tags
Opening tag
<html>
content goes here
</html>
Closing tag
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
HTML Tags
<a>
<b>
</a>
</b>
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
Basic HTML Elements
<html> Root of HTML Document
<head> Info about Document
<body> Document Body
<h1>, <h2>, <h3>, … Header tags
<p> Paragraph tags
Basic HTML Elements
<html> Root of HTML Document
<head> Info about Document
<body> Document Body
<h1>, <h2>, <h3>, … Header tags
<p> Paragraph tags
Inserting Links
<a> Link
Link to 6.148!
HTML Attributes
attribute value
Opening tag
<a href="link here">
content goes here
</a>
Closing tag
Inserting Links
<a href="[Link] to 6.148!</a>
Link to 6.148!
Inserting Links
<a href="[Link]">Link to home!</a>
Link to home!
Inserting Images
<img> Image
Inserting Images
<img src="[Link]"></img>
Inserting Images
<img src="[Link]">
Inserting Images
<img src="[Link]">
app/
[Link]
[Link]
Inserting Images
<img src="[Link]">
<img src="images/[Link]">
app/
[Link]
images/
[Link]
Lists
<ol> Ordered List (1, 2, 3…)
<ul> Unordered List (bullets)
<li> List Item
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<ul>
</ul>
</body>
</html>
[Link]
<!DOCTYPE html>
<html> • Item 1
<head>
<title>Title!</title>
</head>
<body>
<ul>
<li>Item 1</li>
</ul>
</body>
</html>
[Link]
<!DOCTYPE html>
<html> • Item 1
<head> • Item 2
<title>Title!</title>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</body>
</html>
div & span
<div> Block Section in Document
<span> Inline Section in Document
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<div>
<h1>Heading!</h1>
<p>Paragraph!</p>
</div>
</body>
</html>
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<div>
<h1>Heading!</h1>
<p>Paragraph!</p>
</div>
</body>
</html>
<span>?</span>
the real way to learn
Web Dev
Step 1: Google!
the real way to learn
Web Dev
Step 2:
Learn.
the real way to learn
Web Dev
Hypertext Markup Language
The language your web browser uses to describe the
content and structure on web pages
Cascading Style Sheets
The rules that tell your web browser how stuff looks
But first…
My Take on
CSS
CSS = A list of
descriptions
p{
color: red;
font-family: Arial;
font-size: 24pt;
}
selector
p{
color: red;
font-family: Arial;
font-size: 24pt;
}
selector
property
p{
color: red;
font-family: Arial;
font-size: 24pt;
}
selector
property
p{ value
color: red;
font-family: Arial;
font-size: 24pt;
}
[Link]
<!DOCTYPE html>
<html> Heading
<head>
<title>Title!</title> Paragraph!
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
[Link] Heading
<h1>Heading!</h1> Paragraph!
<p>Paragraph!</p>
[Link] Heading
<h1>Heading!</h1> Paragraph!
<p>Paragraph!</p> Info
<p>Info</p>
[Link]
<h1>Heading!</h1>
<p>Paragraph!</p>
<p>Info</p>
Heading
Paragraph!
[Link] Info
p{
color: red;
font-family: Arial;
font-size: 24pt;
}
[Link]
<h1>Heading!</h1>
<p>Paragraph!</p>
<p class="info">Info</p>
Heading
Paragraph!
[Link] Info
p{
color: red;
font-family: Arial;
font-size: 24pt;
}
[Link]
<h1>Heading!</h1>
<p>Paragraph!</p>
<p class="info">Info</p>
Heading
Paragraph!
[Link] Info
.info {
color: red;
font-family: Arial;
font-size: 24pt;
}
[Link]
<h1>Heading!</h1>
<p>Paragraph!</p>
<p id="unique">Info</p>
Heading
Paragraph!
[Link] Info
#unique {
color: red;
font-family: Arial;
font-size: 24pt;
}
Class vs ID
Class ID
Can use the same class on Each element can have
multiple elements only one ID
Can use multiple classes Each page can have only
on the same element one element with that ID
Class vs ID
Class ID
Can use the same class on Each element can have
multiple elements only one ID
Can use multiple classes Each page can have only
on the same element one element with that ID
.classname { #id {
… …
} }
Combining
HTML & CSS
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
<link rel="stylesheet"
type="text/css"
href="[Link]">
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
In Conclusion:
HTML = nested boxes!
CSS = a list of descriptions
A description in the CSS affects a box in the HTML
HTML/CSS
Workshop
Making your Catbook profile!
Catbook
The purrfect social media website
Git the workshop code!
[Link]/html-css-workshop
If you know how to Git, clone the repository.
If you don’t know how to Git, download as zip.
2
Exercise 1: Kitten Started
Open [Link] in
chrome to see what it
looks like.
Change the name,
description, and status to
your choice.
You have to save the file
and refresh the webpage
to see changes.
Exercise 1: Kitten Started
Change to “Favorite
Types of Cats” and
instead of the <h3>
below, create an
unordered list of your
favorite cats!
Exercise 1: Kitten Started
Change to “Favorite
Types of Cats” and
instead of the <h3>
below, create an
unordered list of your
favorite cats!
CSS Time!!
Open [Link].
Guess what it will do…
Add the following the link tag:
CSS Time!!
CSS Time!!
Try the following:
Make all <h1> elements blue.
Make everything in the div with the ID “profile-container”
have centered text.
CSS Time!!
Exercise 2: Feline Good
Open up [Link] and [Link]
Take a look at profile2 in a browser.
Exercise 2: Feline Good
Let’s walk through the CSS changes.
(switch to sublime now)
CSS Box Model
MARGIN
BORDER
PADDING
CONTENT
Exercise 2: Feline Good
Make a class called “text-center” in [Link]
The class should make any element that has the class
have centered text.
Add the class to the div with id “profile-container”
(this should center everything in the div)
Exercise 3: A little Further
Let’s talk about border-radius!
Exercise 3: A little Further
Make your profile picture round!
You can either add an ID to the <img> and apply
CSS to the ID, or you can create a class representing
rounded edges, and add the class to the <img>
Exercise 3: A little Further
Make your profile picture round!
Exercise 4: Stay Pawsitive
What about a perfect circular image?
See [Link] and [Link]
Exercise 4: Stay Pawsitive
The internet is your friend!
Exercise 4: Stay Pawsitive
The internet is your friend!
Use the internet to add something cool to your app
(make sure to use only HTML and CSS, no JS)
[Link], stack-overflow, etc.
(if you can’t think of something, try element:hover or css animations)
CSS Meowster!
Congrats! You now know a tiny bit about
the vast sea that is CSS!
Advanced Topics
Position, float, z-index
Advanced Topics
Position, float, z-index
Advanced Topics
Position, float, z-index
Advanced Topics
Flexbox
Advanced Topics
Media Queries
@media (min-width: 900px) {
p{
color: red;
}
}
Advanced Topics
CSS frameworks/libraries (Bootstrap, Foundation, Semantic UI)
Bootstrap
A Quick Introduction to CSS Frameworks
Premade CSS (and other fun components)!
A lack of professionalism
A level of professionalism
There is always some
tool that makes your life
easier.
Issues with CSS
• Simple at its core, incredible amount of depth
• Easily accumulates to extremely large files.
• Hard to make mobile friendly/responsive
• Very easy to not do well.
What is Bootstrap?
Remember “.text-center”?
.text-center {
text-align: center;
}
What is Bootstrap?
• A collection of CSS Classes that add prebuilt
styles to your webpage.
• Includes color theming, structural tools, and
out-of-the-box components.
• Completely responsive (mobile friendly)
• (Also has JS-based components)
[Link]/docs
the documentation is your friend
Bootstrap Time!!
Open BS/[Link]
Be scared by how many classes there are in
the HTML now.
Open BS/[Link]
Be amazed by how little CSS there is
Bootstrap Time!!
The most important line:
How to use Bootstrap
1. Open Documentation
2. Look for something that you like
3. Copy the code tutorial, modify
for your own purposes
4. Smile at how easy that was
How to use Bootstrap
Just dive in!
There is always some
tool that makes your life
easier.
