Scribd
Upload
39 views

Web Programming: With Python and Javascript

The document discusses topics for web programming including HTML, CSS, Git, Python, Django, JavaScript, testing and deployment. It covers the basics of HTML including common tags and the document object model. CSS topics include common properties, identifying elements, specificity, and responsive design techniques like Flexbox and Grids. Python concepts like Django, SQL and models are addressed. The document also mentions JavaScript, user interfaces, and testing in the continuous integration/continuous delivery (CI/CD) process.

Uploaded by

Luis A.
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
39 views

Web Programming: With Python and Javascript

The document discusses topics for web programming including HTML, CSS, Git, Python, Django, JavaScript, testing and deployment. It covers the basics of HTML including common tags and the document object model. CSS topics include common properties, identifying elements, specificity, and responsive design techniques like Flexbox and Grids. Python concepts like Django, SQL and models are addressed. The document also mentions JavaScript, user interfaces, and testing in the continuous integration/continuous delivery (CI/CD) process.

Uploaded by

Luis A.
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