Learning Web Development from Scratch: The Ultimate Bootcamp

  Section 1 : Introduction - Setup your Unlimited Web Hosting - HTML
1
Introduction Preview
2
HTML Chapter: Roadmap and Full Source Code
3
Structure of a website
4
Your first website
5
Get your unlimited web hosting
6
Important note about FTP
7
Share your website with the World (1)
8
Share your website with the World (2) Cyberduck version
9
Share your website with the World (2) FileZilla version
10
Headings
11
Paragraphs
12
Links
13
Images
14
Inline vs Block Elements
15
Iframes - Activity: Embed a nice relaxing YouTube video to your website
16
Unordered Lists Preview
17
Ordered Lists
18
Description Lists
19
Tables
20
Entities Preview
21
Forms (1) - Activity: Create a simple Login Form
22
Forms (2) - Activity: Create a Marketplace Checkout Form
23
Text Decoration
24
Comments

  Section 2 : CSS
25
Introduction Preview
26
CSS Chapter: Roadmap and Full Source Code
27
Inline CSS
28
Internal CSS
29
External CSS
30
Classes and IDs Preview
31
Div and Span
32
Box Model
33
Box Model: Padding
34
Box Model: Border
35
Box Model: Outline
36
Box Model: Margin
37
Background
38
Floating
39
Positioning
40
Display
41
Text Decoration
42
Text Align
43
Text Font
44
Text Effects
45
Image Sprites
46
Image Opacity
47
Styling Lists
48
Styling Links
49
Gradients
50
2D Transforms
51
3D Transforms
52
Transitions
53
Animations

  Section 3 : Professional Project: Mathematics Tutorials Website (HTML & CSS)
54
Introduction
55
Header (1)
56
Header (2)
57
Menu
58
Introduction Box
59
Sidebars (1)
60
Sidebars (2)
61
Footer & Congratulations
62
Maths Website Source Code

  Section 4 : Javascript
63
Introduction
64
JavaScript Chapter: Roadmap and Full Source Code
65
Buttons
66
Change HTML Content
67
Change HTML Style
68
Variables and Data Types
69
Change HTML Using Variables - Activity: Random Color Generator
70
Functions: Activity: Swap the content of two divs
71
Objects
72
Create Objects using the new keyword
73
Object Contructors
74
Arrays
75
If and Switch Statements - Activity: Motorway Speed Control
76
For Loops
77
While Loops - Activity: Spend $1000 Randomly in a marketplace
78
Regular Expressions
79
Errors (1)
80
Errors (2) - Activity: Password Validation
81
Set Interval & SeTimeout - Activity: Create a simple counter
82
Window and Screen
83
Alert Boxes
84
Cookies

  Section 5 : Professional Project: Maths Game (HTML, CSS & JavaScript)
85
Introduction
86
Page Structure & Styling (1)
87
Page Structure & Styling (2)
88
Page Structure & Styling (3)
89
Page Structure & Styling (4)
90
Game Logic using an illustrative flowchart
91
JavaScript Code (1)
92
JavaScript Code (2)
93
JavaScript Code (3)
94
JavaScript Code (4) & Congratulations
95
Math Game Source Code

  Section 6 : jQuery
96
Introduction and Loading JQuery
97
JQuery Chapter: Roadmap and Full Source Code
98
Select HTML Elements (1)
99
Select HTML Elements (2)
100
Respond to Events
101
Change HTML Content and Attributes (1)
102
Change HTML Content and Attributes (2)
103
Change Styling (1)
104
Change Styling (2) - Activity: Random Position and Color Generator
105
JQuery Effects
106
Ajax
107
JQuery UI Introduction
108
Draggable and Droppable (1) - Activity: Leave me alone! Please drop me!
109
Draggable and Droppable (2) - Activity: Drag Items to your basket
110
Resizable
111
Selectable - Activity: Append selected Car Makes to a Box
112
Sortable - Activity: Sort and exchange Car Makes between two groups
113
Accordion - Activity: Create a resizable accordion with collapsible sections
114
Autocomplete - Activity: City Input with prepopulated options
115
Button
116
Date Picker - Activity: Outbound and return Flight Date Picker just like Expedia
117
Dialog - Activity: Are you sure you want to go to the previous page?
118
Menu
119
Progress Bar - Activity: Animated progress bar filled from 0% to 100%
120
Select Menu
121
Slider - Activity: Car Mileage Range using a Slider
122
More Widgets: Spinners, Tabs and Tooltips

  Section 7 : Professional Project: Fruits Slice Game (HTML, CSS & JQuery)
123
Introduction
124
Page Structure and Styling
125
Game Logic using an illustrative flowchart
126
jQuery Code (1)
127
jQuery Code (2)
128
jQuery Code (3)
129
jQuery Code (4)
130
Fruits Slice Game Source Code

  Section 8 : Twitter Bootstrap
