Scribd
Upload
25 views

Lecture 0

This document discusses topics related to web programming with Python and JavaScript, including HTML, CSS, Git, Python, Django, SQL, JavaScript, user interfaces, testing, and scalability. It covers basic HTML structure and tags, CSS properties and selectors, responsive design using viewports and media queries, and layout tools like Flexbox and Grids.

Uploaded by

Ahmad Akhtar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
25 views

Lecture 0

This document discusses topics related to web programming with Python and JavaScript, including HTML, CSS, Git, Python, Django, SQL, JavaScript, user interfaces, testing, and scalability. It covers basic HTML structure and tags, CSS properties and selectors, responsive design using viewports and media queries, and layout tools like Flexbox and Grids.

Uploaded by

Ahmad Akhtar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, 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
Viewport
Media Queries

• Media Types: print, screen, ...


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

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

1 2 3 4 5 6
Flexbox

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

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

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

1 2 3
1 2 3 4 5 6

4 5 6
Bootstrap
Sas
s
Web Programming
with Python and JavaScript

You might also like