Scribd
Upload
8 views

00 - HTML, CSS

Uploaded by

Ali Haleem
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

00 - HTML, CSS

Uploaded by

Ali Haleem
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 47

Web Programming

with Python and JavaScript


Web Programming
HTML

HTML and CSS


Git
Python
Django
SQL, Models,
and Migrations
JavaScript
User Interfaces
Testing and CI/CD
Load Balancer
Scalability
and Security
Server Server Server
HTML and CSS
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
</head>
<body>
Hello, world!
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
</head>
<body>
Hello, world!
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
</head>
<body>
Hello, world!
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
</head>
<body>
Hello, world!
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
</head>
<body>
Hello, world!
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
</head>
<body>
Hello, world!
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
</head>
<body>
Hello, world!
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
</head>
<body>
Hello, world!
</body>
</html>
Document Object Model
html
<!DOCTYPE html>
<html lang="en">
<head>
head body
<title>Hello!</title>
</head>
<body> title Hello, world!
Hello, world!
</body>
</html> Hello!
Common HTML Tags
• <h1>, <h2>, ..., <h6>
• <ol>, <ul>
• <img>
• <a>
• <table>
• <form>
• ...
CSS
Common CSS Properties
• color
• text-align
• width, height
• margin, padding
• font-family, font-size, font-weight
• border
• ...
Identifying Elements

• div
• span
• id
• class
Specificity

1. inline
2. id
3. class
4. type
Specificity
<div id="foo">
Hello!
</div>

div { Hello!
color: blue;
}
Specificity
<div id="foo">
Hello!
</div>

div { Hello!
color: blue;
}

#foo {
color: red;
}
Specificity
<div id="foo">
Hello!
</div>

#foo { Hello!
color: red;
}

div {
color: blue;
}
CSS Selectors
a, b Multiple Element Selector
a b Descendant Selector
a > b Child Selector
a + b Adjacent Sibling Selector
[a=b] Attribute Selector
a:b Pseudoclass Selector
a::b Pseudoelement Selector
Responsive Design
Responsive Design

• viewport
• Media Queries
• Flexbox
• Grids
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Viewport

a
Viewport

a
Media Queries

• Media Types: print, screen, ...


• Media Features: height, width, orientation, ...
Flexbox

1 2 3 4 5 6
Flexbox
1 2 3 4 5 6

1 2 3 4 5 6
Flexbox

1 2 3 4 5 6
Flexbox

1 2 3 4 5 6
1 2 3 4 5 6
Flexbox

1 2 3 4 5 6
Flexbox

1 2 3
1 2 3 4 5 6

4 5 6
Bootstrap
Sass
Web Programming
with Python and JavaScript

You might also like