Don’t get bogged down by all the technical jargon and unnecessary syntax of programming languages. We help you separate the wheat from chaff, do what matters the most - ideate, design and develop the web site and Mobile application with the right technologies and tools. All in an interactive, fun and enjoyable way, just like how you would play games.    Texavi’s Code Bootcamp will equip you with the life skills of critical thinking, clarity of thought, analysis, design-thinking, coding and more importantly learning technology in a practical manner. Besides the hands-on learning, you will get access to our treasure of insightful, high-quality resources and materials, course certificate and some nice swag items like digital badges, laptop stickers and more!   Still not convinced, get a low-down on what you would get out of the 'Code Bootcamp for Kids - Learn Programming workshop’, check this out!

2. 2
Agenda
 Housekeeping
 Let’s get to know eachother
 Workshop overview &scope
 Set upthe required softwares
 Ideate&conceptualise yourweb site
 Code web pages with HTML, CSS
 Connectto database, run simple queries
 Code using Php to complete web pages
 Ideate and design your Mobile app
 Guest Speaker– Live Demo

3. 3www.texavi.co.uk
Welcome to Texavi Code Bootcamp

4. 4www.texavi.co.uk
Let’s learn while have fun 

5. 5
Agenda
 Housekeeping
 Let’s get to know eachother
 Workshop overview &scope
 Set upthe required softwares
 Ideate&conceptualise yourweb site
 Code web pages with HTML, CSS
 Connectto database, run simple queries
 Code using Php to complete web pages
 Ideate and design your Mobile app
 Guest Speaker– Live Demo

6. 6
First thingsfirst!
• This is a fully onlineworkshop and wewill tryand makeit as muchfun as learning
• Remember,youwill get the best whenyoufocus and work with us, along with having some fun with your
classmates
• Keep your video on, and Microphone Mute
• If asked to speak, please unmuteyour microphoneand speak clearly and loudly
Texavi,Analyst-Zone,AZcircle,NewAgeAgileBusiness Analyst*areregisteredtrademarksof TexaviInnovative Solutions

7. 7
Please remember!
www.texavi.co.uk
• Attend all sessions without fail. Theyareinter-related, so you can get the best only if youattend eachone of them
• Full attendance will open avenues for you! Certificates,digital badges, laptop stickers… premiumaccess to our
digital platform, mobile app.
• Do thetasks, exercises and home works. It’s a good use of your time, energyand effort!
Find us, follow us on all popular social/professional media platforms:
YouTube, Facebook, Instagram, Twitter, LinkedIn & coming soon on WhatsApp

8. 8www.texavi.co.uk
Welcome to Texavi!

9. 9
Whoare we?

10. 10www.texavi.co.uk
Let’s get to know each other
• Name
• Yearof study and school/college name
• Fav super hero
• Fav web site/Mobile app/game
• Fav hobby/sport/activity
• What do youwant to beafter 5 years? 

11. 11
Agenda
 Housekeeping
 Let’s get to know eachother
 Workshop overview & scope
 Set upthe required softwares
 Ideate&conceptualise yourweb site
 Code web pages with HTML, CSS
 Connectto database, run simple queries
 Code using Php to complete web pages
 Ideate and design your Mobile app
 Guest Speaker– Live Demo

12. 12

13. 13
Mainstream/ Traditional
Digital
Web/ OnlineMobile
Social

14. 14

15. 15
“I listen and I forget
I see and I remember
I do and I understand!”
– Socrates

16. 16

17. 17

18. 18
Agenda
 Housekeeping
 Let’s get to know eachother
 Workshop overview &scope
 Set up therequired softwares
 Ideate&conceptualise yourweb site
 Code web pages with HTML, CSS
 Connectto database, run simple queries
 Code using Php to complete web pages
 Ideate and design your Mobile app
 Guest Speaker– Live Demo

19. 19
Open the XAMPP website. Go to https://www.apachefriends.org/index.html inyour computer's web
browser.1

20. 20
Click XAMPP forWindows. It's a grey button a middle of the page. Depending on yourbrowser, youmay
first haveto select a save location or verifythe download.2

21. 21
Double-click the downloaded file. Thisfile should benamedsomething like xampp-windows-x64-
7.4.11-0-VC15-installer,and you'll find it in thedefault downloads location (e.g., the "Downloads" folder
or the desktop).
3

22. 22
Click Yes when prompted. This will open the XAMPP setup window. Youmay haveto click OKon a
warningif youhaveUser AccountControl (UAC)activated onyour computer.4

23. 23
Click Next. It's at the bottom of the setup window.5

24. 24
Select aspects of XAMPPto install. Reviewthe list of XAMPP attributes on the left side of the window; if
yousee anattribute that youdon't want to install as part of XAMPP, uncheckits box.
By default, all attributes are included in yourXAMPP installation.
6

25. 25
Select an installation location. Click the folder-shaped icon to the right of the
current installation destination, then click a folder on your computer. If you have
the UAC activated on your computer, avoid installing XAMPP in your hard drive's
folder (e.g., OS (C:)).
You can select a folder (e.g., Desktop) and then click Make New Folder to create
a new folder and select it as the installation destination.
7

26. 26
Click OK. Doing so confirms your selected folder as your XAMPP installation
location.
8

27. 27
Uncheck the "Learn more about Bitnami" box, then click Next. The "Learn more
about Bitnami" box is in the middle of the page.
9

28. 28
Begin installing XAMPP. Click Next at the bottom of the window to do so.
XAMPP will begin installing its files into the folder that you selected.10

29. 29
Click Finish when prompted. It's at the bottom of the XAMPP window.
Doing so will close the window and open the XAMPP Control Panel,
which is where you'll access your servers.
11

