Oreilly - The Complete Web Development Course

Oreilly - The Complete Web Development Course - Build 15 Projects

by Issam | Publisher: Packt Publishing | Release Date: June 2018 | ISBN: 9781789345445

https://www.oreilly.com/library/view/the-complete-web/9781789345445/

HTML, CSS, Javascript, jQuery, Bootstrap, PHP, MySQL, Wordpress, API's (Google, Facebook, Twitter), and MobileAbout This VideoYou can make your professional websites live and attract potential employers or clients.As a result, you can start making money from the first week of your unique learning journey. - This will give you a competitive edge in the web development market and boost your income as a web developer by increasing your employability or chances of being awarded lucrative projects by clients around the world.In DetailThe course will take you from learning the basics to mastering the most advanced web development techniques. Taking this course will help you be ready to build powerful and responsive websites to a highly professional degree using today's most advanced and up to date web technologies within a few weeks from now. This course is divided into 10 perfectly structured chapters consisting of 77 hours of crystal clear and 100% hands on engaging lectures. You will first learn the basic concepts, and straight after that apply them in easy practical examples. Then you will easily navigate to more advanced concepts and use them to build more complex applications. Once you have finished the chapter, you will then move to a bigger challenge where you will confidently build a real life full professional project using the skills you acquired in that chapter combined with previous ones.

