Scribd
Upload
171 views

HTML & CSS - But First My Take On Web Development

The document discusses HTML and CSS. It provides an overview of key HTML elements and tags used to structure content and describes how CSS can be used to style HTML elements. It also includes examples of HTML code and how to link a CSS stylesheet to style HTML elements.

Uploaded by

Olowosulu Tunde Peter
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
171 views

HTML & CSS - But First My Take On Web Development

The document discusses HTML and CSS. It provides an overview of key HTML elements and tags used to structure content and describes how CSS can be used to style HTML elements. It also includes examples of HTML code and how to link a CSS stylesheet to style HTML elements.

Uploaded by

Olowosulu Tunde Peter
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 115

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™
hello.html

<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
hello.html

<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
hello.html

<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
hello.html

<!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
hello.html

<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
HTML Tags

<a>
<b>
</a>
</b>
hello.html

<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
hello.html

<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
hello.html

<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
hello.html

<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
hello.html

<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
hello.html

<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
hello.html

<!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="http://6148.io">Link to 6.148!</a>

Link to 6.148!
Inserting Links
<a href="home.html">Link to home!</a>

Link to home!
Inserting Images
<img> Image
Inserting Images
<img src="pusheen.gif"></img>
Inserting Images
<img src="pusheen.gif">
Inserting Images
<img src="pusheen.gif">

app/
hello.html
pusheen.gif
Inserting Images
<img src="pusheen.gif">
<img src="images/pusheen.gif">

app/
hello.html
images/
pusheen.gif
Lists
<ol> Ordered List (1, 2, 3…)
<ul> Unordered List (bullets)

<li> List Item


hello.html

<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<ul>
</ul>
</body>
</html>
hello.html

<!DOCTYPE html>
<html> • Item 1
<head>
<title>Title!</title>
</head>
<body>
<ul>
<li>Item 1</li>
</ul>
</body>
</html>
hello.html

<!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
hello.html

<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
hello.html

<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<div>
<h1>Heading!</h1>
<p>Paragraph!</p>
</div>
</body>
</html>
hello.html

<!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;
}
hello.html

<!DOCTYPE html>
<html> Heading
<head>
<title>Title!</title> Paragraph!
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
hello.html Heading
<h1>Heading!</h1> Paragraph!
<p>Paragraph!</p>
hello.html Heading
<h1>Heading!</h1> Paragraph!
<p>Paragraph!</p> Info
<p>Info</p>
hello.html

<h1>Heading!</h1>
<p>Paragraph!</p>
<p>Info</p>
Heading
Paragraph!
style.css Info

p{
color: red;
font-family: Arial;
font-size: 24pt;
}
hello.html

<h1>Heading!</h1>
<p>Paragraph!</p>
<p class="info">Info</p>
Heading
Paragraph!
style.css Info

p{
color: red;
font-family: Arial;
font-size: 24pt;
}
hello.html

<h1>Heading!</h1>
<p>Paragraph!</p>
<p class="info">Info</p>
Heading
Paragraph!
style.css Info

.info {
color: red;
font-family: Arial;
font-size: 24pt;
}
hello.html

<h1>Heading!</h1>
<p>Paragraph!</p>
<p id="unique">Info</p>
Heading
Paragraph!
style.css 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
hello.html

<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
hello.html

<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
<link rel="stylesheet"
type="text/css"
href="style.css">
</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!
go.6148.io/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 profile1.html 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 styles1.css.
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 profile2.html and style2.css

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 style2.css
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 profile4.html and style4.css


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)

CSS-Tricks.com, 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)


getbootstrap.com/docs
the documentation is your friend
Bootstrap Time!!
Open BS/profileBS.html
Be scared by how many classes there are in
the HTML now.

Open BS/styleBS.css
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.

You might also like