131
Introduction
132
Bootstrap Chapter: Roadmap and Full Source Code
133
Grid System
134
Typography
135
Tables
136
Forms (1) - Activity: Inline and Horizontal Responsive Login Forms
137
Forms (2)
138
Forms (3)
139
Buttons
140
Images
141
Navs - Activity: Website Design using Nav Tabs and Nav Pills
142
Navbars - Activity: Website Design using a responsive/collapsible navigation bar
143
Pagination - Activity: Pagination and Pager Examples like Google/Ebay
144
Jumbotron
145
Thumbnails
146
Dropdown menus
147
Modals (1) - Activity: I have an inquiry about my order
148
Modals (2) - Activity: I have an inquiry about my order
149
Scrollspy
150
Tabs
151
Tooltips
152
Popovers - Activity: Create a popover just like the one you see on an IPAD
153
Alerts - Activity: Create an alert Box to show a warning or success message
154
Button plugin - Activity: Loading Download Complete
155
Collapse plugin
156
Carousels - Activity: Create an interactive carousel slider
157
Affix plugin - Activity: Interactive Website with Content Affixed to a Menu

  Section 9 : Professional Project: App Landing Page (HTML, CSS & Bootstrap)
158
Introduction
159
Header and Featured Content (1)
160
Header and Featured Content (2)
161
Header and Featured Content (3)
162
Trial Section, Footer & Congratulations
163
App Landing Page Source Code

  Section 10 : Professional Project: Company Website (HTML, CSS & Bootstrap)
164
Introduction
165
Structure of our work
166
Background
167
Navbar
168
Header & icons section
169
Contact Button & Footer
170
Company Website Source Code

  Section 11 : Professional Project: Our Lovely Course (HTML, CSS, jQuery & Bootstrap)
171
Introduction
172
Structure of our work
173
Add a background video
174
Navigation bar with advanced styling
175
Home Section
176
About Section
177
Carousel Slider (1)
178
Carousel Slider (2)
179
Adapt for Small Devices
180
Add ScrollSpy feature to navbar & Congratulations
181
Our Lovely Course Website Source Code

  Section 12 : Professional Project: Drawing App (HTML, CSS, jQuery UI, Canvas, Local Storage)
182
Introduction
183
App Skeleton and Decoration (1)
184
App Skeleton and Decoration (2)
185
App Skeleton and Decoration (3)
186
App Logic using an illustrative flowchart
187
jQuery Code Structure
188
jQuery Code (1)
189
jQuery Code (2)
190
jQuery Code (3)
191
Drawing App Source Code

  Section 13 : PHP
192
Introduction
193
PHP Chapter: Roadmap and Full Source Code
194
Embed PHP in HTML
195
PHP Variables
196
Data Types: Strings
197
Data Types: Integers and Floats
198
Data Types: Booleans
199
Data Types: Arrays
200
Data Types: Objects
201
Data Types: NULL
202
Data Types: Resources
203
String Functions
204
If and Switch Statements
205
For Loops
206
While Loops
207
Functions
208
GET & POST
209
Array Functions (1)
210
Array Functions (2)
211
Send Emails - Activity: Send a styled email in HTML format
212
Filter User Inputs (1) - Protect Yourself from Hackers
213
Filter User Inputs (2) - User Input Validation
214
Activity: Create a responsive Contact Form using PHP & Bootstrap (1)
215
Activity: Create a responsive Contact Form using PHP & Bootstrap (2)
216
Activity: Create a responsive Contact Form using PHP & Bootstrap (3)
217
Date and Time (1)
218
Date and Time (2) - Activity: Day of the week you were born? Date in 1000 days?
219
Include PHP files
220
File Handling (1): Open - Read - Write - Close
221
File Handling (2): Open - Read - Write - Close
222
Upload Files Using PHP (1) - Activity: Upload PDF & Text Files Less than 3Mo.
223
Upload Files Using PHP (2) - Activity: Upload PDF & Text Files Less than 3Mo.
224
Cookies
225
Error Handling (1)
226
Error Handling (2) - Activity: Log PHP errors in a file / Trigger error emails
227
Sessions

  Section 14 : MySQL
228
Introduction
229
MySQL Chapter: Roadmap and Full Source Code
230
Create a database using PHP MYADMIN
231
Remote MySQL (1)
232
Remote MySQL (2)
233
Create a database using PHP & MySQL
234
Add a table to a database
235
Populate a database table
236
Activity: Populate Database once the user submits a form
237
Activity: Populate an HTML table using Database Data (1)
238
Activity: Populate an HTML table using Database Data (2)
239
Update Database Data
240
Delete Database Data

  Section 15 : Professional Project: Online Notes App (HTML, CSS, Bootstrap, PHP, MySQL, AJAX)