30. 30
Select a language. Check the box next to the American flag for English, or
check the box next to the German flag for German.12

31. 31
Click Save. Doing so opens the main Control Panel page.13

32. 32
Start XAMPP from its installation point. If you need to open the XAMPP
Control Panel in the future, you can do so by opening the folder in which
you installed XAMPP, right-clicking the orange-and-white xampp-control
icon, clicking Run as administrator, and clicking Yes when prompted.
14

33. 33
Start XAMPP from its installation point. If you need to open the XAMPP
Control Panel in the future, you can do so by opening the folder in which
you installed XAMPP, right-clicking the orange-and-white xampp-control
icon, clicking Run as administrator, and clicking Yes when prompted.
15

34. 34
Agenda
 Housekeeping
 Let’s get to know eachother
 Workshop overview &scope
 Set upthe required softwares
 Ideate&conceptualiseyourweb site
 Code web pages with HTML, CSS
 Connectto database, run simple queries
 Code using Php to complete web pages
 Ideate and design your Mobile app
 Guest Speaker– Live Demo

35. 35

36. 36

37. 37
Agenda
 Housekeeping
 Let’s get to know eachother
 Workshop overview &scope
 Set upthe required softwares
 Ideate&conceptualise yourweb site
 Codeweb pageswith HTML, CSS
 Connectto database, run simple queries
 Code using Php to complete web pages
 Ideate and design your Mobile app
 Guest Speaker– Live Demo

38. 38
All HTML documents must start with a <!DOCTYPE> declaration.
The declaration is not an HTML tag. Its just an "information" to the browser about
what document type to expect.
1

39. 39
The <title> tag defines the title of the document. The title must be text-only, and it
is shown in the browser's title bar or in the page's tab.2

40. 40
The <table> tag defines an HTML table.
An HTML table consists of one <table> element and one or more <tr>, <th>, and
<td> elements.
When you do align=“center” to the table, the table and its elements used under
the table will get center aligned.
celpadding=“0” cellspacing=“0” When used in conjunction with the table element,
it specifies the amount of space between the border of a table cell and its contents.
The width attribute specifies the width of the element/layout, in pixels.
Borders can be applied to most HTML elements within the body.
3

41. 41
When you allow cellpadding, cellspacing and give border to the html table you will
have some breathing space between the objects used and doesn’t look cluttered.5

42. 42
The colspan attribute defines the number of columns a cell should span.6

43. 43
These are the two views of the same layout with and without the use of colspan.
Another imp thing you will have to remember is only because we have the 2
columns in the last row we had to use colspan=“2” for rest of the columns which
had only one <td>. If there were three columns in any row, you will need to set the
colspan accordingly for each <td>
7

44. 44
Sample code for practice8
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<table align="center" cellpadding="0" cellspacing="0" border="1" width="1200px">
<tr>
<td align="center" style="font-size:30pt;">Page Title</td>
</tr>
<tr>
<td style="padding:20px;" width="100%">Page Summary</td>
</tr>
<tr>
<td width="50%">Description</td>
<td width="50%"><img src="img/spiderman.jpg" width="600px"></td>
</tr>
</table>
</body>
</html>

45. 45
Agenda
 Housekeeping
 Let’s get to know eachother
 Workshop overview &scope
 Set upthe required softwares
 Ideate&conceptualise yourweb site
 Code web pages with HTML, CSS
 Connectto database,run queries
 Code using Php to complete web pages
 Ideate and design your Mobile app
 Guest Speaker– Live Demo

46. 46

47. 47

48. 48

49. 49

50. 50
Agenda
 Housekeeping
 Let’s get to know eachother
 Workshop overview &scope
 Set upthe required softwares
 Ideate&conceptualise yourweb site
 Code web pages with HTML, CSS
 Connectto database, run queries
 Codein Phpto completeweb pages
 Ideate and design your Mobile app
 Guest Speaker– Live Demo

51. 51

52. 52

53. 53

54. 54
Agenda
 Housekeeping
 Let’s get to know eachother
 Workshop overview &scope
 Set upthe required softwares
 Ideate&conceptualise yourweb site
 Code web pages with HTML, CSS
 Connectto database, run queries
 Code in Php to complete web pages
 Ideate anddesign yourMobileapp
 Guest Speaker– Live Demo

55. 55

56. 56www.texavi.co.uk

57. 57
Agenda
 Housekeeping
 Let’s get to know eachother
 Workshop overview &scope
 Set upthe required softwares
 Ideate&conceptualise yourweb site
 Code web pages with HTML, CSS
 Connectto database, run queries
 Code in Php to complete web pages
 Ideate and design your Mobile app
 Guest Speaker –Live Demo

58. 58
Summary
 Housekeeping
 Let’s get to know eachother
 Workshop overview &scope
 Set upthe required softwares
 Ideate&conceptualise yourweb site
 Code web pages with HTML, CSS
 Connectto database, run queries
 Code in Php to complete web pages
 Ideate and design your Mobile app
 Guest Speaker– Live Demo

59. 59
Guest Speaker – Anish Kambhampati
Link to his Web site - https://kambhani.github.io/CR_PARODY/

60. 6060
Thank you!
Texavi Innovative Solutions
The new age people for new age solutions!
Consulting | Training | Solutions
Regd. Office
Texavi Innovative Solutions (UK) Ltd
36 Glebe Road
Finchley
London N3 2AX
Email: connect@texavi.co.uk
training@texavi.co.uk
connect@analyst-zone.com
Connect with Texavi
www.texavi.co.uk
https://analyst-zone.com
www.facebook.com/texavi
Twitter @pardhas
LinkedIn Texavi
Blog www.texavi.com/blog