Scribd
Upload
2 views

Lecture 0

The document provides an overview of web programming using Python and JavaScript, covering essential topics such as HTML, CSS, Git, Python, Django, SQL, and JavaScript. It includes details on web design principles like responsive design, CSS specificity, and common HTML tags. Additionally, it discusses tools and practices for testing, scalability, and security in web applications.

Uploaded by

Samuel warutere Nyaguthii
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Lecture 0

The document provides an overview of web programming using Python and JavaScript, covering essential topics such as HTML, CSS, Git, Python, Django, SQL, and JavaScript. It includes details on web design principles like responsive design, CSS specificity, and common HTML tags. Additionally, it discusses tools and practices for testing, scalability, and security in web applications.

Uploaded by

Samuel warutere Nyaguthii
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