Scribd
Upload
107 views

Web Design & UI - UX (PDFDrive)

Uploaded by

Nafisah Misriya
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
107 views

Web Design & UI - UX (PDFDrive)

Uploaded by

Nafisah Misriya
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 115

HTML &

CSS
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
TagsOpening 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
<head> Document Info about
<body> Document Document
<h1>, <h2>, <h3>, … Body
<p> Header tags
Paragraph tags
Basic HTML
Elements
<html> Root of HTML
<head> Document Info about
<body> Document Document
<h1>, <h2>, <h3>, … Body
<p> Header tags
Paragraph tags
Inserting
<a> Links 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/
pushee
n.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 &
<div> spanBlock Section in
<span> Document 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
Class ID ID
Can use the same class Each element can
on multiple elements have only one ID
Can use multiple Each page can have
classes on the same only one element with
element that ID
Class vs
Class ID ID
Can use the same class Each element can
on multiple elements have only one ID
Can use multiple Each page can have
classes on the same only one element with
element that ID
#id {
.classname { …
… }
}
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/CS
S
Workshop
Making your Catbook
profile!
Catboo
k
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
in
profile1.html
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
ModelMARGIN

BORDER

PADDIN

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
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
Flexbox Topics
Advanced
Topics
Media Queries

@media (min-width: 900px) {


p{
color: red;
}
}
Advanced
Topics
CSS frameworks/libraries
(Bootstrap, Foundation, Semantic
UI)
Bootstra
p
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/doc
s
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