This document outlines an agenda for a web development training from novice to Django. It covers front-end technologies like HTML, CSS, JavaScript, jQuery as well as back-end topics like Python and the Django web framework. The timeline indicates that each section will include a review of essential skills and a code snippet demonstration. HTML topics covered include document structure, tags for text formatting, images, tables and forms. CSS is introduced for styling and grid systems. JavaScript fundamentals and jQuery are also discussed. For back-end development, Python is explained for its open source nature, cross-platform capabilities, ease of learning and dynamic features. Core Python concepts are reviewed along with a hands-on demo. Django is then introduced for its

1. WEB DEVELOPMENT
FROM NOVICE TO DJANGO
By AlSayed Gamal

2. AGENDA
Session plan.!
dj
Fi
na
an
l
Web essentials.!
Py
th
Python.!
Django.
In
t
Es
ro
se
nt
ia
ls
on
go

3. TIME LINE
In every section we will
review/write a small snippet
of code.!
Essential skills.!
Extra skills/tools.!
Community.

4. WEB SCENARIO
Every minute of you career you will be contributing to it.

5. FRONT-END
ENGINEERING
In this section we will be
interested in technologies
interested in generating and
optimising user interface.

7. HTML
Almost every single website have one of these.

8. DOCUMENT STRUCTURE
Every document will / should include this

9. ANATOMY OF HTML TAG
Tag is the building block of HTML.!
<tag [attribute=”value”]> </tag>!
or <tag [attribute=”value”] />!
Example <p dir=“rlt”> We are paragraph. </p>

10. ANATOMY OF HTML TAG
Text formatting.!
<b>,<i>,<u>,<span>,<sup>,<sub>,<ul>,<li>, etc..!
Images and media.!
<img />, <embed />, <video>.!
Tables.!
<table>,<tr>, <td> and <th>!
Forms (The where, what and how questions.)!
<form>, <fieldset>, <legend> and label. <input type=””>,<select>,<option> and <textarea>.

11. QUICK DEMO #1
In this demo:!
Text formatting tags.!
Image tag.!
Links.!
Forms.!
Tables.

12. HTML 5
& CSS3
The buzz

13. CSS(CASCADNG STYLE
SHEETS)
Because HTML isn’t enough.

14. CSS ANATOMY
Important paragraphs are “Red” important.

15. QUICK DEMO #2
In this demo:!
Linking stylesheets.!
styling borders.!
styling text.!
styling background.

16. GRID SYSTEMS
You are obsolete if you are not using css framework now.

17. JAVASCRIPT
for the sake of client.

18. QUICK DEMO #3
In this demo:!
How to link Javascript.!
Window alert, confirm
and prompt.!
How to handle click /
mouse over events.

19. JQUERY IS A
MUST.
Javascript libraries that
made dom manipulation,
animations, validation and
AJAX easy.

20. BACK-END DEVELOPMENT
From now on it’s more about making the correct option.

21. WHY PYTHON?
It’s Open source.!
Cross platform.!
Easy to learn.!
No boiler plates.!
Dynamic
(to be explained in code).!
Community.
?

22. OPEN SOURCE
open source = freedom.

23. CROSS PLATFORM
write once, run everywhere.

24. EASY TO LEARN
It takes < 10 seconds to write your hello, world.

25. SYSTEM.OUT.PRINT(“HELLO,WORLD”);
It takes 1 line to your “hello, world”

26. FROM 29TH TO 8TH IN < 7 YEARS*
It’s 8th too in 2013.
*TOIBE.com | TIOBE Programming Community Index for November 2013

27. “Innovation distinguishes between a leader and a
follower.”
–Steve Jobs

28. PYTHON ESSENTIALS
Scripting nature.!
Basic data types.!
Operators.!
Flow control.!
Functions are fun.!
Modules.!
OOP.

29. EXPRESSION IN PYTHON.
Operators
variable = 3 + 2
Data
5,
“hello”,
Operands
+ * = / %
[] () > =
& != |
Expression
Variables
x,name,
__len__

30. PYTHON BLOCKS
Branching
if condition:
If block
Function definition
def foo(x,y):
function body
Loop
for item in structure:
for block
Class definition
class class_name(parent):
class definition

31. GETTING YOUR
HANDS DIRTY
Quick Demo #4

32. BEFORE WE START
If you are linux or unix based you are good to go.!
Else If you are on windows (I hope not) download and
install!
sublime text editor!
python runtime!
Our code will be perfect for Python 2.x and may be 3.x.

33. SORTED?

34. MEDIA.PY
P1: Tawfik Okasha
P2: Amr Adib

35. SCRIPT HIGHLIGHTS.
Basic expression (variable assignment).!
User input and output.!
Function definition / passing function as variable.!
List data-type.!
Basic sorting.

36. DJANGO
Django is RAD web framework!
Django advantages!
MTV.!
ORM.!
Admin Panel.!
I18n.!
Documentation.!
Minimal Boiler Plates.!
Elegant URL design

37. DJANGO ADMIN
Well known to be the main advantage of django and it’s.

38. QUICK DEMO #5
The last and the best.

39. QUESTIONS?

40. THANKS