241
Introduction & Source Code
242
App Skeleton and Decoration (1) - Landing Page
243
App Skeleton and Decoration (2) - Landing Page
244
App Skeleton and Decoration (3) - Landing Page
245
App Skeleton and Decoration (4) - Landing Page
246
App Skeleton and Decoration (5) - My Notes Page
247
App Skeleton and Decoration (6) - Profile Page
248
App Logic - Signup, Login, Remember Me, Forgot Password
249
Signup/Login Code Structure (1)
250
Signup/Login Code Structure (2)
251
Signup Code (1)
252
Signup Code (2)
253
Signup Code (3)
254
Signup Code (4)
255
Signup Code (5)
256
Login Code
257
"Remember me" Code (1)
258
"Remember me" Code (2)
259
"Remember me" Code (3) and Logout Code
260
"Forgot Password" Code (1)
261
"Forgot Password" Code (2)
262
"Forgot Password" Code (3)
263
"Forgot Password" Code (4)
264
Notes Management: Logic
265
Notes Management: Code Structure
266
Load Notes: Code (1)
267
Load Notes: Code (2)
268
Create Notes: Code (1)
269
Create Notes: Code (2)
270
Edit Notes: Code (1)
271
Edit Notes: Code (2)
272
Delete Notes: Code (1)
273
Delete Notes: Code (2)
274
Update Username Code (1)
275
Update Username Code (2)
276
Update Password Code (1)
277
Update Password Code (2)
278
Update Email Code (1)
279
Update Email Code (2)

  Section 16 : WordPress (3 Professional Webpages: Blog + About Page + Contact Page)
280
Introduction
281
Installation - Activity: Create your first Blog
282
Blog Posts and Comments
283
Themes
284
Pages and Menus
285
Customise pages (1)
286
Customise pages (2)
287
Custom CSS
288
Plugins
289
Activity: Beautiful About Page (Add Content to a WordPress Page)
290
Activity: Beautiful About Page (Typography)
291
Activity: Beautiful About Page (Logos)
292
Activity: Beautiful About Page (Buttons)
293
Activity: Create an Awesome Contact Page with a Google Map and Contact Form

  Section 17 : Google Maps APIs
294
Introduction & Embed Google Map to your Website
295
Google Maps APIs Chapter: Roadmap and Full Source Code
296
Markers and InfoWindows
297
Show, Hide or Delete Markers
298
Animated drop of Markers
299
Direction Service - Activity: Driving distance & time between New York & Toronto
300
Geocoding using the Javascript API - Activity: Get Geocoordinates of an address
301
Geocoding using the geocoding API (1) - Activity: format Address & get postcode.
302
Geocoding using the geocoding API (2) - Activity: format Address & get postcode.
303
Nearby Search
304
Autocomplete

  Section 18 : Professional Project: Distance Between Cities (HTML. CSS, jQuery, Google Maps)
305
Introduction
306
Skeleton and decoration
307
App Logic using an illustrative flowchart
308
Javascript Code
309
Distance Between Cities App Source Code

  Section 19 : Professional Project: Website with Social Widgets (Facebook, Google+ & Twitter)
310
Introduction
311
Skeleton and decoration
312
Facebook Widgets
313
Google plus Widgets
314
Tweet Button
315
Twitter Timeline
316
Website Source Code

  Section 20 : IOS and Android Mobile Applications using jQuery Mobile
317
Introduction
318
Mobile Apps Chapter: Roadmap and Full Source Code
319
Pages, Dialogs and Transitions
320
Navbars
321
Grid System
322
List Views
323
Form Inputs
324
Events

  Section 21 : Professional Project: Speed Reader for IOS and Android
325
Introduction
326
App Skeleton and Decoration (1)
327
App Skeleton and Decoration (2)
328
Logic of the App using an illustrative flowchart
329
Start Reading (1)
330
Start Reading (2)
331
Pause, Resume, Restart
332
Change the font size
333
Change the reading speed
334
Control Reading Progress: Go backwards and forward
335
Publish your app to Google Play
336
Publish your app to the IOS App Store (1)
337
Publish your app to the IOS App Store (2)
338
Speed Reader App Source Code

  Section 22 : Professional Project: Car Sharing Website (Javascript, PHP, MySQL, AJAX, JSON)
339
Signup/Login Code (1)
340
Signup/Login Code (2)
341
Signup/Login Code (3)
342
Search Page Skeleton & Decoration (1)
343
Search Page Skeleton & Decoration (2)
344
Search Page Skeleton & Decoration (3)
345
Search Page Skeleton & Decoration (4)
346
Search Page Skeleton & Decoration (5)
347
Profile Picture Code (1)
348
Profile Picture Code (2)
349
Profile Picture Code (3)
350
Profile Picture Code (4)
351
Trips Page Skeleton & Decoration (1)
352
Trips Page Skeleton & Decoration (2)
353
Trips Page Skeleton & Decoration (3)
354
Website Logic
355
"Create a Trip" Code (1)
356
"Create a Trip" Code (2)
357
"Create a Trip" Code (3)
358
"Create a Trip" Code (4)
359
"Load Trips" Code (1)
360
"Load Trips" Code (2)
361
"Edit/Delete Trips" Code (1)
362
"Edit/Delete Trips" Code (2)
363
"Edit/Delete Trips" Code (3)
364
"Edit/Delete Trips" Code (4)
365
"Search Trips" Code (1)
366
"Search Trips" Code (2)
367
"Search Trips" Code (3)
368
"Search Trips" Code (4)
369
"Search Trips" Code (5)
370
"Search Trips" Code (6)
371
"Search Trips" Code (7)
372
"Search Trips" Code (8)
373
"Spinner" Code (1)
374
"Spinner" Code (2)
375
Finishing Touches & Congratulations