Web Design & UI/UX
Transcript of Web Design & UI/UX
![Page 1: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/1.jpg)
HTML & CSS
Rupayan Neogy
![Page 2: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/2.jpg)
My Take onWeb Development
But first…
![Page 3: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/3.jpg)
There is always sometool that makes your life
easier.
![Page 4: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/4.jpg)
Hypertext Markup Language
The language your web browser uses to describe the content and structure on web pages
![Page 5: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/5.jpg)
My Take onHTML
But first…
![Page 6: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/6.jpg)
HTML = Nested Boxes
![Page 7: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/7.jpg)
HTML = Nested Boxes™
![Page 8: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/8.jpg)
![Page 9: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/9.jpg)
![Page 10: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/10.jpg)
![Page 11: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/11.jpg)
![Page 12: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/12.jpg)
![Page 13: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/13.jpg)
![Page 14: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/14.jpg)
![Page 15: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/15.jpg)
![Page 16: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/16.jpg)
<!DOCTYPE html><html>
<head><title>Title!</title>
</head><body>
<h1>Heading!</h1><p>Paragraph!</p>
</body></html>
hello.html
![Page 17: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/17.jpg)
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
hello.html
![Page 18: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/18.jpg)
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
hello.html
![Page 19: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/19.jpg)
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
hello.html
![Page 20: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/20.jpg)
HTML Tags
<html>
content goes here
</html>
Opening tag
Closing tag
![Page 21: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/21.jpg)
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
hello.html
![Page 22: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/22.jpg)
HTML Tags
<a>
<b>
</a>
</b>
![Page 23: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/23.jpg)
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
hello.html
![Page 24: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/24.jpg)
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
hello.html
![Page 25: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/25.jpg)
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
hello.html
![Page 26: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/26.jpg)
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
hello.html
![Page 27: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/27.jpg)
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
hello.html
![Page 28: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/28.jpg)
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
hello.html
![Page 29: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/29.jpg)
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
hello.html
![Page 30: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/30.jpg)
Basic HTML ElementsRoot of HTML Document
Info about Document
Document Body
Header tags
Paragraph tags
<html>
<head>
<body>
<h1>, <h2>, <h3>, …
<p>
![Page 31: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/31.jpg)
Basic HTML ElementsRoot of HTML Document
Info about Document
Document Body
Header tags
Paragraph tags
<html>
<head>
<body>
<h1>, <h2>, <h3>, …
<p>
![Page 32: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/32.jpg)
Inserting LinksLink<a>
Link to 6.148!
![Page 33: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/33.jpg)
HTML Attributes
<a href="link here">
content goes here
</a>
Opening tag
Closing tag
attribute value
![Page 34: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/34.jpg)
Inserting Links
<a href="http://6148.io">Link to 6.148!</a>
Link to 6.148!
![Page 35: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/35.jpg)
Inserting Links
<a href="home.html">Link to home!</a>
Link to home!
![Page 36: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/36.jpg)
Inserting ImagesImage<img>
![Page 37: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/37.jpg)
Inserting Images
<img src="pusheen.gif"></img>
![Page 38: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/38.jpg)
Inserting Images
<img src="pusheen.gif">
![Page 39: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/39.jpg)
Inserting Images
<img src="pusheen.gif">
app/hello.htmlpusheen.gif
![Page 40: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/40.jpg)
Inserting Images
app/hello.htmlimages/
pusheen.gif
<img src="pusheen.gif">
<img src="images/pusheen.gif">
![Page 41: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/41.jpg)
ListsOrdered List (1, 2, 3…)
Unordered List (bullets)
List Item
<ol>
<ul>
<li>
![Page 42: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/42.jpg)
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<ul>
</ul>
</body>
</html>
hello.html
![Page 43: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/43.jpg)
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<ul>
<li>Item 1</li>
</ul>
</body>
</html>
hello.html
• Item 1
![Page 44: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/44.jpg)
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</body>
</html>
hello.html
• Item 1
• Item 2
![Page 45: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/45.jpg)
div & spanBlock Section in Document
Inline Section in Document
<div>
<span>
![Page 46: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/46.jpg)
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
hello.html
![Page 47: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/47.jpg)
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<div>
<h1>Heading!</h1>
<p>Paragraph!</p>
</div>
</body>
</html>
hello.html
![Page 48: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/48.jpg)
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<div>
<h1>Heading!</h1>
<p>Paragraph!</p>
</div>
</body>
</html>
hello.html
![Page 49: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/49.jpg)
<span>?</span>
![Page 50: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/50.jpg)
the real way to learn
Web Dev
Step 1: Google!
![Page 51: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/51.jpg)
the real way to learn
Web Dev
Step 2:Learn.
![Page 52: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/52.jpg)
the real way to learn
Web Dev
![Page 53: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/53.jpg)
Hypertext Markup Language
The language your web browser uses to describe the content and structure on web pages
![Page 54: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/54.jpg)
Cascading Style Sheets
The rules that tell your web browser how stuff looks
![Page 55: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/55.jpg)
My Take onCSS
But first…
![Page 56: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/56.jpg)
CSS = A list of descriptions
![Page 57: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/57.jpg)
![Page 58: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/58.jpg)
![Page 59: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/59.jpg)
p {
color: red;
font-family: Arial;
font-size: 24pt;
}
![Page 60: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/60.jpg)
p {
color: red;
font-family: Arial;
font-size: 24pt;
}
selector
![Page 61: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/61.jpg)
p {
color: red;
font-family: Arial;
font-size: 24pt;
}
selector
property
![Page 62: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/62.jpg)
p {
color: red;
font-family: Arial;
font-size: 24pt;
}
selector
propertyvalue
![Page 63: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/63.jpg)
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
hello.html
Heading
Paragraph!
![Page 64: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/64.jpg)
<h1>Heading!</h1>
<p>Paragraph!</p>
hello.html Heading
Paragraph!
![Page 65: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/65.jpg)
Heading
Paragraph!
Info
<h1>Heading!</h1>
<p>Paragraph!</p>
<p>Info</p>
hello.html
![Page 66: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/66.jpg)
Heading
Paragraph!
Info
<h1>Heading!</h1>
<p>Paragraph!</p>
<p>Info</p>
hello.html
p {
color: red;
font-family: Arial;
font-size: 24pt;
}
style.css
![Page 67: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/67.jpg)
Heading
Paragraph!
Info
<h1>Heading!</h1>
<p>Paragraph!</p>
<p class="info">Info</p>
hello.html
p {
color: red;
font-family: Arial;
font-size: 24pt;
}
style.css
![Page 68: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/68.jpg)
Heading
Paragraph!
Info
.info {
color: red;
font-family: Arial;
font-size: 24pt;
}
style.css
<h1>Heading!</h1>
<p>Paragraph!</p>
<p class="info">Info</p>
hello.html
![Page 69: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/69.jpg)
Heading
Paragraph!
Info
#unique {
color: red;
font-family: Arial;
font-size: 24pt;
}
style.css
<h1>Heading!</h1>
<p>Paragraph!</p>
<p id="unique">Info</p>
hello.html
![Page 70: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/70.jpg)
ClassCan use the same class on multiple elementsCan use multiple classes on the same element
Class vs IDIDEach element can have only one IDEach page can have only one element with that ID
![Page 71: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/71.jpg)
ClassCan use the same class on multiple elementsCan use multiple classes on the same element
.classname {…
}
Class vs IDIDEach element can have only one IDEach page can have only one element with that ID
#id {…
}
![Page 72: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/72.jpg)
Combining HTML & CSS
![Page 73: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/73.jpg)
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
hello.html
![Page 74: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/74.jpg)
<!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>
hello.html
![Page 75: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/75.jpg)
In Conclusion:
HTML = nested boxes!CSS = a list of descriptions
A description in the CSS affects a box in the HTML
![Page 76: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/76.jpg)
HTML/CSS Workshop
Making your Catbook profile!
![Page 77: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/77.jpg)
CatbookThe purrfect social media website
![Page 78: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/78.jpg)
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.
1
2
![Page 79: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/79.jpg)
Exercise 1: Kitten StartedOpen 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.
![Page 80: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/80.jpg)
Exercise 1: Kitten StartedChange to “Favorite Types of Cats” and instead of the <h3> below, create an unordered list of your favorite cats!
![Page 81: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/81.jpg)
Exercise 1: Kitten StartedChange to “Favorite Types of Cats” and instead of the <h3> below, create an unordered list of your favorite cats!
![Page 82: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/82.jpg)
CSS Time!!Open styles1.css.
Guess what it will do…
Add the following the link tag:
![Page 83: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/83.jpg)
CSS Time!!
![Page 84: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/84.jpg)
CSS Time!!Try the following:
Make all <h1> elements blue.
Make everything in the div with the ID “profile-container” have centered text.
![Page 85: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/85.jpg)
CSS Time!!
![Page 86: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/86.jpg)
Exercise 2: Feline Good
Open up profile2.html and style2.css
Take a look at profile2 in a browser.
![Page 87: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/87.jpg)
Exercise 2: Feline Good
Let’s walk through the CSS changes.
(switch to sublime now)
![Page 88: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/88.jpg)
CSS Box Model
MARGIN
BORDER
PADDING
CONTENT
![Page 89: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/89.jpg)
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)
![Page 90: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/90.jpg)
Exercise 3: A little Further
Let’s talk about border-radius!
![Page 91: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/91.jpg)
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>
![Page 92: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/92.jpg)
Exercise 3: A little FurtherMake your profile picture round!
![Page 93: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/93.jpg)
Exercise 4: Stay Pawsitive
What about a perfect circular image?
See profile4.html and style4.css
![Page 94: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/94.jpg)
Exercise 4: Stay Pawsitive
The internet is your friend!
![Page 95: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/95.jpg)
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)
![Page 96: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/96.jpg)
CSS Meowster!
Congrats! You now know a tiny bit about the vast sea that is CSS!
![Page 97: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/97.jpg)
Position, float, z-index
Advanced Topics
![Page 98: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/98.jpg)
Position, float, z-index
Advanced Topics
![Page 99: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/99.jpg)
Position, float, z-index
Advanced Topics
![Page 100: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/100.jpg)
Flexbox
Advanced Topics
![Page 101: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/101.jpg)
Media Queries
Advanced Topics
@media (min-width: 900px) {
p {
color: red;
}
}
![Page 102: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/102.jpg)
CSS frameworks/libraries (Bootstrap, Foundation, Semantic UI)
Advanced Topics
![Page 103: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/103.jpg)
BootstrapA Quick Introduction to CSS Frameworks
Premade CSS (and other fun components)!
![Page 104: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/104.jpg)
A lack of professionalism
![Page 105: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/105.jpg)
A level of professionalism
![Page 106: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/106.jpg)
There is always sometool that makes your life
easier.
![Page 107: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/107.jpg)
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.
![Page 108: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/108.jpg)
What is Bootstrap?
Remember “.text-center”?
.text-center {text-align: center;
}
![Page 109: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/109.jpg)
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)
![Page 110: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/110.jpg)
getbootstrap.com/docs
the documentation is your friend
![Page 111: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/111.jpg)
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
![Page 112: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/112.jpg)
Bootstrap Time!!
The most important line:
![Page 113: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/113.jpg)
How to use Bootstrap
1. Open Documentation
2. Look for something that you like
3. Copy the code tutorial, modifyfor your own purposes
4. Smile at how easy that was
![Page 114: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/114.jpg)
How to use Bootstrap
Just dive in!
![Page 115: Web Design & UI/UX](https://reader036.fdocuments.in/reader036/viewer/2022081516/613cb4b3a3339922f86ede26/html5/thumbnails/115.jpg)
There is always sometool that makes your life
easier.