Chapter 1 : Introduction - Get your free Unlimited Web Hosting – HTML
- Introduction 00:01:31
- Structure of a website 00:09:23
- Your first website 00:06:14
- Get your free unlimited web hosting 00:09:04
- Set up FTP (Cyberduck Version) 00:13:04
- Set up FTP (FileZilla Version) 00:18:10
- Headings 00:04:56
- Paragraphs 00:02:31
- Links 00:07:49
- Images 00:04:41
- Inline vs Block Elements 00:05:54
- Iframes - Activity: Embed a nice relaxing YouTube video to your website 00:05:42
- Unordered Lists 00:03:02
- Ordered Lists 00:02:09
- Description Lists 00:02:19
- Tables 00:03:55
- Entities 00:05:07
- Forms (1) - Activity: Create a simple Login Form 00:08:02
- Forms (2) - Activity: Create a Marketplace Checkout Form 00:20:00
- Text Decoration 00:03:59
- Comments 00:02:26
Chapter 2 : CSS
- Introduction 00:01:11
- Inline CSS 00:02:26
- Internal CSS 00:02:26
- External CSS 00:02:33
- Classes and IDs 00:02:45
- Div and Span 00:07:26
- Box Model 00:02:57
- Box Model: Padding 00:04:26
- Box Model: Border 00:05:49
- Box Model: Outline 00:01:52
- Box Model: Margin 00:02:28
- Background 00:07:48
- Floating 00:04:37
- Positioning 00:06:21
- Display 00:03:00
- Text Decoration 00:05:01
- Text Align 00:01:58
- Text Font 00:03:51
- Text Effects 00:07:53
- Image Sprites 00:05:30
- Image Opacity 00:02:57
- Styling Lists 00:07:43
- Styling Links 00:07:08
- Gradients 00:10:07
- 2D Transforms 00:06:22
- 3D Transforms 00:04:53
- Transitions 00:04:54
- Animations 00:08:57
Chapter 3 : Professional Project: Mathematics Tutorials Website (HTML & CSS)
- Introduction 00:02:23
- Header (1) 00:17:47
- Header (2) 00:16:42
- Menu 00:18:22
- Introduction Box 00:07:04
- Sidebars (1) 00:19:46
- Sidebars (2) 00:08:38
- Footer & Congratulations 00:10:17
Chapter 4 : JavaScript
- Introduction 00:08:56
- Buttons 00:07:04
- Change HTML Content 00:07:03
- Change HTML Style 00:05:52
- Variables and Data Types 00:11:38
- Change HTML Using Variables - Activity: Random Color Generator 00:10:44
- Functions: Activity: Swap the content of two divs 00:13:57
- Objects 00:09:23
- Create Objects using the "new" keyword 00:04:41
- Object constructors 00:16:41
- Arrays 00:17:45
- If and Switch Statements - Activity: Motorway Speed Control 00:17:24
- For Loops 00:09:23
- While Loops - Activity: Spend $1000 randomly in a marketplace 00:11:07
- Regular Expressions 00:16:18
- Errors (1) 00:03:43
- Errors (2) - Activity: Password Validation 00:12:48
- Set Interval & SeTimeout - Activity: Create a simple counter 00:10:24
- Window and Screen 00:13:02
- Alert Boxes 00:07:46
- Cookies 00:06:20
Chapter 5 : Professional Project: Maths Game (HTML, CSS & JavaScript)
- Introduction 00:02:28
- Page Structure & Styling (1) 00:19:59
- Page Structure & Styling (2) 00:18:20
- Page Structure & Styling (3) 00:15:29
- Page Structure & Styling (4) 00:07:14
- Game Logic using an illustrative flowchart 00:03:02
- JavaScript Code (1) 00:17:23
- JavaScript Code (2) 00:19:00
- JavaScript Code (3) 00:17:31
- JavaScript Code (4) & Congratulations 00:18:10
Chapter 6 : jQuery
- Introduction and Loading JQuery 00:09:03
- Select HTML Elements (1) 00:12:59
- Select HTML Elements (2) 00:11:17
- Respond to Events 00:12:07
- Change HTML Content and Attributes (1) 00:11:48
- Change HTML Content and Attributes (2) 00:07:11
- Change Styling (1) 00:11:49
- Change Styling (2) - Activity: Random Position and Color Generator 00:13:59
- JQuery Effects 00:14:44
- Ajax 00:13:00
- JQuery UI Introduction 00:08:09
- Draggable and Droppable (1) - Activity: Leave me alone! Please drop me! 00:19:06
- Draggable and Droppable (2) - Activity: Drag Items to your basket 00:10:10
- Resizable 00:09:20
- Selectable - Activity: Append selected Car Makes to a Box 00:09:47
- Sortable - Activity: Sort and exchange Car makes between two groups 00:09:04
- Accordion - Activity: Create a resizable accordion with collapsible sections 00:10:04
- Autocomplete - Activity: City Input with prepopulated options 00:07:12
- Button 00:13:16
- Date Picker - Activity: Outbound and return Flight Date Picker just like Expedia 00:13:57
- Dialog - Activity: Are you sure you want to go to the previous page? 00:13:59
- Menu 00:06:05
- Progress Bar - Activity: Animated progress bar filled from 0% to 100% 00:10:50
- Select Menu 00:07:46
- Slider - Activity: Car Mileage Range using a Slider 00:17:54
- More Widgets: Spinners, Tabs and Tooltips 00:12:07
Chapter 7 : Professional Project: Fruits Slice Game (HTML, CSS & JQuery)
- Introduction 00:02:01
- Page Structure and Styling 00:12:51
- Game Logic using an illustrative flowchart 00:02:58
- jQuery Code (1) 00:17:45
- jQuery Code (2) 00:21:05
- jQuery Code (3) 00:20:08
- jQuery Code (4) 00:17:51
Chapter 8 : Twitter Bootstrap
- Introduction 00:07:47
- Grid System 00:09:33
- Typography 00:12:14
- Tables 00:06:02
- Forms (1) - Activity: Inline and Horizontal Responsive Login Forms 00:12:23
- Forms (2) 00:11:26
- Forms (3) 00:19:27
- Buttons 00:12:51
- Images 00:02:25
- Navs - Activity: Website Design using Nav Tabs and Nav Pills 00:08:47
- Navbars - Activity: Website Design using a responsive/collapsible navigation bar 00:19:58
- Pagination - Activity: Pagination and Pager Examples like Google/Ebay 00:08:56
- Jumbotron 00:03:12
- Thumbnails 00:10:00
- Dropdown menus 00:07:19
- Modals (1) - Activity: I have an inquiry about my order 00:16:15
- Modals (2) - Activity: I have an inquiry about my order 00:07:12
- Scrollspy 00:08:39
- Tabs 00:14:24
- Tooltips 00:06:37
- Popovers - Activity: Create a popover just like the one you see on an IPAD 00:06:41
- Alerts - Activity: Create an alert Box to show a warning or success message 00:07:35
- Button plugin - Activity: Loading … Download Complete 00:08:51
- Collapse plugin 00:16:47
- Carousels - Activity: Create an interactive carousel slider 00:17:29
- Affix plugin - Activity: Interactive Website with Content Affixed to a Menu 00:12:52
Chapter 9 : Professional Project: App Landing Page (HTML, CSS & Bootstrap)
- Introduction 00:02:41
- Header and Featured Content (1) 00:15:22
- Header and Featured Content (2) 00:15:49
- Header and Featured Content (3) 00:09:01
- Trial Section, Footer & Congratulations 00:14:03
Chapter 10 : Professional Project: Company Website (HTML, CSS & Bootstrap)
- Introduction 00:02:19
- Structure of our work 00:09:00
- Background 00:06:31
- Navbar 00:17:33
- Header & icons section 00:14:00
- Contact Button & Footer 00:13:46
Chapter 11 : Professional Project: Our Lovely Course (HTML, CSS, jQuery & Bootstrap)
- Introduction 00:03:07
- Structure of our work 00:14:23
- Add a background video 00:08:07
- Navigation bar with advanced styling 00:17:04
- Home Section 00:08:13
- About Section 00:11:19
- Carousel Slider (1) 00:17:13
- Carousel Slider (2) 00:07:04
- Adapt for Small Devices 00:08:53
- Add ScrollSpy feature to navbar & Congratulations 00:07:14
Chapter 12 : Professional Project: Stopwatch App (HTML, CSS, jQuery & Bootstrap)
- Introduction 00:02:20
- App Skeleton and Decoration (1) 00:11:15
- App Skeleton and Decoration (2) 00:11:47
- App Logic using an illustrative flowchart 00:05:51
- jQuery Code (1) 00:13:33
- jQuery Code (2) 00:09:22
- jQuery Code (3) 00:19:52
Chapter 13 : Professional Project: Drawing App (HTML, CSS, jQuery UI, Canvas, Local Storage)
- Introduction 00:02:26
- App Skeleton and Decoration (1) 00:18:26
- App Skeleton and Decoration (2) 00:10:06
- App Skeleton and Decoration (3) 00:15:22
- Learn HTML5 Canvas 00:10:14
- App Logic using an illustrative flowchart 00:02:33
- jQuery Code Structure 00:05:22
- jQuery Code (1) 00:07:48
- jQuery Code (2) 00:16:56
- jQuery Code (3) 00:17:53
Chapter 14 : PHP
- Introduction 00:15:58
- Embed PHP in HTML 00:07:49
- PHP Variables 00:09:46
- Data Types: Strings 00:06:13
- Data Types: Integers and Floats 00:07:05
- Data Types: Booleans 00:05:25
- Data Types: Arrays 00:17:33
- Data Types: Objects 00:10:58
- Data Types: NULL 00:02:19
- Data Types: Resources 00:05:35
- String Functions 00:08:53
- If and Switch Statements 00:12:28
- For Loops 00:09:42
- While Loops 00:06:00
- Functions 00:07:59
- GET & POST 00:20:00
- Array Functions (1) 00:14:23
- Array Functions (2) 00:13:02
- Send Emails – Activity: Send a styled email in HTML format 00:09:54
- Filter User Inputs (1) – Protect Yourself from Hackers 00:07:43
- Filter User Inputs (2) – User Input Validation 00:07:14
- Activity: Create a responsive Contact Form using PHP & Bootstrap (1) 00:17:29
- Activity: Create a responsive Contact Form using PHP & Bootstrap (2) 00:19:28
- Activity: Create a responsive Contact Form using PHP & Bootstrap (3) 00:14:01
- Date and Time (1) 00:13:07
- Date and Time (2) - Activity: Day of the week you were born? Date in 1000 days? 00:15:59
- Include PHP files 00:12:40
- File Handling (1): Open – Read – Write – 00:18:03
- File Handling (2): Open – Read – Write – 00:11:25
- Upload Files Using PHP (1) – Activity: Upload PDF & Text Files Less than 3Mo. 00:19:31
- Upload Files Using PHP (2) – Activity: Upload PDF & Text Files Less than 3Mo. 00:17:27
- Cookies 00:06:24
- Error Handling (1) 00:07:37
- Error Handling (2) – Activity: Log PHP errors in a file / Trigger error emails 00:15:47
- Sessions 00:06:41
Chapter 15 : MySQL
- Introduction 00:04:26
- Create a database using PHP MYADMIN 00:10:52
- Remote MySQL (1) 00:12:44
- Remote MySQL (2) 00:07:14
- Create a database using PHP & MySQL 00:08:40
- Add a table to a database 00:10:04
- Populate a database table 00:06:59
- Activity: Populate Database once the user submits a form 00:19:56
- Activity: Populate Database once the user submits a form (2) 00:18:44
- Activity: Populate an HTML table using Database Data (1) 00:11:52
- Activity: Populate an HTML table using Database Data (2) 00:15:05
- Update Database Data 00:09:23
- Delete Database Data 00:04:43
Chapter 16 : Professional Project: Online Notes App (HTML, CSS, Bootstrap, PHP, MySQL, AJAX)
- Introduction & Source Code 00:07:29
- App Skeleton and Decoration (1) - Landing Page 00:19:58
- App Skeleton and Decoration (2) - Landing Page 00:16:47
- App Skeleton and Decoration (3) - Landing Page 00:17:33
- App Skeleton and Decoration (4) - Landing Page 00:12:05
- App Skeleton and Decoration (5) - My Notes Page 00:19:59
- App Skeleton and Decoration (6) - Profile Page 00:19:50
- App Logic - Signup, Login, Remember Me, Forgot Password 00:17:08
- Signup/Login Code Structure (1) 00:13:39
- Signup/Login Code Structure (2) 00:06:32
- Signup Code (1) 00:17:53
- Signup Code (2) 00:20:00
- Signup Code (3) 00:15:44
- Signup Code (4) 00:19:59
- Signup Code (5) 00:18:46
- Login Code 00:19:59
- "Remember me" Code (1) 00:19:48
- "Remember me" Code (2) 00:20:03
- "Remember me" Code (3) and Logout Code 00:20:04
- "Forgot Password" Code (1) 00:18:01
- "Forgot Password" Code (2) 00:15:37
- "Forgot Password" Code (3) 00:16:24
- "Forgot Password" Code (4) 00:16:32
- Notes Management: Logic 00:06:13
- Notes Management: Code Structure 00:16:23
- Load Notes: Code (1) 00:19:02
- Load Notes: Code (2) 00:15:49
- Create Notes: Code (1) 00:17:05
- Create Notes: Code (2) 00:12:16
- Edit Notes: Code (1) 00:16:59
- Edit Notes: Code (2) 00:14:54
- Delete Notes: Code (1) 00:16:44
- Delete Notes: Code (2) 00:11:26
- Update Username Code (1) 00:18:49
- Update Username Code (2) 00:13:23
- Update Password Code (1) 00:19:37
- Update Password Code (2) 00:10:18
- Update Email Code (1) 00:19:59
- Update Email Code (2) 00:16:11
Chapter 17 : WordPress (3 Professional Webpages: Blog + About Page + Contact Page)
- Introduction 00:03:35
- Installation – Activity: Create your first Blog 00:05:03
- Blog Posts and Comments 00:04:36
- Themes 00:02:35
- Pages and Menus 00:06:50
- Customise pages (1) 00:09:09
- Customise pages (2) 00:07:15
- Custom CSS 00:04:18
- Plugins 00:03:42
- Activity: Beautiful About Page (Add Content to a WordPress Page) 00:13:36
- Activity: Beautiful About Page (Typography) 00:09:38
- Activity: Beautiful About Page (Logos) 00:14:11
- Activity: Beautiful About Page (Buttons) 00:07:33
- Activity: Create an Awesome Contact Page with a Google Map and Contact Form 00:12:33
Chapter 18 : Google Maps API's
- Introduction & Embed Google Map to your Website 00:19:39
- Markers and InfoWindows 00:14:12
- Show, Hide or Delete Markers 00:15:40
- Animated drop of Markers 00:08:19
- Direction Service - Activity: Driving distance & time between New York & Toronto 00:19:00
- Geocoding using the Javascript API - Activity: Get Geocoordinates of an address 00:11:14
- Geocoding using the geocoding API (1) - Activity: format Address & get postcode 00:12:54
- Geocoding using the geocoding API (2) - Activity: format Address & get postcode 00:18:13
- Nearby Search 00:16:52
- Autocomplete 00:08:49
Chapter 19 : Professional Project: Distance between Cities (HTML, CSS, jQuery, Google Maps)
- Introduction 00:01:56
- Skeleton and decoration 00:19:56
- App Logic using an illustrative flowchart 00:03:34
- JavaScript Code 00:16:58
Chapter 20 : Professional Project: Website with Social Widgets (Facebook, Google+ & Twitter)
- Introduction 00:01:32
- Skeleton and decoration 00:16:07
- Facebook Widgets 00:03:51
- Google plus Widgets 00:04:25
- Tweet Button 00:05:25
- Twitter Timeline 00:04:39
Chapter 21 : IOS and Android Mobile Applications using jQuery Mobile
- Introduction 00:05:51
- Pages, Dialogs and Transitions 00:13:39
- Navbars 00:08:08
- Grid System 00:05:04
- List Views 00:07:21
- Form Inputs 00:01:53
- Events 00:08:26
Chapter 22 : Professional Project: Speed Reader for IOS and Android
- Introduction 00:02:07
- App Skeleton and Decoration (1) 00:15:52
- App Skeleton and Decoration (2) 00:19:22
- Logic of the App using an illustrative flowchart 00:11:35
- Start Reading (1) 00:08:51
- Start Reading (2) 00:19:55
- Pause, Resume, Restart 00:04:59
- Change the font size 00:05:21
- Change the reading speed 00:05:15
- Control Reading Progress: Go backwards and forward 00:06:07
- Publish your app to Google Play 00:22:44
- Publish your app to the IOS App Store (1) 00:12:43
- Publish your app to the IOS App Store (2) 00:09:40
Chapter 23 : Professional Project: Car Sharing Website (JavaScript, PHP, MySQL, AJAX, JSON)
- Introduction 00:05:23
- Signup/Login Code (1) 00:11:03
- Signup/Login Code (2) 00:10:42
- Signup/Login Code (3) 00:17:13
- Search Page Skeleton & Decoration (1) 00:11:20
- Search Page Skeleton & Decoration (2) 00:13:57
- Search Page Skeleton & Decoration (3) 00:16:03
- Search Page Skeleton & Decoration (4) 00:12:08
- Search Page Skeleton & Decoration (5) 00:15:08
- Profile Picture Code (1) 00:10:57
- Profile Picture Code (2) 00:19:04
- Profile Picture Code (3) 00:12:01
- Profile Picture Code (4) 00:18:09
- Trips Page Skeleton & Decoration (1) 00:17:45
- Trips Page Skeleton & Decoration (2) 00:17:39
- Trips Page Skeleton & Decoration (3) 00:16:36
- Website Logic 00:14:44
- "Create a Trip" Code (1) 00:19:56
- "Create a Trip" Code (2) 00:06:59
- "Create a Trip" Code (3) 00:18:33
- "Create a Trip" Code (4) 00:19:35
- "Load Trips" Code (1) 00:17:11
- "Load Trips" Code (2) 00:19:48
- "Edit/Delete Trips" Code (1) 00:19:11
- "Edit/Delete Trips" Code (2) 00:12:55
- "Edit/Delete Trips" Code (3) 00:17:26
- "Edit/Delete Trips" Code (4) 00:08:55
- "Search Trips" Code (1) 00:13:56
- "Search Trips" Code (2) 00:14:20
- "Search Trips" Code (3) 00:08:40
- "Search Trips" Code (4) 00:13:11
- "Search Trips" Code (5) 00:19:31
- "Search Trips" Code (6) 00:08:37
- "Search Trips" Code (7) 00:19:34
- "Search Trips" Code (8) 00:19:44
- Spinner" Code (1) 00:18:54
- "Spinner" Code (2) 00:12:13
- Finishing Touches & Congratulations 00:07:54